使用Javascript, WebGL和HTML绘制正方形
Drawing a square using Javascript, WebGL and HTML
大家好,我正在学习Edward Angel的《互动3D图形导论》。我想做一个递归迷宫但首先我需要做一个基本的正方形。我在书的脚本上建模了这个脚本,用于一个sierpinski垫圈。我已经在这几个小时,只是不知道我做错了什么。HTML页面将只显示一行。我尝试了不同类型的顶点joiner,如LINES LINE_LOOP POLYGON,但我似乎不能让它工作。请帮帮我,我觉得我快疯了。脚本如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Maze Sierpinski Gasket</title>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void
main()
{
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>
<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script>
//goal: try and draw just a square.
var canvas;
var gl;
var points = [];
window.onload = function init()
{
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
//enter new script
var vertices = [
vec2(-1.0,-1.0),
vec2(-1.0,1.0),
vec2(1.0,1.0),
vec2(1.0,-1.0)
];
square(vertices[0],vertices[1],vertices[2],vertices[3]);
//
// Configure WebGL
//
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
// Load shaders and initialize attribute buffers
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
// Load the data into the GPU
var bufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
gl.bufferData( gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW );
// Associate out shader variables with our data buffer
var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
render();
};
function square(a,b,c,d)
{
points.push(a);
points.push(b);
points.push(c);
points.push(d);
}
function render(){
gl.clear( gl.COLOR_BUFFER_BIT );
gl.drawArrays(gl.LINES, 0, points.length);
}
</script>
</head>
<body>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>
2 issue
-
假设
flatten
的标准实现返回JavaScript原生数组,但gl.bufferData
需要类型数组。我把它改成gl.bufferData(..., new Float32Array(flatten(...)), ...
-
gl.LINES
绘制每对点。你只进了4个点,也就是2条线。你不会得到一个正方形。您可以使用gl.LINE_LOOP
将所有4个点以及最后一个点连接到第一个点。
另外,当我运行你的代码时,我在JavaScript控制台得到了错误,这帮助我找到了问题。你应该经常检查JavaScript控制台是否有错误和警告。
//goal: try and draw just a square.
var canvas;
var gl;
var points = [];
function init()
{
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
//enter new script
var vertices = [
vec2(-1.0,-1.0),
vec2(-1.0,1.0),
vec2(1.0,1.0),
vec2(1.0,-1.0)
];
square(vertices[0],vertices[1],vertices[2],vertices[3]);
//
// Configure WebGL
//
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
// Load shaders and initialize attribute buffers
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
// Load the data into the GPU
var bufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array(flatten(points)), gl.STATIC_DRAW );
// Associate out shader variables with our data buffer
var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
render();
};
function square(a,b,c,d)
{
points.push(a);
points.push(b);
points.push(c);
points.push(d);
}
function render(){
gl.clear( gl.COLOR_BUFFER_BIT );
gl.drawArrays(gl.LINE_LOOP, 0, points.length);
}
// ---------------[ missing functions ] ---------
var WebGLUtils = {
setupWebGL: function(canvas) {
return canvas.getContext("webgl");
},
};
function initShaders(gl, vs, fs) {
return twgl.createProgramFromScripts(gl, [vs, fs]);
}
function vec2(x, y) {
return [x, y];
}
function flatten(arrayOfArrays) {
var flattened = arrayOfArrays.reduce(function(a, b) {
return a.concat(b);
}, []);
return flattened;
}
init();
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void
main()
{
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>
<script src="https://twgljs.org/dist/twgl.min.js"></script>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
相关文章:
- 如何在javascript中在图像上绘制图像(没有CSS和HTML)
- Html画布绘制速度因画布元素过多而减慢
- 使用缩放脚本化事件绘制 HTML 图表
- 尝试将无符号长整型的 ARGB 数据绘制到 HTML 画布
- 未捕获的类型错误:对象#<HTML对象元素>没有方法'重新绘制工作流'
- html画布绘制图像不起作用
- 在html画布中绘制更平滑的路径
- 如何将Jqplot绘制到HTML画布中
- HTML画布图像-在页面中绘制多画布图像
- 从 html 输入值绘制圆圈
- HTML 5 画布似乎重新绘制了已删除的部分
- 使用 HTML 和 JavaScript 绘制表格
- 绘制大量线条时的 HTML 画布性能
- 在HTML 5 / Javascript Teechart上绘制矩形
- JavaScript - 在高负载脚本执行之前绘制 html-mask
- 使用Php和Html绘制图表,使用Canvas.js使用mysql数据库
- 使用Javascript, WebGL和HTML绘制正方形
- 使用HTML 5绘制画布
- HTML绘制流程图
- 将 HTML 绘制到画布