我对webgl和图形完全陌生。对于我的生活，我不知道我在哪里做错了，由于某种原因，我不能找到所有的帮助webgl在线。所以我希望你们中的一些人能告诉我我到底做错了什么。因为我已经盯着这个看了4个小时了，我想我快把自己吓坏了。
var gl;
var numPoints = 5000;
var points;
window.onload = function init()
{
var canvas = document.getElementById("canvas");
gl = WebGLUtils.setupWebGL( canvas );
if(!gl)
{
alert("WebGL is not available");
}
var vertices =
[
vec2(-1.0, -1.0),
vec2(0.0, 1.0),
vec2(1.0, -1.0)
];
var u = scale(0.5, add(vertices[0], vertices[1]));
var v = scale(0.5, add(vertices[0], vertices[2]));
var p = scale(0.5, add(u, v));
points = [p];
for(var i = 0; points.length < numPoints; ++i)
{
var j = Math.floor(Math.random() * 3);
p = add(points[i], vertices[j]);
p = scale(0.5, p);
points.push(p);
}
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(1.0, 1.0, 1.0, 1.0);
var program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW);
var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
render();
};
function render()
{
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, points.length);
}
function triangle(a, b, c)
{
points.push(a, b, c);
}
var ab = mix(a, b, 0.5);
var ac = mix(a, c, 0.5);
var bc = mix(b, c, 0.5);
function divideTriangle(a, b, c, count)
{
if(count == 0)
{
triangle(a, b, c);
}
else
{
var ab = mix(0.5, a, b);
var ac = mix(0.5, a, c);
var bc = mix(0.5, b, c);
--count;
divideTriangle(a, ab, ac, count);
divideTriangle(c, ac, bc, count);
divideTriangle(b, bc, ab, count);
}
}<!DOCTYPE html>
<html>
<!-- SHADERS -->
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void
main()
{
gl_PointSize = 1.0;
gl_Position = vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void
main()
{
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>
<!-- END SHADERS -->
<!-- INCLUDE SCRIPTS -->
<script type ="javascript" src="C:UserskepheDesktopCSU Global Classes And DocumentsGraphics and Visualization CSC405utilitieswebgl-utils.js"></script>
<script type ="javascript" src="C:UserskepheDesktopCSU Global Classes And DocumentsGraphics and Visualization CSC405utilitiesInitShaders.js"></script>
<script type ="javascript" src="C:UserskepheDesktopCSU Global Classes And DocumentsGraphics and Visualization CSC405utilitiesMV.js"></script>
<script type ="javascript" src="C:UserskepheDesktopCSU Global Classes And DocumentsGraphics and Visualization CSC405week2week2Pagegasket1.js"></script>
<!-- END INCLUDE SCRIPTS -->
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<h1>Sierpinksi Gasket</h1>
</head>
<body>
<canvas id="canvas" width="512" height="512">
<!-- Browser error if browser does not support canvas element. -->
Sorry; your web browser does not support HTML5's canvas element.
</canvas>
</body>
</html>与其直接得到答案，我认为最好是自学如何解决这些问题。找出你所做的所有假设，并对每个假设进行测试。我想:
- 使用Chrome浏览器进行调试
- 按F12查看所有警告和错误
- 在固定位置创建一个硬编码三角形，以排除三角形创建过程中的错误。
你知道"相机"在哪里吗?在webgl环境中?有一个公平的机会，三角形被创建在相机的上方，后方，下方，侧面，使他们不可见。
以相对路径加载源文件。(只要把它们和HTML放在同一个文件夹中，在script标签中只提到文件名。
如果你的目标只是在浏览器中显示一个三角形网格，而不了解webgl的基础知识，我会推荐优秀的库ThreeJS。您在脚本中所做的事情也可以在三个js中实现，并且有许多示例可用。