three.js: how to control rendering order

optimization 3d rendering three.js
Memo Lestas picture Memo Lestas · Mar 20, 2013 · Viewed 23k times · Source

Am using three.js

How can I control the rendering order? Let's say I have three plane geometries, and want to render them in a specific order regardless of their spatial position.

thanks

Answer

WestLangley picture WestLangley · Mar 20, 2013

You can set

renderer.sortObjects = false;

and the objects will be rendered in the order they were added to the scene.

Alternatively, you can leave sortObjects as true, the default, and specify for each object a value for object.renderOrder.

For more detail, see Transparent objects in Threejs

Another thing you can do is use the approach described here: How to change the zOrder of object with Threejs?

three.js r.71

Related questions

why are draw calls expensive?

assuming the texture, vertex, and shader data are already on the graphics card, you don't need to send much data to the card. there's a few bytes to identify the data, and presumably a 4x4 matrix, and some assorted other …

Read More
Avoiding Calls to floor()

I am working on a piece of code where I need to deal with uvs (2D texture coordinates) that are not necessarily in the 0 to 1 range. As an example, sometimes I will get a uv with a u component that …

Read More
Voxel Engine and Optimization

Recently I've started developing voxel engine. What I need is only colorful voxels without texture, but at very large amount (much smaller than minecraft) - and the question is how to draw the scene very fast? I'm using c#/xna …

Read More