阅读 62

WebGL基础:着色器基础知识

今天由字节跳动的"yancy"童鞋给大家重磅推出一篇WebGL的干货接下来让我们开启奇幻旅程,进入 3D 的世界。

本文作者:yancy

1. 认识3D

首先我们要介绍的是几个概念,这是我们要进入到 3D 不可或缺的内容。认识一下它们吧。

1.1 视点,视线,目标点,上方向

这几个概念在WebGL中属于最常见的内容。

  • 视点:可以简易的理解为眼睛,也叫观察点
  • 目标点:可以理解为我们要看的物体(任何物体)
  • 上方向:头顶的方向。

实际生活中,我们的目光总是以我们的眼睛为起始点,到达我们想要看到的物体,同时,随着我们观察的角度不同,物体也会呈现不一样的形态。以一张图说明吧。 如此几个内容,创建出了3D世界的基本显示模型,由此可见其重要程度。后面我们也会说到如何在 WebGL 中设定这几个内容。也会有的小伙伴把视点称为相机目标点称为画布。其实是一样的道理。按照自己的理解记忆就好。

1.2 可视范围

可视范围指的是我们所能看到的最大范围。如:一般情况下我们看不到自己身后的事物。 众所周知,三维物体具有深度的概念。在我们的理解中,深度就是 z 轴。 虽然我们可以将物体放置在三维空间中的任何位置,但是在WebGL中,可视范围之外的物体是不被绘制的,这也是为了节省开销。

1.3 可视空间

水平视角、垂直视角、可视深度 定义了可视空间的概念。 可视空间分为两种。

  • 正射投影:与物体的远近无关,通常用在建筑设计和建模上。

  • 透视投影:我们平时观察的真实世界都是透视投影。更有深度的感觉。

1.3 着色器

如果想渲染 3D 图形,就需要经过一系列的步骤,这些步骤称为渲染管线。在开发 WebGL 程序时,我们就需要通过着色器语言跟GPU进行沟通,用来设定我们需要渲染和显示的图形。 由此可见:着色器是编写WebGL时最重要的一点(没有之一)。我们之所以能生成并操作3D图像,都是因为着色器在起作用。WebGL中着色器分为两种。顶点着色器和片元着色器

1.3.1 顶点着色器

这里的顶点代表的是组成物体的每一个点。 顶点着色器的功能主要是将位置数据经过矩阵变换、计算光照之后生成顶点颜色、变换纹理坐标。并将生成的数据输出到片元着色器。

1.3.2 片元着色器

片元着色器的作用是将光栅化阶段生成的每个片元,计算出每个片元的最终元素。 注: 由于着色器内容比较重要,这里我们先引入这两个概念,先简单理解就可以,后面专门对着色器进行分享。

2. 绘制图形

2.1 获取绘图上下文

了解了第一小节的内容之后,我们开始进入到WebGL开发实战中。 还记得Canvas中第一步需要干什么吗? 没错,需要获取 Canvas 元素和绘图上下文。WebGL 开发也不例外,也需要首先获取元素和绘图上下文。形如下方代码所示:

2.2 初始化着色器

2.2.1. 编写着色器代码

获取到绘图上下文之后,我们需要初始化WebGL 的着色器了,着色器代码是以字符串的形式嵌入到渲染程序中,所以我们需要编写两个着色器的字符串。 两个着色器代码都是以字符串的形式存在,并在执行渲染时嵌入到渲染流程内。 说明:

  • void main() {}: 创建一个主函数。
  • gl_Position: 指定绘制的坐标,接收一个拥有4个浮点分量的vec4数据。分别代表 x,y,z,w数据
  • gl_PointSize: 表示要绘制图形的尺寸大小。
  • gl_FragColor: 定义图形颜色,1.0 0.0 0.0 1.0 分别代表r g b a
2.2.2. 创建着色器

当然,只是编写完着色器代码依然不能完成渲染工作,接下来我们就需要将着色器添加到渲染流程内

2.2.3. 着色器编译

完成上述两步之后,我们就需要将着色器代码添加到着色器中。看下例子。

2.2.4. 创建 program

完成编译之后,我们需要将着色器添加到渲染程序中。

2.2.5. 绘制图形

完成上述步骤之后,就可以绘制我们的图形了。这里我们以一个点为例。在画布上绘制一个点出来。

gl.drawArrays(gl.POINTS, 0, 1);
复制代码

此时就可以打开页面,看到我们绘制的这个点了。 总结代码:

3. 渲染管线

3.1 基础内容介绍

WebGL 的渲染依赖底层 GPU 的渲染能力。所以 WebGL 渲染流程和 GPU 内部的渲染管线是相符的。 渲染管线的作用是将3D模型转换为2维图像。 在早期,渲染管线是不可编程的,叫做固定渲染管线,工作的细节流程已经固定,修改的话需要调整一些参数。 现代的 GPU 所包含的渲染管线为可编程渲染管线,可以通过编程 GLSL,着色器语言 来控制一些渲染阶段的细节。

3.2 渲染过程

(心理承受弱的同学可跳过此小节) WebGL 的渲染过程分为以下几项:

  • 顶点着色器
  • 图片装配
  • 光栅化
  • 片元着色器
  • 逐片段操作(本文不会分享此内容)
    • 裁剪测试
    • 多重采样操作
    • 背面剔除
    • 模板测试
    • 深度测试
    • 融合
    • 缓存

这里一系列的名词可能会吓到很多同学,千万别被名词吓到哟,接下来的过程中会详细说明。也希望通过本文可以让大家理解基本的渲染流程。附图解一张,助大家理解。

4. 顶点着色器

顶点着色器的作用是通过计算获得最终的顶点坐标, 如:

  • A --> () => {…………} ==> A1:坐标 A 经过一系列的计算,最终获取坐标 A1
  • B --> () => {…………} ==> B1:坐标 B 经过一系列的计算,最终获取坐标 B1
  • …………

顶点着色器计算出来的坐标将会渲染到最终的显示画布上。 此外,顶点着色器还会计算如下内容:颜色、纹理坐标、顶点尺寸…… 在顶点着色器阶段通常会涉及到三个类型的变量。

  • attribute:针对单一顶点生效。
    • 通常用于:顶点位置、顶点大小等内容
  • uniform:影响所有顶点
    • 通常用于:旋转、平移、缩放等位置变换、颜色处理等内容。
  • varying:可通过顶点着色器传入到片元着色器。

attribute 这个变量之前我们就用到过,用来设置了顶点的位置和大小。 回顾一下 其他的两个变量暂时没有用到,接下来的内容里会用到这两种类型的变量。敬请期待😁

5. 图元装配和光栅化

什么是图元?

官方解释:

描述各种图形元素的函数叫做图元,描述几何元素的称为几何图元(点,线段或多边形)。点和线是最简单的几何图元

经过顶点着色器计算之后的坐标会被组装成组合图元

接下来通过一组图解来看看渲染器如何进行图元装配和光栅化

通俗解释

图元就是一个点、一条线段、或者是一个多边形。

5.1 图元装配

什么是图元装配呢? 简单理解就是说将我们设置的顶点、颜色、纹理等内容组装称为一个可渲染的多边形的过程。 注意: 如何组装取决于 gl.drawArrays(type, count) 中的 type 类型,本文最后有详细的内容。 在之前的文章里,我们就使用 gl.POINTS 来绘制了一个点。

5.2 光栅化

片元:二维图象上每个点都包含了颜色、深度和纹理数据。这样一个点称为片元 光栅化可以简单理解为以下内容: 通过图元装配生成的多边形,计算像素并填充,剔除不可见的部分,剪裁掉不在可视范围内的部分。最终生成可见的带有颜色数据的图形并绘制。 光栅化流程图解:

剔除和剪裁
  • 剔除:举一个日常生活中的栗子来说明吧。
    • 在日常生活中,对于不透明物体,背面对于观察者来说是不可见的。同样,在 WebGL 中,我们也可以设定物体的背面不可见,那么在渲染过程中,就会将不可见的部分剔除,不参与绘制。节省渲染开销。
  • 剪裁:同样举例子来说明
    • 日常生活中不论是在看电视还是观察物体,都会有一个可视范围,在可视范围之外的事物我们是看不到的。类似的,图形生成后,有的部分可能位于可视范围之外,这一部分会被剪裁掉,不参与绘制。以此来提高性能。

6. 片元着色器

接收光栅化阶段生成的片元,在光栅化阶段中,已经计算出每个片元的颜色信息,这一阶段会将片元做逐片元挑选的操作,处理过的片元会继续向后面的阶段传递。

逐片元挑选

通过模板测试和深度测试来确定片元是否要显示,测试过程中会丢弃掉部分无用的片元内容,然后生成可绘制的二维图像绘制并显示。

  • **深度测试:**就是对 z 轴的值做测试,值比较小的片元内容会覆盖值比较大的。(类似于近处的物体会遮挡远处物体)。
  • **模板测试:**模拟观察者的观察行为,可以接为镜像观察。标记所有镜像中出现的片元,最后只绘制有标记的内容。

7. 实例分析

下面结合2.2.5的代码,我们进行流程分析,加深理解。 分析:

  • 首先创建了两个变量 VERTEX_SHADER 顶点着色器FRAGMENT_SHADER 片元着色器。这两个内容会通过下面的代码添加到顶点着色器和片元着色器中。
  • 之后通过 gl.createShader() 创建了两个着色器。传入不同的参数即可创建不同的着色器。创建并关联着色器的步骤比较复杂。当你熟悉这个过程之后,可以将这个过程的代码封装起来作为备用。
  • 接下来,通过 将着色器代码添加到着色器中、编辑着色器、创建程序对象、将着色器添加到程序对象中、关联程序对象、使用程序对象 这一系列的步骤初始化着色器和程序对象。
  • 当所有的前置工作准备就绪之后,就可以调用 gl.drawArrays() 方法来绘制想要的图形。

7.1 gl.drawArrays(type, first, count)

1. type 代表要绘制的图形形状,值有以下几种:

gl.POINTS: 要绘制一系列的点

gl.LINES: 要绘制了一系列未连接直线段(单独行) gl.LINE_STRIP: 要绘制一系列连接的线段

**gl.LINE_LOOP **: 要绘制一系列连接的线段。它还连接第一个和最后一个顶点,以形成一个环

gl.TRIANGLES: 一系列单独的三角形

gl.TRIANGLE_STRIP: 绘制一个三角带

gl.TRIANGLE_FAN: 绘制一个扇形(三角扇)

2. first 代表从哪个点开始
3. count 代表需要使用几个点
栗子:

其他的形状可以自己尝试…………会有意想不到的效果。

本文由博客一文多发平台 OpenWrite 发布!

文章分类
后端
文章标签