What ways are there to affect rendering order inside a buffer geometry?

Questions
1

I’m sorry if the question is inaccurate but I’m not sure if I’ve understood my problem correctly.

Trying to draw a seemingly flat surface using buffer geometry that contains lots of points. The points may move on x and y axis but their order should remain stable from user’s (camera’s) point of view. I’m trying to use the Z position to achieve this, but it seems a bit unstable.

Simplified my problem into this: http://jsfiddle.net/z9v89eep/5/
The squares seem to be in wrong order. I could solve this by changing the Z of the squares to have a bigger difference or by moving camera closer, but either way I’m running out of possible values on z-axis.

Is there some problem in that JSFiddle or is there a better way to achieve this?

2

What outcome do you expect?

3

I expected green to be closest to camera, then red and blue.

Here, I changed the camera.position.z to get the result i had expected:
http://jsfiddle.net/z9v89eep/7/

4

I guess what you see are inaccuracies in the depth buffer. If you decrease the scale of the scene and view frustum, you have more predictable results:

http://jsfiddle.net/z9v89eep/9/

Using a logarithmic depth buffer might also be worth to consider:

https://threejs.org/examples/#webgl_camera_logarithmicdepthbuffer

2 Likes