美文网首页
《WebGL编程指南》学习笔记1——WebGL概述

《WebGL编程指南》学习笔记1——WebGL概述

作者: 小鸟游露露 | 来源:发表于2021-01-27 11:45 被阅读0次

    本系列仅作为本人学习《WebGL编程指南》这本书的笔记所用


    clipboard.png

    GLSL ES(着色器代码)是以字符串形式在js中编写
    WebGL程序是使用三种语言开发:HTML、JaveScript、GLSL ES。

    绘制一个点——版本1

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>01描绘一个点1</title>
    
        <script src="./lib/cuon-matrix.js"></script>
        <script src="./lib/cuon-utils.js"></script>
        <script src="./lib/webgl-debug.js"></script>
        <script src="./lib/webgl-utils.js"></script>
    </head>
    <body onload="main()">
        <canvas id="webgl" width="400" height="400">
            不支持canvas的浏览器会展示这段文字
        </canvas>
    
        <script>
            // 顶点着色器程序
            let VSHADER_SOURCE =
            `
            void main() {
                gl_Position = vec4(0.0, 0.0, 0.0, 1.0); // 设置坐标
                gl_PointSize = 10.0; // 设置尺寸
            }
            `;
    
            // 片元着色器程序
            let FSHADER_SOURCE = 
            `
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
            `;
    
            // 主程序
            function main() {
                let canvas = document.getElementById('webgl');
                // 获取WebGL绘图上下文
                let gl = getWebGLContext(canvas);
                if(!gl) {
                    console.error('无法使用WebGL');
                    return;
                }
                // 初始化着色器
                if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
                    console.error('无法使用着色器');
                }
                // 设置<canvas>的背景色
                gl.clearColor(0.0, 0.0, 0.0, 1.0);
    
                // 清空<canvas>
                gl.clear(gl.COLOR_BUFFER_BIT);
    
                // 绘制一个点
                gl.drawArrays(gl.POINTS, 0, 1);
            }
    
            // 片元着色器程序
        </script>
    </body>
    </html>
    
    截图.png
    截图2.png

    顶点着色器:用来描述顶点特性(位置、颜色等)的程序 (顶点-》二维或三维图形的端点或交点)
    指定了点的位置和尺寸。
    片元着色器:进行逐片处理过程如光照等的程序。(片元-》像素,图像测单元)
    指定了点的颜色。

    WebGL程序的结构分析

    1.WebGL程序包括运行在浏览器中的JavaScript 程序和运行在WebGL 系统的着色器程序这两部分。
    2.WebGL程序的基本结构:1.顶点着色器程序。 2.片元着色器程序。 3.主程序。
    3.初始化着色器部分


    截图3.png

    大部分WebGL程序都遵循这样的流程


    截图4.png
    截图5.png

    绘制一个点 —— 版本2

    之后的程序都会以此为基准

    顶点位置从js程序中传入着色器程序
    点的位置和尺寸传入顶点着色器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>02描绘一个点2</title>
    
        <script src="./lib/cuon-matrix.js"></script>
        <script src="./lib/cuon-utils.js"></script>
        <script src="./lib/webgl-debug.js"></script>
        <script src="./lib/webgl-utils.js"></script>
    </head>
    <body onload="main()">
        <canvas id="webgl" width="400" height="400">
            不支持canvas的浏览器会展示这段文字
        </canvas>
    
        <script>
            // 顶点着色器程序==============
            let VSHADER_SOURCE =
            `
            attribute vec4 a_Position;
            attribute float a_PoinSize;
            void main() {
                gl_Position = a_Position; // 设置坐标
                gl_PointSize = a_PoinSize; // 设置尺寸
            }
            `;
    
            // 片元着色器程序
            let FSHADER_SOURCE = 
            `
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
            `;
    
            // 主程序
            function main() {
                let canvas = document.getElementById('webgl');
    
                // 获取WebGL绘图上下文
                let gl = getWebGLContext(canvas);
                if(!gl) {
                    console.error('无法使用WebGL');
                    return;
                }
                
                // 初始化着色器
                if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
                    console.error('无法使用着色器');
                }
    
                // 获取attribute 变量的存储位置=======================
                let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
                if (a_Position < 0) {
                    console.log('无法获取 a_Position')
                    return;
                }
                let a_PoinSize = gl.getAttribLocation(gl.program, 'a_PoinSize');
    
                // 将顶点位置传输给attribute 变量=======================
                gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
                gl.vertexAttrib1f(a_PoinSize, 18.0);
                
                // 设置<canvas> 背景色
                gl.clearColor(0.0, 0.0, 0.0, 1.0);
    
                // 清除<canvas>
                gl.clear(gl.COLOR_BUFFER_BIT);
    
                // 绘制一个点
                gl.drawArrays(gl.POINTS, 0, 1);
            }
        </script>
    </body>
    </html>
    

    未完待续。。。

    相关文章

      网友评论

          本文标题:《WebGL编程指南》学习笔记1——WebGL概述

          本文链接:https://www.haomeiwen.com/subject/braozktx.html