用webgl绘制一个点

作者: 狂暴机甲 | 来源:发表于2018-03-27 18:44 被阅读8次

webgl基础图形
用webgl绘制一个点
webgl 缓冲区
TWaver3D直线、曲线、曲面的绘制
用线段绘制球体（three.js webgl_lines_spe
WebGL 绘制Line的bug（一）
webgl 点击绘制点
webgl 绘制多个点
WebGL入门
《WebGL编程指南》学习笔记6——绘制矩形

绘制一个红色的点，大小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