开发WebGL的第一步

头像
疯狂的技术宅
    阅读 6 分钟
    10
    作者：Aral Roca

    翻译：疯狂的技术宅

    原文：https://aralroca.com/blog/fir...

    未经允许严禁转载

    在本文中，我们将了解什么是 WebGL，以及如何通过与 GPU 进行对话来绘制“三角形”。尽管有更好的方法来实现本文中的例子，例如用具有 2d 上下文的 canvas 甚至可以用 CSS，但我们要从 WebGL 开始。就像 “hello world” 一样，了解它是如何工作的。

    image.png

    什么是WebGL？

    WebGL 的字面定义是 Web Graphics Library（Web图形库）。但这并不意味着我们可以通过 3D 库提供的一个好用的 API 去指挥电脑：“在这里放个茶杯，在这里放摄像机，在这里画一个字符等”。

    它属于低级 API，可以将 vertices（顶点）转换为pixels（像素）。你可以把 WebGL 理解为栅格化引擎。它基于 OpenGL ES 3.0 图形 API。

    image.png

    网上现有的 3d 库（例如THREE.js 或 Babylon.js）使用图中最下面的 WebGL。他们需要一种能够与 GPU 通讯来告知绘制内容的方法。

    当然也可以通过 THREE.js 的 THREE.Triangle 直接解决。但是本文的目的是了解其在内部的工作方式，即这些 3d 库时如何通过 WebGL 与 GPU 通信的。我们要在没有任何 3D 库的帮助下渲染出一个三角形。

    image.png

    创建 WebGL 画布

    在绘制三角形之前，需要先定义 WebGL 渲染的三角形的区域。

    我们将使用 HTML5 的元素 canvas，将上下文设置为 webgl2。

    import { useRef, useEffect } from 'preact/hooks'

export default function Triangle() {
  const canvas = useRef()

  useEffect(() => {
    const bgColor = [0.47, 0.7, 0.78, 1] // r,g,b,a as 0-1
    const gl = canvas.current.getContext('webgl2') // WebGL 2.0

    gl.clearColor(bgColor) // 设置 canvas 的背景颜色
    gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT) // clear buffers
    // @todo: 渲染三角形...
  }, [])

  return <canvas style={{ width: '100vw', height: '100vh' }} ref={canvas} />
}

    clearColor 方法用 RGBA（取值范围：0 到 1）设置画布的背景色。

    clear 方法用来把缓冲区初始化为预设值。其对应的常数值将取决于你的 GPU。

    创建 canvas 后，就可以用 WebGL 渲染三角形了。

    顶点坐标

    首先要知道我们所使用的这些向量的取值范围是 -1 至 1。

    画布的坐标范围：

    image.png

    • （0，0）：中心
    • （1，1）：右上
    • （1，-1）：右下
    • （-1，1）：左上方
    • （-1，-1）：左下

    要绘制的三角形的三个顶点为（-1，-1），（0，1）和（1，-1）。把三角的顶点坐标存储到数组中：：

    image.png

    const coordinates = [-1, -1, 0, 1, 1, -1]

    GLSL 和着色器

    着色器是计算机图形学中的一种程序，可以高度灵活地计算渲染效果。这些着色器用类似于 C 或 C++ 的 OpenGL ES 着色语言（GLSL ES）编写，并在GPU上编码并运行。

    image.png

    每个 WebGL 程序都由两个着色器函数组成； 顶点着色器（vertex shader）和片段着色器（fragment shader）。几乎所有的 WebGL API 都以不同的方式运行这两个函数。

    顶点着色器

    顶点着色器的工作是计算顶点的位置。有了这个结果（gl_Position）GPU 就在视口上定位了点、线和三角形。所以要先创建这个顶点着色器：

    const vertexShader = `#version 300 es
  precision mediump float;
  in vec2 position;

  void main () {
      gl_Position = vec4(position.x, position.y, 0.0, 1.0); // x,y,z,w
  }
`

    可以将其作为模板字符串保存在我们的 JavaScript 代码中。

    第一行（ #version 300 es）说明了正在使用的 GLSL 版本。

    第二行（ precision mediump float;）确定 GPU 用于计算浮点数的精度。可用的选项有 highp， mediump 和 lowp），但是某些系统不支持 highp。

    在第三行（in vec2 position;）为 GPU 定义了两个二维 (X，Y) 的输入变量。三角形的每个向量都是二维的。

    初始化后在程序启动时调用 main 函数（和 C/C++ 语言一样）。 GPU 将通过将当前顶点的位置保存到 gl_Position 来运行其内容（gl_Position = vec4(position.x, position.y, 0.0, 1.0);）。第一个和第二个参数是 vec2 的位置 x 和 y。第三个参数是 z 轴，在本例中为 0.0，因为我们是在2D而非3D中创建几何体。最后一个参数是 w，默认情况下应将其设置为 1.0。

    GLSL 识别并在内部使用 gl_Position 的值。

    创建着色器后，应对其进行编译：

    const vs = gl.createShader(gl.VERTEX_SHADER)

gl.shaderSource(vs, vertexShader)
gl.compileShader(vs)

// Catch some possible errors on vertex shader
if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
  console.error(gl.getShaderInfoLog(vs))
}

    片段着色器

    “片段着色器”在“顶点着色器”之后执行。着色器的工作是计算与每个位置对应的像素点的颜色。

    我们用相同的颜色填充这个三角形：

    const fragmentShader = `#version 300 es
  precision mediump float;
  out vec4 color;

  void main () {
      color = vec4(0.7, 0.89, 0.98, 1.0); // r,g,b,a
  }
`
const fs = gl.createShader(gl.FRAGMENT_SHADER)

gl.shaderSource(fs, fragmentShader)
gl.compileShader(fs)

// 在片段着色器上捕获一些可能出现的错误
if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
  console.error(gl.getShaderInfoLog(fs))
}

    尽管在这里返回的 vect4 是指每个像素的颜色，但其语法与上一个非常相似。由于要用 rgba(179, 229, 252, 1) 填充三角形，所以要把每个 RGB 数字除以 255。

    从着色器创建程序

    编译好着色器后，需要创建要运行 GPU 的程序，同时添加两个着色器。

    const program = gl.createProgram()
gl.attachShader(program, vs) // 附加顶点着色器
gl.attachShader(program, fs) // 附加片段着色器
gl.linkProgram(program) // 将两个着色器链接在一起
gl.useProgram(program) // 使用创建的程序

// 捕获在程序中可能出现的错误
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  console.error(gl.getProgramInfoLog(program))
}

    创建缓冲区

    我们将使用缓冲区把内存分配给 GPU，并把内存绑定到用于 CPU-GPU 通信的通道。用此通道将三角形坐标发送到GPU。

    // 为gpu分配内存
const buffer = gl.createBuffer()

// 将此内存绑定到通道
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)

// 使用此通道将数据发送到GPU（三角形坐标）
gl.bufferData(
  gl.ARRAY_BUFFER,
  new Float32Array(coordinates),
  // 在例子中是一个静态三角形，
  // 所以最好说明我们要如何使用数据，
  // 以便 WebGL 可以优化某些内容。
  gl.STATIC_DRAW
)

// 发送数据后释放内存，避免内存泄漏问题
gl.bindBuffer(gl.ARRAY_BUFFER, null)

    image.png

    把数据从 CPU 链接到 GPU

    在我们的顶点着色器中定义了一个名为 position 的输入变量。但是尚未指定此变量应采用我们要通过缓冲区的值。必须通过以下方式表明它：

    const position = gl.getAttribLocation(program, 'position')
gl.enableVertexAttribArray(position)
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.vertexAttribPointer(
  position, //顶点属性的位置
  2, // 维度 - 2D
  gl.FLOAT, // 要发送到 GPU 的数据类型
  gl.FALSE, // 是否应将数据标准化
  0, // 步长
  0 // 偏移量
)

    绘制三角形

    一旦为三角形创建了带有着色器的程序，并创建了将数据从CPU发送到GPU的链接缓冲区之后，最后就可以告诉 GPU 渲染三角形了。

    image.png

    gl.drawArrays(
  gl.TRIANGLES, // 基本类型
  0, // 向量点数组中的起始索引
  3 // 要渲染的顶点数
)

    这个方法用来从数组数据渲染图元。图元可以是点、线或三角形。在这里指定 gl.TRIANGLES。

    结论

    用 WebGL 只能绘制三角形、直线或点，因为它只能栅格化，所以只能进行向量可以执行的操作。这意味着 WebGL 从概念上讲是简单的，而过程却相当复杂，而且根据你要开发的内容会变得越来越复杂。光栅化 2D 三角形并不像在 3D 游戏中使用纹理、变化，变换那样。

    173382ede7319973.gif

    本文首发微信公众号：前端先锋

    欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

    欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

    欢迎继续阅读本专栏其它高赞文章：

    前端javascriptwebgl
    疯狂的技术宅
    44.4k 声望39.2k 粉丝
    « 上一篇
    面向对象与函数式编程的简单案例
    下一篇 »
    用 WebGL 做一个齿轮动画

    引用和评论

    推荐阅读
    头像
    为什么浮点数运算会产生误差

    疯狂的技术宅赞 12阅读 11.1k评论 2

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.1k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.5k评论 3

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.6k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.6k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 16阅读 2.2k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2k评论 3

    0 条评论
    得票最新