I have been experimenting with using Three.js' built-in ShaderChunks for implementing lighting and fog effects, and I decided to start by mimicking a setup from one of the ShaderLib shaders. Initially, I utilized the following code snippet:
customMaterial = new ShaderMaterial({
lights: true,
uniforms: UniformsUtils.merge( [
UniformsLib.common,
UniformsLib.specularmap,
UniformsLib.envmap,
UniformsLib.aomap,
UniformsLib.lightmap,
UniformsLib.emissivemap,
UniformsLib.fog,
UniformsLib.lights,
{
emissive: { value: new Color( 0x000000 ) },
diffuse: { value: new Color( 1,1,1 ) }
}
]),
vertexShader: document.getElementById("vertexShader").textContent,
fragmentShader: document.getElementById("fragmentShader").textContent
})
The shader code was directly copied from meshlambert_vert.glsl and meshlambert_frag.glsl, inspired by this entry in the ShaderLib.
However, when rendering my test scene with two different cameras/renderers simultaneously, I encountered an issue where changing one camera's perspective affected the lighting angle of objects using the customMaterial.
It seems that this could be related to the shared references of these UniformLib objects elsewhere.
Uncertain of the appropriate solution or why it works differently than the standard material, I suspect there is a missing step in the process that I am unaware of.
I have created a codepen to isolate the problem as much as possible, closely resembling the original ShaderLib source. My assumption now is that there might be a pass-by-reference where a copy should be made in the inner workings of the WebGLRenderer. https://codepen.io/cl4ws0n/pen/dVewdZ
Additionally, I attempted adding a second scene and moving objects between them but to no avail. Separate scenes with shared materials also did not resolve the issue. https://i.sstatic.net/UrqTV.gif