Jump to content

Three.js, transparency bug or limitation or what?


thephox1982
 Share

Recommended Posts

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.

 

post-7974-0-94257500-1403212550.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 years later...

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...