p5.js自定义Shader仅首个directionalLight光源生效问题咨询

新增平行光不生效和C++没有任何关系，问题完全出在你贴的GLSL Shader逻辑上：代码虽然声明了支持最多5个平行光的uniform数组参数，但实际光照计算时写死了只读取、计算数组下标为0的第一个平行光，其余光源的传入数据完全没有参与计算，自然不会产生渲染效果。

你现有顶点Shader里写死单光源的代码段：

// 仅取第一个光源的方向
vec3 lightDirection = normalize(-uLightingDirection[0]);
float intensity = max(0.0, dot(lightDirection, vertexNormal));
// 仅计算第一个光源的漫反射贡献
vDiffuseColor = uDirectionalDiffuseColors[0] * intensity;

把顶点Shader中写死单光源的计算逻辑替换为循环遍历，累加所有已启用平行光的漫反射贡献即可，修改后的光照计算代码如下：

vec3 vertexNormal = normalize(uNormalMatrix * aNormal);
// 初始化漫反射累积值为0
vDiffuseColor = vec3(0.0);
// 遍历平行光数组，p5.js最多支持同时传入5个平行光
for (int i = 0; i < 5; i++) {
  // 超过场景实际配置的平行光数量时终止循环
  if (i >= uDirectionalLightCount) break;
  vec3 lightDir = normalize(-uLightingDirection[i]);
  float intensity = max(0.0, dot(lightDir, vertexNormal));
  // 累加当前光源的漫反射颜色贡献
  vDiffuseColor += uDirectionalDiffuseColors[i] * intensity;
}
// 需要启用环境光时，放开下方注释，同时记得放开对应uniform变量的注释
// vDiffuseColor += uAmbientColor[0];

你查到的Shader内置变量作用如下：

• uDirectionalLightCount：当前场景中实际添加的平行光总数，由p5.js自动传入，无需手动赋值
• uLightingDirection[5]：按添加顺序存储所有平行光方向的数组
• uDirectionalDiffuseColors[5]：按添加顺序存储所有平行光漫反射颜色的数组
• uDirectionalSpecularColors[5]：按添加顺序存储所有平行光高光颜色的数组，你当前的Shader没有实现高光计算逻辑，所以该参数暂时不会生效
• uAmbientColor[5]：存储环境光颜色的数组，直接累加到漫反射结果中即可实现环境光效果

修改完成后，你在场景中新增的所有平行光都会正常参与光照计算，渲染出叠加后的光照效果。

内容的提问来源于stack exchange，提问作者Type Beta