码迷,mamicode.com
首页 > Web开发 > 详细

webgl核心要素

时间:2019-08-10 15:51:13      阅读:141      评论:0      收藏:0      [点我收藏+]

标签: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核心要素

 

 

 

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

 

 

 

两大着色器

 

 

 

顶点着色器(Vertex shader):描述顶点(像素)特性比如的大小和位置,

 

片段着色器(Fragment shader):描述顶点点的颜色信息,处理像素点,使其显示在屏幕上

技术图片

坐标系

 

webgl坐标系中心原点在canvas坐标系的中心,右手定则坐标,范围从01,纹理坐标系左下角为原点,范围从01

canvas坐标系:左上角为原点

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

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

 

技术图片

 

光照

 

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

发出光线的光源的类型,平行光(太阳光);点光源(人造灯)聚光灯

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

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

 

视角投影

  1. 正射投影

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

技术图片

  1. 透视投影

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

技术图片

图形变换

 

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

数学表达式:技术图片

 

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

数学表达式:技术图片

 

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

旋转轴:你要指明通过哪个轴进行旋转;

旋转方向:逆时针还是顺时针旋转;

旋转的角度

 技术图片

技术图片 技术图片

利用数学的两角和公式:

 技术图片

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

 技术图片

 

webgl核心要素

标签:lin   line   ade   图形处理   决定   block   视角   颜色   声明   

原文地址:https://www.cnblogs.com/suoni/p/11331741.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!