Passing PointLight information to a custom shader using the three.js function

Question

I want to create an effect similar to the wave sphere described in the Aerotwist Tutorial . However, in the tutorial, Paul creates fake hard-coded light in the fragment shader - instead, I want to transfer the information from the three.js PointLight instance to my shaders, manipulate the vertices / normals, and then do the Phong shading.

My understanding of the different levels of GPU viewing when shading a scene in three. js looks like this (e.g. with Phong):

• No GPU Considerations: Use MeshPhongMaterial and don’t worry about shaders. It is very simple, but does not allow you to mess with the side of the GPU.
• Some GPU Considerations: Use the ShaderLib Phong shader. This allows you to push hatch calculations to the GPU, but since they are pre-recorded, you cannot perform any custom modification of vertex positions, normals, or lighting calculations.
• Full GPU control: use ShaderMesh and write your shaders from scratch. This gives you full customization, but also makes you explicitly pass on the attributes and uniforms your shaders need.

Q1: Exact understanding above?

Q2: Is there a way to do something between levels 2 and 3? I want to configure shaders to mess with vertex positions / normals, but I don't want to write my own phong shader when one with three.js works fine.

Q3: 2 3 , 3, ? , .. , / , Phong?

!

Answer 1

Q1: . MeshPhongMaterial, .

Q2 Q3: ShaderLib.js, " ". . , / .

Phong . :

var shader = THREE.ShaderLib[ "normalmap" ];

var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

. . .

var parameters = {
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: uniforms,
    lights: true // set this flag and you have access to scene lights
};

var material = new THREE.ShaderMaterial( parameters );

. : http://threejs.org/examples/webgl_materials_normalmap.html http://threejs.org/examples/webgl_materials_normalmap2.html.

, . ShaderLib.js ShaderChunk.js.

three.js r.67

Answer 2

, , three.js

, Q []

Q1

• , - . . - MeshBasicMaterial , , . , UVS , .. , .
• , , . - , , phong , . , , .
• . THREE.ShaderMaterial . - , , . - , .. " vec3 position". , , , , , , , - . , "", "uv", "normal". , . , MVP-, "cameraPosition" .. phong- .

, . , , :

// same name and type as VS
varying vec3 vNormal;

void main() {


//this is hardcoded you want to pass it from your environment
vec3 light = vec3(0.5, 0.2, 1.0);//it needs to be a uniform

// ensure it normalized
light = normalize(light);//you can normalize it outside of the shader, since it a directional light

// calculate the dot product of
// the light to the vertex normal
float dProd = max(0.0,
                dot(vNormal, light));

// feed into our frag colour
gl_FragColor = vec4(dProd, // R
                  dProd, // G
                  dProd, // B
                  1.0);  // A

}

:

GLSL

uniform vec3 myLightPos;//comes in
void main(){
    vec3 light = normalize(myLightPos);//but you better do this in javascript and just pass the normalized vec3
}

Javascript

new THREE.ShaderMaterial({
   uniforms:{
      myLightPos:{
         type:"v3",
         value: new THREE.Vector3()
      }
   },
   vertexShader: yourVertShader,
   fragmentShader: yourFragmentShader

});