大部分代码来自 here，我刚刚加载了
webgl2webgl源/script.js：
const canvas = document.getElementById('screen');
const gl = canvas.getContext('webgl2');
if (!gl) {
throw new Error('WebGL not supported');
}
console.log(gl instanceof WebGL2RenderingContext);
// vertexData = [...]
// create buffer
// load vertexData into buffer
// create vertex shader
// create fragment shader
// create program
// attach shaders to program
// enable vertex attributes
// draw
const vertexData = [
0, 1, 0,
1, -1, 0,
-1, -1, 0,
];
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1);
}
`);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
void main() {
int i = 0;
while (i < 2) {
i++;
}
gl_FragColor = vec4(1, 0, 0, 1);
}
`);
gl.compileShader(fragmentShader);
var compiled = gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS);
console.log('Shader compiled successfully: ' + compiled);
var compilationLog = gl.getShaderInfoLog(fragmentShader);
console.log('Shader compiler log: ' + compilationLog);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const positionLocation = gl.getAttribLocation(program, `position`);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);
控制台输出为：
true
script.js:56 Shader compiled successfully: false
script.js:58 Shader compiler log: ERROR: 0:4: 'while' : This type of loop is not allowed
如果有任何帮助，我将使用
python -m http.server 8000index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>WebGL2 Test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<canvas id="screen"></canvas>
<script type="module" src="./source/script.js"></script>
</body>
</html>
样式.css：
body{
margin: 0;
width: 100vw;
height: 100vh;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
我真的不知道这可能是什么。希望有人能解答一下。
while来自以下链接：
while 和 do-while 循环是可选的。您保证拥有的唯一循环结构是 for 循环。此外，循环结构还有很多限制。一般来说，“控制流仅限于循环，其中最大迭代次数可以在编译时轻松确定。”
该链接还解释了循环的一些限制。