How to access the light color/intensity by which the material is affected in a shader?

Questions
1

I am all new to this three js stuff, so maybe I am just completely missing the point, but I am trying to achieve the following:

Image

This is all fine and well, but now I would like to have PointLights that don’t cast any shadows but illuminate parts of the material just a bit, also tweakable by a amount set by a uniform.

I can’t set csm_DiffuseColor because that adds too much detail to scene. It exposes way more edges since there are more than three colors present now.

This is my shader code:

#include <shadowmask_pars_fragment>

varying vec2 vUv;
varying vec3 vCustomNormal;

uniform vec3 colorMap[3];
uniform float brightnessThresholds[3];
uniform vec3 lightDirection;
uniform vec3 lightColor;

void main() {
    float alpha = getShadowMask();

    vec3 cu_normal = normalize(vCustomNormal);
    float brightness = max(dot(vCustomNormal, -normalize(lightDirection)), 0.0);
    vec3 lightContribution = brightness * lightColor;

    vec3 finalColor;

    if (brightness > brightnessThresholds[0]) {
        finalColor = colorMap[0];
    } else if (brightness > brightnessThresholds[1]) {
        finalColor = colorMap[1];
    } else {
        finalColor = colorMap[2];
    }

    //csm_DiffuseColor = vec4(finalColor * alpha * 4.0, 1.0);
    csm_FragColor = vec4(finalColor * alpha, 1.0);
}

What I now want to to have access to the color and intensity point lights emit to the pixel to be able to mix my frag color with the emitted color and adjust it’s strength, so that it appears that the lights are illuminating a flat surface (even if they don’t, but since the brightness thresholds are far apart, two different edges might get illuminated the same).

So I want something like this (very naively):

csm_FragColor = vec4(finalColor * emittedLight * alpha, 1.0);

But I don’t understand how I can access that information from within the shader. There has to be a way since csm_DiffuseColor obviously has that information baked in, but going through the code I couldn’t pinpoint the place where the illumination gets set.

So the result should be like this but with the point lights affecting only the three possible colors:

Image

Maybe I am also missing the point because one cannot differentiate between the global directional light I have and the two point lights in the scene?

2

You may have better luck posting in the issues section on the github for that tool.

That said… I often use onBeforeCompile to modify the built in materials, in conjunction with a site like:

https://ycw.github.io/three-shaderlib-skim/dist/#/latest/basic/vertex

To see the unrolled source code of the built in material types, and decide where I need to inject my new functionality.

For instance… here’s a section of StandardMaterial that references pointlights:

image
image2560×1440 215 KB

3

I’m not sure I understand exactly the issue with lights, but would the traditional Three.js material MeshToonMaterial do what you need?

4

I tried using that with a color map of three THREE.Color instances, but I just don’t seem to understand how I can transform this into a working gradientMap. Also I’d like to set the brightness Thresholds where each color gets applied. Not sure if this is possible with the toon shader?

5

This thread is kinda necroed but.. you can supply any custom gradient you want to the toon shader, no? Like.. you can just make whatever gradient you want in photoshop and save it in a 1 pixel high texture?