My refracted objects flicker as the object rotates. When zoomed in, the effect is rarer, but still present.
My refraction is achieved with a simple transmission:1, thickness:0.2.
Is there some sort of a setting/map I can increase that would help it?
Edit: Here's a live example & full screen (please close the error pop-up, it's from loading GLTF) I forked a tutorial so there are other glass primitives and a control panel. If we reduce the roughness close to 0, the flickering becomes visible in the sphere primitive as well.
Indeed there is a setting. Do you have antialias set on your renderer?
let renderer = new THREE.WebGLRenderer({antialias: true});
A solution that worked for me was setting .setPixelRatio(2) to 2 or higher on my renderer. Flickering stopped and refracted objects look really good.
Related
What's the trick for getting anti-aliasing to work properly on smaller scenes - which are overlaid on top of big scenes?
Check out this fiddle here:
https://jsfiddle.net/gilomer88/j974zmq0/6/
When you tap on any of the cubes you see there a new smaller "detailsScene" opens up on top of the main scene - and the cube in that "detailsScene" is not looking good. (It may not look all that bad here, but trust me, in my real project I'm loading a ".glb" model and it looks really terrible there. And it's not the model that's off. I know that because when I load it into my main scene it looks 100% perfect. Unless I have to re-load it for some reason into this smaller scene...?)
Otherwise I'm pretty sure I set the renderer for this smaller scene the right way, using:
detailsRenderer.setPixelRatio( window.devicePixelRatio );
(You'll find that bit on line 192 in the JS of the fiddle code.)
Any thoughts?
Anti-aliasing is working fine. The scene is just a bit blurred, because the canvas is scaled up while the renderer renders on a smaller size. You should always set the size of the renderer, such that it matches the canvas size. Just passing the canvas element to the renderer is obviously not enough in order to let the renderer know on which size it should render the scene.
detailsRenderer.setSize(detailsCanvas.offsetWidth, detailsCanvas.offsetHeight);
https://jsfiddle.net/sg3fn0tk/
This, and this mentioned rederOrder, but it is undocumented. I set up a jsfiddle and it does not work, what is wrong?
http://jsfiddle.net/q4w56/y655cwqt/5/
// now mesh1 should be always on top of mesh2
mesh1.renderOrder = 1
mesh2.renderOrder = 0
Setting renderOrder in three.js does not cause a renderable object to be "on top". It just controls the rendering order. It can be a useful tool if some objects are transparent. If all objects in the scene are opaque, changing the rendering order will (in typical use cases) have no effect on the rendered output.
See this answer if you want some objects to render "on top".
three.js r.79
I am facing a problem where a THREE.SpotLight is casting a Shadow without an object beeing in its frustum.
I have setup a simple scene containing a THREE.SpotLight and a plane-mesh. The SpotLight is set to cast Shadows and the plane to receive Shadows. There is a square Shadow visible on the ground plane, which is the size of the SpotLights shadowCamera. This scene is the right hand side of the image below.
A cube-mesh is now added and positioned outside the initial camera viewspace. By zooming out, a bit before the cube-mesh becomes visible to the camera, the Spotlight Shadow disappears. This is pictured in the left hand side of the image.
http://jsfiddle.net/L0rdzbej/157/
This happens in Firefox, from what I heared it is not the case in Chrome. What is happening here and how to avoid it?
The shadow does not show up anymore, so im marking this as solved.
Edit: In case anyone comes a long who is facing the same problem, here is a link to the reported issue on github: https://github.com/mrdoob/three.js/issues/7750. It hasnt got much attention because it couldnt be reproduced by the maintainers.
I am trying to implement webgl for my game. The problem is I use multiple canvases, and my webgl enabled canvas is semi-transparent over my terrain canvas (which is drawn once and just moves with the player). Here is a picture:
I've searched for the past 2 hours on google and can't find anything that has helped.
I have tried:
getContext("experimental-webgl",{alpha: false});
This just hides the terrain completely (now all black), but my webgl drawn objects have the correct color.
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, false);
Neither of these did anything noticeable.
gl.clearColor(0, 0, 0, 0)
Didn't affect the outcome, still looks like the screenshot above.
Everything else here: http://games.greggman.com/game/webgl-and-alpha/
Nothing seems to work. Why is what is drawn on the canvas semi transparent? There is no CSS affecting the canvas element.
Figured it out! I am using WebGL-2D, which is a javascript file that adds the context2D API to webGL. So if I call drawImage, it actually handles that with webgl. In the getContext definition I had to change:
gl.colorMask(1,1,1,0);
to
gl.colorMask(1,1,1,1);
The colorMask() method specifies whether red, green, blue, and alpha can or cannot be written into the frame buffer.
I have no idea why it was 0 before.
I have created a project that takes in a large amount of vertices,normals. It renders without issue with the webgl renderer. but with the canvas renderer it just hangs for ever after adding the mesh to the scene. any help here would be greatly appreciated.
CanvasRenderer can handle up to ~3,000 triangles. SoftwareRenderer however, can handle more, but it needs some work on shading code.