为什么我的代码 WebGL 不显示我的多个动画对象
Why my mutiple animated objects are not displayed by my code WebGL
我是 webGL 初学者，我必须显示多个动画对象。我已经写了代码。它运行没有错误。我的意思是它在 start() 函数中打印所有警报测试用例，直到 alert("I am executed6"); 但它仍然在浏览器中不显示任何内容。
我想要的是使用两个带动画的三角形来显示矩形。但它根本不显示矩形。
我的完整代码是：
var gl;
function initGL()
{
// Get A WebGL context
var canvas = document.getElementById("canvas");
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if (!gl)
{
return;
}
}
var positionLocation;
var resolutionLocation;
var colorLocation;
var translationLocation;
var rotationLocation;
var translation = [50, 50];
var rotation = [0, 1];
var angle = 0;
function initShaders()
{
// setup GLSL program
vertexShader = document.getElementById("2d-vertex-shader").firstChild.nodeValue;
// vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
fragmentShader = document.getElementById("2d-fragment-shader").firstChild.nodeValue;
// fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);
// look up where the vertex data needs to go.
positionLocation = gl.getAttribLocation(program, "a_position");
// lookup uniforms
resolutionLocation = gl.getUniformLocation(program, "u_resolution");
colorLocation = gl.getUniformLocation(program, "u_color");
translationLocation = gl.getUniformLocation(program, "u_translation");
rotationLocation = gl.getUniformLocation(program, "u_rotation");
// set the resolution
gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
}
function createProgram(gl,vertexShader, fragmentShader)
{
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, vertexShader);
gl.compileShader(vs);
if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
alert(gl.getShaderInfoLog(vs));
//////
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, fragmentShader);
gl.compileShader(fs);
if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))
alert(gl.getShaderInfoLog(fs));
program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS))
alert(gl.getProgramInfoLog(program));
}
function initBuffers()
{
// Create a buffer.
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
// Set Geometry.
setGeometry(gl);
}
function setColor(red, green, blue)
{
gl.uniform4f(colorLocation, red, green, blue, 1);
}
// Draw the scene.
function drawScene()
{
// Clear the canvas.
gl.clear(gl.COLOR_BUFFER_BIT);
// Set the translation.
gl.uniform2fv(translationLocation, translation);
// Set the rotation.
gl.uniform2fv(rotationLocation, rotation);
// Draw the geometry.
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
// Fill the buffer with the values that define a letter 'F'.
function setGeometry(gl)
{
var size1 = 0.5;
/*Assume size1 is declared*/
var vertices = [
-size1 / 2, -size1 / 2,
-size1 / 2, size1 / 2,
size1 / 2, size1 / 2,
size1 / 2, size1 / 2,
size1 / 2, -size1 / 2,
-size1 / 2, -size1 / 2];
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array(vertices),
gl.STATIC_DRAW);
}
function animate()
{
translation[0] += 0.01;
translation[1] += 0.01;
angle += 0.01;
rotation[0] = Math.cos(angle);
rotation[1] = Math.sin(angle);
}
function tick()
{
// requestAnimFrame(tick);
drawScene();
animate();
}
function start()
{
alert("I am executed1");
initGL();
alert("I am executed2");
initShaders();
alert("I am executed3");
initBuffers();
alert("I am executed4");
setColor(0.2, 0.5, 0.5);
alert("I am executed5");
tick();
alert("I am executed6"); //All are executed, so no error in code
}
start();
<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
uniform vec2 u_resolution;
uniform vec2 u_translation;
uniform vec2 u_rotation;
void main()
{
vec2 rotatedPosition = vec2(
a_position.x * u_rotation.y + a_position.y * u_rotation.x,
a_position.y * u_rotation.y - a_position.x * u_rotation.x);
// Add in the translation.
vec2 position = rotatedPosition + u_translation;
// convert the position from pixels to 0.0 to 1.0
vec2 zeroToOne = position / u_resolution;
// convert from 0->1 to 0->2
vec2 zeroToTwo = zeroToOne * 2.0;
// convert from 0->2 to -1->+1 (clipspace)
vec2 clipSpace = zeroToTwo - 1.0;
gl_Position = vec4(clipSpace, 0, 1);
}
</script>
<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 u_color;
void main()
{
gl_FragColor = u_color;
}
</script>
<div style="text-align: center">
<canvas id="canvas" width="512" height="512"></canvas>
</div>
这段代码有什么问题？有没有逻辑错误。如何显示动画对象？
因此，当我 运行 你的代码和我检查 Web Console/Error 控制台时，无论它在你选择的浏览器中调用什么，我都会收到这些错误
WebGL: INVALID_VALUE: getAttribLocation: no object or object deleted
WebGL: INVALID_VALUE: getUniformLocation: no object or object deleted
WebGL: INVALID_VALUE: getUniformLocation: no object or object deleted
WebGL: INVALID_VALUE: getUniformLocation: no object or object deleted
WebGL: INVALID_VALUE: getUniformLocation: no object or object deleted
WebGL: INVALID_VALUE: enableVertexAttribArray: index out of range
WebGL: INVALID_VALUE: vertexAttribPointer: index out of range
WebGL: INVALID_OPERATION: drawArrays: no valid shader program in use
查看代码时，我看到的第一个问题是您使用了很多全局变量。所有这些错误的具体原因是你有这条线
program = createProgram(gl, vertexShader, fragmentShader);
但是 createProgram 没有 return 任何东西，所以在那行 program = undefined 之后，所有使用 program 的代码部分都失败了。
所以，添加
return program;
到 createProgram 结束，所有错误都消失了。
之后 setGeometry 中的 size1 设置为 0.5，然后除以 2，因此它试图绘制 1/2 像素。将其更改为
var size1 = 10;
我看到绘制了一个 10 像素的蓝绿色正方形。
另请注意，您可能会发现使用 console.log(msg) 比 alert(msg) 更好。您不必单击即可查看每个结果，但必须打开 JavaScript Console/Web 控制台才能查看消息。在 Chrome 中是查看->开发人员->JavaScript 控制台。在 Firefox 中，它是工具->Web 开发人员->Web 控制台。在 Safari 中，您首先要在 Safari 的首选项中启用开发人员菜单，方法是 Safari->首选项->高级->在菜单栏中显示开发菜单。完成后，它是 Develop->Show Error Console
我是 webGL 初学者，我必须显示多个动画对象。我已经写了代码。它运行没有错误。我的意思是它在 start() 函数中打印所有警报测试用例，直到 alert("I am executed6"); 但它仍然在浏览器中不显示任何内容。
我想要的是使用两个带动画的三角形来显示矩形。但它根本不显示矩形。
我的完整代码是：
var gl;
function initGL()
{
// Get A WebGL context
var canvas = document.getElementById("canvas");
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if (!gl)
{
return;
}
}
var positionLocation;
var resolutionLocation;
var colorLocation;
var translationLocation;
var rotationLocation;
var translation = [50, 50];
var rotation = [0, 1];
var angle = 0;
function initShaders()
{
// setup GLSL program
vertexShader = document.getElementById("2d-vertex-shader").firstChild.nodeValue;
// vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
fragmentShader = document.getElementById("2d-fragment-shader").firstChild.nodeValue;
// fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);
// look up where the vertex data needs to go.
positionLocation = gl.getAttribLocation(program, "a_position");
// lookup uniforms
resolutionLocation = gl.getUniformLocation(program, "u_resolution");
colorLocation = gl.getUniformLocation(program, "u_color");
translationLocation = gl.getUniformLocation(program, "u_translation");
rotationLocation = gl.getUniformLocation(program, "u_rotation");
// set the resolution
gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
}
function createProgram(gl,vertexShader, fragmentShader)
{
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, vertexShader);
gl.compileShader(vs);
if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
alert(gl.getShaderInfoLog(vs));
//////
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, fragmentShader);
gl.compileShader(fs);
if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))
alert(gl.getShaderInfoLog(fs));
program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS))
alert(gl.getProgramInfoLog(program));
}
function initBuffers()
{
// Create a buffer.
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
// Set Geometry.
setGeometry(gl);
}
function setColor(red, green, blue)
{
gl.uniform4f(colorLocation, red, green, blue, 1);
}
// Draw the scene.
function drawScene()
{
// Clear the canvas.
gl.clear(gl.COLOR_BUFFER_BIT);
// Set the translation.
gl.uniform2fv(translationLocation, translation);
// Set the rotation.
gl.uniform2fv(rotationLocation, rotation);
// Draw the geometry.
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
// Fill the buffer with the values that define a letter 'F'.
function setGeometry(gl)
{
var size1 = 0.5;
/*Assume size1 is declared*/
var vertices = [
-size1 / 2, -size1 / 2,
-size1 / 2, size1 / 2,
size1 / 2, size1 / 2,
size1 / 2, size1 / 2,
size1 / 2, -size1 / 2,
-size1 / 2, -size1 / 2];
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array(vertices),
gl.STATIC_DRAW);
}
function animate()
{
translation[0] += 0.01;
translation[1] += 0.01;
angle += 0.01;
rotation[0] = Math.cos(angle);
rotation[1] = Math.sin(angle);
}
function tick()
{
// requestAnimFrame(tick);
drawScene();
animate();
}
function start()
{
alert("I am executed1");
initGL();
alert("I am executed2");
initShaders();
alert("I am executed3");
initBuffers();
alert("I am executed4");
setColor(0.2, 0.5, 0.5);
alert("I am executed5");
tick();
alert("I am executed6"); //All are executed, so no error in code
}
start();
<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
uniform vec2 u_resolution;
uniform vec2 u_translation;
uniform vec2 u_rotation;
void main()
{
vec2 rotatedPosition = vec2(
a_position.x * u_rotation.y + a_position.y * u_rotation.x,
a_position.y * u_rotation.y - a_position.x * u_rotation.x);
// Add in the translation.
vec2 position = rotatedPosition + u_translation;
// convert the position from pixels to 0.0 to 1.0
vec2 zeroToOne = position / u_resolution;
// convert from 0->1 to 0->2
vec2 zeroToTwo = zeroToOne * 2.0;
// convert from 0->2 to -1->+1 (clipspace)
vec2 clipSpace = zeroToTwo - 1.0;
gl_Position = vec4(clipSpace, 0, 1);
}
</script>
<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 u_color;
void main()
{
gl_FragColor = u_color;
}
</script>
<div style="text-align: center">
<canvas id="canvas" width="512" height="512"></canvas>
</div>
这段代码有什么问题？有没有逻辑错误。如何显示动画对象？
因此，当我 运行 你的代码和我检查 Web Console/Error 控制台时，无论它在你选择的浏览器中调用什么，我都会收到这些错误
WebGL: INVALID_VALUE: getAttribLocation: no object or object deleted
WebGL: INVALID_VALUE: getUniformLocation: no object or object deleted
WebGL: INVALID_VALUE: getUniformLocation: no object or object deleted
WebGL: INVALID_VALUE: getUniformLocation: no object or object deleted
WebGL: INVALID_VALUE: getUniformLocation: no object or object deleted
WebGL: INVALID_VALUE: enableVertexAttribArray: index out of range
WebGL: INVALID_VALUE: vertexAttribPointer: index out of range
WebGL: INVALID_OPERATION: drawArrays: no valid shader program in use
查看代码时，我看到的第一个问题是您使用了很多全局变量。所有这些错误的具体原因是你有这条线
program = createProgram(gl, vertexShader, fragmentShader);
但是 createProgram 没有 return 任何东西，所以在那行 program = undefined 之后，所有使用 program 的代码部分都失败了。
所以，添加
return program;
到 createProgram 结束，所有错误都消失了。
之后 setGeometry 中的 size1 设置为 0.5，然后除以 2，因此它试图绘制 1/2 像素。将其更改为
var size1 = 10;
我看到绘制了一个 10 像素的蓝绿色正方形。
另请注意，您可能会发现使用 console.log(msg) 比 alert(msg) 更好。您不必单击即可查看每个结果，但必须打开 JavaScript Console/Web 控制台才能查看消息。在 Chrome 中是查看->开发人员->JavaScript 控制台。在 Firefox 中，它是工具->Web 开发人员->Web 控制台。在 Safari 中，您首先要在 Safari 的首选项中启用开发人员菜单，方法是 Safari->首选项->高级->在菜单栏中显示开发菜单。完成后，它是 Develop->Show Error Console