飞行

Flight是用于构建交互式应用程序的模块化TypeScript SDK——设计由AI编码代理以及人阅读并编写. 其超过150个可树可摇动的包跨出2D和3D图形,物理,动画,媒体,输入,资产格式,应用程序生命周期,以及桌面/移动平台API.

API是蜂窝:明确通过简单数据,自我识别姓名,明确所有权,输入时没有工作. 一个函数可以孤立地理解;一个应用程序可以导入一个能力而无需继承一个引擎. 同样的特性使密码库可以复制给物剂、可移植到编译目标、生产建筑小.

一次构建一个场景并选择一个渲染器——Canvas 2D,DOM,WebGL 2或WebGPU——只注册它所使用的执行. 将同样的小原始物编成游戏,可视化,媒体体验,桌面工具,或移动应用程序.

试试看

看,飞行会自己变的 现场介绍浏览 示例库比较 现有框架的端口,或在当地运行画廊:

npm install
npm run examples

开始

npm install @flighthq/sdk

创建显示对象场景,注册您使用的渲染器类型,更新渲染图,然后绘制:

import { webCanvasRenderSurfaceCreator } from '@flighthq/host-web';
import {
  addNodeChild,
  beginCanvasRenderPass,
  createCanvasElement,
  createCanvasRenderState,
  createCanvasRenderSurface,
  createCanvasScreenRenderTarget,
  createCanvasTextureResolvers,
  createDisplayObject,
  createSprite,
  createTexture,
  canvasSpriteRenderer,
  endCanvasRenderPass,
  getCanvasRenderStateTextureResolvers,
  loadImageResourceFromUrl,
  prepareScene2DRender,
  registerCanvasImageTextureResolver,
  registerNodeRenderer,
  renderCanvasScene2D,
  scene2DCanvasPipeline,
  SpriteKind,
} from '@flighthq/sdk';

const pixelRatio = window.devicePixelRatio || 1;
const canvas = createCanvasElement(webCanvasRenderSurfaceCreator, 550, 400, pixelRatio);
document.body.appendChild(canvas);

// Where the frame lands is a render target; how it is drawn is the render state. They are separate
// values, joined for the duration of a pass.
const screen = createCanvasScreenRenderTarget(
  createCanvasRenderSurface(webCanvasRenderSurfaceCreator, canvas, {
    height: canvas.height / pixelRatio,
    pixelRatio,
    width: canvas.width / pixelRatio,
  }),
);
const state = createCanvasRenderState(
  scene2DCanvasPipeline,
  createCanvasTextureResolvers(webCanvasRenderSurfaceCreator),
  { sceneGraphSyncPolicy: 'requiresInvalidation' },
);
// The background is what the pass clears to — a per-pass colour in linear float RGBA, not a field the
// render state carries around.
const screenClear = { color: [0xee / 0xff, 0xdd / 0xff, 0xcc / 0xff, 1] } as const;

registerCanvasImageTextureResolver(getCanvasRenderStateTextureResolvers(state));
registerNodeRenderer(state, SpriteKind, canvasSpriteRenderer);

const root = createDisplayObject();
root.scaleX = pixelRatio;
root.scaleY = pixelRatio;

const sprite = createSprite();
const image = await loadImageResourceFromUrl('assets/wabbit_alpha.png');
sprite.data.texture = createTexture({ dimension: '2d', source: image });
addNodeChild(root, sprite);

function enterFrame(): void {
  if (prepareScene2DRender(state, root)) {
    const pass = beginCanvasRenderPass(state, screen, screenClear);
    renderCanvasScene2D(pass, root);
    endCanvasRenderPass(pass);
  }

  requestAnimationFrame(enterFrame);
}

enterFrame();

同一场景通过DOM,WebGL2或WebGPU,通过创建匹配的渲染状态并注册后端的渲染器——对场景图本身没有变化. 显示对象保持纯数据;后端工作仍然清晰.

动画

应用软件包提供请求-激活-帧回路,并有打入的更新并渲染出信号. 主机执行是明确的;在浏览器中,在启动应用程序时通过网页主机:

npm install @flighthq/host-web

import { webHost } from '@flighthq/host-web';
import {
  connectSignal,
  createAppLoop,
  createTween,
  createTweenManager,
  easeOutElastic,
  invalidateNodeRender,
  startAppLoop,
  updateTweens,
} from '@flighthq/sdk';

const manager = createTweenManager();

const tween = createTween(manager, sprite, 1000, { x: 400, alpha: 0 }, { ease: easeOutElastic });
connectSignal(tween.onUpdate, () => invalidateNodeRender(sprite));

const app = createAppLoop();
connectSignal(app.onUpdate, (delta) => updateTweens(manager, delta));
connectSignal(app.onRender, () => {
  if (prepareScene2DRender(state, root)) {
    const pass = beginCanvasRenderPass(state, screen, screenClear);
    renderCanvasScene2D(pass, root);
    endCanvasRenderPass(pass);
  }
});

startAppLoop(webHost, app);

互动

任何场景节点的线起指针事件. 注册一次命中测试策略,然后创建一个交互管理器并将其连接到输入系统:

import {
  attachPointerInput,
  connectInputToInteraction,
  connectInteractionSignal,
  createInputManager,
  createInteractionManager,
  invalidateNodeRender,
  registerDefaultHitTests,
  setNodeHitTestEnabled,
} from '@flighthq/sdk';

registerDefaultHitTests();
setNodeHitTestEnabled(sprite, true);

const interaction = createInteractionManager(root);
const input = createInputManager();
attachPointerInput(input, canvas);
connectInputToInteraction(input, interaction, pixelRatio);

connectInteractionSignal(interaction, sprite, 'onPointerDown', () => {
  sprite.alpha = 0.5;
  invalidateNodeRender(sprite);
});
connectInteractionSignal(interaction, sprite, 'onPointerUp', () => {
  sprite.alpha = 1;
  invalidateNodeRender(sprite);
});

声音

用倒置格式装入音频资源, 然后播放 :

import { loadAudioResourceFromUrls, playAudioResource } from '@flighthq/sdk';

const audioContext = new AudioContext();
const sound = await loadAudioResourceFromUrls(audioContext, [{ url: 'assets/click.ogg' }, { url: 'assets/click.mp3' }]);

connectInteractionSignal(interaction, sprite, 'onPointerDown', () => {
  playAudioResource(audioContext, sound);
});

渲染模型

飞行将作者数据与后端工作分离:

1. 从显示对象,图示,文本,形状,平面,微粒,或3D场景节点来构建一个图.
2. 为 Canvas 2D, DOM, WebGL2 或 WebGPU 创建后端渲染状态.
3. 仅记录渲染器和效果后端的场景需要.
4. 执行明确的准备/更新通过.
5. 通过选中的后端绘制 .

Canvas和DOM是轻量级主机-web路径. WebGL2 和 WebGPU 添加 GPU 渲染目标,缓存管,遮蔽/材料注册,后处理,剪接,遮蔽,速度,渲染缓存,2D分批,并用一个20-材料 Cook-Torrance PBR + Classic/NPR/debug 遮蔽库的3D前置渲染器.

平台范围

目前飞行跨度超过150个独立可导入,可公布的包. 可通过下列方式对公众API进行检查:

npm run api
npm run api -- --json

主要领域:

所有软件包都在 @flighthq/。应用程序和实例通常从 @flighthq/sdk数字 :

import { addNodeChild, createBitmap, createShape } from '@flighthq/sdk';

库代码应该选择提供所需 API 的最小包根 :

import { createTween, updateTweens } from '@flighthq/tween';

平台 Host 价值观是明确的。 浏览器应用程序通过现成 webHost 或窄处 webHost* 值; Tauri 和 Capacitor 应用程序构造 tauriHost 或者说 capacitorHost 从他们注入的本地API。 在这些主机中,应用程序的API保持稳定.

工程信心

飞行是预放软件,所以信心来自每次改变背后的工程路径. 代码的更改通过两个单元测试道进行,一个完整的TypeScript构建,软件包和公-API验证,捆绑大小的预算,以及浏览器在DOM,Canvas,WebGL,和WebGPU之间的发烟和等价检查. 夜间运行增加了覆盖阈值并产生了API-地表检查.

main 是一个机器管理的有名有实的指针:它只推动其CI运行成功。 版本发布在以出处向 npm 发布完整包图之前, 验证精确标记的承诺通过 CI .

该储存库还将可靠性方面的关注保留在设计中:进口是无副作用的,特色家庭使用明确的登记簿,资源所有权和分配被命名,格式进口商报告结构化诊断,来源留在已检查的已汇编的可携带目标子集内,并且通过可互换的后端测试产出.

实例

画廊包括有重点的例子,包括形状、文字、互动、动画、瓷砖、颗粒、相撞、应用流程、音频/视频、文件格式加载,以及涵盖材料、取取取和取取火的三维场景。 在共享能力的地方,画廊允许您在支持的渲染器中切换相同的场景.

创建具体实例:

npm run build --workspace=examples/packages/shapes

运行一个特定的渲染器实例 Dev 服务器 :

npm run dev:canvas --workspace=examples/packages/shapes
npm run dev:dom --workspace=examples/packages/shapes
npm run dev:webgl --workspace=examples/packages/shapes
npm run dev:webgpu --workspace=examples/packages/scene3d

仓库

git clone https://github.com/flighthq/flight.git
cd flight
npm install

packages/      Workspace packages published as @flighthq/*
examples/      Standalone Vite example apps
conformance/   Import fixtures and structured conformance checks
tools/         Gallery, functional scenes, capture harness, and repo utilities
scripts/       Validation, API, coverage, ordering, size, and build scripts

有用的检查 :

npm run check              # package, type, API, export, portability, docs, and style gates
npm run test               # unit tests across all packages
npm run size               # gzip output size against committed budgets
npm run test:smoke         # fail on browser/runtime/render errors
npm run test:parity        # compare output across render backends
npm run test:regression    # compare output against committed fingerprints