three.js randomly flickers in red and brightly lit - three.js

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.

Related

Tiledmap stays dark after world rotation in Phaser

I want to create a top down game, on which the "camera" rotates with the character (like in Tap Tap Dash). But Phaser does not implement camera rotation, so I followed this thread to create a world group, which will be rotated.
As you can see in the following screenshot, after rotating the Tilemaps (the road and the arrows) as well as the sprites (the coins), black areas occur. What is really strange is that the sprites are rendered correctly as you can see on the bottom of the screenshot, but the Tilemaps are not fully rendered.
I have tried to resize the world again and trying all kind of methods of the camera, world and layer object. But I am out of ideas. Hopefully someone can give me a hint how to approach this problem.
Thank you!

Why we start seeing the disc on the double render geometry (when we do culling both from front and back) in three.js sample?

I have done the doubleSide rendering with depthTest off. This generate the rounded disc into my geometry I am curious to know the math behind this and why this happen.
My object is not transparent as you can see in the image Please explain about this.to me.
http://threejs.org/docs/#Reference/Materials/MeshDepthMaterial
In this example when you turn material doubleSide and turn of the depthTest you will get to know what I mean.
If you turn off depth testing then anything that is drawn later is on top of anything drawn before. Therefore if your object has parts that should be behind another part and you draw them later they will show incorrectly on top.

Three.js - transparent objects when rotated with TrackballControls don't behave like transparent

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!

Why sprites are flipped upside-down in envMap taken by CubeCamera

I have a quick question, may be someone will explain it to me.
The scene setup is show below. I have a sprite tree, a cube and a cubeCamera. Cube material has envMap set to cubeCamera.renderTarget. (CubeCamera is places where the cube is, and also i hide the cube before calling updateCubeMap method).
So, the question is why the sprite appears upside-down in the reflection?
This seems to happen only to sprites, other objects behave as expected.
In the actual project we manually flip sprites before updating cubeCamera, and it seems to work ok. But i want to actually know why is it so? Thanks!
UPD. Demo http://webgears.ru/public/wgdemos/spriteInEnvMap/

webgl opacity issue, flickering

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.

Resources