Как получить равномерное значение из шейдера webgl с помощью кода JavaScript

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;"+
        "}"

Я хочу получить значение pointSize с помощью JavaScript, а затем я хочу использовать это значение вjavascript code.

Есть идеи? Что мне делать?

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>