Looking to improve performance, my goal is to showcase hundreds of moving tetrahedrons in a scene by using instancedbuffergeometry along with a custom shader.
Within the scene, there are also objects with regular geometry (non-buffer) and some lights. To see a simplified version of the setup, check out this snippet: https://jsfiddle.net/negan/xs3k1yz4/.
The issue arises with the shading of the tetrahedrons, as they do not blend well with the lighting of the rest of the scene. This mismatch in lighting may be attributed to the custom shader I have developed:
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec3 offset;
attribute vec4 color;
varying vec4 vColor;
varying vec3 vNormal;
void main() {
vColor = color;
vNormal = normalMatrix * vec3(normal);
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(position*1.0+offset,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
varying vec4 vColor;
varying vec3 vNormal;
void main() {
float di = 0.4*dot(vNormal,normalize(vec3(1.,1.,0.)))+0.4*dot(vNormal,normalize(vec3(1.,0.,1.)));
di = di+0.2;
vec4 vColor2= vColor*vec4(1.0,1.,1.,0.2)*di;
gl_FragColor = vColor2;// adjust the alpha
}
</script>I am seeking guidance on how to modify the custom shader to better integrate with the established lights in the scene. The current rendering of the faces does not accurately depict directed light, and I am striving for a uniform illumination across individual faces rather than vertex-interpolated colors, despite my failed attempts to achieve this.
Appreciate any pointers or assistance in solving this issue.