Javascript 将向量数组传递给统一的

Javascript 将向量数组传递给统一的,javascript,opengl-es,shader,webgl,opengl-es-2.0,Javascript,Opengl Es,Shader,Webgl,Opengl Es 2.0,我试图在我的着色器中实现多个灯光,但我很难用灯光数据填充均匀 我的顶点着色器: attribute vec3 aVertex; attribute vec3 aNormal; attribute vec2 aTexture; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; uniform mat4 uNMatrix; uniform vec3 uAmbientColor; uniform vec3 uPointLightingLocation[1

我试图在我的着色器中实现多个灯光,但我很难用灯光数据填充均匀

我的顶点着色器:

attribute vec3 aVertex;
attribute vec3 aNormal;
attribute vec2 aTexture;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat4 uNMatrix;

uniform vec3 uAmbientColor;
uniform vec3 uPointLightingLocation[16];
uniform vec3 uPointLightingColor[16];

varying vec2 vTexture;
varying vec3 vLightWeighting;

void main(void) {
    vec4 mvPosition = uMVMatrix * vec4(aVertex, 1.0);
    gl_Position = uPMatrix * mvPosition;
    vTexture = aTexture;

    int i;
    for (i = 0; i < 16; i++) {
        vec3 lightDirection = normalize(uPointLightingLocation[i] - mvPosition.xyz);
        vec4 transformedNormal = uNMatrix * vec4(aNormal, 1.0);
        float directionalLightWeighting = max(dot(transformedNormal.xyz, lightDirection), 0.0);
        if (i == 0) {
            vLightWeighting = uAmbientColor + uPointLightingColor[i] * directionalLightWeighting;
        } else {
            vLightWeighting = vLightWeighting * (uAmbientColor + uPointLightingColor[i] * directionalLightWeighting);
        }
    }
}
for (int i = 0; i < 3; i++) {
  vColor += uPointLightingLocation[i];
}
由于uniform
uPointLightingLocation
是一个大小为16的vec3数组,我认为可以将整个数组传递给uniform,但我没有有效的解决方案


当我试图传递完整的数组时,
this.lightsColor
(没有索引),我根本看不到任何灯光。gl.uniform3fv需要一个扁平的浮动数组。而且,您在同一个统一位置多次调用它。最后一个赢了。假设uniform3fv是一个低级复制命令,您将其指定为(目标、源)。它只是将缓冲区从一个地方复制到另一个地方

假设您的示例只有3个灯光,可以通过以下方式指定位置:

var locations = [
  1.0, 0, 0,
  0, 1.0, 0,
  0, 0, 0
];
gl.uniform3fv(shaderProgram.pointLightingLocationUniform, locations);
我还建议在调试此类问题时使用更简单的着色器。在顶点着色器中使用类似以下内容:

attribute vec3 aVertex;
attribute vec3 aNormal;
attribute vec2 aTexture;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat4 uNMatrix;

uniform vec3 uAmbientColor;
uniform vec3 uPointLightingLocation[16];
uniform vec3 uPointLightingColor[16];

varying vec2 vTexture;
varying vec3 vLightWeighting;

void main(void) {
    vec4 mvPosition = uMVMatrix * vec4(aVertex, 1.0);
    gl_Position = uPMatrix * mvPosition;
    vTexture = aTexture;

    int i;
    for (i = 0; i < 16; i++) {
        vec3 lightDirection = normalize(uPointLightingLocation[i] - mvPosition.xyz);
        vec4 transformedNormal = uNMatrix * vec4(aNormal, 1.0);
        float directionalLightWeighting = max(dot(transformedNormal.xyz, lightDirection), 0.0);
        if (i == 0) {
            vLightWeighting = uAmbientColor + uPointLightingColor[i] * directionalLightWeighting;
        } else {
            vLightWeighting = vLightWeighting * (uAmbientColor + uPointLightingColor[i] * directionalLightWeighting);
        }
    }
}
for (int i = 0; i < 3; i++) {
  vColor += uPointLightingLocation[i];
}

然后,如果多边形是黄色的,您就知道它正在工作。

谢谢您的回复。。。“展平”阵列是我所缺少的。调试并不是一个真正的问题,只要您一次只更改一件事情,并且我的着色器可以在一个光源下正常工作。谢谢我不明白为什么这个问题被否决了。似乎完全合理。