pex-context 开源项目启动和配置教程

1. 项目目录结构及介绍

pex-context 是一个现代的 WebGL 状态包装器，用于为 PEX 分配 GPU 资源（纹理、缓冲区），设置状态管道和传递，并将它们组合成命令。该项目旨在简化 WebGL 的使用，提供更加直观和易于使用的 API。

项目目录结构如下：

pex-context/
├── examples/             # 示例代码
├── .editorconfig         # 编辑器配置
├── .gitignore            # Git 忽略文件
├── .nojekyll             # 禁用 Jekyll
├── .npmignore            # npm 忽略文件
├── CHANGELOG.md          # 更新日志
├── LICENSE.md            # 许可证
├── README.md             # 介绍
├── buffer.js             # 缓冲区相关功能
├── framebuffer.js        # 帧缓冲区相关功能
├── index.html            # 主页
├── index.js              # 主入口文件
├── package-lock.json     # 包版本锁定
├── package.json          # 项目配置
├── pass.js               # 传递相关功能
├── pipeline.js           # 管道相关功能
├── polyfill.js           # 兼容性填充
├── program.js            # 程序相关功能
├── query.js              # 查询相关功能
├── renderbuffer.js       # 渲染缓冲区相关功能
├── texture.js            # 纹理相关功能
├── transform-feedback.js # 变换反馈相关功能
├── types.js              # 类型定义
├── utils.js              # 工具函数
└── vertex-array.js       # 顶点数组相关功能

2. 项目的启动文件介绍

项目的主入口文件是 index.js。在这个文件中，我们可以创建一个 WebGL 上下文，配置各种资源和命令，然后运行渲染循环。

以下是一个简单的启动示例：

import createContext from 'pex-context';
import { mat4 } from 'pex-math';
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);
});

在这个示例中，我们创建了一个 640x480 的 WebGL 上下文，然后创建了一个立方体几何体和相应的材质。我们设置了清除颜色和深度，并创建了一个渲染管道。最后，我们在渲染循环中提交了清除和绘制命令。

3. 项目的配置文件介绍

项目的配置文件是 package.json。在这个文件中，我们定义了项目的基本信息、依赖项、脚本和命令行工具等。

以下是一些重要的配置项：

• name: 项目的名称
• version: 项目的版本号
• description: 项目的描述
• main: 项目的主入口文件
• scripts: 项目脚本，如启动、构建、测试等
• repository: 项目的仓库地址
• license: 项目的许可证

例如：

{
  "name": "pex-context",
  "version": "3.2.0",
  "description": "Modern WebGL state wrapper for PEX",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/pex-gl/pex-context.git"
  },
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/pex-gl/pex-context/issues"
  },
  "homepage": "https://pex-gl.github.io/pex-context/",
  "dependencies": {
    "pex-math": "^3.0.0",
    "primitive-geometry": "^1.0.0"
  }
}

在这个配置文件中，我们设置了项目的名称、版本、描述、主入口文件、脚本、仓库地址、许可证等信息，并定义了项目的依赖项。

希望这份教程能够帮助您快速了解和启动 pex-context 项目。如果您有任何问题，请随时提问。