Dealing with a typical GLSL issue here. Although I grasp the math involved, implementing it at the webGL level is proving to be a challenge. Debugging shaders can be quite tricky.
My current goal is to determine the angle between the view vector and the normal of an object within the GLSL shader. I'm utilizing threejs but creating custom shaders independently.
Below is the crucial segment of the vertex shader:
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
vec3 nmalInWorld = normalize(normalMatrix * normal);
vec3 camInWorld = cameraPosition;
vec4 posInWorld = modelViewMatrix * vec4(position, 1.0);
posInWorld /= posInWorld[3];
angle = -dot(normalize(posInWorld - vec4(cameraPosition, 1.0)), normalize(vec4(nmalInWorld,1.0)));
if(angle > 0.7){
angle = 1.0;
}else{
angle = 0.0;
}
I've experimented with different versions of this setup, so I apologize for any unnecessary complexity. The output somewhat aligns with my expectations - consistently responding to changes in the camera's perspective. However, it appears off-centered for reasons unknown. The fragment shader simply assigns the angle value to a color field.
https://i.sstatic.net/jGjM0.png
Observing the image, it's evident that the white point isn't accurately centered on the sphere, as intended. I'm puzzled by this discrepancy. Could it possibly require a perspective transformation? I attempted this without success. Moreover, I don't believe the view vector should impact the situation; the sphere's coloration should remain constant regardless of the camera orientation.