I am running into an issue where I use Points and some share the same coordinate. When I move the camera, their order swaps and sometimes one renders infront and sometimes it renders behind other points.
I was thinking that I should use a vertex shader to create an offset towards the camera for specific points that need to be infront of the others. But I’m not sure how to set that up as I haven’t used shaders before. I’m also coloring specific points, so I’m not sure if I’ll need to do that in the shader if I use one, or if I can just keep that part as it is.
The examples I’ve found are overly complex with thousands of points doing fancy effects, and I just want a simple example I can reference. Does anyone have any minimal examples with the bare bones? Or can anyone explain to me how to accomplish this?
eh… I think this won’t work because I’m using multiple meshes, so I’d assume one material shared between them wouldn’t be able to differentiate between the meshes… Right?
If you just want to avoid a change in the render order, you can define it manually. All what you have to do is to configure the renderOrder property of your 3D objects.
BTW: I’m a bit irritated. In the first post you have said that you work with THREE.Points. In your last post you are talking of meshes. What type of 3D object are you actually using?
I’m using Points. I got confused. I’m sharing a material between all the Point objects. Each object has a unique geometry… What I meant is that because they share a material, I’d assume that the shader wouldn’t be able to differentiate between the objects. If I offset one vertex, say index 0, in the shader, then it would offset all of those in each object, wouldn’t it? I need to offset them on a per vertex basis for each object.
If I use a renderOrder, that applies to all the vertices if my understanding is correct. That wouldn’t work because there might be two objects overlapping (their vertices), but one vertex from each object might need to be moved towards the camera. That would leave the objects with the same render order.
Here is a picture of the problem, to better illustrate it…
We have two objects with four Points each. Each object has one point colored red, and the others are white. When they are overlapped, the colors change based on the camera position. I need to have the red points always visible in front.
Can a vertex shader use the point’s color to determine whether it is offset towards the camera?
If I knew this was possible, I will try to learn how to make the shader.
edit: the color attribute of geometry vertices.
I’m getting closer to a solution, but I can’t figure out how to get the direction from the Camera to the Points… It currently gets the Camera direction( I think), but I need the direction towards the points… any ideas?
this.material.onBeforeCompile = function ( shader ) {
shader.uniforms.time = { value: 0 };
shader.vertexShader = 'uniform float time;\n' + shader.vertexShader;
shader.vertexShader = shader.vertexShader.replace(
'#include <begin_vertex>',
[
'float myOffset = 0.0;',
'myOffset = (vColor.r + vColor.g + vColor.b) < 3.0 ? 1.0 : 0.0;',
'vec3 transformed = vec3( position ) + normalize((inverse(modelViewMatrix) * vec4(0.0, 0.0, myOffset, 0.0)).xyz);'
].join( '\n' )
);
latticeCloud.material.userData.shader = shader;
};
vec4 localPosition = vec4( position, 1.);
vec4 worldPosition = modelMatrix * localPosition;
vec3 look = normalize( vec3(cameraPosition) - vec3(worldPosition) );
vec3 transformed = vec3( position ) + look;
I have this currently, and for some reason, it just moves the vertex 1 unit towards the origin point in the scene (0,0,0). I need it to move the vertex towards the camera(where you are viewing the scene from).
Any ideas?
Solved it!
Here is the code in-case anyone needs it:
material.isShaderMaterial = true; //We need to set this so that the cameraPosition uniform is updated in the shader
material.onBeforeCompile = function ( shader ) {
shader.vertexShader = shader.vertexShader.replace(
'#include <begin_vertex>',
[
'float myOffset = 0.0;',
'myOffset = (vColor.r + vColor.g + vColor.b) < 3.0 ? 0.01 : 0.0;',
'vec4 localPosition = vec4( position, 1.);',
'vec4 worldPosition = modelMatrix * localPosition;',
'vec3 look = myOffset * normalize( cameraPosition - vec3(worldPosition) );',
'vec3 transformed = vec3( position ) + look;'
].join( '\n' )
);
material.userData.shader = shader;
};