How to render transparent Object in correct order or looks like right？

Questions
1

when i render transparent Object, i find it look at not right ,just like this

image
image588×544 5.69 KB

here is online code in codesandbox online Code

It does not conform to the principle of perspective.

And i try to solve this problem .
in https://threejs.org/manual/#en/transparency,
It `s say The solution here is to manually split the each pane into 2 panes so that there really is no intersection.
but if the two objects is moving ,or i have many transparency object to render . It’s performance intensive and i dont want to add useless mesh.

i also try to sort renderOrder and edit for every Mesh. it aslo doesn`t work

i find render two scence in https://stackoverflow.com/questions/12666570/how-to-change-the-zorder-of-object-with-threejs.i have no try.

If you have any ideas or suggestions, please comment. Be grateful
thank u !
Forgive me for my poor English(i am really not good at it)

2

Does it look good when depthTest is set to false?

image
image1112×656 76.7 KB

3

Thanks for your reply. It `s look like better than before , but the renderOrder is also wrong
image
I want the demo look like this picture

1 Like
4

Oh. It appears you want (A over B) and (B over A) to produce different results, even if both A and B have opacity 0.5. I don’t know an easy way to do this besides splitting the planes along the intersection line; or using ray tracing rendering. Maybe some of the experts here can provide a better suggestion.

5

Thank you foryour reply !, Thanks

1 Like
6

What the original poster wants seems to be OIT (Order Independent Transparency). It’s quite an advanced techique; usually one needs to 1) create a list of transparent samples per pixel 2) sort that per-pixel list 3) solve the transparency in the correct order.

7

Yes, I read a lot of articles, learned about the technology, found some examples (OIT, WOIT) and wrote a demo,
OIT demo
This is a bit of a loss of performance, and will cause the image to be noisy, and will lose some information, and can not solve this problem

1 Like
8

There’s also depth peeling.
https://raw.githack.com/pailhead/three.js/depth-peel-example/examples/webgl_materials_depthpeel.html

For this specific case though, the advice of splitting each plane into 2 sounds like the way to go. this way their center points will sort properly from the default threejs depth sort… since it sorts by mesh.position in worldspace iirc.

For more complex scenarios, another option is to manually generate different index buffers for the geometry, sorting the triangles in the correct order from the cardinal directions… then at rendertime (perhaps mesh.onBeforeRender=) you find the closest cardinal direction matching position-camera.position and set that index buffer on the geometry before rendering it. The more lists you make the more accurate you can probably get the sorting… but end of the day… some pathological cases will likely remain, and this is only inter-triangle sorting, not inter-object.