pex-context 最佳实践教程

2025-05-22 06:32:26作者：乔或婵

1、项目介绍

pex-context 是一个现代 WebGL 状态封装库，用于分配 GPU 资源（纹理、缓冲区），设置状态管道和传递，并将它们组合成命令。它是 PEX 套件的一部分，旨在提供一个简单而强大的 WebGL 开发环境。

2、项目快速启动

首先，确保你已经安装了 Node.js 和 npm。然后，使用以下命令安装 pex-context：

npm install pex-context

接下来，创建一个新的 HTML 文件并引入 pex-context：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pex-context 示例</title>
</head>
<body>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script type="module">
        import { createContext } from 'pex-context';
        import { cube } from 'primitive-geometry';

        const W = 640;
        const H = 480;
        const ctx = createContext({ width: W, height: H });

        const geom = cube();

        const clearCmd = {
            pass: ctx.pass({
                clearColor: [0.2, 0.2, 0.2, 1],
                clearDepth: 1,
            }),
        };

        const drawCmd = {
            pipeline: ctx.pipeline({
                depthTest: true,
                vert: /* glsl */`
                    attribute vec3 aPosition;
                    attribute vec3 aNormal;
                    uniform mat4 uProjectionMatrix;
                    uniform mat4 uViewMatrix;
                    varying vec4 vColor;
                    void main () {
                        vColor = vec4(aNormal * 0.5 + 0.5, 1.0);
                        gl_Position = uProjectionMatrix * uViewMatrix * vec4(aPosition, 1.0);
                    }
                `,
                frag: /* glsl */`
                    precision highp float;
                    varying vec4 vColor;
                    void main() {
                        gl_FragColor = vColor;
                    }
                `,
            }),
            attributes: {
                aPosition: ctx.vertexBuffer(geom.positions),
                aNormal: ctx.vertexBuffer(geom.normals),
            },
            indices: ctx.indexBuffer(geom.cells),
            uniforms: {
                uProjectionMatrix: mat4.perspective(mat4.create(), Math.PI / 4, W / H, 0.1, 100),
                uViewMatrix: mat4.lookAt(mat4.create(), [2, 2, 5], [0, 0, 0], [0, 1, 0]),
            },
        };

        ctx.frame(() => {
            ctx.submit(clearCmd);
            ctx.submit(drawCmd);
        });
    </script>
</body>
</html>