美文网首页WebGL
用webgl绘制一个点

用webgl绘制一个点

作者: 狂暴机甲 | 来源:发表于2018-03-27 18:44 被阅读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

    相关文章

      网友评论

        本文标题:用webgl绘制一个点

        本文链接:https://www.haomeiwen.com/subject/sqbscftx.html