Three.js, transparency bug or limitation or what?

[thephox1982]

In a game I am developing there is an odd issue where rotating the player character the water plane looses it's transparent state completely going opaque but only on a specific heading or the same heading facing the opposite direction, it only happens at a very small degree, you turn slightly and it goes back to transparent.

 

How is rotating an object (which happens to be the player in this case) affect transparency only while facing in a specific direction when the object has nothing to do with the plane (except when the player moves the plane moves but it doesn't effect rotation or do anything with the plane while the character isn't moving).

 

Is this a Three.js issue or a WebGL issue or what? I find nothing googling it in various manners even setting object.material.alphaTest doesn't do anything.

 

It doesn't effect the shader for the water mirror, only the object material transparency.

 

[hyperionlord]

If I had to say, I'd guess it was the draw order was being altered? are you sure the water is being rendered last in order, regardless of where the player character is.. you could for example try setting the sort order yourself, or putting them in a different scene.

[thephox1982]

If I had to say, I'd guess it was the draw order was being altered? are you sure the water is being rendered last in order, regardless of where the player character is.. you could for example try setting the sort order yourself, or putting them in a different scene.

 

I tried turning off autosort using renderer.sortObjects and that removed transparency completely, I moved the plane to load in last but it still lacked transparency. I'd think that it was the sort order but then again it works 99% of the rotation, just that exact axis  between -Z and -X (I will get the rotation angle here shortly). It's that which is bothering me, it works almost all the time moving around, etc. but not while facing those specific direction, I could be on a mountain top facing the lake and face the direction the problem occurs and it will still happen only on that bearing.

[thephox1982]

I made an animated GIF showing it in action, note I didn't include a full rotating view as this alone is a bit over 4MB in size..

 

[thephox1982]

So apparently this happens even with out the character with just terrain and water moving the camera.

I have found no solution or anyone having the same issue thus I blame it on this computers internal graphics

which has other issues with other games, will try it out on one or two of the other computers here and see if it does it.

[thephox1982]

So I tested it on another machine, it did it there as well, on a side note, things look so much better on a wide screen, lol

 

Also tested in web browsers rather than in node-webkit and it did it both on chrome and firefox which reduces the potential problem being with

WebGL it's self or Three.js related issue or bug.

 

I just don't get how something can be fine rotating and seeing no issue except only facing a certain direction, how can it be linked in such a way?

That alone tells me it isn't my code and is a bug because the rotation is a simple code only to rotate the character in the scene doing nothing more.

[thephox1982]

So renderer.autosort set to false doesn't work but apparently object.renderDepth did the trick, I didn't see that in the documentation, seems three.js needs help in the documentation department.

 

In case anyone is wondering, I set terrain.renderDepth=1 and water.renderDepth=0 and problem solved!

[hyperionlord]

that is wierd!

 

Three.js documentation isn't always up to date, it seems like new versions are released frequently so it's not surprising.

 

I found the best way to track down three.js issues is to get the non-minified library which is still in one big file (which is about 800k instead of 479k) and use that instead. makes debugging a lot easier.

[thephox1982]

that is wierd!

 

Three.js documentation isn't always up to date, it seems like new versions are released frequently so it's not surprising.

 

I found the best way to track down three.js issues is to get the non-minified library which is still in one big file (which is about 800k instead of 479k) and use that instead. makes debugging a lot easier.

 

It's why I find it to be best practice to update documentation as things go along while it's fresh in the mind and allot easy to hash out at least a draft version of a new feature which I could expand on a bit later on because at that point people have something to work with to a degree and then I would spend less time helping people to understand which in the end takes up more time than if I had taken the time once over 10-20 minutes to explain it to many people by making the documentation in the first place! 10-20 minutes now to make basic documentation or to update it when something has changed rather than 10+ minutes per each person I need to respond to on stackoverflow or the issue tracker on GitHub. To me that is just the logical and reasonable thing to do!

[mfdesigner]

Three.js has trouble figure out the z-order of two transparent objects if they intersect each other.

In that case, you can either make sure they don't touch each other, or by assigning renderDepth and turn off auto-sort.

the objects will be sorted base on your custom renderDepth assignment.

 

But from what I can deduce by looking at your gif, it probably has something to do with your refraction shader code as well.

[thephox1982]

Three.js has trouble figure out the z-order of two transparent objects if they intersect each other.

In that case, you can either make sure they don't touch each other, or by assigning renderDepth and turn off auto-sort.

the objects will be sorted base on your custom renderDepth assignment.

 

But from what I can deduce by looking at your gif, it probably has something to do with your refraction shader code as well.

 

 

That's all well and good but the problem was solved and it also has nothing to do with transparent object intersecting a transparent object, it had to do with a transparent object intersecting an opaque object, completely different issue all together!

[mfdesigner]

I don't fully understand your setup so I tried to help with limited knowledge.

Nevertheless I am quite interested in this issue because I am implementing an ocean shader that will include reflection, refraction, and multiple traveling waves.

 

But from your post, I guess your refraction effect is not implemented in shader but a transparent plane?

 

Another possibility is that your water plane has too few faces. try use subdivision to increase the number of vertices.

 

 

Reflection and refraction effect is calculated based on view position, plane normal, and incident light vector.  If you has only one face and thus one normal, the refraction effect is either on or off from you view position.

[thephox1982]

I haven't dealt with GLSL so I am using Ocean.js which doesn't have refraction sadly, I never did find any water shader that has refraction for Three.js only Babylon.js I found a pre-made shader for.

[bberak]

I know this is an old thread - but just wanted to say a huge thanks to @thephox1982 , I was really struggling to figure out the same issue. If anyone is using the latest versions of ThreeJS - I believe the new property name for renderDepth is now renderOrder (https://threejs.org/docs/#api/core/Object3D.renderOrder)