I’m implementing a GIS (Geographic Information System).
In this GIS, there are several layers, each one using a unique depth. (ex: tiny roads, highway, railway line, …). A lot of work has already been done, BJS is a great tool
Each layer is represented by a single BJS Mesh. All of these meshes are rendered using custom GLSL shaders (custom AA lines, signed distance fields for texts, …). Some information is passed using VBOs (setVerticesData), other using TBOs (RawTexture in BJS). To order all of these layers, I modify the alphaIndex of the meshes and send appropriate uniform values. All of these stuff cohabit very well.
Now, I would like to duplicate part of my geometry using instances (for performance reason). For this, I’m using BJS 4.1.0 beta 1.
To create instances, I call myMesh.createInstance().
I fill some TBOs containing instance meshes related stuff (position, rotation, custom info, …)
I fill an “instanced” VBO containing the instance ID using myMesh.instancedBuffers.objID (useful to fetch corresponding info in the TBOs).
I managed to make instance rendering working. The instanciated meshes are drawn in the right place, with the right orientation, … However, I get some troubles with the depth of my instanciated meshes. Whatever the method I use, I can not set properly the depth of my instanciated meshes. I tried with uniforms, and even by forcing the depth in my shader.
I already use this way of thinking in OpenGL 3.3+ without any particular problem. Therefore, I’m wondering if there is a WebGL limitation or a BJS overlay that prevent me to do this kind of things ?
Well it seems to be defined correctly (but I would like to see a repro to be more helpful).
But keep in mind that instances are rendered in a batch so you cannot control the depth with alphaindex as they will be in the alphaindex of the root object
Thanks for the reply. I finally found the problems.
The first problem was in the computation of the alphaIndex of the meshes. The alphaIndex of one of the mesh was equal to nan, which disturbed the drawing order. Here is an result example of draw orders (using onBeforeDrawObservable). You can see that all meshes are well ordered locallybefore and after the mesh 08, but that the global order is wrong.
The second problem is that I can’t influence the depth of my meshes from the vertex shader if the attribute hasVertexAlpha is set to true. Here is a playground : https://www.babylonjs-playground.com/#JY6FFW#3
If you modify the z value (ex: 0.5 or -0.5) of the shader customGreenVertexShader, nothing happen. To make the red box in front or behind the green box, you have to modify the alphaIndex attributes. If you really want to influence the z order of the meshes, you have to comment the following lines.
redBox.hasVertexAlpha = true;
greenBox.hasVertexAlpha = true;
But transparency does not work anymore (I mean, I know that if the red box is draw after the green one, you can’t see the red box through the green one. This is not a problem. Here, transparency no longer works at all).
I’m not sure if my previous message was clear, but the problem still remains. Is there a way to influence the z value directly from the vertex shader, without losing the alpha transparency ?
You can influence the depth in the vertex shader as you are responsible for writing the output
I will in this case recommend that you read the nme doc: https://doc.babylonjs.com/how_to/node_material
