CODEWITHSUNDEEP
matrixthree.jsglslwebglshader
user2783211
user2783211

Reputation: 178

Three.js shader pointLight position

I'm trying to write my shader and add light sources, I sort of figured it out and did it.

But there is a problem, the position of the light source is incorrectly determined, when the camera rotates or moves, something unimaginable happens.

So I get the position of the vertex shader

vec3 vGlobalPosition = (modelMatrix * vec4(position, 1.0 )).xyz

Now I'm trying to make an illuminated area

float lightDistance = pointLights[ i ].distance;
vec3 lightPosition  = pointLights[ i ].position;

float diffuseCoefficient = max( 
    1.0 - (distance(lightPosition,vGlobalPosition) / lightDistance ), 0.0);

gl_FragColor.rgb += color.rgb * diffuseCoefficient;

But as I wrote earlier if you rotate the camera, the lighting area moves to different positions.

I set the light position manually and everything became normal.

vec3 lightPosition  = vec3(2000,0,2000);
...

The question is how to get the right position of the light source? I need a global position, what position is contained in the light source I do not know.

Added an example: http://codepen.io/korner/pen/XMzEaG

Upvotes: 3

Views: 935

Answers (1)

vallentin
vallentin

Reputation: 26157

Your problem lies with vPos. Currently you do:

vPos = (modelMatrix * vec4(position, 1.0)).xyz

Instead you need to multiply the position with modelViewMatrix:

vPos = (modelViewMatrix * vec4(position, 1.0)).xyz;

You need to use modelViewMatrix because PointLight.position is relative to the camera.

Upvotes: 1

Related Questions