CODEWITHSUNDEEP
overlaywebglmeshflicker
John M
John M

Reputation: 1134

XTK Flickering in Overlay mesh

So I have tried to overlay 2 meshes in xtk with alpha blending, setting different colors and opacities.

An example can be seen here http://biostat.jhsph.edu/~jmuschel/XTK_Flicker_Example/

This doesn't happen when 2 meshes are both rendered in the same renderer but don't overlap.

I can't seem to understand why this would happen with the flickering.

Upvotes: 0

Views: 228

Answers (2)

Jonathan Foster
Jonathan Foster

Reputation: 1

You can disable the renderer re-ordering (which is also the solution to this problem in three.js) by doing

r0 = new X.renderer3D();
r0.init();
r0.config.ORDERING_ENABLED = false

This way the order in which you add objects to the scene will determine the order in which they are rendered. It fixed my problem with flickering.

Upvotes: 0

havarc
havarc

Reputation: 934

That's the sorting algorithm screwing with you. When rendering transparent objects graphic engines like three.js or xtk like to sort the objects in the scene from back to front so the transparency is accumulated correctly (read more about it in 'Learning WebGL').

Due to your scene having one big transparent object inside another big transparent object with both having the same origin that sorting mechanism gets confused and starts flipping the objects between front and back. When the inner object is rendered first then the outer will blend its transparency with the inner, but when the outer is rendered first then the inner object will be ignored due to its surfaces lying behind the ones of the outer (depth testing).

To solve this you may try to force the inner object to be rendered first.

Upvotes: 1

Related Questions