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

在javascript中定义的webgl着色器

3 个答案: