用webgl绘制一个点
2018-03-27 本文已影响8人
狂暴机甲
绘制一个红色的点，大小20px*20px。
首先我们使用canvas实现一下，只要绘制出一个矩形就可以了，主代码只有三行。
1、 获取canvas 2d上下文。
2、 设置填充颜色红色。
3、 绘制矩形，这里使用了绘制矩形的方法。
canvas代码：
var context = document.getElementById('canvas').getContext('2d');
context.fillStyle = "#ff0000";
context.fillRect(240,240,20,20);
然后使用webgl绘制出同样的效果。主代码有30行，差别还是非常大的。
webgl代码：
<!--2018年3月27日-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用webgl绘制一个点</title>
</head>
<body>
<canvas id="canvas" width="500" height="500" style="background-color: #555555"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('canvas').getContext('webgl');
var vertexShaderSource = "" +
"attribute vec4 aPos;" +
"void main(){" +
"gl_Position = aPos;" +
"gl_PointSize = 20.0;" +
"}";
var fragmentShaderSource = "" +
"void main(){" +
"gl_FragColor = vec4(1.0,0.0,0.0,1.0);" +
"}";
function iniShaders(gl,vertexShaderSource,fragmentShaderSource) {
var program = gl.createProgram();
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertexShader,vertexShaderSource);
gl.shaderSource(fragmentShader,fragmentShaderSource);
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
gl.attachShader(program,vertexShader);
gl.attachShader(program,fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
return program;
}
var program = iniShaders(ctx,vertexShaderSource,fragmentShaderSource);
var aPoLocation = ctx.getAttribLocation(program,'aPos');
ctx.vertexAttrib4f(aPoLocation,0.0,0.0,1.0,1.0);
ctx.drawArrays(ctx.POINTS,0,1);
</script>
</body>
</html>
最终效果，两者完全一样。
红色点.png
