主页»HTML/CSS»图解WebGL和Three.js作业原理

图解WebGL和Three.js作业原理

来历:wanbo 发布时刻:2018-12-08 阅览次数:

一、咱们讲什么?

咱们讲两个东西:

1、WebGL背面的作业原理是什么?

2、以Three.js为例,叙述结构在背面扮演什么样的人物?

二、咱们为什么要了解原理?

咱们假定你对WebGL现已有必定了解,或许用Three.js做过了一些东西,这个时分,你或许碰到了这样一些问题:

1、许多东西仍是做不出来,乃至没有任何思路;

2、碰到bug无法处理,乃至没有方向;

3、功能出现问题,彻底不知道怎样去优化。

这个时分,咱们需求了解更多。

三、先了解一个根底概念 

1、什么是矩阵?

简略说来,矩阵用于坐标改换,如下图:

2、那它详细是怎样改换的呢,如下图:

3、举个实例,将坐标平移2,如下图:

假如这时分,你仍是没有了解,没有关系,你只需求知道,矩阵用于坐标改换。

四、WebGL的作业原理

4.1、WebGL API

在了解一门新技能前,咱们都会先看看它的开发文档或许API。

查看Canvas的绘图API,咱们会发现它能画直线、矩形、圆、弧线、贝塞尔曲线。

所以,咱们看了看WebGL绘图API,发现:

它只能会点、线、三角形?必定是我看错了。

没有,你没看错。

就算是这样一个杂乱的模型,也是一个个三角形画出来的。

4.2、WebGL制作流程

简略说来,WebGL制作进程包含以下三步:

1、获取极点坐标

2、图元安装(即画出一个个三角形)

3、光栅化(生成片元,即一个个像素点)

接下来,咱们分步解说每个进程。 

4.2.1、获取极点坐标

极点坐标从何而来呢?一个立方体还好说,假如是一个机器人呢?

没错,咱们不会一个一个写这些坐标。

往往它来自三维软件导出,或许是结构生成,如下图:

写入缓存区是啥?

没错,为了简化流程,之前我没有介绍。

因为极点数据往往不计其数,在获取到极点坐标后,咱们一般会将它存储在显存,即缓存区内,便利GPU更快读取。 

4.2.2、图元安装

咱们现已知道,图元安装便是由极点生成一个个图元(即三角形)。那这个进程是主动完结的吗?答案是并非彻底如此。

为了使咱们有更高的可控性,即自在操控极点方位,WebGL把这个权利交给了咱们,这便是可编程烘托管线(不必了解)。

WebGL需求咱们先处理极点,那怎样处理呢?咱们先看下图:

咱们引入了一个新的名词,叫“极点着色器”,它由opengl es编写,由javascript以字符串的方式界说并传递给GPU生成。

比方如下便是一段极点着色器代码:

attribute vec4 position;
void main() {
  gl_Position = position;  
}

attribute修饰符用于声明由浏览器(javascript)传输给极点着色器的变量值;

position即咱们界说的极点坐标;

gl_Position是一个内建的传出变量。

这段代码什么也没做,假如是制作2d图形,没问题,但假如是制作3d图形,即传入的极点坐标是一个三维坐标,咱们则需求转化成屏幕坐标。

比方:v(-0.5, 0.0, 1.0)转化为p(0.2, -0.4),这个进程相似咱们用相机摄影。 

4.2.2.1、极点着色器处理流程

回到方才的论题,极点着色器是怎样处理极点坐标的呢?

如上图,极点着色器会先将坐标转化结束,然后由GPU进行图元安装,有多少极点,这段极点着色器程序就运转了多少次。

你或许留意到,这时分极点着色器变为:

attribute vec4 position;
uniform mat4 matrix;
void main() {
  gl_Position = position * matrix;  
}

这便是运用了矩阵matrix,将三维世界坐标转化成屏幕坐标,这个矩阵叫投影矩阵,由javascript传入,至于这个matrix怎样生成,咱们暂且不谈论。 

4.2.3、光栅化

和图元安装相似,光栅化也是可控的。

在图元生成结束之后,咱们需求给模型“上色”,而完结这部分作业的,则是运转在GPU的“片元着色器”来完结。

它同样是一段opengl es程序,模型看起来是什么质地(色彩、漫反射贴图等)、灯火等由片元着色器来核算。

如下是一段简略的片元着色器代码:

precision mediump float;  
void main(void) { 
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); 
} 

gl_FragColor即输出的色彩值。 

4.2.3.1、片元着色器处理流程

片元着色器详细是怎样操控色彩生成的呢?

如上图,极点着色器是有多少极点,运转了多少次,而片元着色器则是,生成多少片元(像素),运转多少次。 

4.3、WebGL的完好作业流程

至此,实质上,WebGL阅历了如下处理流程:

1、预备数据阶段

在这个阶段,咱们需求供给极点坐标、索引(三角形制作次序)、uv(决议贴图坐标)、法线(决议光照作用),以及各种矩阵(比方投影矩阵)。

其间极点数据存储在缓存区(因为数量巨大),以修饰符attribute传递给极点着色器;

矩阵则以修饰符uniform传递给极点着色器。

2、生成极点着色器

依据咱们需求,由Javascript界说一段极点着色器(opengl es)程序的字符串,生成并且编译成一段着色器程序传递给GPU。

3、图元安装

GPU依据极点数量,挨个履行极点着色器程序,生成极点终究的坐标,完结坐标转化。

4、生成片元着色器

模型是什么色彩,看起来是什么质地,光照作用,暗影(流程较杂乱,需求先烘托到纹路,能够先不重视),都在这个阶段处理。

5、光栅化

能过片元着色器,咱们确认好了每个片元的色彩,以及依据深度缓存区判别哪些片元被挡住了,不需求烘托,终究将片元信息存储到色彩缓存区,终究完结整个烘托。

五、Three.js终究做了什么?

咱们知道,three.js帮咱们完结了许多作业,可是它详细做了什么呢,他在整个流程中,扮演了什么人物呢?

咱们先简略看一下,three.js参加的流程:

黄色和绿色部分,都是three.js参加的部分,其间黄色是javascript部分,绿色是opengl es部分。

咱们发现,能做的,three.js基本上都帮咱们做了。

  • 辅佐咱们导出了模型数据;
  • 主动生成了各种矩阵;
  • 生成了极点着色器;
  • 辅佐咱们生成原料,装备灯火;
  • 依据咱们设置的原料生成了片元着色器。

并且将webGL依据光栅化的2D API,封装成了咱们人类能看懂的 3D API。 

5.1、Three.js极点处理流程

从WebGL作业原理的章节中,咱们现已知道了极点着色器会将三维世界坐标转化成屏幕坐标,但实际上,坐标转化不限于投影矩阵。

如下图:

之前WebGL在图元安装之后的成果,因为咱们以为模型是固定在坐标原点,并且相机在x轴和y轴坐标都是0,其实正常的成果是这样的:

5.1.1、模型矩阵

现在,咱们将模型顺时针旋转Math.PI/6,一切极点方位肯定都变化了。

box.rotation.y = Math.PI/6;

可是,假如咱们直接将极点方位用javascript核算出来,那功能会很低(极点一般不计其数),并且,这些数据也十分不利于保护。

所以,咱们用矩阵modelMatrix将这个旋转信息记载下来。

5.1.2、视图矩阵

然后,咱们将相机往上偏移30。

camera.position.y = 30;

同理,咱们用矩阵viewMatrix将移动信息记载下来。 

5.1.3、投影矩阵

这是咱们之前介绍过的了,咱们用projectMatrix记载。 

5.1.4、运用矩阵

然后,咱们编写极点着色器:

gl_Position = position * modelMatrix * viewMatrix * projectionMatrix;

这样,咱们就在GPU中,将终究极点方位核算出来了。

实际上,上面一切进程,three.js都帮咱们完结了。

5.2、片元着色器处理流程

咱们现已知道片元着色器负责处理原料、灯火等信息,但详细是怎样处理呢?

如下图:

5.3、three.js完好运转流程:

当咱们挑选原料后,three.js会依据咱们所选的原料,挑选对应的极点着色器和片元着色器。

three.js中现已内置了咱们常用着色器。

QQ群:凯发娱乐官网官方群(515171538),验证音讯:10000
微信群:加小编微信 849023636 邀请您参加,验证音讯:10000
提示:更多精彩内容重视微信大众号:全栈开发者中心(fsder-com)
m88 188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet unibet unibet Ladbrokes Ladbrokes casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 m88 help
网友谈论(共0条谈论) 正在载入谈论......
沉着谈论文明上网,回绝歹意咒骂 宣布谈论 / 共0条谈论
登录会员中心