零基础玩转 WebGL – 快速上手-六虎

WebGL 作为十分底层的 API，学习上手难度十分大，这是由于 WebGL 要求的布景常识比较多。而网上的教程一般没有过多介绍直接就介绍 API 开端烘托了，容易让人云里雾里，很容易被劝退，就算学到了 API 运用，也是只懂表面常识，没有了解背面的原理，很容易就忘记了。

《零根底玩转 WebGL》系列教程将从最基本常识开端，渐进的解说 WebGL 运用和 WebGL 背面原理还有必不可少的数学常识。让你学完之后不光能够开发 WebGL 运用，还能轻松阅览烘托引擎源码，如 Three.js，而且能够开发自己的 3D 烘托引擎库。

这是《零根底玩转 WebGL》的榜首篇文章，系列文章目录请检查：零根底玩转 WebGL – 目录

什么是 WebGL？

WebGL（Web Graphics Library）是一个 Web 规范 JavaScript API，经过 HTML5 的 canvas 元素进行暴露，无需运用插件，即可在浏览器中烘托高性能的交互式 3D 和 2D 图形。目前是由非营利 Khronos Group 设计和保护。

运用 WebGL 的方式和 canvas 2d 相似，都是经过 getContext 办法获取烘托上下文，如下所示。

const canvas = document.createElement('canvas')
const gl = (
  canvas.getContext('webgl2') ||
  canvas.getContext('webgl') ||
  canvas.getContext('experimental-webgl')
)

上面代码中是按照 webgl2、webgl、experimental-webgl 的顺序获取 WebGL 烘托上下文。webgl2 是最新版本，它简直彻底兼容 WebGL1。experimental-webgl 用来兼容老浏览器，如 IE 11。

兼容性

大多数浏览器都支撑 WebGL1。也有许多现代浏览器支撑 WebGL2，可是苹果还不支撑 WebGL2，所以编写 WebGL 程序时，需求向下降级到 WebGL1。

OpenGL

在深入 WebGL 之前，咱们还需求先了解 OpenGL，由于 WebGL 是依据 OpenGL 的。OpenGL(Open Graphics Library) 是用于烘托2D、3D矢量图形的跨言语、跨渠道的运用程序编程接口，常用于CAD、虚拟现实、科学可视化程序和电子游戏开发。OpenGL 通常是显卡生产商依据规范来实现的。

OpenGL 前身是 SGI 的 IRIS GL API 它在其时被认为是最先进的科技并成为事实上的行业规范，后由 SGI 转变为一项敞开规范 OpenGL。1992年 SGI 创立 OpenGL架构审查委员会，2006年将 OpenGL API 规范的操控权交给 Khronos Group。

OpenGL 是跨渠道的，在移动设备上是运用 OpenGL ES(OpenGL for Embedded Systems)，它是 OpenGL 的子集。下图展现了 OpenGL 和 OpenGL ES 的时间线。

WebGL 依据 OpenGL，是 OpenGL 的子集。WebGL1 依据 OpenGL ES 2.0。WebGL2 依据 OpenGL ES 3.0。

GPU

WebGL 性能高的原因是它运用到了 GPU。GPU 和 CPU 针对的是两种不同的运用场景，咱们能够把 CPU 想象为一个切图专家，而 GPU 是一群初级切图仔，现在有一大堆十分简略的页面，大街上随意抓个人都能切。那么对于这个任务不用想就知道一群初级切图仔更快，切图专家当然厉害，可是也奈不了对面人多。所以对于许多简略核算 GPU 的执行速度是远大于 CPU 的。

上面图片中，榜首个是 CPU，第二是 GPU，CPU 只要一杆枪，而 GPU 有一大捆枪。CPU 要一下一下的打，就像切图专家一个一个的切，而 GPU 一次性全打了，就像一群初级切图仔，没人切一个，一次性全切完了。

上图是显卡 3090 的装备参数，咱们能够看到它有 1 万多个中心，24G 显存。支撑 3D API，DirectX 12 Ultimate 和 OpenGL 4.6 （DirectX 是微软的图形 API）。

坐标系

WebGL 的坐标系和 canvas 2d 中的是不太相同的。由于 WebGL 是 OpenGL 子集，所以 WebGL 坐标系和 OpenGL 坐标系性值相同。

canvas 2d 中的坐标系如下所示。

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

canvas 2d 的坐标原点在左上角，X 轴和 Y 轴的正值别离向右和向下。

而 WebGL 的坐标系和 OpenGL 相同，它更符合咱们的常识一点。

原点在正中间，右边为 X 轴正方向，上面为 Y 轴正方向，就和数学中的相同。

需求留意的是 WebGL 中坐标值的规模是 -1 到 1，而 canvas 2d 是依据 canvas 的宽高巨细来的。假如 canvas 宽度为 500，那么 WebGL 中的 1 就相当于 500，0.5 就相当于 250，这样的好处是咱们无需关怀 canvas 的宽高，无论 canvas 多大对于烘托图形来说规模都是 -1 到 1。

当然 WebGL 中还有一个 Z 轴。Z 轴有两种形式，一种是正值朝外，另一种是正值朝内。

当 Z 轴正值朝外时，咱们称为右手坐标系，当 Z 轴正值朝内时称为左手坐标系。能够伸出双手像下图相同比划下，就知道为什么称为左手坐标系和右手坐标系了。

那么 WebGL 是左手坐标系仍是右手坐标系呢？答案为都不是。可是在实际开发中是运用 右手坐标系，当然并不是右手坐标系比左手坐标系好，而是右手坐标系是 OpenGL 的常规。例如微软的 DirectX 中惯用的是左手坐标系。

这儿为什么说 WebGL 既不是左手坐标系也不是右手坐标系，原因将在后续文章中解说，现在只用知道 WebGL 中运用的是右手坐标系，也便是 Z 轴正值朝外。

三角形

WebGL 算是比较底层的图形 API，不同于 canvas 2d，WebGL 只能用它来烘托点，线和三角形。那些杂乱的 3D 模型其实都是由一个个三角形组成。

比方上方这辆汽车模型，它其实是由 267300 个三角形组成。

点击这个链接检查模型详情sketchfab.com/3d-models/t…。

可能有同学会问了，为什么便是三角形，而不是 5 边形，6 边形呢？

由于三角形有许多的优势，比方三角形一定在一个平面上，任何多边形都能够运用三角形组成等性值。

烘托一个三角形

了解了这么多布景常识，现在让咱们来实际运用 WebGL 来烘托一个最简略的三角形吧。

const canvas = document.createElement('canvas')
canvas.width = canvas.height = 300
document.body.append(canvas)
const gl = canvas.getContext('webgl')
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
// 设置 webgl 视口，将 -1 到 1 映射为 canvas 上的坐标
const vertexShader = gl.createShader(gl.VERTEX_SHADER) // 创立一个极点着色器
gl.shaderSource(vertexShader, `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position; // 设置极点方位
  }
`) // 编写极点着色器代码
gl.compileShader(vertexShader) // 编译着色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER) // 创立一个片元着色器
gl.shaderSource(fragmentShader, `
  precision mediump float;
  uniform vec4 u_color;
  void main() {
    gl_FragColor = u_color; // 设置片元色彩
  }
`) // 编写片元着色器代码
gl.compileShader(fragmentShader) // 编译着色器
const program = gl.createProgram() // 创立一个程序
gl.attachShader(program, vertexShader) // 增加极点着色器
gl.attachShader(program, fragmentShader) // 增加片元着色器
gl.linkProgram(program) // 衔接 program 中的着色器
gl.useProgram(program) // 告诉 webgl 用这个 program 进行烘托
const colorLocation = gl.getUniformLocation(program, 'u_color') // 获取 u_color 变量方位
gl.uniform4f(colorLocation, 0.93, 0, 0.56, 1) // 设置它的值
const positionLocation = gl.getAttribLocation(program, 'a_position') 
// 获取 a_position 方位
const positionBuffer = gl.createBuffer() 
// 创立一个极点缓冲目标，回来其 ID，用来放三角形极点数据，
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer) 
// 将这个极点缓冲目标绑定到 gl.ARRAY_BUFFER
// 后续对 gl.ARRAY_BUFFER 的操作都会映射到这个缓存
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    0, 0.5,
    0.5, 0,
    -0.5, -0.5
]),  // 三角形的三个极点
     // 由于会将数据发送到 GPU，为了省去数据解析，这儿运用 Float32Array 直接传送数据
gl.STATIC_DRAW // 表明缓冲区的内容不会常常更改
)
// 将极点数据参加的刚刚创立的缓存目标
gl.enableVertexAttribArray(positionLocation);
// 敞开 attribute 变量，使极点着色器能够拜访缓冲区数据
gl.vertexAttribPointer( // 告诉 OpenGL 怎么从 Buffer 中获取数据
    positionLocation, // 极点特点的索引
    2, // 组成数量，有必要是1，2，3或4。咱们只供给了 x 和 y
    gl.FLOAT, // 每个元素的数据类型
    false, // 是否归一化到特定的规模，对 FLOAT 类型数据设置无效
    0, // stride 步长 数组中一行长度，0 表明数据是严密的没有空隙，让OpenGL决议具体步长
    0 // offset 字节偏移量，有必要是类型的字节长度的倍数。
)
gl.clearColor(0, 1, 1, 1) // 设置清空色彩缓冲时的色彩值
gl.clear(gl.COLOR_BUFFER_BIT) // 清空色彩缓冲区，也便是清空画布
gl.drawArrays( // 从数组中绘制图元
    gl.TRIANGLES, // 烘托三角形
    0,  // 从数组中哪个点开端烘托
    3   // 需求用到多少个点，三角形的三个极点
)

烘托结果如下所示。

能够发现 WebGL 的代码十分杂乱繁琐，一个十分简略的三角形就需求编写这么多的代码。

上面实例代码中有具体的注释，不过信任咱们看了也仍是满头问号。咱们再来看看 WebGL 烘托的整个流程，一般 WebGL 程序是 JS 供给数据（在 CPU 中运转），然后将数据发送到显存中，交给 GPU 烘托，咱们能够运用着色器操控 GPU 烘托管线部分阶段。

// CPU
const vertexShader = `shader source code` // 极点着色器代码
const fragmentShader = `shader source code` // 片段着色器代码
const points = [{ x: 1, y: 1, z: 1 }/* ... */]  // 准备数据
gl.draw(points, vertexShader, fragmentShader) // 将数据和着色器发送给 GPU
// GPU
const positions = data.map(point => vertexShader(point)) // 运转极点着色器
const frags = Rasterization(positions) // 光栅化
const colors = frags.map(frag => fragmentShader(frag)) // 运转片段着色器
Display(colors) // 烘托到屏幕

上面的伪代码，简略展现了 WebGL 程序的执行流程。OpenGL 中着色器是运用 GLSL 编写，WebGL 中也是运用的 GLSL 着色器言语，它的语法有点相似 C 言语，咱们能够经过极点着色器和片段着色器操控 GPU 烘托的部分环节。

WebGL 中有两个着色器别离是极点着色器和片段（也可称为“片元”）着色器。极点着色器用于处理图形的每个点，也便是上面比如中三角形的三个极点。处理完毕后会进行光栅化，咱们能够把光栅化了解成把图形变成一个个像素，咱们显示器屏幕是一个个像素组成的，要显示图形就需求核算出图形中的每个像素点。片段着色器能够先了解成像素着色器，也便是将光栅化中的每个像素拿过来，给每个像素核算一个色彩。整个流程如下所示。

上图中极点数据传送给 GPU 后，极点着色器核算出每个点的方位，光栅化核算出图形的每个像素，片段着色器核算出每个像素的色彩，然后就能够烘托到显示器上了。（能够疏忽上图的几许着色器，WebGL 中没有这个着色器）着色器先简略介绍到这儿，还不了解着色器也没有关系，下篇文章会更加具体的解说。

其实 WebGL 是一个十分大的状况机，它供给的办法都是改动 WebGL 的某个状况。咱们需求在 CPU 中运用 JS 设置 WebGL 的状况，准备数据和着色器程序，然后发送给 GPU 执行。

上方代码能够分为如下几步。

由于 WebGL 的坐标是 -1 到 1，所以首先咱们运用 viewport 设置视口巨细信息。
创立极点和片段着色器（关于着色器情况下篇文章），然后创立一个程序，来衔接极点和片段着色器。
然后获取着色器中的变量，设置怎么将值传递给着色器。三角形是由 3 个极点组成，所以准备了 3 个点的坐标。
设置清屏色彩，并清屏，和坐标相似，WebGL 中的色彩是 0 到 1，而不是 0 到 255。
将数据发送给 GPU 来烘托三角形

比如

上面这个简略的三角形一点都不炫酷，其实 WebGL 能够做出十分炫酷的作用，下面列举一些不错比如，咱们感兴趣能够看一看。

ThreeJS

threejs.org/

WebGL Samples

webglsamples.org/

Experiments with Google

experiments.withgoogle.com/

Adult Swim

www.adultswim.com/etcetera/

Evan Wallace

madebyevan.com/

总结

这篇文章解说了什么是 WebGL，了解了 WebGL 的大致轮廓，而且完成了一个最简略的 WebGL 运用。下篇文章将具体解说十分重要的 WebGL 着色器。

假如觉得文章还不错欢迎点赞和重视支撑，我会尽快更新系列教程的下一篇文章。

零根底玩转 WebGL 系列文章目录请检查：零根底玩转 WebGL – 目录

零基础玩转 WebGL – 快速上手

什么是 WebGL？

兼容性

OpenGL

GPU

坐标系

三角形

烘托一个三角形

比如

ThreeJS

WebGL Samples

Experiments with Google

Adult Swim

Evan Wallace

总结

作者信息

推广

零基础玩转 WebGL – 快速上手

什么是 WebGL？

兼容性

OpenGL

GPU

坐标系

三角形

烘托一个三角形

比如

ThreeJS

WebGL Samples

Experiments with Google

Adult Swim

Evan Wallace

总结

相关文章

超实用！Android开发中的Kotlin扩展函数技巧！

？我的博客是如何进行持续部署的：

LangChain，OpenAI 和前端

大数据Hadoop之——新一代流式数据湖平台 Apache Hudi

作者信息

推广