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