原版实测公开生产 harness
Executive summary
原版参数驱动的高保真主流程已经完成
当前版本已按原版公开 harness 的实测参数，复刻环形选包、惯性吸附、点击聚焦、横向撕封、包体打开、迷宫纹理卡背、颜色轮播、点击加速、溶解揭卡、结果卡周长追光与最终展示。用户提供的蓝、橙、金、红四套 RARELY 卡包已全部接入并可实时切换。
准确表述：参数级、交互级高保真复刻完成，尚不是对方专有资源和工程代码的逐字节复制。
原版生产代码、运行时图片和字体没有进入复刻程序；19 个开包音频已按 1.0.9 资源与时序接入，仅用于内部研究对照。当前未覆盖双卡分支、React Native 桥接、业务遥测和低端设备降级。
原版演示地址带 ?mockData=1，可脱离 App 注入测试数据；地址由对方控制，未来可能失效或更换版本。
- 原版引擎Three.js / WebGL + GSAP
- 宿主React Native 全屏 WebView
- 原版版本pack-opening v2 / 1.0.9
- 复刻引擎Three.js 0.185 + GSAP 3.15
- 验证视口1440×900 / 390×844
- 当前状态构建通过，自动化流程通过
Visual comparison
原版与复刻版分阶段对照
高保真复刻自有 RARELY 卡包素材
两者均采用 15 包圆周陈列、拖拽惯性、正面吸附、漂浮与镜头推进。复刻版使用用户自有卡包图，并以等效材质实现反射和金属高光。
Coverage matrix
当前覆盖范围与产品化缺口
已实现
部分实现
尚未实现
| 模块 | 状态 | 当前结果 | 达到产品级还需 |
|---|---|---|---|
| 15 包环形陈列 | 已实现 | 拖拽、惯性、吸附、点击命中 | 低端机实例化与性能档 |
| 选包聚焦 | 已实现 | 镜头推进、封口滑动光点与撕封隐藏逻辑 | 真机性能调优 |
| 撕封交互 | 已实现 | 外侧 25% 起手、双方向、曲线撕口、阈值回弹 | 可选更高阶曲面形变 |
| 单卡揭示 | 已实现 | 迷宫纹理卡背、8 圈旋转、溶解、4 倍加速 | 接入真实业务卡图 |
| 结果卡追光 | 已实现 | 真实卡面不进 bloom；独立边框层做 5 秒双色追光、bloom 1.35 与末段整圈收束 | 按业务稀有度切换渐变 |
| 粒子系统 | 已实现 | 8 个粗环境粒子；涡流 1000、雪点 300、终场尘埃 1000，采用核心 + 软晕与稀疏高亮 | 按 GPU 建立质量档 |
| 选择性光晕 | 已实现 | 双 Composer 隔离粒子、封口扫光、撕封喷流和卡牌追光，避免整卡过曝 | WebGPU 版本可直接使用 MRT mask |
| 稀有包表现 | 已实现 | 四轮烟花，每轮 250 粒子的等效实现 | 与后端稀有度配置联动 |
| 声音编排 | 已实现 | 19 个原版 cue、Web Audio 预解码、循环、随机纸声、揭示点位和烟花顺序 | 公开发布前确认音频授权 |
| 触觉反馈 | 部分实现 | 浏览器 Vibration API | 原生 light/medium/heavy 桥接 |
| 双卡/附赠卡 | 尚未实现 | 当前仅单卡 | 预分配两卡与连续揭示状态 |
| 评级卡/卡砖 | 部分实现 | 程序化评级卡视觉占位 | 真实标签数据、厚度和边缘配置 |
| React Native 桥 | 尚未实现 | 目前为浏览器独立原型 | bridge、暂停恢复、完成与错误协议 |
| 异常降级/遥测 | 尚未实现 | 未接业务监控 | 超时、context lost、fallback、性能埋点 |
How it works
原版是怎样做出来的
购买接口先返回卡片和展示配置，React Native 将这些数据注入全屏 WebView，独立 Web 引擎再完成实时动画。动画并不是一段固定视频，因此同一套引擎可以替换卡包图、卡图和稀有度配色。
01 业务层
购买结果
packImageURL、cardFrontImageURL、rarityColor、isRare、附赠卡和奖励进度。
→
02 宿主层
React Native WebView
注入 PackOpeningBridge，接收 engineReady、haptic、done，并负责降级。
→
03 表现层
Three.js 引擎
模型、材质、shader、GSAP 时间轴、粒子、音频、输入和 GPU 预热。
BOOT预加载图片、声音、字体、场景和 shader 预热
CAROUSELPick a Pack圆周陈列、惯性旋转、最近包吸附
FOCUS选中聚焦目标包进场，其他实例退场
TEARSlice the seal封口面光晕、20→0 px 扫光、手势喷流和触觉
OPEN包体打开粗粒子旋涡、星云底光、雪点、最终尘埃和声音编排
REVEALTap to speed up色彩采样、旋转、溶解，可四倍加速
COMPLETETap to continue最终卡稳定展示并回调原生页面
Stage implementation
从进入页面到结果卡稳定展示，每个阶段具体做了什么
整个体验由一个有限状态机驱动。输入事件只修改当前阶段允许的状态，GSAP 负责确定性时间轴，Three.js 每帧更新材质、相机和粒子；音频与触觉作为同一时间轴上的副作用触发。
资源与 GPU 预热
进入条件页面加载或 WebView bridgeReady。未完成预热前由 loading 层阻止用户输入。
- 资源
- 并行加载卡包图、卡图、纹理和 19 个音频文件，Web Audio 预解码。
- 渲染
- 创建 15 包实例、反射、两套 Composer，并预编译揭卡和追光 shader。
- 完成信号
- 浏览器版隐藏 loading；原生版应回传 engineReady。
- 异常
- 资源失败时保留程序化占位和合成音降级，不阻断主状态机。
环形选包
用户输入横向拖拽改变圆环角度；松手后按速度惯性衰减，低于阈值吸附到最近卡位；轻点命中正面卡包。
- 布局
- 15 包、宽 3、间距 1.25，按圆周均匀排布并朝向圆心。
- 动态
- 每包独立正弦漂浮；拖拽速度限制 2.5 rad/s，吸附约 1.2 秒。
- 材质
- 主体图叠加深度遮罩和方向高光，镜像实例下沉 2.3 并压暗 90%。
- 氛围
- 8 个粗粒子缓慢上升，黑雾隐藏远端卡包，卡位切换播放轻回弹音。
卡包聚焦
进入条件点击命中有效卡包。轮播输入被冻结，其余实例淡出，目标包切换到独立聚焦网格。
- 时间轴
- 0.45 秒对齐正面，0.8 秒完成聚焦；镜头向前 3.5、向上 2.72。
- 封口提示
- 20→0 px 光点用 1.6 秒扫过，结束后停顿 3 秒；开始撕封立即隐藏。
- 光晕
- 封口面使用边缘归零的椭圆衰减，光点采用小核心与低强度软 halo。
- 交互提示
- 显示 Slice the seal，并只允许从封口左右外侧约 25% 区域起手。
手势撕封
用户输入指针横向距离映射到 0–1 进度。方向在起手时锁定；未达到 1 松手则回弹，达到 1 在 pointermove 中立即开包。
- 几何
- 曲线撕口逐点增加 drawRange，上封口同步轻微旋转和水平偏移。
- 粒子
- 100 粒子、寿命 1.5 秒的等效池，按移动分批喷出点核和短流线。
- 声音
- 每移动约 10 px 触发一段包装纸声，150 ms 去抖，并保持 anticipation 底音。
- 触觉
- 约每 50 ms 反馈一次，按撕封进度从 light 过渡到 medium、heavy。
包体退场与能量释放
进入条件撕封进度达到 100%。停止手势输入，启动包体退场、粒子、庆典音轨和揭卡时间轴。
- 包体
- 上封口约 0.3 秒横向飞出；主体延迟 0.2 秒后用 0.6 秒向下退场。
- 旋涡
- 1000 逻辑粒子围绕 0.8R 轨道上升；同帧稀疏高亮并叠加低透明星云底光。
- 二级粒子
- 0.8 秒后加入 300 雪点；最终尘埃池 1000，稀有模式延迟 1.5 秒。
- 稀有分支
- 0.2 / 0.7 / 1.5 / 2.2 秒触发四轮烟花，每轮 250 粒子和独立爆炸音。
卡背旋转与卡面溶解
用户输入阶段内任意点击将 GSAP 时间轴、溶解和雪点切换到 4 倍速，并隐藏加速提示。
- 进场
- 卡片先上升到 y=3，再向镜头推进到 z=0.85，并开始多圈 Y 轴旋转。
- 卡背
- 程序化几何纹理按稀有度样本换色，斜向追光角度 -0.9 rad。
- 揭示
- 旋转结束锁定真实稀有度，4 秒 expo.out 噪声溶解切换最终卡图。
- 合成
- 粒子、星云与追光进入选择性 bloom，卡背和最终卡主体保持清晰。
结果卡与边框追光
进入条件溶解完成。停止占位卡渲染，保留最终卡图、终场尘埃和继续提示。
- 事实结构
- 真实卡面 bloom 为 0；发光来自独立边框追光网格，而不是整张卡泛白。
- 追光
- 5 秒绿金双色周长光带，强度 3、bloom 1.35，末段淡出 1.25 秒。
- 收束
- 最后 1 秒用 finale intensity 1.25 做整圈短暂闪光，然后恢复稳定展示。
- 退出
- 浏览器点击后重新开始；原生产品应发送 done 并返回购买结果页。
Implementation stack
实现技术栈与各层职责
当前版本是纯静态 Web 实现，不依赖 React 或后端运行时。Three.js 只负责实时画面，GSAP 只负责确定性时间轴，业务结果和原生能力在产品化阶段通过 React Native WebView Bridge 接入。
Vite 8.1 + pnpm
Vite 处理 ES Module、静态资源和生产打包；pnpm 锁定 Three.js、GSAP 与 Playwright 版本。输出目录为 dist/，可直接部署 Cloudflare Pages。
Three.js 0.185 / WebGL
负责透视相机、15 包圆环、纹理材质、BufferGeometry 粒子、Raycaster 点击命中、自定义 ShaderMaterial 和每帧更新。
GSAP 3.15
聚焦、撕封回弹、包体退场、卡片旋转、溶解和 4 倍加速都挂在可控时间轴上，避免多个定时器产生状态竞争。
双 Composer 选择性 Bloom
Bloom Composer 只渲染粒子、封口光和边框追光；Final Composer 合并清晰基础画面，避免卡包或卡面整体过曝。
Web Audio + Pointer Events
音频预解码为 AudioBuffer，按 cue 调度；Pointer Events 统一鼠标和触摸，浏览器触觉使用 Vibration API。
Playwright 1.55
使用 Edge WebGL 环境跑 1440×900 和 390×844 全流程，检查阶段提示、画布尺寸、断图、控制台异常和页面溢出。
01 业务数据卡包图、卡图、稀有度和开关
02 状态机限制每阶段允许的输入和迁移
03 GSAP驱动相机、网格和揭卡时间轴
04 Three.js渲染材质、粒子和选择性后处理
05 宿主回调音频、触觉、埋点、done 和 error
Asset structure
资源不是一包序列帧，而是动态素材与通用引擎组合
业务动态资源
- 卡包图：接口返回的 packImageURL，决定每个产品的主外观。
- 原版素材契约：Logo、标题和品类文字已烘焙在主体 JPEG；引擎不动态排版卡包文字。
- 本版已接入：
blue.png、orange.png、gold.png、red.png四套用户自有透明 PNG。 - 卡面图：普通卡和附赠卡的 cardFrontImageURL。
- 主题颜色：particleColor、slabEdgeColor、tearStripColor。
- 稀有度样本：揭示前轮播的 otherRaritySampleColors。
引擎通用资源
- 材质：pack-depth、pattern、perlin 噪声。
- 封口：原版上下封口不是主体图片的一部分，由 tearStripColor、分段平面和程序化压纹生成。
- 字体：Liberation Sans MSDF 字形与 atlas。
- 声音：轮播、回弹、撕裂、纸张、whoosh、揭卡和烟花等约 20 个文件。
- 程序效果：反射实例、黑雾、溶解、光晕、涡流、雪和烟花。