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