three-shader-lern
/
动态变量.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <canvas id="webgl" width="700" height="700" style="background: #000;"></canvas>
    <script>
        const canvas = document.getElementById('webgl');
        const gl = canvas.getContext('webgl');

        const vertexShaderSource = `
            attribute vec2 aPos;
            void main(){
                gl_PointSize = 20.0;
                gl_Position  = vec4(aPos, 0.0,1.0);
            }
            `;
        const fragShaderSource = `
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `;

        // 创建顶点着色器对象
        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        // 创建片元着色器对象
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        // 引入顶点、片元着色器源码
        gl.shaderSource(vertexShader, vertexShaderSource);
        gl.shaderSource(fragmentShader, fragShaderSource);
       // 编译顶点、片元着色器
       gl.compileShader(vertexShader);
       gl.compileShader(fragmentShader);
       // 创建程序对象 program
        const program = gl.createProgram();
        // 附着顶点着色器和片元着色器到program
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        // 链接program
        gl.linkProgram(program);
        // 使用program
        gl.useProgram(program);

        const posLocation = gl.getAttribLocation(program, 'aPos');
        console.log('posLocation: ', posLocation);
        // 动态赋值
        gl.vertexAttrib2f(posLocation, -0.5, 0.5);
        // 开始绘制，显示器显示结果
        gl.drawArrays(gl.POINTS, 0, 1);

    </script>
</body>

</html>