Render Order of BufferGeometry in Thee.js

Question

Following the previous question, I'm dealing with building models in BufferGeometry, and realize that the transparent flag affects the render order: objects with transparent materials will be rendered after non-transparent ones.

Also, I read from this thread, did an experiment on JSFiddle and realized the render order of faces in BufferGeometry is the same as the order they are specified in buffers, but not distance from cameras. (In the above experiment, I specify a closer triangle first in the buffer, and it occludes others behind it.)

So my question is: is it possible to set render order of faces manually in BufferGeometry? In my case, I may need to change transparency of building elements dynamically. (I've read the thread saying we can set renderOrder of Object3D.)

Thank you.

WestLangley WestLangley · Accepted Answer · 2016-04-17T03:32:41

Faces are rendered in the order in which they appear in the BufferGeometry.

If you have to vary the transparency of scene elements dynamically, I suggest you maintain separate geometries, each paired with its own material.

The renderer will render the objects having transparent = false first. Then it will render the objects having transparent = true.

You will likely find you have fewer artifacts if you use the following settings for your transparent materials:

material.transparent = true;
material.opacity = 0.5; // or as desired
material.depthTest = true; // the default
material.depthWrite = false; // use for transparent materials only

Also, self-transparency is particularly tricky. An example would be a semi-transparent cube (or building). One way to reduce artifacts in such situations is to render the object twice: first with material.side = THREE.BackSide and then again with material.side = THREE.FrontSide. You can use object.renderOrder to force a specific render order between objects.

three.js r.75

Render Order of BufferGeometry in Thee.js

1 Answers