如何使用 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>

如何使用 javascript 代码从 webgl 着色器获取统一值

How to get uniform value from webgl shader with javascript code

javascript

shader

uniform

webgl

vertex-shader