WebGL初学：使用WebGL绘制一个点-526互联

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用WebGL绘制一个点</title>
</head>

<body>
    <!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
    <canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>


    <script>
        //通过getElementById()方法获取canvas画布
        var canvas = document.getElementById('webgl');
        //通过方法getContext()获取WebGL上下文
        //返回对象具有一系列绘制渲染三维场景的方法，也就是WebGL API。
        var gl = canvas.getContext('webgl');

        //顶点着色器源码
        var vertexShaderSource = '' +
            'void main(){' +
            //给内置变量gl_PointSize赋值像素大小
            '   gl_PointSize=20.0;' +
            //顶点位置，位于坐标原点
            '   gl_Position =vec4(0.0,0.0,0.0,1.0);' +
            '}';

        //片元着色器源码
        var fragShaderSource = '' +
            'void main(){' +
            //定义片元颜色
            '   gl_FragColor = vec4(1.0,0.0,0.0,1.0);' +
            '}';

        //初始化着色器
        var program = initShader(gl, vertexShaderSource, fragShaderSource);
        
        //开始绘制，显示器显示结果
        gl.drawArrays(gl.POINTS, 0, 1);

        //声明初始化着色器函数
        function initShader(gl, vertexShaderSource, fragmentShaderSource) {
            //创建顶点着色器对象
            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);

            //创建程序对象program
            var program = gl.createProgram();
            //附着顶点着色器和片元着色器到program
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            //链接program
            gl.linkProgram(program);
            //使用program
            gl.useProgram(program);
            //返回程序program对象
            return program;
        }
    </script>
</body>

</html>
WebGL
webgl3d