@hyperframes / shader-transitions

超帧合成的WebGL着色器转换。使用片段着色器渲染gpu加速的场景到场景转换，由GSAP时间轴驱动。

安装

npm install @hyperframes/shader-transitions

或者直接通过CDN加载：

<script src="https://cdn.jsdelivr.net/npm/@hyperframes/shader-transitions/dist/index.global.js"></script>

使用

import { init } from "@hyperframes/shader-transitions";

const tl = init({
  bgColor: "#0a0a0a",
  accentColor: "#ff6b2b",
  scenes: ["scene-1", "scene-2", "scene-3"],
  transitions: [
    { time: 3, shader: "domain-warp", duration: 0.8 },
    { time: 8, shader: "light-leak", duration: 0.7 },
  ],
});

这个 init() 函数为每个过渡预捕获动画场景样本，在播放期间使用所选着色器合成缓存样本，并返回GSAP时间轴。场景动画在播放循环中不运行DOM捕获而通过着色器转换保持前进。如果WebGL不可用，它会回到正常的时间线播放，而不需要着色器合成。

当浏览器公开Chrome的实验性CanvasDrawElement API时，场景 capture使用原生的HTML-in-canvas via drawElementImage()。其他浏览器 使用现有的 html2canvas 回退。您可以对本机路径进行特性检测 与 isHtmlInCanvasCaptureSupported().

使用现有的时间轴

将你自己的GSAP时间轴传递到图层过渡上：

const tl = gsap.timeline({ paused: true });
// ... add your scene animations ...

init({
  bgColor: "#000",
  scenes: ["intro", "demo", "outro"],
  transitions: [
    { time: 5, shader: "cinematic-zoom" },
    { time: 12, shader: "glitch", duration: 0.5 },
  ],
  timeline: tl,
});

可用着色器

API

init(config): GsapTimeline

浏览器预览捕获规模和过渡准备加载UI所有权由 <hyperframes-player> （shader-capture-scale， shader-loading)，而不是组合代码。直接的非玩家预览保留了内置的全保真加载回退。

浏览器预览使用从组合ID、场景DOM/样式签名、转换时间、捕获FPS、比例和尺寸派生的键在IndexedDB中存储捕获的转换快照。在刷新时，匹配的快照被重新加载到WebGL纹理中，而不是再次被捕获。运行时场景或样式表编辑仅将相邻的过渡缓存标记为dirty；重新捕获被延迟到播放，以便编辑保持响应。

TransitionConfig

SHADER_NAMES

所有可用的着色器名称字符串的数组，用于验证或构建ui。

import { SHADER_NAMES } from "@hyperframes/shader-transitions";
// ["domain-warp", "ridged-burn", "whip-pan", ...]

分布

所有格式都包含源映射。包括TypeScript定义。

相关的包

• @hyperframes/core ——类型、解析器、运行时
• @hyperframes/engine ——渲染引擎
• hyperframes ——CLI

许可证

麻省理工学院