我是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>
此代码有什么问题？有任何逻辑错误。如何显示动画对象？
答案 0 :(得分：1)
因此，当我运行您的代码并检查Web控制台/错误控制台时，无论您在所选浏览器中调用它，我都会收到这些错误
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在该行program = undefined之后没有返回任何内容，并且使用program的代码的所有部分都失败了。
所以，添加
return program;
到createProgram的末尾所有错误都消失了。
之后size1中的setGeometry设置为0.5，然后除以2，这样它就会尝试绘制1/2像素。将其更改为
var size1 = 10;
我看到一个10像素的蓝绿色正方形被绘制。
另请注意，您可能会发现console.log(msg)优于alert(msg)。您无需单击即可查看每个结果，但必须打开JavaScript控制台/ Web控制台才能查看消息。 Chrome浏览器中的View-＆gt; Developer-＆gt; JavaScript控制台。在Firefox中，它是Tools-＆gt; Web Developer-＆gt; Web控制台。在Safari中，您首先要在Safari的首选项中启用开发人员菜单，然后在菜单栏中的Safari-＆gt; Preferences-＆gt; Advanced-＆gt; Show Develop菜单下启用。一旦你完成了它，它就是开发 - >显示错误控制台