读书笔记：webGL编程指南

最新推荐文章于 2023-12-12 10:36:44 发布

小pudding

最新推荐文章于 2023-12-12 10:36:44 发布

阅读量170

点赞数

文章标签： javascript webgl

本文链接：https://blog.csdn.net/qq_44102239/article/details/108760023

版权

第二章：入门

canvas标签的使用

通过实例说明：

在浏览器上绘制一个蓝色的矩形，关键点：

在HTML中定义canvas标签，用id标记它。
在HTML中插入js脚本，指定Body的Load函数。
在js脚本中获取canvas元素。
向该元素请求二维图形的“绘图上下文”。
在绘图上下文上调用相应的绘图函数，绘制二维图形。

两个文件分别命名为canvas.html, canvas.js。

<html>
    <head>
        <title>Test canvas</title>
    </head>
    <body onload="main()">
        <canvas id="example" width="400" height="400"></canvas>
        <script src="canvas.js"></script>
    </body>
</html>

function main(){
    var canvas=document.getElementById('example');
    if(!canvas){
        console.log('can not find canvas');
        return;
    }

    //获取绘图上下文
    var ctx=canvas.getContext('2d');

    //绘制蓝色矩形
    //指定蓝色
    ctx.fillStyle='rgba(0,0,255,1.0)';
    //用颜色填充
    ctx.fillRect(120,10,150,150);
}

在这里插入图片描述

Hello webGL

实例：
用背景色清空canvas标签的绘图区。（实际上达成了用背景色填充绘图区的效果）
关键点：

获取canvas元素
获取webGL绘图上下文
设置背景色
清空canvas

<html>
    <head>
        <title>Hello WebGL</title>
    </head>
    <body onload="main()">
        <canvas id="webgl" width="400" height="400"></canvas>
    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <script src="canvas.js"></script>
    </body>
</html>

function main(){
    var canvas=document.getElementById('webgl');

    //获取WebGl绘图上下文
    var gl=getWebGLContext(canvas);
    if(!gl){
        console.log('failed to get WebGL context');
        return;
    }
    
    //指定清空canvas的颜色
    gl.clearColor(0,0,0,1);

    //清空canvas
    gl.clear(gl.COLOR_BUFFER_BIT);
}

这就是最简单的webGL程序了，通过网站链接获得必要的依赖，并调整引用路径。
在这里插入图片描述
注：

为了在不同浏览器通用，作者使用了自定义的getWebGLContext方法，而非canvas.getContext()。
清空canvas使用了gl.clear(gl.COLOR_BUFFER_BIT); 这看似与canvas无关，实际上参数gl.COLOR_BUFFER_BIT在告诉webGL，清空颜色缓冲区（而不是其他），这将导致canvas区域颜色被清空。

绘制一个点

实例：
在原点绘制一个10像素大小的红点。
本节开始使用着色器，webGL要求两种着色器：

顶点着色器：描述顶点特性，比如位置，颜色
片元着色器：片元是图形绘制的单元。进行逐片元处理过程。

执行过程：浏览器执行js程序，执行webGL相关方法，两个着色器工作，逐顶点，逐片元操作，渲染到颜色缓冲器，显示。
关键点：

获取canvas元素
获取webGL绘图上下文
初始化着色器
设置背景色
清空canvas
绘图

<html>
    <head>
        <title>RED POINT</title>
    </head>
    <body onload="main()">
        <canvas id="webgl" width="400" height="400"></canvas>
    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <script src="canvas.js"></script>
    </body>
</html>

//顶点着色器
var VSHADER_SOURCE = 
  'void main() {\n' +
  '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // 坐标
  '  gl_PointSize = 10.0;\n' +                    // 点大小
  '}\n';

// 片元着色器
var FSHADER_SOURCE =
  'void main() {\n' +
  '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // 颜色
  '}\n';

function main(){
    var canvas=document.getElementById('webgl');

    var gl=getWebGLContext(canvas);
    if(!gl){
        console.log('failed to get webgl context');
        return;
    }

    //初始化着色器
    if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
        console.log('failed to init shaders');
    }

    //设置canvas的背景色
    gl.clearColor(0,0,0,1);

    //清空canvas
    gl.clear(gl.COLOR_BUFFER_BIT);

    //绘制点
    gl.drawArrays(gl.POINTS,0,1);

}

应该实际键入一下代码，没有联想输入是比较容易出错的。
注：

initShaders()将字符串形式的着色器代码传给WebGL，并建立着色器，它将运行在WebGL系统中（而非js程序中）。
WebGL程序包括运行在浏览器中的js程序和运行在WebGL系统中的着色器程序，他们是协同运行的。
与js不同，着色器语言是强类型的，因此，你不能在要求10.0的地方，使用10来代替！
齐次坐标：你注意到点坐标是四维的，这是齐次坐标。四维的(x, y, z, w)等效于三维(x/w, y/w, z/w)，为了方便用矩阵乘法描述顶点变换而引入。
片元可以理解为显示在屏幕上一个像素，本节中它控制了颜色。片元着色器在顶点着色器执行完毕后执行，获取顶点着色器赋值的gl_Position, gl_PointSize。
gl.draws(mode,first,count) mode: 绘制模式/形状，first：从哪个顶点开始绘制，count: 绘制需要用到多少个顶点。在绘制过程中，顶点着色器执行count次。
webGL默认的z轴，从纸面向外为z增加方向。

从js向着色器传递数据

待续

个人笔记，仅供参考，如有错误，恳请在评论区指出。

小pudding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
读书笔记：webGL编程指南

第二章：入门canvas标签的使用通过实例说明：在浏览器上绘制一个蓝色的矩形，关键点：在HTML中定义canvas标签，用id标记它。在HTML中插入js脚本，指定Body的Load函数。在js脚本中获取canvas元素。向该元素请求二维图形的“绘图上下文”。在绘图上下文上调用相应的绘图函数，绘制二维图形。两个文件分别命名为canvas.html, canvas.js。<html> <head> <title>Test ca
复制链接

扫一扫