Upgrading from r113 to r114 suddenly a fragment shader is not working anymore and is causing the full scene to break. It all comes down to a single line inside the fragment shader code (see comment after line below).
static getFragmentShader() {
return [
'uniform vec3 diffuse;',
'struct DirectionalLight {',
'vec3 direction;',
'vec3 color;',
'int shadow;',
'float shadowBias;',
'float shadowRadius;',
'vec2 shadowMapSize;',
'};',
'uniform DirectionalLight directionalLights[NUM_DIR_LIGHTS];',
'void main() { ',
'vec4 addedLights = vec4(0.0, 0.0, 0.0, 1.0);',
'for (int i = 0; i < NUM_DIR_LIGHTS; i++) {',
'addedLights.rgb += directionalLights[i].color;', // LOOKS LIKE THIS LINE IS THE ISSUE
'}',
'gl_FragColor = vec4(diffuse, 1.0) * addedLights * 1.5;',
'}',
].join('\n');
}
I can’t find anything in the migration part about fragment shaders that have changed. Neither about DirectionalLights, but I might be overlooking something?
I think this is pretty difficult to debug as we don’t have any console log inside shader code or whatever. But it’s clearly no problem in WebGL being different now, as the old code using threejs r113 still works perfectly fine on the same machine and with the exact same shader code. So something must have changed in threejs from 113 to 114 causing this.
So the problem seems to be inside the line 'addedLights.rgb += directionalLights[i].color;'
. When I replace directionalLights[i].color
by just a vec3(1.0, 1.0, 1.0)
there is no problem. So addedLights.rgb
looks fine and is a vec3
(as we might expect). So the problem seem to be in the directionalLights[i].color
.
The directionalLight exists, otherwise it wouldn’t be inside the loop. So there seem to be something off with the .color
thing here.
I tried changing the color property inside the DirectionalLight
struct into a vec4
type, as I could imagine the color could has been changed into having opacity as well. But that doesn’t seem to be the case as it doesn’t solve the issue.
I am quite lost at this point as I don’t know any way to debug this. Like how can we know what values are actually inside the directionalLights[i].color
? It really looks like the issue is inside that value, or the DirectionalLight
struct have been changed in r114. But where can I find the right way of doing this in r114?
Anybody could help me with this issue? Give me some clue on how to debug these values? Maybe somebody knows something that has been changed in threejs r114 causing this?
A little help would be appreciated a lot here!