I would like to add "water" to my scene but i'm experiencing flickering whenever my camera gets into the water.
I created a fiddle here, if I move the camera inside the transparent cube the face which touches the face of the solid cube starts to flicker when moving the camera arround.
I tried disabling the depthTest which resolves the flickering issue but when moving the camera the transparent cube is visible when placing the camera behind the solid cube looking at the transparent cube so that's not an option.
I googled a lot and also had a look at some questions at SO and what I found so far is that it's a depth-buffer issue.
Also I read that one should draw the solid objects after the translucent objects have been drawn but I think three.js does that for me?
Altogether I haven't found an answer which helps me solving this, I understand that transparency isn't the easiest thing to do in three.js / webgl but I would appreciate some hints on how i can overcome this.
The problem is likely the coincident faces.
Remove the touching transparent face.
Related
I need a way to render a sprite always over top of a 3DObject, but it also must disappear behind it when the camera is rotated.
I first tried disabling the depth-buffer write but this will always render the Sprite in front.
Is there a way to hide it when its behind, but prevent clipping with the Object?
Edit 1:
The Problem is not exactly about z-fighting because the depthbuffer values of the sprite and the object are not equal.
The Sprite is a Billboard, so it will always face the camera, but it clips with the object, when rotating the camera.
Thank you for your help
Does anyone have any suggestion of how to implement such a light glow effect in Three.js ?
There is a TextGeometry mesh
Some BoxGeometry mesh as a background
How to make this glow between them?
I tried to put many PointLight between text and box, but after about 20 of PointLights the scene become very slow. I tried to put some RectAreaLights — but the same.
Does anyone have any suggestion of how to implement such a light glow effect in Three.js ?
The typical way of doing this is via post-processing. three.js offers a so called "Bloom" pass which is demonstrated in the following example: webgl_postprocessing_unreal_bloom. I suggest you start with this setup.
but after about 20 of PointLights the scene become very slow. I tried to put some RectAreaLights — but the same.
It's no good approach in general to add that number of light sources to a three.js scene. If you place some small sphere meshes (based on THREE.SphereGeometry) with a bright material color onto the text, you should get a good result with bloom pass.
I'm working with three.js (r67) and I'm having werid color flickering issues.
it looks like every few frames, for a single frame, some of the objects will be painted fully red. if I have a light in my scene, they will flicker randomly either red or very strongly lit.
it looks like its related to the camera position - at positions it will flicker like crazy, and some positions won't flicker at all.
have anyone experienced problems like that and can point me out things to check?
added screenshot below, photoshoped to illustrate how the flickering looks.
thanks!
OK it looks like a bug in three.js - if I switch all the materials to either phong or lambert the flickering stops. the problem appears only when having both material types.
I'm trying to create a shadow in my orthographic scene in three.js. I'd like to have a directional light so the shadow is offset from all objects equally in the scene. I am however having problems using DirectionalLight.
My first problem is that I can't get the shado to cover the entire scene, only part of it ever has a shadow. I played with the light's frustum settings, but can't figure out how to get it to cover the scene. Ideally I'd want the frustrum to match that of the camera.
The second problem is that the shadows aren't "clean". If I use a SpotLight the shadows have nice crisp borders (but obviously not the universal directionality I want). When I use a DirectionalLight the borders are misshappen and blurry.
In the samples the tile is a simply box created with CubeGeometry.
How can I create an ortographic directional light source for my scene?
When I add to the scene two objects and set their transparency as true with some opacity and using TrackballControls I rotate the scene by mouse, the object which was initially further from camera loses its transparency.
I read that this is Z-buffer problem and further objects from camera will be displayed first. But when I rotate the scene using TrackballControls, camera changes its position, so transparent objects should be displayed correctly. But it is not like that.
Here in this picture - on the right is frontview, on the left is backview which is not displayed correctly:
http://www.foto-ondruskova.cz/Experiment/lenses.jpg
Please, any solutions?
I have come across this problem and setting alphaTest: 0.5 to the material as suggested here solved my problem. But it is hit and miss. Give it a try. Hopefully it works!