PixiJS 源码解读：绘制矩形的渲染过程讲解

大家好，我是前端西瓜哥。

之前写了一篇 PixiJS 绘制矩形，简单说了一下 PixiJS 是怎么绘制矩形的。

《PixiJS 源码解读：绘制矩形，底层都做了什么？》

它更多的讲解上层的东西，没花太多笔墨描绘底层渲染的流程。所以我写了这篇文章，对渲染流程进行补充讲解。

PixiJS 版本为 7.2.4。

要求读者熟悉 WebGL 的基础知识。

本文会 以绘制设置了填充和描边的矩形为例子，看底层 WebGL 的调用执行。

业务层代码：

const app = new PIXI.Application({
  width: 500,
  height: 300,
  background: "#cc0", //（土黄色）
});
document.body.appendChild(app.view);

const graph = new PIXI.Graphics();
graph.beginFill(0xff0044); // 红色填充色
graph.lineStyle({ color: "blue", width: 4 }); // 蓝色描边
graph.drawRect(90, 70, 300, 100);

app.stage.addChild(graph);

绘制结果为：

创建 gl

第一步是创建 gl 对象，上下文类型优先使用 "webgl2"。

如果不支持，会降级为 "webgl"、"experimental-webgl"。

gl = canvas.getContext("webgl2", options);

gl 在 renderer 渲染器初始化的时候构建的，可通过 app.renderer.gl 拿到。

构建着色器代码片段

定义 顶点着色器 和 片元着色器。

着色器（Shader）是一种类 C 语言 GLSL，用于描述需要绘制的 顶点信息和颜色信息。

着色器模板

首先是 字符串模板，等着根据配置填充成一个完整的着色器代码片段。

顶点着色器的模板（后面会基于它生成真正可用的着色器）位于 packages/core/src/batch/texture.vert 中。

batch 文件夹都是和 批量绘制 有关的逻辑，批量、减少 draw call 正是 PixiJS 高效绘制的秘诀。

precision highp float;
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
attribute vec4 aColor;
attribute float aTextureId;

uniform mat3 projectionMatrix;
uniform mat3 translationMatrix;
uniform vec4 tint;

varying vec2 vTextureCoord;
varying vec4 vColor;
varying float vTextureId;

void main(void){
    gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);

    vTextureCoord = aTextureCoord;
    vTextureId = aTextureId;
    vColor = aColor * tint;
}

片元着色器和颜色有关。

varying vec2 vTextureCoord;
varying vec4 vColor;
varying float vTextureId;
uniform sampler2D uSamplers[%count%];

void main(void){
    vec4 color;
    %forloop%
    gl_FragColor = color * vColor;
}

这里的 %count% 和%forloop% 是占位符，会在之后进行替换。

最终着色器代码片段

在 renderer 初始化时，上面的模板会进行一系列的改造，两个着色器最终转换为下面的样子。

顶点着色器（Vertex Shader）和顶点的位置、大小有关。

补充一些简单注释说明。

顶点着色器

precision highp float; // 浮点数使用高精度
#define SHADER_NAME pixi-shader-2
precision highp float;
attribute vec2 aVertexPosition; // 顶点位置 x 和 y
attribute vec2 aTextureCoord; // 纹理坐标，会传给片元着色器
attribute vec4 aColor; // 颜色，rgba，会传给片元着色器
attribute float aTextureId; // 纹理单元 ID，会传给片元着色器

uniform mat3 projectionMatrix; // 投影矩阵
uniform mat3 translationMatrix; // 平移变换矩阵
uniform vec4 tint; // 改变颜色，实现滤镜效果，会和 aColor 相乘传给片元着色器

varying vec2 vTextureCoord; // varing 都是用来传递的
varying vec4 vColor;
varying float vTextureId;

void main(void){
    //  进行一系列矩阵乘法运算，将最后的点传给内置的着色器变量，设置点的位置
    gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);

   // 下面都是要传给片元着色器的变量
    vTextureCoord = aTextureCoord;
    vTextureId = aTextureId;
    vColor = aColor * tint;
}

片元着色器

片元着色器（Fragment Shader）用于描述顶点围成区域的像素颜色。

下面是片元着色器的最终代码，同样我会加一些注释说明

precision mediump float;
#define SHADER_NAME pixi-shader-2
varying vec2 vTextureCoord; // 纹理坐标，
varying vec4 vColor; // 颜色
varying float vTextureId; // 使用哪一个纹理采样器
uniform sampler2D uSamplers[16]; // 16 个纹理采样器

void main(void){
  vec4 color;
 
  if(vTextureId < 0.5) {
    // 从纹理采样器（比如图片转换过来的像素点集合）中，提取特定位置的像素点
    color = texture2D(uSamplers[0], vTextureCoord);
  }else if(vTextureId < 1.5) {
    color = texture2D(uSamplers[1], vTextureCoord);
  }
  // ...
  } else {
    color = texture2D(uSamplers[15], vTextureCoord);
  }
  
  // 叠加颜色值，和纹理采样器取得的颜色值，赋值给片元着色器内置变量
  gl_FragColor = color * vColor;
}

如果没有设置纹理，PixiJS 会给一个默认的兜底用纹理对象，一个 16x16 的白色方形。

这两个着色器片段会保存到 Shader 实例中，放到 app.render.shader 下。

编译着色器程序

第一次调用 renderer 渲染器 render 方法时，PixiJS 会 创建顶点着色器对象和片元着色器对象。

这些逻辑是在 generateProgram 方法中实现的。该方法的核心代码：

function generateProgram(gl, program) {
  //（1）创建顶点着色器对象、片元着色器对象等
  const glVertShader = compileShader(gl, gl.VERTEX_SHADER, program.vertexSrc);
  const glFragShader = compileShader(
    gl,
    gl.FRAGMENT_SHADER,
    program.fragmentSrc
  );

  // 创建程序对象
  const webGLProgram = gl.createProgram();

  //（2）绑定 attribute
  // keys 为 ['aColor', 'aTextureCoord', 'aTextureId', 'aVertexPosition']
  for (let i = 0; i < keys.length; i++) {
    program.attributeData[keys[i]].location = i;
    // 将属性绑定到顶点着色器的制定位置
    // 如：gl.bindAttribLocation(gl.program, 0, "aColor");
    gl.bindAttribLocation(webGLProgram, i, keys[i]);
  }

  // 删除着色器对象，释放内存
  gl.deleteShader(glVertShader);
  gl.deleteShader(glFragShader);

  //（3）绑定 uniformLocation（准确来说是拿地址，还没正式绑定）
  // 属性（对应 i 变量）有：projectionMatrix、tint、translationMatrix、uSamplers
  for (const i in program.uniformData) {
    const data = program.uniformData[i];

    uniformData[i] = {
      location: gl.getUniformLocation(webGLProgram, i),
      value: defaultValue(data.type, data.size),
    };
  }

  const glProgram = new GLProgram(webGLProgram, uniformData);
  return glProgram;
}

分成三个主要步骤。

创建着色器对象、程序对象。

compileShader 实现：

function compileShader(gl, type, src) {
  const shader = gl.createShader(type);

  gl.shaderSource(shader, src);
  gl.compileShader(shader);
  
  gl.attachShader(webGLProgram, glVertShader);
  gl.attachShader(webGLProgram, glFragShader);
  // ...
  gl.linkProgram(webGLProgram);

  return shader;
}

绑定 attribute 类型的变量 （但此时还没传入 Buffer 数据，只是设置了如何访问等操作）；

绑定 uniform 类型的变量。

之后在 app.renderer.shader.bind 方法内执行下面代码，应用刚刚创建的程序对象。

this.gl.useProgram(glProgram.program);

渲染阶段

前面做的是准备工作，编译着色器。

接下来就是渲染阶段。

PIXI.Ticker 定时器会在渲染下一帧前调用 renderer.render 方法，进入 WebGL 的渲染流程。

清空画布填充背景色

首先是清空画布。

// 入口方法：renderer.renderTexture.clear
class ObjectRendererSystem {
  render(displayObject, options) {
    // ...

    // (1) 清空画布，并指定颜色
    renderer.renderTexture.clear();

    // ...
  }
}

它会执行 clear 方法

class FramebufferSystem {
  clear(r, g, b, a, mask = BUFFER_BITS.COLOR | BUFFER_BITS.DEPTH) {
    const { gl } = this;
    // 背景色 #cc0 转换为 rbga 格式：
    // (0.800000011920929, 0.800000011920929, 0, 1)
    gl.clearColor(r, g, b, a);
    // 清空颜色和深度缓存
    gl.clear(mask);
  }
}

递归调用 render

递归图形树（app.stage），调用它们（继承了 IRenderableObject 接口类型）的 render 方法，它们会拿到 renderer 对象，然后执行自己的渲染逻辑。

// app.stage 是 Container 实例
class Container extends DisplayObject {

  render(renderer) {
    // ...
    this._render(renderer); // 真正的渲染逻辑
    for (let i = 0, j = this.children.length; i < j; ++i) {
      this.children[i].render(renderer);
    }
  }
}

对于前文的示例代码，会分析矩形属性，构建顶点和片元数据，然后执行 WebGL 的绘制 API。

对矩形三角化，构建顶点和片元数据

先基于 x、y、width、height 计算出矩形的 4 个顶点放到 points。

然后进行三角化。三角化就是将图形转换为对应的三角形的组合。

所谓图形的渲染，其实就是绘制一个个小的三角形，组成特定的形状。这些三角形的点，根据不同图形（比如矩形和圆形），需要用不同算法去计算出来，然后把数据通过 WebGL 命令交给 GPU，让它帮我们绘制出来。

首先是填充的三角化（对应  buildRectangle.triangulate() ）。

基于前面的 4 个点得到填充块的 4 个点，并设置对应的索引值 indices，之后调用 gl.drawElements() 需要用到。

接着是描边的三角化（对应 buildLine()）。

下面是绘制描边的代码片段：

PixiJS 的计算逻辑很复杂，这是因为涉及到连接方式、末端样式的情况。

同样，也要计算它的顶点、索引、纹理坐标。

西瓜哥我将最终的填充和描边产生的点，做了一下可视化。

用的是 desmos 可视化工具，这里给一下这个可视化链接：

https://www.desmos.com/calculator/r3dwqeweu2?lang=zh-CN。

最后计算好的三角化数据会保存到 graph 对象的 batches 数组下（batches 表示要批量处理的意思）。

batch 对象包括顶点坐标（vertexData）、颜色（_batchRGB）、索引（indices）和纹理坐标（uvs）。

下面是填充色对应的数据：

批量渲染

这里产生了两个 batch 对象（对应填充和描边），然后遍历传给 BatchRender 类的 render 方法。说是 render 方法，其实并不立即 render，而是将 batch 对象的数据解读和保存起来，之后 flush 时才正式将数据加到 WebGL 里。

这些属性会组合拼装在一个类型数组里。6 个一组，逐顶点绘制。

传完后，会调用 BatchRender 类的 flush 方法，将顶点数据和索引数组通过 gl.bufferData() 进行绑定。

绑定 uniform 值

在 ShaderSystem 类的 syncUniforms 中，会依次设置好各个 uniform 变量：tint、translationMatrix、uSamplers、projectionMatrix。

class ShaderSystem {
  
  syncUniforms(group, glProgram, syncData) {
    // 生成同步 uniform 的函数（不同 uniform 的函数不同）
    const syncFunc = 
        group.syncUniforms[this.shader.program.id] || 
        this.createSyncGroups(group);
    // 同步！
    syncFunc(glProgram.uniformData, group.uniforms, this.renderer, syncData);
  }

  createSyncGroups(group) {
    const id = this.getSignature(group, this.shader.program.uniformData, "u");
    if (!this.cache[id]) {
      this.cache[id] = generateUniformsSync(group, this.shader.program.uniformData);
    }
    group.syncUniforms[this.shader.program.id] = this.cache[id];
    return group.syncUniforms[this.shader.program.id];
  }
  
}

下面是设置 tint 的方法：

绑定纹理

绑定纹理。

class TextureSystem {
  bind(texture, location = 0) {
    const { gl } = this;
    // 开启
    gl.activeTexture(gl.TEXTURE0 + location);
    // ...
    gl.bindTexture(texture.target, glTexture.texture);
    // ...
  }
}

因为示例并不绘制图片，PixiJS 会提供默认的的白色纹理对象（所有值都是 1），这样颜色值和其相乘，结果还是原来的颜色值。

渲染

最后调用 drawBatches 进行绘制。

drawBatches() {
  const dcCount = this._dcIndex;
  const { gl, state: stateSystem } = this.renderer;
  const drawCalls = _BatchRenderer._drawCallPool;
  let curTexArray = null;
  for (let i = 0; i < dcCount; i++) {
    const { texArray, type, size, start, blend } = drawCalls[i];
    if (curTexArray !== texArray) {
      curTexArray = texArray;
      // 刚刚提到的纹理绑定逻辑
      this.bindAndClearTexArray(texArray);
    }
    this.state.blendMode = blend;
    stateSystem.set(this.state);
    // 绘制 API
    gl.drawElements(type, size, gl.UNSIGNED_SHORT, start * 2);
  }
}

最后我们就绘制出一个有填充和描边的矩形了。

之后 Ticker 会不断地在绘制下一帧时调用 renderer 的 render 方法进行渲染，如果图形没改变（比如通过 dirtyId 和 cacheDirty 是否相同判断），我们会跳过三角化的环节，使用缓存好的数据去绘制渲染。

结尾

PixiJS 绘制图形使用了 WebGL，为了利用 GPU 的并行能力，需要给着色器一次性提供尽可能多的顶点和颜色信息。

PixiJS 提供了一些基础图形，比如矩形。绘制时会根据图形属性信息进行三角化，最后将所有的信息组合起来，一次性提供给 WebGL。

这篇文章其实断断续续写了好久，PixiJS 里的弯弯道道挺多的，经常调试了半天就是找不着北了，一度搁置。最后还是硬着头皮不断地调试和思考，总算把这篇文章结束掉了。