How do i add light into shadermaterial

Questions
,
1

Hi there
i’m new at custom shader

i use glsl format, and i want to add light into my planets. There is a few documentation about adding light into custom shader. i wonder how do i add light into my custom shader?

Here is my code :

Mercury.js

import * as THREE from "three";
//Import Shaders
import vertexShader from "../shaders/venus/vertex.glsl";
import fragmentShader from "../shaders/venus/fragment.glsl";

//Object Using shader material
export const venus = new THREE.Mesh(
  new THREE.SphereGeometry(35, 40, 40),
  new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
      Texture: {
        value: new THREE.TextureLoader().load("../../assets/Texture/venus.jpg"),
      },
    },
  })
);

vertex.glsl

varying vec2 vertexUV; 
varying vec3 vertexNormal; 

void main() {
    vertexUV = uv;
    vertexNormal = normalize(normalMatrix * normal);
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 

}

fragment.glsl

uniform sampler2D Texture;

varying vec2 vertexUV; 
varying vec3 vertexNormal; 

void main() {
    float intentsity = 1.05 - dot(vertexNormal, vec3(0.0, 0.0, 1.0)); 
    vec3 atmosphere = vec3(0.7, 0.7, 0.7) * pow(intentsity, 1.5);
    gl_FragColor = vec4(atmosphere + texture2D(Texture, vertexUV).xyz, 1.0);
}
2

There are a few approaches to this

  • Use the Node material approach. This allows you to create shaders using javascript instead of GLSL which has support for light calculations, making it easy to create custom effects. There are a few examples using this. Here is one. It seems to be actively developed but lacking documentation other than the examples. Before I learned about the existence of this, I had developed my own library which has the same approach. I think this node based approach is a great way for developing shaders.
  • You can try to change the existing shaders like MeshStandardMaterial by using an onBeforeCompile callback function to replace part of the GLSL code. This is not a great developer experience but it can work in some cases. It has the downside that it might break if you update the version of Three later.
  • There is also this library which helps you to extend existing shaders. I have never used it but it looks like a nice option if you want to stick with GLSL
1 Like
3

hi there, thanks for the reply. i’ll look into your several solution.