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?
Related
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'm trying to render a scene and then have a half-transparent post-processing effect rendered on top of it. I'd like to make it work with effect composer so I can later use more passes easily.
My basic structure is this:
composer = new Three.EffectComposer renderer
composer.addPass renderPass
composer.addPass transparentPass
composer.addPass copyPass
copyPass has renderToScreen = true, transparentPass is my custom fragment shader with each pixel's alpha is set to 0.5 and loaded with ShaderPass.
I've tried blending, depthTest and transparent for the shaderMaterial.
Also tried alpha and premultipliedAlpha options for renderer, autoClear off.
I'm getting either the scene from renderPass with nothing else or the transparentPass on any renderer.clearColor I choose. Not the composite of both. What do I need to set to make this work?
Thank you.
EDIT:
Here is a codepen example:
http://codepen.io/Eskel/pen/PzaOWb?editors=0010
And the code of my shader:
http://eskel.cz/js/three79/RGBAShader.js
It shows all white (and not a rotating cube underneath) even though all pixels are rendered with alpha channel set to 0.5. Should I mix it with the tDiffuse render target in the shader or is there a way to make the shaderPass transparent?
It's a really late response, but maybe it would help someone.
In constructor ShaderPass creates internal ShaderMaterial and we should set this material's transparency to true:
copyPass.material.transparent = true
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)
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
I found a great three.js demo here: http://mrdoob.github.com/three.js/examples/canvas_geometry_earth.html
I noticed, that there are some line in the shadow of the earth. Is it a bug, or the author made it by design?
That lines are there because geometry used for shadow has an overdraw: true parameter.
That parameter is used to hide some anti-alias gaps using CanvasRenderer. It works fine for opaque textures, like the earth one, but not for transparent textures, like the shadow, because the "overdrawing" effect.
Remove parameter, or change it to false, and you can see the difference.