如何使用JavaScript代码从webgl着色器获得统一的值

Question

我正在使用javascript和webgl制作应用。我想使用JavaScript代码从着色器中获得统一的值。

这是我的顶点着色器

  var VertexShaderCode=  "precision mediump float;"+
        "attribute vec3 vertexPos;" +
        "uniform mat4 modelViewMatrix;" +
        "uniform mat4 projectionMatrix;" +
        "uniform float pointSize;"+
        "void main(void) {" +
           "gl_Position= projectionMatrix*modelViewMatrix*vec4(vertexPos, 1.0);" +
            "gl_PointSize=pointSize;"+
        "}"

我想通过使用javascript获取pointSize值，然后在javascript代码中使用此值。

任何想法？我该怎么办？

Answer 1

由于您要设置制服，您应该已经知道值。但是，如果由于某种原因想要查找它，则只需致电gl.getUniform(program, location)

示例：

const gl = document.createElement('canvas').getContext('webgl');

const vs = `
uniform float foo;
void main() {
  gl_Position = vec4(0, 0, 0, 1);
  gl_PointSize = foo;
}
`;

const fs = `
precision mediump float;
void main() {
  gl_FragColor = vec4(0);
}
`;

// compile shaders, link program
const program = twgl.createProgram(gl, [vs, fs]);

const fooLocation = gl.getUniformLocation(program, 'foo');

// set foo
gl.useProgram(program);
gl.uniform1f(fooLocation, 123.4);

// get foo
console.log('foo:', gl.getUniform(program, fooLocation));

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>