在javascript中定义的webgl着色器

Question

我看到的演示都在html中定义了着色器，并按名称获取它们。 javascript中有没有办法从字符串创建它们？

代替：

  var fragmentShader = getShader(gl, "shader-fs");

就像是：

var fragmentShader = createShader(gl,
"fragment code here "
);

Answer 1

我用这个

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

您可以像这样在JavaScript中使用GLSL创建自己的着色器程序

     var fragmentShaderText =
    [
    'precision mediump float;',
    '',
    'varying vec3 fragColor;',
    'void main()',
    '{',
    '   gl_FragColor = vec4(fragColor, 1.0);',
    '}',
    ].join('\n');

Answer 2

到目前为止，我所看到的最好的方法是：

var vertexShader = `attribute vec3 aVertexPosition;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}`;

Answer 3

我认为，现有的答案都无法真正回答如何从JavaScript中的字符串设置WebGL着色器的源的问题。 缺少的是shaderSource ：

const vertexShaderSource = `
attribute vec4 vertexPosition;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vertexPosition;
}
`;

const vertexShader = context.createShader(context.VERTEX_SHADER);
context.shaderSource(vertexShader, vertexShaderSource);
context.compileShader(vertexShader);