javascript - 用于多个光源的 WebGL 片段着色器？

Question

我希望能够将多个光源附加到我的场景图的每个节点，但我不知道该怎么做!

来自 learningwebgl.com 上的教程我学会了使用定向照明或位置照明，但找不到关于如何实现多个光源的很好的解释。

因此，目标应该是可以选择向每个节点附加任意数量的光源，其类型可以是定向照明或位置照明，并且如果可能和可取的话，这应该通过仅使用一个来实现shader-program(如果这不是唯一的可能性的话)，因为我会根据每个节点的特定需求自动为每个节点创建程序(除非堆栈上已经有一个具有相同设置的程序)。

根据 learningwebgl.com 上的教程，我的节点对象的片段着色器源代码使用没有预设绑定(bind)到其中一种照明类型的照明可能看起来像这样......

precision highp float;

uniform bool uUsePositionLighting;
uniform bool uUseDirectionalLighting;

uniform vec3 uLightPosition;
uniform vec3 uLightDirection;

uniform vec3 uAmbientColor;
uniform vec3 uDirectionalColor;

uniform float uAlpha;

varying vec4 vPosition;
varying vec3 vTransformedNormal;
varying vec3 vColor;


void main (void) {

  float directionalLightWeighting;

  if (uUseDirectionalLighting) {

    directionalLightWeighting = max(dot(vTransformedNormal, uLightDirection), 0.0);

  else if (uUsePositionLighting) {

    vec3 lightDirection = normalize(uLightPosition, vPosition.xyz);

    directionalLightWeighting = max(dot(normalize(vTransformedNormal, lightDirection), 0.0);

  }

  vec3 lightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting;

  gl_FragColor = vec4(vColor * lightWeighting, uAlpha);

}

...所以，这基本上是我对这个主题的了解不足。

我也问自己，添加更多光源会如何影响灯光颜色:

我的意思是，uAmbientColor 和 uDirectionalColor 有总和为 1.0 吗？在这种情况下(尤其是在使用多个光源时)，在将这些值传递给着色器之前预先计算它们肯定会很好，不是吗？

Answer 1

将您的灯光放入一个数组中，并为每个片段循环遍历它们。从固定光源阵列开始，直到 OpenGL 4.3 才支持无限阵列，并且使用起来更加复杂。

类似的东西:

uniform vec3 uLightPosition[16];
uniform vec3 uLightColor[16];
uniform vec3 uLightDirection[16];
uniform bool uLightIsDirectional[16];

 ....

 void main(void) {
   vec3 reflectedLightColor;

   // Calculate incoming light for all light sources
   for(int i = 0; i < 16; i++) {
     vec3 lightDirection = normalize(uLightPosition[i], vPosition.xyz);
     if (lightIsDirectional[i]) {
       reflectedLightColor += max(dot(vTransformedNormal, uLightDirection[i]), 0.0) * uLightColor[i];
     }
     else  {
       reflectedLightColor += max(dot(normalize(vTransformedNormal, lightDirection), 0.0) * uLightColor[i];
     }
   }

   glFragColor = vec4(uAmbientColor + reflectedLightColor * vColor, uAlpha);
 }

然后您可以通过将不使用的条目的 uLightColor 设置为 (0,0,0) 来启用/禁用光源。

Ambient 和 directional 不必总和为 1，实际上光源的强度可以比 1.0 强得多，但是您需要进行色调映射以回到可以显示的值范围一个屏幕，我建议四处游玩以感受正在发生的事情(例如，当光源具有负色或高于 1.0 的颜色时会发生什么？)。

uAmbientColor 只是一种模拟在场景中多次反射的光的(糟糕的)方法。否则阴影中的东西会变成全黑，看起来不真实。

反射率通常应介于 0 和 1 之间(在此示例中，它是“最大”计算返回的部分)，否则通过 Material 观察时光源会变得更强。