webgl核心要素

Posted 2022-06-27 suoni

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

渲染流水线设计如下：应用程序层 -> 硬件抽象层 -> 硬件层

 

 

 

为什么要选择GPU

 

 

CPU: 它的优点在于调度、管理、协调能力强，计算能力则位于其次，对同一数据做许多事。

GPU：相当于一个接受CPU调度的“拥有大量计算能力”的员工，对大量数据做同一样事，图形处理，矩阵运算，机器学习

 

Webgl核心要素

 

 

 

1. 顶点着色器，片元着色器
2. 坐标转换
3. 申请缓存区 像素传递
4. 光照（光源和反射）
5. 纹理（坐标转换和像素映射）
6. 观察者的视图矩阵 透视矩阵与正射矩阵
7. 图形变换，平移，缩放，旋转
8. 模型
9. 游戏引擎Babylon.js，3D渲染引擎three.js

 

 

 

两大着色器

 

 

 

顶点着色器（Vertex shader）：描述顶点（像素）特性比如的大小和位置，

 

片段着色器（Fragment shader）：描述顶点点的颜色信息，处理像素点，使其显示在屏幕上

坐标系

 

webgl坐标系：中心原点在canvas坐标系的中心，右手定则坐标，范围从0到1，纹理坐标系：左下角为原点，范围从0到1，

canvas坐标系：左上角为原点

本地坐标系：模型被设计时的坐标系

世界坐标系：模型被放入到场景中时，场景的坐标系

 

 

光照

 

每个物体的光照由两个因素决定：

发出光线的光源的类型，平行光（太阳光）；点光源（人造灯）聚光灯

物体表面如何反射光线，漫反射和环境反射

三维图形学术语着色：根据光照条件重建‘物体各表面明暗不一的效果’

 

视角投影

1. 正射投影

也称盒状空间投影，物体看上去的大小与所在位置没有关系，适用于建筑模型等

1. 透视投影

 也称金字塔可视投影。近大远小，符合人眼观察

图形变换

 

缩放：gl_Position.w中的w值代表缩放比，齐次线性方程里的w

数学表达式：

 

平移：这个一个逐顶点操作，发生在顶点着色器上，用原始坐标的每个分量加上偏移量， 将声明的Tx,Ty,Tz偏移数值赋值给gl_Position,

数学表达式：

 

旋转：需要对顶点坐标进行三个步骤考虑：

旋转轴：你要指明通过哪个轴进行旋转；

旋转方向：逆时针还是顺时针旋转；

旋转的角度

 

 

利用数学的两角和公式：

 

更科学的方式是使用变换矩阵