# How do i add light into shadermaterial

**URL:** <https://discourse.threejs.org/t/how-do-i-add-light-into-shadermaterial/43923>\
**Category:** Questions\
**Tags:** shader-material, lights\
**Created:** [October 24, 2022, 2:07am UTC](https://discourse.threejs.org/t/how-do-i-add-light-into-shadermaterial/43923 "2022-10-24T02:07:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![SanZ](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sanz/32/30446_2.png) [@SanZ](https://discourse.threejs.org/u/SanZ)\
**Post date:** [October 24, 2022, 2:07am UTC](https://discourse.threejs.org/t/how-do-i-add-light-into-shadermaterial/43923/1 "2022-10-24T02:07:31Z")

</div>

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

```javascript
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

```javascript
varying vec2 vertexUV; 
varying vec3 vertexNormal; 

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

}

```

fragment.glsl

```javascript
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);
}

```

---

<div class="post-metadata">

**Author:** ![adamringhede](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@adamringhede](https://discourse.threejs.org/u/adamringhede)\
**Post date:** [October 24, 2022, 4:54pm UTC](https://discourse.threejs.org/t/how-do-i-add-light-into-shadermaterial/43923/2 "2022-10-24T16:54:27Z")

</div>

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](https://threejs.org/examples/?q=node#webgl_nodes_materials_physical_clearcoat). 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](https://github.com/adamringhede/three-shader-graph) 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](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial) 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

---

<div class="post-metadata">

**Author:** ![SanZ](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sanz/32/30446_2.png) [@SanZ](https://discourse.threejs.org/u/SanZ)\
**Post date:** [October 25, 2022, 4:04am UTC](https://discourse.threejs.org/t/how-do-i-add-light-into-shadermaterial/43923/3 "2022-10-25T04:04:03Z")

</div>

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