WebGL 代码不工作 - 空白页

Question

最近几天我开始使用 WebGL 和 javascript，我偶然发现了一个我不知道如何解决的问题 solve.I 不知道为什么，但是每次我尝试运行这个程序时，一个 html 打开时什么也没有，除非一个空白的 page.The 程序应该在我点击屏幕时绘制点。

 //ClickedPoints.js
 //Vertex shader program


 var VSHADER_SOURCE =
   'attribute vec4 a_Position;\n' +
   'void main() {\n' +
   ' gl_Position = a_Position;\n' +
   ' gl_PointSize= 10.0; \n' +
   '}\n';

 //Fragment shader program

 var FSHADER_SOURCE =
   'void main() {\n' +
   'gl_FragColor= vec4(1.0,0.0,0.0,1.0);\n' +
   '}\n';

 function main() {

   //Retrieve <canvas> element

   var canvas = document.getElementById('webgl');

   //Get the rendering context for WebGL

   var gl = getWebGLContext(canvas);

   if (!gl) {
     console.log('Failed to get the rendering context for WebGL');
     return;
   }

   //Initialize shaders

   if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
     console.log('Failed to initialize shaders');
     return;
   }

   //Get the storage location of attribute variable

   var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

   if (a_Position < 0) {
     console.log('Failed to get the storage location of a_Position');
     return;
   }

   //Register function (event handler) to be called on a mouse press

   canvas.onmousedown = function(ev) {
     click(ev, gl, canvas, a_Position);
   };

   gl.clearColor(0.0, 0.0, 0.0, 0.0)


   //Clear <canvas>

   gl.Clear(gl.COLOR_BUFFER_BIT);

 }

 var g_points = []; //The array for a mouse press

 function click(ev, gl, canvas, a_Position) {

   var x = ev.clientX; //x coordinate of a mouse pointer
   var y = ev.clientY; //y coordinate of a mouse pointer
   var rect = ev.target.getBoundingClientRect(); //getting the location of canvas, including its start point

   x = ((x - rect.left) - canvas.width / 2) / (canvas.width / 2); //adjusting the x and y axis in these two lines
   y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2);

   //Store the coordinates to g_points array

   gpoints.push(x);
   gpoints.push(y);

   //Clear <canvas>

   gl.Clear(gl.COLOR_BUFFER_BIT);

   var len = g_points.length; //the lenght of the array for the times the mouse was pressed

   for (var i = 0; i < len; i += 2) {

     //Pass the position of a point to a_Position variable

     gl.vertexAttrib3f(a_Position, g_points[i], g_points[i + 1], 0.0);

     //Draw a point

     gl.drawArrays(gl.POINTS, 0, 1);
   }
 }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Draw points with mouse click</title>
</head>

<body onload="main()">
  <canvas id="webgl" width="400" height="400">
    Please use a browser that supports "canvas"
  </canvas>

  <script src="webgl-utils.js"></script>
  <script src="webgl-debug.js"></script>
  <script src="cuon-utils.js"></script>
  <script src="ClickedPoints2.js"></script>

</body>

</html>

Answer 1

您可能会发现使用浏览器内置的 JavaScript DevTools 很有帮助。所有浏览器都有它们。 Here's Chrome's。

特别是你想要 JavaScript console.

如果你在那里看过，你会看到几个错误，比如

Uncaught TypeError: gl.Clear is not a function

因为它是 clear 而不是 Clear

还有

Uncaught ReferenceError: gpoints is not defined

因为你上面定义的是g_points不是gpoints

此外，initScripts 正在做一些可怕的事情。它正在创建一个 WebGL 着色器程序并将其附加到 WebGLRenderingContext 对象，方法是

gl.program = someProgram

我可以看出是这种情况，因为您的代码显示

var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

为什么这么糟糕？因为大多数 WebGL 应用程序都有多个着色器程序。相反 initScripts 应该 return 一个程序

var program = initScripts(...)

然后你会打电话给

var a_Position = gl.getAttribLocation(program, 'a_Position');

和

gl.useProgram(program);

使用它。

WebGL 代码不工作 - 空白页

WebGL code not working- blank page

webgl