svg-webgl-loader-opti, a fork of svg-webgl-loader optimized for multiple renderings. All credits go to the original author, MoeYc.
npm i svg-webgl-loader-optiyarn add svg-webgl-loader-optiimport svgLoader from "svg-webgl-loader-opti";
import svgUrl from "./img/test.svg";
// load and parse svg data
const svgData = await svgLoader(svgUrl);
// load the canvas and create the buffers
loader.load({
gl,
shaders: {
vertex: vertexShader,
fragment: fragmentShader
},
loc: {
width: 400,
height: 400,
},
needTrim: false,
});
// draw on the buffer (can be called at every frame)
loader.draw({
scale: 0.8,
loc: { x: 0.5, y: 0 },
needFill: true,
needStroke: true,
});svg-webgl-loader mainly refers to the scheme of rendering svg in three.js: parse the paths, discrete paths to points and triangulate, then the svg would be analyzed to many triangles, so that it can be rendered by the webgl shader.