标签:lin line ade 图形处理 决定 block 视角 颜色 声明
WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。
渲染流水线设计如下:应用程序层 -> 硬件抽象层 -> 硬件层
为什么要选择GPU
CPU: 它的优点在于调度、管理、协调能力强,计算能力则位于其次,对同一数据做许多事。
GPU:相当于一个接受CPU调度的“拥有大量计算能力”的员工,对大量数据做同一样事,图形处理,矩阵运算,机器学习
Webgl核心要素
两大着色器
顶点着色器(Vertex shader):描述顶点(像素)特性比如的大小和位置,
片段着色器(Fragment shader):描述顶点点的颜色信息,处理像素点,使其显示在屏幕上
坐标系
webgl坐标系:中心原点在canvas坐标系的中心,右手定则坐标,范围从0到1,纹理坐标系:左下角为原点,范围从0到1,
canvas坐标系:左上角为原点
本地坐标系:模型被设计时的坐标系
世界坐标系:模型被放入到场景中时,场景的坐标系
光照
每个物体的光照由两个因素决定:
发出光线的光源的类型,平行光(太阳光);点光源(人造灯)聚光灯
物体表面如何反射光线,漫反射和环境反射
三维图形学术语着色:根据光照条件重建‘物体各表面明暗不一的效果’
视角投影
也称盒状空间投影,物体看上去的大小与所在位置没有关系,适用于建筑模型等
也称金字塔可视投影。近大远小,符合人眼观察
图形变换
缩放:gl_Position.w中的w值代表缩放比,齐次线性方程里的w
数学表达式:
平移:这个一个逐顶点操作,发生在顶点着色器上,用原始坐标的每个分量加上偏移量, 将声明的Tx,Ty,Tz偏移数值赋值给gl_Position,
数学表达式:
旋转:需要对顶点坐标进行三个步骤考虑:
旋转轴:你要指明通过哪个轴进行旋转;
旋转方向:逆时针还是顺时针旋转;
旋转的角度
利用数学的两角和公式:
更科学的方式是使用变换矩阵
标签:lin line ade 图形处理 决定 block 视角 颜色 声明
原文地址:https://www.cnblogs.com/suoni/p/11331741.html