I'm having an issue rendering sprites using Three.js, to complicate the issue further I'm using a game engine voxel.js to manage the instance.
Example: http://christopherdebeer.com/sandbox/voxeljs/
I've tried messing with depth{write|test}:
material = new game.THREE.SpriteMaterial({
map: spriteB,
useScreenCoordinates: false,
alignment: game.THREE.SpriteAlignment.bottomCenter,
color: 0xffffff,
fog: true,
depthWrite: true,
depthTest: false
});
for the semi transparent meshes on the left of the example.
What I need is a transparent mesh or voxel to give a volume of space some substance while displaying a 2d sprite at that position.
How can I solve this issue, or what am I doing wrong?
This is almost exactly a year after you needed it, but #WestLangley described how sprites are rendered last and thus do not play well with transparent objects. He provides some tips on working around this.
three.js - cannot view a sprite through a mesh with transparency?
It seems to be an alpha test missing to me: try to add the parameter alphaTest: 0.5 to the parameters you pass to the SpriteMaterial and see if it helps (try with depthTestset to true)
Related
I am working on a project that uses three.js and I am using an orthographic camera. I have tried using an external MeshLine package and also the built in THREE.LineGeometry. The MeshLine has a known issue with orthographic cameras that has not been fixed and this THREE.LineGeometry (which I am focused on trying to get to work) seems to also have a problem when I use an orthographic camera. The line sort of takes its shape but it is as wide as the entire viewport, and I am not sure why it is doing this or if I can fix it with a property.
I am looking for either a solution to one of the line types I listed or any other working 2D line solutions for three.js.
This is an image of a THREE.LineGeometry that is supposed to be just a diagonal line. Those grey arrows are a part of my project, and are supposed to be there (my concern is that the line is large and clips through them currently).
Here is my code:
var lineGeometry = new LineGeometry();
lineGeometry.setPositions([0,0,0,1,0,1,2,0,2,3,0,3]);
lineGeometry.setColors([0,0,255,0,0,255,0,0,255,0,0,255]);
console.log(lineGeometry)
var lineMaterial = new LineMaterial({
color: 0xffffff,
vertexColors: true,
dashed: false,
lineWidth: 1,
});
var myLine = new Line2(lineGeometry, lineMaterial);
myLine.computeLineDistances();
this.Scene.add(myLine);
When using the LineGeometry in three.js, make sure to also set the viewport size for the line material shader either in the update loop or on window resize.
myLineMaterial.resolution.set(window.clientWidth, window.clientHeight);
I have little box mesh, and I am using shadowSide: DoubleSide for its material.
Then I just set castShadow and receiveShadow to true, but getting such strange effect:
If I remove shadowSide: DoubleSide I am not getting correct shadow:
Also, if I remove castShadow or receiveShadow from mesh, issue from first picture disappears.
So, what is the strange behavior on first picture when I use shadowSide: DoubleSide, castShadow = true and receiveShadow = true ?
The strange behavior probably has to do with the fact that the shadowSide: DoubleSide causes the material to castShadows onto itself.
I wouldn't know why in the second picture it's not casting correctly. Might be something with the normals? The mesh doesn't seem like a three.js default geometry mesh, is it doing the same thing if you use a standard three.js box mesh?
Can you put it in a jsfiddle, that gets the results from above?
I get ugly shadow artifacts on my 3D model of a furniture module. They appear where two planes are connected. In these places there should be no shadows at all.
Screenshot with shadow artifacts
I played around with shadow.bias, but without a nice result.
Is there anything else I can try to get rid of these shadows?
renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
My code on Plunker
Update 2018-04-18
I updated my code on Plunker as WestLangley suggested. The only thing that seems to have an impact is the value for bias.
I'm not happy with the result, when I set bias = -0.0018. With a negative bias all the shadows aren't in the right place anymore.
I don't think the problem is self-shadowing. The shadows are casted by the nearby objects and not by itself.
Example with simple cubes on jsfiddle
Screenshot with shadows
Probably I have to live with this issue and the only solution is a trade-off with bias.
With side: THREE.FrontSide and shadowSide: THREE.FrontSide on the material and shadow.bias = -0.004 on the light I get a nice result.
I updated my plunker
I have two renderer in one canvas as, I want that renderer to be transparent I applied this below code. but it didn't work out. could anybody help me out?
var renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setClearColor( 0x000000, 0 );
Don't use setClearColor if you want a transparent background. It overrides alpha, which is what makes the background transparent. EDIT: Using setClearColor with the WebGLRenderer.alpha property is fine. Just remember to include an alpha parameter if you want the background to be transparent: renderer.setClearColor( hexColor, alphaValue );
I don't understand what you mean by "two renderer in one canvas" though. That sounds dangerous, at best. If you're trying to draw two things to the same canvas, consider combining them into one scene, or render two scenes using the same renderer.
(This also has nothing to do with TrackballControl.)
I fall back to CanvasRenderer if user's browser does not support WebGL. I would like to have wireframe only rendering when using CanvasRenderer for performance reasons. However I cannot get overrideMaterial to work with it. It's working with WebGLRendererer quite nicely like this:
scene.overrideMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
In CanvasRenderer this seems to have no effect, making FireFox unresponsive because the code is just too heavy for all but the simplest models.
Previously I had replaced all object materials directly with wireframe material by traversing the scene geometries and just overwriting the "real" materials. That kind of works, but makes material and object management guite messy, as I would like to have the material information present in the models even if they are not rendered.
Is it possible use scene.overrideMaterial with CanvasRenderer? Or other way to force wireframe rendering? I'm using r54.
No, CanvasRenderer does not support scene.overrideMaterial. I think you have pretty much exhausted your options.
I would be careful about using MeshBasicMaterial as an override. Only do so if your scene contains meshes only -- no lines, for example.
three.js r.54