WebGL学习(2) - 绘制一个点

绊倒帕萨特

于 2021-12-25 14:01:41 发布

阅读量462

点赞数

文章标签： webgl

本文链接：https://blog.youkuaiyun.com/wuyutaoktm/article/details/122142716

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>Document</title>
</head>
<body onload="main()">
    <script src="demo.js"></script>
</body>
</html>

function main() {
    const canvas = document.createElement('canvas');
    canvas.width = 300;
    canvas.height = 300;
    document.getElementsByTagName('body')[0].appendChild(canvas);

    const gl = canvas.getContext('webgl');
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    const VS = `void main() {
                    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
                    gl_PointSize = 10.0;
                }`;

    const FS = `void main() {
                    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
                }`;
    
    var vshader = gl.createShader(gl.VERTEX_SHADER);        
    gl.shaderSource(vshader, VS);        
    gl.compileShader(vshader);    
     
    var fshader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fshader, FS);
    gl.compileShader(fshader);
      
    var program = gl.createProgram();
    gl.attachShader(program, vshader);
    gl.attachShader(program, fshader); 
    gl.linkProgram(program);
    gl.useProgram(program);

    gl.drawArrays(gl.POINTS, 0, 1);
}