[ webGL | 青训营笔记]

51 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天。

一、webGL定义

WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。

二、Modern Graphics System

相关知识

光栅(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的,光栅就是指构成图像的像素阵列

像素(Pixel):一个像素对应图像上的一个点,它通常保存图像上的某个具体位置的颜色等信息。

帧缓存(Frame Buffer):在绘图过程中,像素信息被存放于帧缓存中,帧缓存是一块内存地址。

CPU (Central Processing Unit):中央处理单元,负责逻辑计算。

GPU (Graphics Processing Unit):图形处理单元,负责图形计算。

1.轮廓提取/meshing

2.光栅化

3.帧缓存

4.渲染

CPU和GPU区别

GPU由大量的小运算单元构成

每个运算单元只负责处理很简单的计算

每个运算单元彼此独立

因此所有计算可以并行处理

三、WebGL Startup

1.创建WebGL上下文

2创建WebGL Program

3.将数据存入缓冲区

4.将缓冲区数据读取到 GPU

5. GPU执行WebGL程序,输出结果

四、3D标准模型的四个齐次矩阵(mat4)

1.投影矩阵Projection Matrix

2.模型矩阵Model Matrix

3.视图矩阵View Matrix

4.法向量矩阵Normal Matrix