SuperAPI AI 工具集

crt-shader

前端与建站

查看项目

更新于 10-16 03:13

技能介绍

用途:为图片、canvas 或 Three.js / React Three Fiber 场景添加 CRT 复古扫描线效果,属于多通道 WebGL 2 的 CRT 重建,包含信号滤波、亮度相关扫描线与显示光学。仅限浏览器,需 WebGL 2,使用 ES 模块并带 TypeScript 声明,输出为黑底上的不透明 RGB。

主要能力:提供多种适配入口,包括核心包(图片/画布,无框架)、crt-shader/react(React 静态图片)、crt-shader/three(Three 原生 EffectComposer)、crt-shader/postprocessing(pmndrs postprocessing)、crt-shader/r3f(React Three Fiber)、crt-shader/presets(仅预设数据)和 crt-shader/glsl(自定义宿主用原始 GLSL)。内置 reference、clean、soft、photoSoft 预设,并支持 spread、bleed、gamma、beam、bloom、glow、focus、mask、exposure、blackLevel、通道增益与颜色交叉混合等标量设置。

使用方式:先检查 package.json 是否已含 crt-shader,缺失则用项目包管理器安装,例如 pnpm add crt-shader,再按所选适配器安装对应 peer 依赖。核心用法为 createRuntime、prepareInput 后调用 runtime.render;React 用 CRTImage;Three 在 EffectComposer 中把 CRTPass 放在最后;R3F 使用 CRT 组件。

限制与注意:原生 Three 需在 CRT 前加 OutputPass,之后不再编码;pmndrs 需在 CRT 前做线性色调映射且不加 OutputPass。透明场景需在黑底上合成,输出 alpha 恒为 1。远程图片需 CORS 头。SSR 下导入安全但仅在客户端渲染,Next.js 中 React 文件需标记 'use client'。需保持 three、react、postprocessing 各一份副本。运行时和手动添加的 pass 需调用 dispose(),acquireRuntime() 租约只释放一次。未知键和非有限值会抛错,范围不做钳制。