Javascript 为什么此WebGL着色器类型无效？
免责声明：我今天才开始使用WebGL 我试图用WebGL上下文代替“标准”2d上下文在HTML5画布上绘制一些基本内容 我正在使用developer.Mozilla.org WebGL文档作为参考，并且已经开始处理一些代码 我发现渲染“clipspace”坐标需要顶点着色器，渲染被渲染像素的颜色需要片段着色器。根据WebGL wikipedia页面，着色器似乎是直接用GLSL编码的，GLSL是C的高级方言。在Mozilla文档中，这些代码是用JavaScript字符串化的，但有很多方法可以做到这一点 这是我到目前为止的代码，但是我遇到的错误与画布的WebGL上下文的Javascript 为什么此WebGL着色器类型无效？,javascript,html,canvas,opengl-es,webgl,Javascript,Html,Canvas,Opengl Es,Webgl,免责声明：我今天才开始使用WebGL 我试图用WebGL上下文代替“标准”2d上下文在HTML5画布上绘制一些基本内容 我正在使用developer.Mozilla.org WebGL文档作为参考，并且已经开始处理一些代码 我发现渲染“clipspace”坐标需要顶点着色器，渲染被渲染像素的颜色需要片段着色器。根据WebGL wikipedia页面，着色器似乎是直接用GLSL编码的，GLSL是C的高级方言。在Mozilla文档中，这些代码是用JavaScript字符串化的，但有很多方法可以做到这
VERTEX_着色器<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>
webgl尝试
var canvas=document.getElementById（“canvas”）；
var gl=canvas.getContext（“webgl”）；
函数createShader（gl、源代码、类型）{
var shader=gl.createShader（类型）；
gl.shaderSource（着色器，源代码）；
gl.compileShader（着色器）；
if（！gl.getShaderParameter（着色器，gl.COMPILE_状态））{
var info=gl.getShaderInfoLog（着色器）；
throw“无法编译web gl着色器。\n\n”+信息；
}
}
var vertexShaderSource=
“属性vec4位置；\n”
“void main（）{\n”+
“gl\U位置=位置；\n”+
“}\n”；
var fragmentShaderSource=
“void main（）{\n”+
“gl_FragColor=vec4（1.0,1.0,1.0,1.0）；\n”+
“}\n”；
/*
*创建程序
*/
var program=gl.createProgram（）；
//尝试访问顶点_着色器枚举：WebGL:
//**无效的枚举：createShader:无效的着色器类型**
var vertexShader=gl.createShader（gl，vertexShaderSource，gl.VERTEX_着色器）；
var fragmentShader=gl.createShader（gl，fragmentShaderSource，gl.FRAGMENT\u着色器）；
//附加预先存在的着色器
gl.attachShader（程序，顶点着色器）；
gl.attachShader（程序、碎片着色器）；
总账链接程序（程序）；
if（！gl.getProgramParameter（程序、总账链接状态））{
var info=gl.getProgramInfoLog（程序）；
throw“无法编译WebGL程序。\n\n”+信息；
}
var vertexShader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
var fragmentShader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
createShadercreateShaderfunction 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中的
+