在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);