二十三课代码：

`index.html`:

<!doctype html>
<html>

<head>
    <style>
        canvas {
            border: 1px solid #000000;
        }
    </style>
    <script type="text/javascript" src="models_point.js"></script>
    <script type="text/javascript" src="models_tri.js"></script>

</head>

<body>
    <p>
        <b>scale value:</b>
        <input id="scalex" type="range" min="-2" max="2" value="1" step="0.1" oninput="updatefunc()" />
        <b id="scalevaluex">0</b>
        <input id="scaley" type="range" min="-2" max="2" value="1" step="0.1" oninput="updatefunc()" />
        <b id="scalevaluey">0</b>
    </p>
    <p>
        <b>offset value:</b>
        <input id="offsetx" type="range" min="-1" max="1" value="0" step="0.1" oninput="updatefunc()" />
        <b id="offsetvaluex">0</b>
        <input id="offsety" type="range" min="-1" max="1" value="0" step="0.1" oninput="updatefunc()" />
        <b id="offsetvaluey">0</b>
    </p>

    <p>
        <b>rotate value:</b>
        <input id="rotate" type="range" min="0" max="6.28" value="0" step="0.01" oninput="updatefunc()" />
        <b id="rotatevalue">0</b>
    </p>

    <canvas id="tri" style="width:300px; height:300px">
    </canvas>
    <script id="vertex_shader" type="myshader">
        // Vertex Shader
        precision mediump int;
        precision mediump float;
        
        uniform mat3 u_all;

        varying float color;

        attribute vec2 a_PointVertex;

        void main() {
          vec3 coord = u_all * vec3(a_PointVertex, 1.0);
          if (a_PointVertex.y > 0.0)
          {
            color = 1.0;
          }
          else
          {
            color = 0.0;
          }
          gl_Position = vec4(coord.x, coord.y, 0.0, 1.0);
        }
    </script>
    <script id="fragment_shader" type="myshader">
        // Fragment shader
        precision mediump int;
        precision mediump float;

        varying float color;

        void main() {
        
          gl_FragColor = vec4(color, color, color, 1.0);
        }
        
    </script>
    <script type="text/javascript">
        var pointCanvas = document.getElementById('tri'); // 我们的纸
        var gl = pointCanvas.getContext('webgl', { preserveDrawingBuffer: true }); // 我们的笔
        var A = [0.5, 0];
        var B = [0, 0.5];
        var C = [-0.5, 0];
        var data = GetTri(A, B, C);
        var dataArr = new Float32Array(data);
        var pointCount = 3;
        var buffer_id;
        buffer_id = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer_id);
        gl.bufferData(gl.ARRAY_BUFFER, dataArr, gl.STATIC_DRAW);
        //
        var vertex_shader_code = document.getElementById('vertex_shader').textContent;
        console.log(vertex_shader_code);
        var vertex_shader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertex_shader, vertex_shader_code);
        gl.compileShader(vertex_shader);
        //
        var fragment_shader_code = document.getElementById('fragment_shader').textContent;
        var fragment_shader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragment_shader, fragment_shader_code);
        gl.compileShader(fragment_shader);
        //
        var program = gl.createProgram();
        gl.attachShader(program, vertex_shader);
        gl.attachShader(program, fragment_shader);
        gl.linkProgram(program);
        gl.useProgram(program);
        //
        var a_PointVertex = gl.getAttribLocation(program, 'a_PointVertex');
        gl.vertexAttribPointer(a_PointVertex, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_PointVertex);
        //

    </script>
    <script>
        var u_all_loc = gl.getUniformLocation(program, "u_all");

        var scaleDomX = document.getElementById("scalex");
        var scaleValueDomX = document.getElementById("scalevaluex");
        var scaleDomY = document.getElementById("scaley");
        var scaleValueDomY = document.getElementById("scalevaluey");
        var offsetDomX = document.getElementById("offsetx");
        var offsetValueDomX = document.getElementById("offsetvaluex");
        var offsetDomY = document.getElementById("offsety");
        var offsetValueDomY = document.getElementById("offsetvaluey");

        var rotateDom = document.getElementById("rotate");
        var rotateValueDom = document.getElementById("rotatevalue");

        function genMat3ForGL(a, b, alpha, A, B) {
            let mat3 = [
                a * Math.cos(alpha), a * Math.sin(alpha), 0,
                -b * Math.sin(alpha), b * Math.cos(alpha), 0,
                A, B, 1,
            ];
            return new Float32Array(mat3);
        }

        function updatefunc() {

            gl.uniformMatrix3fv(u_all_loc, false, genMat3ForGL(scaleDomX.value,
                scaleDomY.value, rotateDom.value, offsetDomX.value, offsetDomY.value
            ));

            scaleValueDomX.innerText = scaleDomX.value;
            offsetValueDomX.innerText = offsetDomX.value;
            scaleValueDomY.innerText = scaleDomY.value;
            offsetValueDomY.innerText = offsetDomY.value;
            rotateValueDom.innerText = rotateDom.value;

            gl.enable(gl.CULL_FACE);
            gl.enable(gl.DEPTH_TEST);

            gl.clearColor(0, 0, 0, 0);
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES, 0, pointCount);
        }
        updatefunc();
    </script>
    </script>
</body>

</html>

models_tri.js

function GetTri(A, B, C) {
    return [A[0], A[1], B[0], B[1], C[0], C[1]];
}

二十三课代码(WebGL课程代码专用)

二十三课代码：

`index.html`:

models_tri.js

将上面两个文件放在一个目录里，用任意http服务器监听此目录即可

二十三课代码(WebGL课程代码专用)

二十三课代码：

index.html:

models_tri.js

将上面两个文件放在一个目录里，用任意http服务器监听此目录即可

`index.html`: