实现在小游戏 WebGL2 上渲染 SVG？svg-webgl-loader 正式开源！

发表于 3年以前 | 总阅读数：606 次

缘起

大家平时可能接触过 SVG，但是可能对 WebGL 不是很了解，SVG 主要是一种矢量图格式，给定对应的数据就可以绘制点、线和图形等，基于 XML 标记语言编写，可以在很小的体积下就能得到高清晰度图形，且支持任意形式的放大缩小而不失真；而 WebGL 是 HTML5 之后浏览器支持的一套图形的 API。

而 SVG 要么通过 DOM 支持，要么通过 Canvas Path2D 支持，在只有 WebGL2 的 Context 下却因为缺少相应的 API，所以无法支持 SVG，但团队成员在平时研究 3D / Threejs 源码时，发现源码中有类似将 SVG 渲染到 WebGL2 Context 上的逻辑，很感兴趣，所以就花时间抽出一个库，提供方便的 API 实现 SVG 在 WebGL2 Context 上的渲染：「svg-webgl-loader」，目前项目已经开源，感兴趣的同学可以去到如下地址查看代码

Github：https://github.com/elab-opensource/svg-webgl-loader[1]

NPM：svg-webgl-loader[2]

如何使用？

安装

我们提供了 NPM 包安装和 CDN 导入两种使用方式，其中 NPM 包安装如下：

npm i svg-webgl-loader # yarn add svg-webgl-loader

CDN 链接如下：

<script src="https://unpkg.com/svg-webgl-loader/dist/js/index.umd.js"></script>

导入使用

如果是通过 NPM 包安装，那么在你项目中正常导入使用即可：

import svgWebglLoader from "svg-webgl-loader";

如果你是通过 CDN 的形式引入，那么则可以以如下形式使用：

<script src="https://unpkg.com/svg-webgl-loader/dist/js/index.umd.js"></script>

const svgWebglLoader = window.svgWebglLoader

使用示例

一个标准的使用方式则为传入对应 SVG 内容以及待渲染的 Canvas 节点，以及配置对应的参数：

import svgWebglLoader from "svg-webgl-loader";
import svgUrl from "./img/test.svg";

// 加载解析svg数据
const svgData = await svgWebglLoader(svgUrl);

// 绘制
svgData.draw({
  canvas,
  loc: {
    x: 0,
    y: 0,
    width: 300,
    height: 300,
  },
});

一个实际的例子可以参考 CodeOpen 链接：

https://codepen.io/yh418807968/pen/GREMPXw?editors=1011[3]

如果需要，可以通过以下形式修改背景颜色：

let gl = canvas.getContext('webgl');
gl.clearColor(1, 1, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

API 相关

draw

使用：

const svgData = await svgWebglLoader(svgUrl);
svgData.draw(drawParams)

输入参数：

interface drawParams {
  canvas: HTMLCanvasElement; // 待绘制的画布canvas
  loc?: {
    // 绘制区域
    x: 0,
    y: 0,
    width?: 300, // 绘制宽度，默认为svg图片本身宽度
    height?: 300, // 绘制宽度，默认为svg图片本身宽度
  };
  config?: {
    needTrim?: true, // 是否需要去除svg边缘空白，默认false
    needFill?: true, // 是否需要填充，默认true
    needStroke?: true, // 是否需要描边， 默认true
  };
}

调用之后产出的结果为渲染了 SVG 内容的 Canvas 对象，如果传入了对应的 canvas 参数，则为此传入的 Canvas 对象，否则会是在内部新建的 Canvas 对象。

原理浅析

svg-webgl-loader 主要是参考 Threejs 中加载渲染 SVG 的方案[4]：通过解析路径、路径离散化、三角化，将 SVG 分解为众多三角形，从而使得其可以采用 WebGL Shader 渲染。

以如下 SVG 为例：

<svg width="400" height="400" viewPort="0 0 400 400" version="1.1"    

xmlns="http://www.w3.org/2000/svg">   

<circle

    style="stroke:yellow; fill:blue; stroke-width: 3;"

    cx="61"

    cy="48"

    r="30" />

<polygon transform="translate(0, 60)" points="60,20 100,40 100,80 60,100 20,80 20,40" style="stroke:yellow; fill:blue; stroke-width: 3;"/>    

</svg>

其中包含一个圆形和一个多边形，解析流程主要如下：