正文

webgl入门(一)

譬如朝露 V管理员/ / 0 评论/ 303阅读
03 21 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>
    <canvas id="canvas" width="400" height="400"></canvas>
</body>

<script>
    /** @type {HTMLCanvasElement} */
    const ctx = document.getElementById('canvas');
    const gl = ctx.getContext("webgl")
    const VERTEX_SHADER_SOURCE = `
        void  main(){
            gl_Position=vec4(0.0,0.0,0.0,1.0);
            gl_PointSize=50.0;
        }
    `;
    const FGRAGMENT_SHARDER_SOURCE = `
        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, VERTEX_SHADER_SOURCE)
    gl.shaderSource(fragmentShader, FGRAGMENT_SHARDER_SOURCE)
    //编译着色器
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);
    //创建程序对象
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader)
    gl.attachShader(program, fragmentShader)

    //将js与webgl进行关联
    gl.linkProgram(program);
    //使用程序对象
    gl.useProgram(program)
    //执行绘制  gl.POINTS类型，0代表从那个开始，1代表几个顶点
    gl.drawArrays(gl.POINTS, 0, 1)
</script>

</html>


文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。