SuperAPI AI 工具集

animaxxing-webgl

设计与创作

查看项目

更新于 10-15 23:34

技能介绍

用途:Animaxxing WebGL 提供原生 TypeScript 配方,用 GSAP 驱动 WebGL,在不重新设计站点的前提下为页面添加视觉效果。每个文档共享一个 OGL 渲染器和画布,图片平面精确跟踪每个 img 的位置。

主要能力:图片平面可跟踪 img 并支持 CORS;uniform 效果包括悬停透镜、滚动速度波纹、进入/退出擦除、图片故障、溶解、像素化、涟漪;框景视图可在元素框内绘制场景、粒子或液体表面;另有场景飞行、粒子变形、液体图像、metaballs 等配方。GSAP 补间着色器 uniform。页面仍以 DOM 为准,真实 img 或海报 img 保留 alt 文本、布局和链接,WebGL 无法绘制时自动显示。

使用方式:先加载匹配的 gsap-<framework> 技能(纯站点用 gsap-vanilla),缺失则安装。安装 gsap 3.13 或更高版本及 ogl 1.x。按需复制模块:webgl-stage.ts 始终需要;image-planes.ts 用于平面和加载图片纹理;uniform-effects.ts 用于图片效果;framed-views.ts 用于视图;然后 scene-flight.ts、particle-morph.ts、liquid-image.ts 或 metaballs.ts。仅从客户端代码导入。图片需 CORS:同源、data:、blob: 可用;CDN 图片需 Access-Control-Allow-Origin 和 crossorigin="anonymous"。

适用场景:为现有站点添加 WebGL 图片效果、悬停交互、滚动驱动动画、粒子变形、液体效果等,同时保持 DOM 可访问性和回退。

限制:OGL 不处理上下文丢失,由 stage 重建渲染器和各层;若项目已用 three.js,应移植配方而非添加 OGL。依赖祖先裁剪、border-radius、滤镜或 object-position 的图片应排除在 WebGL 外。每个构建器返回幂等 revert,释放所有资源。悬停忽略触摸和笔,键盘焦点居中透镜。具体收费、价格、平台支持等资料暂未提供。