PEX-context 启动与配置文档

PEX-context 启动与配置文档

项目的目录结构及介绍

pex-context 是一个用于现代 WebGL 应用的状态封装库。它提供了一系列函数和对象，用于管理 GPU 资源（如纹理和缓冲区）、设置状态管线和通道，并将它们组合成命令。

以下是 pex-context 的主要目录结构：

• examples: 包含使用 pex-context 的示例代码。
• .editorconfig: 包含编辑器配置信息。
• .gitignore: 指定 Git 忽略的文件和目录。
• .nojekyll: 防止 GitHub Pages 解析 README.md 文件。
• CHANGELOG.md: 记录项目版本更新信息。
• LICENSE.md: 包含项目许可证信息。
• README.md: 项目的说明文档。
• buffer.js: 用于管理 GPU 缓冲区的函数。
• framebuffer.js: 用于管理帧缓冲区的函数。
• index.html: 示例页面的 HTML 文件。
• index.js: 示例页面的 JavaScript 文件。
• pass.js: 用于管理渲染通道的函数。
• pipeline.js: 用于管理渲染管线的函数。
• polyfill.js: 用于提供 WebGL 2 功能的 polyfill。
• program.js: 用于管理着色器程序的函数。
• query.js: 用于管理查询对象的函数。
• renderbuffer.js: 用于管理渲染缓冲区的函数。
• texture.js: 用于管理 GPU 纹理的函数。
• transform-feedback.js: 用于管理变换反馈的函数。
• types.js: 定义了项目中使用的类型。
• utils.js: 包含一些实用函数。
• vertex-array.js: 用于管理顶点数组的函数。

项目的启动文件介绍

index.js 是 pex-context 的启动文件。它定义了一个名为 createContext 的函数，用于创建一个 ctx 对象。ctx 对象包含了所有与 pex-context 相关的函数和对象。

以下是 index.js 的基本用法：

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);
});

项目的配置文件介绍

index.js 文件中，createContext 函数接受一个配置对象，用于设置 ctx 对象的属性。以下是配置对象中的一些常用选项：

• width: 设置画布宽度。
• height: 设置画布高度。
• pixelRatio: 设置像素比。
• premultipliedAlpha: 启用或禁用预乘 alpha。
• alpha: 启用或禁用 alpha 通道。
• depth: 启用或禁用深度测试。
• stencil: 启用或禁用模板测试。
• antialias: 启用或禁用抗锯齿。
• failIfMajorPerformanceCaveat: 如果性能不足，则返回 null。

例如，创建一个具有特定配置的 ctx 对象：

const ctx = createContext({
  width: 800,
  height: 600,
  pixelRatio: window.devicePixelRatio,
  premultipliedAlpha: true,
  alpha: true,
  depth: true,
  stencil: true,
  antialias: true,
  failIfMajorPerformanceCaveat: false
});

以上是 pex-context 的启动与配置文档。希望对您有所帮助！