thephox1982 Posted June 19, 2014 Share Posted June 19, 2014 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. Quote Link to comment Share on other sites More sharing options...
hyperionlord Posted June 20, 2014 Share Posted June 20, 2014 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. Quote Link to comment Share on other sites More sharing options...
thephox1982 Posted June 20, 2014 Author Share Posted June 20, 2014 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. Quote Link to comment Share on other sites More sharing options...
thephox1982 Posted June 20, 2014 Author Share Posted June 20, 2014 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.. Quote Link to comment Share on other sites More sharing options...
thephox1982 Posted June 23, 2014 Author Share Posted June 23, 2014 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 graphicswhich 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. Quote Link to comment Share on other sites More sharing options...
thephox1982 Posted June 23, 2014 Author Share Posted June 23, 2014 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 withWebGL 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. Quote Link to comment Share on other sites More sharing options...
thephox1982 Posted June 23, 2014 Author Share Posted June 23, 2014 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! bberak and yomotsu 2 Quote Link to comment Share on other sites More sharing options...
hyperionlord Posted July 8, 2014 Share Posted July 8, 2014 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. Quote Link to comment Share on other sites More sharing options...
thephox1982 Posted July 8, 2014 Author Share Posted July 8, 2014 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! Quote Link to comment Share on other sites More sharing options...
mfdesigner Posted July 8, 2014 Share Posted July 8, 2014 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. Quote Link to comment Share on other sites More sharing options...
thephox1982 Posted July 8, 2014 Author Share Posted July 8, 2014 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! Quote Link to comment Share on other sites More sharing options...
mfdesigner Posted July 9, 2014 Share Posted July 9, 2014 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. Quote Link to comment Share on other sites More sharing options...
thephox1982 Posted July 9, 2014 Author Share Posted July 9, 2014 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. Quote Link to comment Share on other sites More sharing options...
bberak Posted June 23, 2018 Share Posted June 23, 2018 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) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.