Question

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

 //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

同样BTW initScripts正在做一些可怕的事情。它创建了一个WebGL着色器程序并通过执行将其附加到WebGLRenderingContext对象

gl.program = someProgram

我可以看到这种情况，因为你有代码

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

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

var program = initScripts(...)

然后你打电话

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

并且

gl.useProgram(program);

使用它。

WebGL代码不是工作空白页面

1 个答案: