Color of light in the custom shader

Questions
,
1

I added lighting to my scene with

const ambientLight = new THREE.AmbientLight(0xffffff); 
 scene.add(ambientLight);

// and directional light as
const dirLight = new THREE.DirectionalLight(0x808080, 0.5);

and in my custom shader i added the light by this:

 uniforms1 = {
        diffuseTexture: { type: "t", value: texture },
        heightScale: { type: "f", value: _scaleHeight },
      };

      uniforms1 = THREE.UniformsUtils.merge([
        THREE.UniformsLib["lights"],
        uniforms1,
      ]);

      console.log(uniforms1);

      _meshMaterial = new THREE.RawShaderMaterial({
        uniforms: uniforms1,
        vertexShader: terrainShader._VS,
        fragmentShader: terrainShader._FS,
        lights: true,
        side: THREE.DoubleSide,
      });

but when i console _meshMaterial i get this:

image
image1169×571 47.9 KB

i am passing white color so i dont understand why it is getting 3.14 as color value in uniform and the directional light color is also does not seem correct !!

Is there any help i can get to understand whats going on !!

2

Why would you try to pass the entire lights themselves as uniforms to the shader? Ok, it’s RawShaderMaterial, but wouldn’t be easier to just use new THREE.ShaderMaterial({uniforms: THREE.UniformsUtils.clone(THREE.ShaderLib.phong.uniforms), defines: {USE_UV: ""}, vertexShader: THREE.ShaderLib.phong.vertexShader, fragmentShader: THREE.ShaderLib.phong.fragmentShader, lights: true}), add whatever shader typethere, maybe passing ambientLight.color and / or dirLight.color instead would do what you want? E.g. _meshMaterial.uniforms.alightcolor = {value: ambientLight.color}; and similar…

Also, are you merging an array that contains the uniforms1 element … into the same uniforms1? Isn’t that self referencing or whatever it is called?

Personally, I don’t touch the light department in ShaderMaterial - I simply replace some shader chunk with my code and let the light to shine on the material as usual for the light and material type, because it does it bettter than me messing with it anyway. So, unless you absolutely need to change lighting, it’s more convenient to use the built in style.

Can’t explain the PI value and related in the light properties from the console, other than some mixing up happening there. I’ve seen console.log values being strange on other occasions though (like some values before expanding the object and other values if collapsed).

3

You can find the code responsible for this scaling factor here:

Also note that the light’s intensity will be multiplied in, so the uniform value is a combination of the original color and the intensity, to avoid using more uniforms than necessary.

If you’d prefer to use a linear representation you can set renderer.physicallyCorrectLights = true, but note that this will also change how attenuation/falloff works. There are more details about that in the lights documentation.