Question

我希望能够将多个光源附加到我的场景图的每个节点，但我不知道如何做到这一点！

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

所以，目标应该是，可以选择为每个节点附加任意数量的光源，这种类型可以是方向或位置照明，如果可能和可取，这应该只使用一个shader-program（如果这不是唯一可行的方法），因为我会根据每个节点的具体需要自动为每个节点创建程序（除非堆栈中已有一个程序具有相同的设置）。

基于learningwebgl.com上的教程，我的片段着色器源节点对象使用的灯光没有预设绑定到其中一个灯光类型，可能看起来像这样......

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）来为不使用的条目启用/禁用光源。

环境和方向不必总计为1，实际上光源的强度可以强于1.0，但是您需要进行色调映射以返回可显示的值范围。一个屏幕，我建议玩一下去感受一下正在发生的事情（例如，当光源有负色或者高于1.0的颜色时会发生什么？）。

uAmbientColor只是一种（差）模拟在场景中反弹过几次的光的方法。否则阴影中的东西会变成完全黑色，这看起来不太现实。

反射率通常应介于0和1之间（在此示例中，它将是'max'计算返回的部分），否则当通过材质查看时，光源将变得更强。

Answer 2

@ ErikMan的答案很棒，但可能涉及到GPU的大量额外工作，因为您需要检查每个片段的每个灯光，这并非严格必要。

我建议建立一个剪辑空间四叉树，而不是数组。（如果目标平台/ GL版本支持，您可以在计算着色器中执行此操作。）

节点可能有一个结构，例如（我的JS生锈的伪代码）：

typedef struct
{
    uint LightMask; /// bitmask - each light has a bit indicating whether it is active for this node. uint will allow for 32 lights. 

    bool IsLeaf;

} Node;

const uint maxLevels = 4;
const uint maxLeafCount = pow(4,maxLevels);      
const uint maxNodeCount = (4 * maLeafCount - 1) / 3;

/// linear quadtree - node offset = 4 * parentIndex + childIndex;
Node tree[maxNodeCount];

构建树时，只需针对隐式节点边界检查每个光的剪辑空间边界框。（Root从（-1，-1）变为（+ 1，+ 1）。每个子节点的大小都是每个维度的一半。所以，你真的不需要存储节点边界。）

如果灯光接触到节点，请在与灯光对应的Node.LightMask中设置一个位。如果灯完全包含节点，则停止递归。如果它与节点相交，则细分并继续。

在片段着色器中，找到哪个叶节点包含您的片段，并应用在叶节点的掩码中设置了位的所有灯。

如果您希望树密集，您也可以将树存储在mipmap金字塔中。

将瓷砖的尺寸保持为32的倍数，最好是正方形。

vec2 minNodeSize = vec2(2.f / 32);

现在，如果你有少量的灯，这可能是矫枉过正。你可能需要有很多灯才能看到任何真正的性能优势。此外，正常循环可以帮助减少着色器中的数据偏差，并且更容易消除分支。

这是实现简单平铺渲染器的一种方法，并打开了拥有数百个灯光的大门。

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

2 个答案: