0

Recently, i tried to make transparency work in JavaFX 3D as some of the animations i want to play on meshes use transforms that change the alpha of the mesh each keyframe.

However to my surprise, my TriangleMesh that uses a material which has transparent areas doesn't look as expected.

Current result(depth buffer enabled): https://i.imgur.com/EIIWY1p.gif

Result with depth buffer disabled for my TriangleMeshView: https://i.imgur.com/1C95tKy.gif (this looks much closer to the result i was expecting)

However i don't really want to disable depth buffering because it causes other issues.

In case it matters, this is the diffuse map i used for my TriangleMesh: https://i.stack.imgur.com/AwT0L.png (1 pixel per triangle as my triangles have a color per face, 128 pixels per column).

I compute UV's for the TriangleMesh like this:

float u = (triangleIndex % width + 0.5f) / width;
float v = (triangleIndex / width + 0.5f) / (float) atlas.getHeight();

and then use these for each vertex of the triangle.

What's the proper way to render a TriangleMesh that uses a transparent material(in my case only part of the image is transparent, as some triangles are opaque)?

After a bit of research, i've found this which potentially explains my issue: https://stackoverflow.com/a/31942840/14999427 however i am not sure whether this is what i should do or whether there's a better option.

Minimal reproducible example(this includes the same exact mesh i showed in my gifs): https://pastebin.com/ndkbZCcn (used pastebin because it was 42k characters and the limit in stackoverflow is 30k) make sure to copy the raw data as the preview in pastebin stripped a few lines.

Update: a "fix" i found orders the triangles every time the camera moves the following way:

  1. Take the camera's position multiplied by some scalar(5 worked for me)
  2. Order all opaque triangles first by their centroids distance to the camera and then after that order all transparent triangles the same way.

I am not sure why multiplying the camera's position is necessary but it does work, best solution i've found so far.

Suic
  • 433
  • 1
  • 3
  • 9
  • 1
    Can you update your [mre] from your previous, related question: [_TriangleMesh Texture Coordinates are not interpolated as expected_](https://stackoverflow.com/q/73199008/230513)? – trashgod Aug 03 '22 at 21:16
  • 1
    This question is actually not related to my previous one, as that one had to do with texture coordinates but this is related to transparency of triangles. I did want to provide a minimal reproducible example for this one but i feel like it'd involve a lot of code(near 1k lines probably) as i'd like to provide an example with this exact mesh and i was hoping that the example gifs would've been enough. However i will try my best now to make the minimal reproducible example and will update my question once that's done. – Suic Aug 03 '22 at 21:38
  • Added example code that produces the same exact result as seen in my first gif. – Suic Aug 03 '22 at 22:10
  • 1
    Thanks; I ask because an [answer cited](https://stackoverflow.com/a/31942840/14999427) suggests that the issue may be host dependent; a [mre] would allow wider testing; also consider a [`VersionCheck`](https://stackoverflow.com/a/71288497/230513); I'm not sure a 42K paste bin will get as much attention. – trashgod Aug 03 '22 at 22:13
  • FWIW, I get results similar to yours with `DepthTest.ENABLE` vs `DepthTest.DISABLE`. – trashgod Aug 04 '22 at 01:31
  • they should be identical to my gifs (as my code that i included as a reproducible example) generates the mesh, palette the same exact way as i did. My theory right now is that i just need to sort the triangles with transparency. – Suic Aug 04 '22 at 02:28
  • 1
    Yes, they are identical except for overall brightness; MacOS 12, JavaFX 17 LTS. – trashgod Aug 04 '22 at 12:23
  • 1
    You can [answer your own question](http://meta.stackoverflow.com/q/17463/163188). A possibly related issue is examined [here](https://stackoverflow.com/a/73298705/230513). – trashgod Aug 10 '22 at 15:03

1 Answers1

1

I have not yet found a 'proper fix' for this problem, however this is what worked for me pretty well:

  1. Create an ArrayList that'll store the sorted indices
  2. Take the Camera's position multiplied by some scalar (between 5-10 worked for me), call that P
  3. Order all opaque triangles first by their centroids distance to P and add them to the list
  4. Order all triangles with transparency by their centroids distance to P and add them to the list

Use the sorted triangle indices when creating the TriangleMesh

Suic
  • 433
  • 1
  • 3
  • 9