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:
- I have a custom shader using the GitHub - FarazzShaikh/THREE-CustomShaderMaterial: 🧩 Extend Three.js standard materials with your own shaders! library (extending the MeshStandardMaterial) that creates a anime/toon like colorization. I set the
csm_FragColorfor this, because I don’t want the light to highlight different faces too much. This looks like this:
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:
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?
