大家好，我是前端西瓜哥。
之前我们 用原生的 WebGL 绘制图形，会发现调用的 API 和参数都很多很冗余，对此我们可以考虑用 pixi.js 来写 WebGL。
pixi.js 是一个用 JavaScript 编写的开源的 Web 端高性能图形渲染库，基于 WebGL。
我们可以用它的 Graphics 类绘制各种图形，比如矩阵、椭圆、直线。
此外还可以用它的底层的 WebGL 的封装类，比如 Geometry、Mesh 组织绘制图形。
实现
pixi.js 版本 7.4.2
定义好 glsl 着色器。
顶点着色器，需要传入顶点坐标和顶点对应的颜色。
const vertSrc = `
precision mediump float;
attribute vec2 aVertexPosition;
attribute vec4 aVertexColor;
varying vec4 vColor;
void main() {
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
vColor = aVertexColor;
}
`;
片元着色器，用于设置颜色。
const fragSrc = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}
`;
创建 program 和 shader 着色器对象。
const program = new Program(vertSrc, fragSrc);
const shader = new Shader(program);
上面两行代码可以简写为：
// 上面两个可以简写为
const shader = Shader.from(vertSrc, fragSrc);
创建 geometry 对象，设置好 attribute。这里可以提供普通数组或类型数组。
pixijs 会自动帮我们把普通数组转换为 WebGL 的类型数组。
const verts = [
0,
0.5, // 第一个点
-0.5,
-0.5, // 第二个点
0.5,
-0.5, // 第三个点
];
const color = [
// 红色
1, 0, 0,
// 绿色
0, 1, 0,
// 蓝色
0, 0, 1,
];
const geometry = new Geometry()
.addAttribute('aVertexPosition', verts, 2)
.addAttribute('aVertexColor', color, 3);
创建 mesh 对象，传入 shader 和 geometry。顺带一提，这里可选的第四个参数可以指定图元类型。
const mesh = new Mesh(geometry, shader);
将 mesh 对象添加到图形树中：
app.stage.addChild(mesh);
渲染效果为
完整代码
import { Application, Geometry, Mesh, Program, Shader } from 'pixi.js';
const app = new Application<HTMLCanvasElement>({
width: 500,
height: 500,
});
const vertSrc = `
precision mediump float;
attribute vec2 aVertexPosition;
attribute vec4 aVertexColor;
varying vec4 vColor;
void main() {
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
vColor = aVertexColor;
}
`;
const fragSrc = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}
`;
const program = new Program(vertSrc, fragSrc);
const shader = new Shader(program);
// 可简写为：
// const shader = Shader.from(vertSrc, fragSrc);
const verts = [
0,
0.5, // 第一个点
-0.5,
-0.5, // 第二个点
0.5,
-0.5, // 第三个点
];
const color = [
// 红色
1, 0, 0,
// 绿色
0, 1, 0,
// 蓝色
0, 0, 1,
];
const geometry = new Geometry()
.addAttribute('aVertexPosition', verts, 2)
.addAttribute('aVertexColor', color, 3);
const mesh = new Mesh(geometry, shader);
app.stage.addChild(mesh);
document.body.appendChild(app.view);
结尾
相较于原始的 webgl api 的一堆繁琐冗余的方法和参数，pixijs 封装后的方法易用性要好很多。
我是前端西瓜哥，关注我，学习更多图形化知识。
相关阅读，
