Executive summary

# 原版参数驱动的高保真主流程已经完成

当前版本已按原版公开 harness 的实测参数，复刻环形选包、惯性吸附、点击聚焦、横向撕封、包体打开、迷宫纹理卡背、颜色轮播、点击加速、溶解揭卡、结果卡周长追光与最终展示。用户提供的蓝、橙、金、红四套 RARELY 卡包已全部接入并可实时切换。

准确表述：参数级、交互级高保真复刻完成，尚不是对方专有资源和工程代码的逐字节复制。

原版生产代码、运行时图片和字体没有进入复刻程序；19 个开包音频已按 1.0.9 资源与时序接入，仅用于内部研究对照。当前未覆盖双卡分支、React Native 桥接、业务遥测和低端设备降级。

打开原版演示 原版 RN 入口 打开复刻版 下载实现源码 下载参数表 MD

原版演示地址带 `?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

## 原版与复刻版分阶段对照

原版实测公开生产 harness
高保真复刻自有 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 预热
CAROUSEL Pick a Pack 圆周陈列、惯性旋转、最近包吸附
FOCUS 选中聚焦目标包进场，其他实例退场
TEAR Slice the seal 封口面光晕、20→0 px 扫光、手势喷流和触觉
OPEN 包体打开粗粒子旋涡、星云底光、雪点、最终尘埃和声音编排
REVEAL Tap to speed up 色彩采样、旋转、溶解，可四倍加速
COMPLETE Tap to continue 最终卡稳定展示并回调原生页面

Stage implementation

## 从进入页面到结果卡稳定展示，每个阶段具体做了什么

整个体验由一个有限状态机驱动。输入事件只修改当前阶段允许的状态，GSAP 负责确定性时间轴，Three.js 每帧更新材质、相机和粒子；音频与触觉作为同一时间轴上的副作用触发。

00 / BOOT

### 资源与 GPU 预热

进入条件页面加载或 WebView bridgeReady。未完成预热前由 loading 层阻止用户输入。

资源
  并行加载卡包图、卡图、纹理和 19 个音频文件，Web Audio 预解码。
渲染
  创建 15 包实例、反射、两套 Composer，并预编译揭卡和追光 shader。
完成信号
  浏览器版隐藏 loading；原生版应回传 engineReady。
异常
  资源失败时保留程序化占位和合成音降级，不阻断主状态机。

01 / CAROUSEL

### 环形选包

用户输入横向拖拽改变圆环角度；松手后按速度惯性衰减，低于阈值吸附到最近卡位；轻点命中正面卡包。

布局
  15 包、宽 3、间距 1.25，按圆周均匀排布并朝向圆心。
动态
  每包独立正弦漂浮；拖拽速度限制 2.5 rad/s，吸附约 1.2 秒。
材质
  主体图叠加深度遮罩和方向高光，镜像实例下沉 2.3 并压暗 90%。
氛围
  8 个粗粒子缓慢上升，黑雾隐藏远端卡包，卡位切换播放轻回弹音。

02 / FOCUS

### 卡包聚焦

进入条件点击命中有效卡包。轮播输入被冻结，其余实例淡出，目标包切换到独立聚焦网格。

时间轴
  0.45 秒对齐正面，0.8 秒完成聚焦；镜头向前 3.5、向上 2.72。
封口提示
  20→0 px 光点用 1.6 秒扫过，结束后停顿 3 秒；开始撕封立即隐藏。
光晕
  封口面使用边缘归零的椭圆衰减，光点采用小核心与低强度软 halo。
交互提示
  显示 Slice the seal，并只允许从封口左右外侧约 25% 区域起手。

03 / TEAR

### 手势撕封

用户输入指针横向距离映射到 0–1 进度。方向在起手时锁定；未达到 1 松手则回弹，达到 1 在 pointermove 中立即开包。

几何
  曲线撕口逐点增加 drawRange，上封口同步轻微旋转和水平偏移。
粒子
  100 粒子、寿命 1.5 秒的等效池，按移动分批喷出点核和短流线。
声音
  每移动约 10 px 触发一段包装纸声，150 ms 去抖，并保持 anticipation 底音。
触觉
  约每 50 ms 反馈一次，按撕封进度从 light 过渡到 medium、heavy。

04 / OPEN

### 包体退场与能量释放

进入条件撕封进度达到 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 粒子和独立爆炸音。

05 / REVEAL

### 卡背旋转与卡面溶解

用户输入阶段内任意点击将 GSAP 时间轴、溶解和雪点切换到 4 倍速，并隐藏加速提示。

进场
  卡片先上升到 y=3，再向镜头推进到 z=0.85，并开始多圈 Y 轴旋转。
卡背
  程序化几何纹理按稀有度样本换色，斜向追光角度 -0.9 rad。
揭示
  旋转结束锁定真实稀有度，4 秒 expo.out 噪声溶解切换最终卡图。
合成
  粒子、星云与追光进入选择性 bloom，卡背和最终卡主体保持清晰。

06 / COMPLETE

### 结果卡与边框追光

进入条件溶解完成。停止占位卡渲染，保留最终卡图、终场尘埃和继续提示。

事实结构
  真实卡面 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 接入。

Build

### Vite 8.1 + pnpm

Vite 处理 ES Module、静态资源和生产打包；pnpm 锁定 Three.js、GSAP 与 Playwright 版本。输出目录为 `dist/`，可直接部署 Cloudflare Pages。

Rendering

### Three.js 0.185 / WebGL

负责透视相机、15 包圆环、纹理材质、BufferGeometry 粒子、Raycaster 点击命中、自定义 ShaderMaterial 和每帧更新。

Timeline

### GSAP 3.15

聚焦、撕封回弹、包体退场、卡片旋转、溶解和 4 倍加速都挂在可控时间轴上，避免多个定时器产生状态竞争。

Post FX

### 双 Composer 选择性 Bloom

Bloom Composer 只渲染粒子、封口光和边框追光；Final Composer 合并清晰基础画面，避免卡包或卡面整体过曝。

Media & Input

### Web Audio + Pointer Events

音频预解码为 AudioBuffer，按 cue 调度；Pointer Events 统一鼠标和触摸，浏览器触觉使用 Vibration API。

Quality

### Playwright 1.55

使用 Edge WebGL 环境跑 1440×900 和 390×844 全流程，检查阶段提示、画布尺寸、断图、控制台异常和页面溢出。

01 业务数据卡包图、卡图、稀有度和开关
02 状态机限制每阶段允许的输入和迁移
03 GSAP 驱动相机、网格和揭卡时间轴
04 Three.js 渲染材质、粒子和选择性后处理
05 宿主回调音频、触觉、埋点、done 和 error
下载技术栈 MD 下载技术笔记 MD 下载完整源码

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 个文件。
- 程序效果：反射实例、黑雾、溶解、光晕、涡流、雪和烟花。

Evidence boundary

## 哪些是已证实，哪些仍可被证伪

已证实

APK 存在版本化 WebView 入口、桥接参数和消息协议；生产 harness 使用 Three.js、GSAP、WebGL 和对应资源分类。

高可信推断

后端 animationURL 可能服务商品页或其他卡包展示，并不是当前购买后主开包流程的唯一入口。

仍需真机验证

不同 GPU、弱网、低电量、后台恢复和 WebGL context lost 时的真实降级阈值，以及双卡真实时序。

下载技术笔记 MD 下载参数记录 MD 下载技术栈 MD 查看自动化验证结果 下载实现源码