摘要

本文详细剖析了 PixiJS 渲染系统，涵盖 AutoDetectRenderer 工作原理、WebGPU 和 WebGL 支持检查、GPU 相关概念、WebGLRenderer 与 WebGPURenderer 的特点、AbstractRenderer 详解、SystemRunner 的作用等内容，全面展示了 PixiJ 在图形渲染方面的机制。

PixiJ 渲染系统的主要构成

PixiJ 是一个高性能的 2D 渲染引擎。其渲染系统的理解与渲染器的选择对现代 Web 应用和游戏开发至关重要。

AutoDetectRenderer 工作原理

初始化渲染器优先级顺序

autoDetectRenderer接收options，根据preference初始化preferredOrder。若有指定首选渲染器类型，将其放首位，其他依次排列。相关代码如下：

let preferredOrder: string[] = [];
if (options.preference)
{
    preferredOrder.push(options.preference);
    renderPriority.forEach((item) =>
    {
        if (item!== options.preference)
        {
            preferredOrder.push(item);
        }
    });
}
else
{
    preferredOrder = renderPriority.slice();
}

尝试依次选择渲染器

按优先级顺序尝试创建不同类型渲染器。会检查环境对 WebGPU 或 WebGL 的支持情况。若优先项是canvas则抛出错误。例如：

let RendererClass: new () => Renderer;
let finalOptions: Partial<AutoDetectOptions> = {};
for (let i = 0; i < preferredOrder.length; i ++)
{
    const rendererType = preferredOrder[i];
    if (rendererType === 'webgpu' && (await isWebGPUSupported()))
    {
        const { WebGPURenderer } = await import('./gpu/WebGPURenderer');
        RendererClass = WebGPURenderer;
        finalOptions = {...options,...options.webgpu };
        break;
    }
    else if (
        rendererType === 'webgl'
        && isWebGLSupported(
            options.failIfMajorPerformanceCaveat
               ?? AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat
        )
    )
    {
        const { WebGLRenderer } = await import('./gl/WebGLRenderer');
        RendererClass = WebGLRenderer;
        finalOptions = {...options,...options.webgl };
        break;
    }
    else if (rendererType === 'canvas')
    {
        finalOptions = {...options };
        throw new Error('CanvasRenderer is not yet implemented');
    }
}

检查是否有支持的渲染器

若尝试后未找到支持的渲染器，则抛出错误。

初始化和返回渲染器实例

选择到支持的渲染器类后，创建实例，调用init()方法初始化并返回。

WebGPU 与 WebGL 支持检查

WebGPU 支持检查

isWebGPUSupported函数检查浏览器是否支持 WebGPU API。流程为检查 GPU 属性、请求适配器、请求设备并返回支持状态。代码示例：

export async function isWebGPUSupported(options: GPURequestAdapterOptions = {}): Promise<boolean>
{
    if (_isWebGPUSupported!== undefined) return _isWebGPUSupported;
    _isWebGPUSupported = await (async (): Promise<boolean> =>
    {
        const gpu = DOMAdapter.get().getNavigator().gpu;
        if (!gpu)
        {
            return false;
        }
        try
        {
            const adapter = await gpu.requestAdapter(options) as GPUAdapter;
            await adapter.requestDevice();
            return true;
        }
        catch (e)
        {
            return false;
        }
    })();
    return _isWebGPUSupported;
}

WebGL 支持检查

isWebGLSupported函数检查浏览器对 WebGL 的支持情况。包括检查全局状态、创建上下文选项、创建Canvas和WebGL上下文、处理上下文丢失并返回支持状态。

GPU 相关概念

GPUAdapter 和 GPUDevice 概念

• GPUAdapter：是表示系统中物理 GPU 的接口。可用于适配器选择和设备请求。
• GPUDevice：是从GPUAdapter请求到的具体设备实例。负责资源管理和命令执行。

Stencil 属性

Stencil属性用于控制像素绘制过程。可实现遮罩效果、条件渲染、多层次效果和性能优化。

WebGLRenderer 与 WebGPURenderer

WebGLRenderer

由多个系统组成，如GlUboSystem、GlBackBufferSystem等，每个系统负责特定任务，确保渲染高效灵活。

WebGPURenderer

利用 WebGPU API 的渲染器，也由多个系统组成，如GpuUboSystem、GpuEncoderSystem等。

两者区别

• 渲染器类型：WebGLRenderer使用 WebGL 2.0 API，WebGPURenderer基于 WebGPU API。
• 系统与管道：两者使用的系统和管道不同，各自为对应的 API 设计。
• 初始化与配置：WebGLRenderer创建 WebGL 上下文并配置管道，WebGPURenderer需请求 GPU 适配器和设备。
• 渲染过程：WebGLRenderer调用render方法绘制，WebGPURenderer涉及命令编码和提交。
• 兼容性与性能：WebGLRenderer兼容性好，WebGPURenderer性能高但浏览器支持少。

AbstractRenderer 详解

关键属性

包括type、name、runners、renderPipes等属性，分别用于表示渲染器类型、名称、系统运行器、渲染管道等。

构造函数和初始化过程

• 构造函数：接收RendererConfig对象配置系统和渲染管道。
• 初始化：包括跳过扩展导入、加载环境扩展、添加系统、添加管道、初始化系统、合并选项、设置像素圆整、触发初始化运行器等步骤。

渲染、清除和销毁

• 渲染：render方法将容器或对象渲染到画布上，涉及处理参数、设置渲染目标、清除颜色设置等工作流程。
• 清除：clear方法清除当前渲染目标，包括参数处理、设置目标、设置清除颜色、执行清除操作等步骤。
• 销毁：destroy方法释放渲染器资源，包括触发销毁事件、销毁运行器、清空系统哈希、销毁管道等操作。

其他方法

包括resize、generateTexture、_addRunners、_addSystems等方法，分别用于调整渲染器尺寸、从容器生成纹理、添加运行器、添加系统等功能。

Runner 详解

SystemRunner 的定义

SystemRunner是一个用于在多个监听对象之间分发和广播事件的工具类。包括构造函数、添加监听器、触发事件、移除监听器等功能。