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

【问题标题】：How to get uniform value from webgl shader with javascript code如何使用 javascript 代码从 webgl 着色器中获取统一值
【发布时间】：2020-02-15 08:16:54
【问题描述】：

我正在使用 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 代码中使用这个值。

有什么想法吗？我该怎么办？

【问题讨论】：

附带说明，您还可以使用反引号创建多行字符串文字以提高可读性。浏览器支持见here
See this answer about more edit friendly ways to store shaders

标签： javascript webgl shader vertex-shader uniform

【解决方案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));

&lt;script src="https://twgljs.org/dist/4.x/twgl.min.js"&gt;&lt;/script&gt;

【讨论】：