Three.js一起学-对比WebGL和Three.js的渲染流程_web 渲染3d模型

前言

大家好，我是一拳~

对web3D感兴趣的同学一定对WebGL和Three.js不陌生了，前者是web端实现3D场景的不二之选，后者也是业界应用最广泛，认可度最高的web端3D渲染引擎之一。
Three.js说白了就是一个封装了WebGL大量繁琐底层操作的3D渲染库，他可以降低我们着手web3D开发的门槛，提高web3D开发的效率。
下面我们就通过一个旋转立方体的例子对比使用Three.js和直接使用WebGL两者的实现流程，通过这个简单的例子，直观的理解WebGL和Three.js的核心渲染流程。
本文大纲：

• 使用WebGL创建一个3D场景
• 使用Three.js创建一个3D场景

本文在PC端网页食用效果更佳，因代码量较大。

WebGL实现

下面我们直接使用WebGL实现一个立方体旋转的效果。
首先代码主要分为两部分：着色器代码和js代码。

着色器代码

通常一个webgl程序会有了两个着色器组成一个完整的着色器程序：顶点着色器和片段着色器。

它们使用类似于C或者C++的GLSL强类型编程语言进行编写，分别用于处理顶点数据和颜色数据，下面是本程序的顶点着色器和片段着色器。

//顶点着色器，用于处理顶点数据
<script id="vertex-shader-2d" type="x-shader/x-vertex">
    //顶点属性
    attribute vec4 a_position;
    //颜色属性
    attribute vec4 a_color;
    //全局变量转换矩阵
    uniform mat4 u_matrix;
    //可变量 颜色，用于将顶点着色器中属性传递到片段着色器
    varying vec4 v_color;
    //所有着色器都有的main方法，顶点着色器会对每个顶点执行，通过执行main方法计算gl_Position的值即顶点的最终坐标
    //同时可以在这里根据顶点或者传入的属性或者全局变量计算颜色值，通过可变量传递给片段着色器
    void main() {
      //位置与矩阵相乘
      gl_Position = u_matrix * a_position;
      // 将颜色传递给片断着色器
      v_color = a_color;
    }
</script>
//片段着色器，用于处理颜色数据
<script id="fragment-shader-2d" type="notjs">
    // 片断着色器没有默认精度，所以我们需要设置一个精度
    // mediump是一个不错的默认值，代表“medium precision”（中等精度）  
    precision mediump float;
    //可变量，从顶点着色器中传入
    varying vec4 v_color; 
    void main() {
      // gl_FragColor是一个片断着色器主要设置的变量,比如我们设置 gl_FragColor 为 [1, 0, 0.5, 1]，其中1代表红色值，0代表绿色值， 0.5代表蓝色值，最后一个1表示阿尔法通道值。WebGL中的颜色值范围从 0 到 1 。
      gl_FragColor = v_color; 
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

因为本文旨在比较WebGL与Three.js的绘制流程，因此不详细介绍GLSL的语法，各位同学可以参考代码中的注释简单理解一下。

javascript实现

我们把WebGL在js端的实现分为初始化和渲染两部分。
初始化流程在代码的onMounted中执行，核心流程如下：

• 创建着色器程序
• 获取着色器程序中属性和全局变量的地址
• 创建顶点数据缓冲并绑定顶点数据到缓冲
• 创建颜色数据缓冲并绑定颜色数据到缓冲
• 初始化完成调用drawScence渲染

渲染我们在drawSence这个函数中执行，核心流程如下：

• 清空画布
• 设置绘制上下文
• 应用着色器程序
• 读取缓冲中的顶点数据和颜色数据，传递给顶点着色器对应的属性和全局变量
• 计算投影矩阵、相机矩阵、转换矩阵等，把最终的矩阵传递给顶点着色器中的全局变量
• 执行绘制方法
• 使用requestAnimationFrame实现动画效果

看一下运行效果：
代码片段

下面是全部的WebGL实现这个3D场景的代码，可以直接看onMounted函数和drawSence函数的实现即可，其他的代码可以选择性跳过，一些工具方法不必理解，知道是做什么的即可。我把代码都列在下面