javascript - 修改uniform值时为什么要先使用get Uniform

Question

我正在阅读《WebGL 初学者指南》一书，其中涉及到通过 keydown 事件更改光线方向的代码:

function processKey(ev){
    var lightDirection = gl.getUniform(prg, prg.uLightDirection);
    var incrAzimuth =   10;
    var incrElevation = 10;

    switch(ev.keyCode){
        case 37: // left arrow
            azimuth -= incrAzimuth;
            break;
        case 38: //up arrow
            elevation += incrElevation;
            break;

        case 39: // right arrow
            azimuth += incrAzimuth;
            break;
        case 40: //down arrow
            elevation -= incrElevation;
            break;
    }

    azimuth %= 360;
    elevation %=360;

    var theta = elevation * Math.PI / 180;
    var phi   = azimuth * Math.PI / 180;

    //Spherical to Cartesian coordinate transformation
    lightDirection[0] = Math.cos(theta)* Math.sin(phi);
    lightDirection[1] = Math.sin(theta);
    lightDirection[2] = Math.cos(theta)* -Math.cos(phi);

    gl.uniform3fv(prg.uLightDirection, lightDirection);
}

看来var lightDirection = gl.getUniform(prg, prg.uLightDirection);没有任何意义，因为

lightDirection[0] = Math.cos(theta)* Math.sin(phi);
lightDirection[1] = Math.sin(theta);
lightDirection[2] = Math.cos(theta)* -Math.cos(phi);`

不通过“lightDirection”进行任何计算，然后将值处理到着色器。

所以我改变了行 var lightDirection = gl.getUniform(prg, prg.uLightDirection);至var lightDirection;但程序不能按预期工作。

Answer 1

你不应该。您应该将值缓存在变量中或每次都重新计算。对于您的特定代码，第二个选项非常有效:

function processKey(e) {
    // ...
    var lightDirection = [
        Math.cos(theta)* Math.sin(phi),
        Math.sin(theta),
        Math.cos(theta)* -Math.cos(phi)
    ];
    gl.uniform3fv(prg.uLightDirection, lightDirection);
}

或者甚至使用“uniform3f”并且根本不创建数组:

function processKey(e) {
    // ...
    gl.uniform3f(
        prg.uLightDirection,
        Math.cos(theta)* Math.sin(phi),
        Math.sin(theta),
        Math.cos(theta)* -Math.cos(phi)
    );
}