console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script id="v-shader" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;
        attribute vec3 aColor;
        varying vec4 vColor;
        uniform float theta;
        void main(){
            gl_Position.x = cos(theta)*aVertexPosition.x - aVertexPosition.y * sin(theta);
            gl_Position.y = aVertexPosition.x * sin(theta) + aVertexPosition.y * cos(theta);
            gl_Position.z = aVertexPosition.z;
            gl_Position.w = 1.0;
            vColor = vec4(aColor, 1.0);
        }
    </script>
    <script id="f-shader" type="x-shader/x-fragment">
        precision mediump float;
        varying vec4 vColor;
        void main(){
            gl_FragColor = vColor;
        }
    </script>
    <script type="text/javascript">
        //定义canvas
        var canvas;
        //定义gl对象
        var gl;
        //定义program装载shader
        var shaderProgram;
        //定义buffer存储节点
        var vertexBuffer;

        var theta = 0.0;

        function setup() {
            //创建webgl上下文
            canvas = document.getElementById('mycanvas');
            gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
            if (!gl) {
                alert('浏览器不支持webgl');
                return null;
            }

            var vertexShaderSoucre = document.getElementById('v-shader').innerText;
            var fragmentShaderSource = document.getElementById('f-shader').innerText;
            //创建shader，加载shader源码，编译shader
            var vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, vertexShaderSoucre);
            gl.compileShader(vertexShader);
            if (!gl.getShaderParameter(vertexShader,gl.COMPILE_STATUS)) {
                alert('节点着色器编译失败');
                return null;
            }

            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, fragmentShaderSource);
            gl.compileShader(fragmentShader);
            if (!gl.getShaderParameter(fragmentShader,gl.COMPILE_STATUS)) {
                alert('片元着色器编译失败');
                return null;
            }

            //创建程序对象，往程序对象添加着色器,链接程序对象，启用程序对象
            shaderProgram = gl.createProgram();
            gl.attachShader(shaderProgram, vertexShader);
            gl.attachShader(shaderProgram, fragmentShader);

            gl.linkProgram(shaderProgram);

            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
                alert('程序连接错误！');
                return null;
            }
            gl.useProgram(shaderProgram);


            var vertices = [
                0.0, 1.0, 0.0,
                -1.0, -1.0, 0.0,
                1.0, -1.0, 0.0
            ];
            var verticesColors = [
                1.0, 0.0, 0.0,
                0.0, 1.0, 0.0,
                0.0, 0.0, 1.0
            ];
            //创建节点缓存,绑定缓存数据类型，把数据填充到缓冲中
            vertexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            gl.vertexAttribPointer(gl.getAttribLocation(shaderProgram, 'aVertexPosition'), 3, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(gl.getAttribLocation(shaderProgram, 'aVertexPosition'));

            var vertexBuffer2 = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer2);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesColors), gl.STATIC_DRAW);
            gl.vertexAttribPointer(gl.getAttribLocation(shaderProgram, 'aColor'), 3, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(gl.getAttribLocation(shaderProgram, 'aColor'));

            draw()
        }

        function draw() {

            //设置视窗，指定清空颜色及缓存类型，指定节点属性下标位置，开启节点属性，绘制
            gl.viewport(0, 0, canvas.width, canvas.height);
            gl.clearColor(0.2, 0.2, 0.2, 1.0);

            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            theta += 0.01;
            gl.uniform1f(gl.getUniformLocation(shaderProgram, 'theta'), theta);

            gl.drawArrays(gl.TRIANGLES, 0, 3);

            window.requestAnimationFrame(draw);
        }

        window.onload = function () {
            setup()
        };
    </script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
</html>