Transferring PointLight Parameters to a Custom Shader using three.js

Question

Transferring PointLight Parameters to a Custom Shader using three.js

I am looking to achieve a similar effect as the undulating sphere demonstrated in the Aerotwist Tutorial. Instead of using a fake GLSL hard-coded light like in the tutorial, I am interested in passing information from a three.js PointLight instance to my shaders, manipulating vertices and normals, and then implementing Phong shading.

My understanding of the GPU considerations when shading a scene in three.js is as follows (specifically with Phong):

No GPU consideration: Utilize a MeshPhongMaterial without custom shaders for simplicity.
Some GPU consideration: Use a pre-written ShaderLib Phong shader for additional control on the GPU side without custom modifications.
Full GPU management: Employ a ShaderMesh and write custom shaders for complete customization by explicitly defining attributes and uniforms.

Q1: Is my understanding accurate?

Q2: Is there an intermediate option between levels 2 and 3 that allows for customizing shaders without creating them from scratch?

Q3: If not, what is the best approach to achieving full customization with level 3? Should I pass light properties as uniforms, modify vertex/normals, and then implement explicit Phong shading calculations?

javascript three.js glsl webgl

Answer 1

Answer №1

It's quite simple to achieve what you're looking for using three.js

I'm unsure where it fits in your Q[]

Q1

Even if you are using shaders, they may have been written by someone else for you. You only interface with them. When calling something like MeshBasicMaterial under the hood, a different shader may be compiled based on the input. For example, if there is no map called, UVS may not be processed and included in the shader. Your choice of function calls can still impact the GPU.
If you are dealing with shader chunks, it is possible to tweak things here, but it can be complex. I recommend studying the code, such as phong shading, and start creating your own step by step using the chunks. Understand what inputs yield what outputs.
No need to define attributes. THREE.ShaderMaterial isn't completely from scratch. It offers a good amount of built-in features and properties that can be customized further. Basic attributes like 'position' are already set up, eliminating the need for declaring "attribute vec3 position". MVP matrices, 'cameraPosition', and other essentials are automatically included. Constructing a phong shader from this point is relatively straightforward.

Now, how do you accomplish this. Suppose you're following a tutorial and have this shader:

// 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's normalized
light = normalize(light);//you can normalize it outside of the shader, since it's 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 color
gl_FragColor = vec4(dProd, // R
                  dProd, // G
                  dProd, // B
                  1.0);  // A

}

This is what you need to do:

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

});

Answer 2

It's quite simple to achieve what you're looking for using three.js

I'm unsure where it fits in your Q[]

Q1

Even if you are using shaders, they may have been written by someone else for you. You only interface with them. When calling something like MeshBasicMaterial under the hood, a different shader may be compiled based on the input. For example, if there is no map called, UVS may not be processed and included in the shader. Your choice of function calls can still impact the GPU.
If you are dealing with shader chunks, it is possible to tweak things here, but it can be complex. I recommend studying the code, such as phong shading, and start creating your own step by step using the chunks. Understand what inputs yield what outputs.
No need to define attributes. THREE.ShaderMaterial isn't completely from scratch. It offers a good amount of built-in features and properties that can be customized further. Basic attributes like 'position' are already set up, eliminating the need for declaring "attribute vec3 position". MVP matrices, 'cameraPosition', and other essentials are automatically included. Constructing a phong shader from this point is relatively straightforward.

Now, how do you accomplish this. Suppose you're following a tutorial and have this shader:

// 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's normalized
light = normalize(light);//you can normalize it outside of the shader, since it's 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 color
gl_FragColor = vec4(dProd, // R
                  dProd, // G
                  dProd, // B
                  1.0);  // A

}

This is what you need to do:

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

});

Answer 3

Answer №2

Q1: Indeed correct. While some individuals on this platform have shared unauthorized methods for manipulating MeshPhongMaterial, it deviates from the original purpose.

Q2 and Q3: Take a look at ShaderLib.js where you will find the "Normal Map Shader." This serves as an ideal blueprint for your endeavor. Feel free to duplicate and tweak it according to your preferences.

This shader employs a Phong-based lighting model and conveniently interacts with scene lights on your behalf. The implementation is as follows:

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

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

. . .

var parameters = {
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: uniforms,
    lights: true // enabling this flag grants access to scene lights
};

var material = new THREE.ShaderMaterial( parameters );

Refer to these demonstrations: and .

For coding conventions, consult ShaderLib.js and ShaderChunk.js.

Implemented in three.js r.67

Answer 4

Q1: Indeed correct. While some individuals on this platform have shared unauthorized methods for manipulating MeshPhongMaterial, it deviates from the original purpose.

Q2 and Q3: Take a look at ShaderLib.js where you will find the "Normal Map Shader." This serves as an ideal blueprint for your endeavor. Feel free to duplicate and tweak it according to your preferences.

This shader employs a Phong-based lighting model and conveniently interacts with scene lights on your behalf. The implementation is as follows:

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

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

. . .

var parameters = {
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: uniforms,
    lights: true // enabling this flag grants access to scene lights
};

var material = new THREE.ShaderMaterial( parameters );

Refer to these demonstrations: and .

For coding conventions, consult ShaderLib.js and ShaderChunk.js.

Implemented in three.js r.67

Transferring PointLight Parameters to a Custom Shader using three.js

Answer №1

Answer №2

Similar questions

The button functionality gets hindered within the Bootstrap well

Display everything when an option is clicked

What are all the functionalities provided by jquery select?

Display issue with React TypeScript select field

Unable to retrieve the contents of a previous shopping cart

Creating a Yeoman application with a personalized Node.js server

Is there a way to maintain the checked status of the checkboxes after a page refresh?

How can I load data into Vuex store before the application starts?

Is there a way to divide a string and insert something into the new array that is created?

Tips on presenting messages to users after clicking the submit button?

Calculate the total width of all images

Struggling to navigate the world of JavaScript and find the sum of odd numbers?

Failed to perform the action using the Angular Post method

create a JavaScript array variable for posting items

Passing a JSONArray to a webview using addJavascriptInterface can provide valuable data

Prevent scrolling on browser resize event

Unfortunately, CORS is preventing me from sending a POST request through AJAX

RxJS emits an array of strings with a one second interval between each emission

Adding a line break ( ) in a paragraph within a TypeScript file and then transferring it to HTML does not seem to be functioning properly

Determine the identifier of the subsequent element located within the adjacent <div> using jQuery