Light position in custom shader (Shader Material)

1
votes

I am developing volume rendering app in webgl, and the last thing i have to do is to create a lighting model. I have everything prepared, but i am not able to get the light position in a scene. I am adding the light this way:

 var light = new THREE.DirectionalLight(0xFFFFFF, 1);
 light.position.set(0.5, 0.5, 0.1).normalize();
 camera.add(light);

I attach light to camera, because i need to have light static if i am moving with camera. Problem is, that i am using ShaderMaterial (custom shader). I am not able to find any uniform variables, that represent light position. I have searched, that i should set:

material.lights = true;

but it caused errors. 

Uncaught TypeError: Cannot set property 'value' of undefined

I have tried to add constant vector in vertex shader, but i need to multiply by inverse view matrix (if i am right). But GLSL 1.0 doesnt support inverse function. I have idea to send inverse view matrix to shader by uniform, but i dont know where can i get view matrix of scene in JS.

Thanks for help. I have tried everything :( ...

Bye.

2
javascriptthree.jswebgl

2 Answers

2
votes

If you are going to add the light as a child of the camera and set material.lights = true, then you must add the camera as a child of the scene.

scene.add( camera );

three.js r.57

1
votes

if you're trying to project the light coordinates from model space to screen space using the camera, here's a function (courtesy of Thibaut Despoulain) that might help -

var projectOnScreen = function(object, camera)
{
var mat = new THREE.Matrix4();
mat.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld);
mat.multiplyMatrices( camera.projectionMatrix , mat);

var c = mat.n44;
var lPos = new THREE.Vector3(mat.n14/c, mat.n24/c, mat.n34/c);
lPos.multiplyScalar(0.5);
lPos.addScalar(0.5);
return lPos;
}