免责声明:我今天才开始使用 WebGL。
我正在尝试使用 WebGL 上下文代替“标准”2d 上下文在 HTML5 Canvas 上绘制一些基本内容。
我正在使用 developer.Mozilla.org WebGL 文档作为引用，并开始编写一些代码。
我发现顶点着色器是渲染“裁剪空间”坐标所必需的，片段着色器是渲染像素颜色所必需的。根据 WebGL 维基百科页面，着色器似乎直接用 GLSL 编码，它是 C 的高级方言。在 Mozilla 文档中，这些代码在 JavaScript 中被字符串化，但是有很多方法可以做到这一点......
这是我到目前为止的代码，但我遇到的错误与无法识别 Canvas 的 WebGL 上下文的 VERTEX_SHADER 枚举有关，并且看到上下文的文档和原型(prototype)有这样一个枚举，我想知道是什么导致了这个错误或者为什么我会看到这个错误。
代码如下，感谢您的帮助。
<html>
<head>
<title>webgl try</title>
</head>
<body>
<canvas width="600" height="400" id="canvas" style="border: 1px dotted;"> </canvas>
<script>
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
function createShader (gl, sourceCode, type) {
var shader = gl.createShader(type);
gl.shaderSource(shader, sourceCode);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
var info = gl.getShaderInfoLog(shader);
throw "could not compile web gl shader. \n\n" + info;
}
}
var vertexShaderSource =
"attribute vec4 position;\n"
"void main() {\n"+
" gl_Position = position;\n"+
"}\n";
var fragmentShaderSource =
"void main() {\n"+
" gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n"+
"}\n";
/*
* create program
*/
var program = gl.createProgram();
// ERROR COMES ON THIS LINE WHEN ATTEMPTING TO ACCESS THE VERTEX_SHADER ENUM: WebGL:
// **INVALID_ENUM: createShader: invalid shader type**
var vertexShader = gl.createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
var fragmentShader = gl.createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
var info = gl.getProgramInfoLog(program);
throw "Could not compile WebGL program. \n\n" + info;
}
</script>
</body>
</html>
最佳答案
您的代码包含语义错误。
应该是
var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
因为您调用的是上面的 createShader 函数，而不是 webgl-context 的方法。
您的 createShader 应该返回它创建的着色器:
function createShader (gl, sourceCode, type) {
var shader = gl.createShader(type);
gl.shaderSource(shader, sourceCode);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
var info = gl.getShaderInfoLog(shader);
throw "could not compile web gl shader. \n\n" + info;
}
return shader;
}
您还错过了 vertexShaderSrc 中的 +。
关于javascript - 为什么这个 WebGL 着色器类型无效？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37816717/