Back to Details

fal-regenerate-3d

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

fal-regenerate-3d Skill

fal-regenerate-3d 技能

Runtime: Asset generation steps run via the genmedia CLI (FLUX.2 / GPT-Image-2 / Meshy v6 / Seedance / etc.). The final deliverable is a static HTML page with Three.js, generated assets are bundled into it. See the 
genmedia
skill for command syntax; run 
genmedia init
once if not yet installed.
End-to-end recipe to ship a polished, multi-character 3D web experience using fal.ai models. This is the recipe that powers fal-roster.vercel.app: a cyberpunk character selector with 10 unique operatives, each with a matching companion creature, environment-themed floor texture, animated background and color palette.
运行时说明：资源生成步骤通过genmedia CLI执行（FLUX.2 / GPT-Image-2 / Meshy v6 / Seedance 等）。最终交付物是一个集成Three.js的静态HTML页面，生成的资源会打包到其中。有关命令语法，请查看
genmedia
技能；若未安装，请先运行
genmedia init
。
这是一套使用fal.ai模型打造精美多角色3D网页体验的端到端方案。 该方案为**fal-roster.vercel.app**提供技术支持：这是一个包含10名独特特工的赛博朋克风格角色选择器，每个特工都配有匹配的伴生生物、环境主题地面纹理、动画背景和调色板。

What it builds

构建产出

For each character you get:
  • A stylized 3D character GLB (rigged + animated, baked into the file)
  • A companion creature GLB (small static, themed to match the character)
  • A per-character PBR floor (basecolor / normal / roughness / metalness, all generated)
  • A looped video background keyed to the biome
  • A 3-color palette that drives the whole UI (CSS custom properties)
  • A portrait crop for the roster card
All packaged into a single static HTML page with a Three.js scene. ~25–35 MB of GLBs total after compression.
针对每个角色，你将获得：
  • 风格化3D角色GLB文件（带骨骼绑定+动画，已烘焙到文件中）
  • 伴生生物GLB文件（小型静态模型，风格与角色匹配）
  • 角色专属PBR地面（基础色/法线/粗糙度/金属度，全部生成）
  • 循环视频背景（与生物群落主题匹配）
  • 三色调色板（驱动整个UI的CSS自定义属性）
  • ** roster卡片头像裁剪图**
所有内容都打包到一个集成Three.js场景的静态HTML页面中。压缩后GLB文件总大小约为25–35 MB。

Pipeline

流程管线

1. GPT-Image-2 → 1024x1536 character full-body T-pose (per character)
2. Meshy v6 → image-to-3d, enable_rigging=true, animation_action_id={chosen}
 → animated GLB (idle, dance, alert, etc.)
3. GPT-Image-2/edit → companion creature image, color-locked to character palette
4. Meshy v6 → image-to-3d, enable_rigging=false → static creature GLB
5. PATINA → fal-ai/patina/material/extract on the character image,
 returns basecolor + normal + roughness + metalness for the floor
6. Seedance 2.0 → fal-ai/bytedance/seedance-2.0/fast/image-to-video, 8s loop
7. gltf-transform CLI → resize 1024 → webp q80 → draco
 (typically 95–96% size reduction, ~400–800 KB final)
8. Three.js scene → MeshStandardMaterial floor with alphaMap circular cutout,
 mirrored reflection (refl.y = root.y, scale.y = -1),
 breathing animation on companions,
 per-character palette via CSS custom properties (--c1/--c2/--c3),
 per-character floor texture swap on character click,
 transition lines + radial flash on swap
1. GPT-Image-2 → 生成1024x1536分辨率的角色全身T姿图像（每个角色一张）
2. Meshy v6 → 图像转3D，启用enable_rigging=true，设置animation_action_id={所选动作}
 → 生成带动画的GLB文件（ idle、dance、alert等动作）
3. GPT-Image-2/edit → 生成伴生生物图像，颜色与角色调色板锁定匹配
4. Meshy v6 → 图像转3D，启用enable_rigging=false → 生成静态生物GLB文件
5. PATINA → 对角色图像执行fal-ai/patina/material/extract操作，
 返回地面所需的基础色+法线+粗糙度+金属度贴图
6. Seedance 2.0 → 执行fal-ai/bytedance/seedance-2.0/fast/image-to-video，生成8秒循环视频
7. gltf-transform CLI → 调整分辨率至1024 → 转webp格式（质量q80）→ 应用draco压缩
 （通常可减少95–96%的大小，最终约400–800 KB）
8. Three.js场景 → 使用MeshStandardMaterial创建带alphaMap圆形镂空的地面，
 添加镜像反射（refl.y = root.y，scale.y = -1），
 为伴生生物添加呼吸动画，
 通过CSS自定义属性（--c1/--c2/--c3）实现角色专属调色板，
 点击角色时切换对应地面纹理，
 切换时显示过渡线条+径向闪光效果

CREATE-YOUR-OWN flow

自定义创建流程

Visitors with a FAL key can generate their own character + companion live, in-browser:
flux-2 klein 9b (text-to-image)
 └─ character full-body image
 ├─ Meshy v6 (rigged + animated) → character GLB
 └─ flux-2 klein 9b/edit → companion image
 └─ Meshy v6 (no rig) → companion GLB
Cost: ~$2–3 per generation (4 fal calls). Runs in background, modal closes on Generate so the user can keep using the experience while the gen runs. The 
CREATE YOUR OWN
tile transforms into a loading state, then becomes the new character card with a 
↻ re-create
button.
拥有FAL密钥的访客可在浏览器中实时生成自己的角色+伴生生物：
flux-2 klein 9b（文本转图像）
 └─ 生成角色全身图像
 ├─ Meshy v6（带绑定+动画）→ 角色GLB文件
 └─ flux-2 klein 9b/edit → 伴生生物图像
 └─ Meshy v6（无绑定）→ 伴生生物GLB文件
成本：每次生成约2–3美元（4次fal调用）。生成在后台运行，点击「生成」后模态框关闭，用户可在生成过程中继续使用体验。「自定义创建」卡片会切换为加载状态，生成完成后变为新角色卡片，并带有「↻ 重新创建」按钮。

Key fal endpoints used

使用的核心fal端点

StepEndpoint
Character image (curated)
openai/gpt-image-2
Character image (live)
fal-ai/flux-2/klein/9b
Companion image
fal-ai/gpt-image-2/edit
or 
fal-ai/flux-2/klein/9b/edit
3D character/companion
fal-ai/meshy/v6/image-to-3d
Per-character floor PBR
fal-ai/patina/material/extract
Background video
fal-ai/bytedance/seedance-2.0/fast/image-to-video
Logo / icon cleanup
fal-ai/bria/background/remove
步骤端点
角色图像（精选）
openai/gpt-image-2
角色图像（实时）
fal-ai/flux-2/klein/9b
伴生生物图像
fal-ai/gpt-image-2/edit
或 
fal-ai/flux-2/klein/9b/edit
3D角色/伴生生物
fal-ai/meshy/v6/image-to-3d
角色专属地面PBR
fal-ai/patina/material/extract
背景视频
fal-ai/bytedance/seedance-2.0/fast/image-to-video
Logo/图标清理
fal-ai/bria/background/remove

Meshy animation IDs

Meshy动画ID

Curated dance / idle action IDs (full list at https://docs.meshy.ai/en/api/animation-library):
IDAnimation
0Idle (default)
2Alert
36Confused (scratch)
48Mirror viewing
64All_Night_Dance
405Joyful_Dance_with_Hand_Sway
591Hip_Hop_Dance
64–83Various Pop_Dance variants
精选的舞蹈/ idle动作ID（完整列表见https://docs.meshy.ai/en/api/animation-library）：
ID动画动作
0Idle（默认）
2Alert（警觉）
36Confused（挠头疑惑）
48Mirror viewing（照镜子）
64All_Night_Dance（通宵舞蹈）
405Joyful_Dance_with_Hand_Sway（摆手欢乐舞）
591Hip_Hop_Dance（嘻哈舞蹈）
64–83各种Pop_Dance（流行舞）变体

Three.js scene notes

Three.js场景说明

  • Floor: 
    PlaneGeometry(7, 7, 220, 220)
    cut into a disc via radial-gradient 
    alphaMap
    . High tessellation enables real 
    displacementMap
    (uses basecolor as height).
  • Reflection: clone of the root with 
    scale.y = -1
    , 
    BackSide
    , 
    depthWrite = false
    , 
    renderOrder = -1
    . For characters whose origin is at the feet, 
    refl.position.y = root.position.y
    produces a visible mirror; the floor's 
    transparent = true; opacity ≈ 0.5
    lets it bleed through.
  • Breathing: per-frame 
    scale.setScalar(base * (1 + sin(t*1.3)*0.025))
    + a small Y bob on companions. The reflection mirrors the bob so the mirror stays consistent.
  • Palette swap: 
    :root.style.setProperty('--c1', hex)
    etc. Every UI element (sparklines, pulses, bars, model pills, edge map dots) derives its color from 
    var(--c1)
    / 
    var(--c2)
    .
  • Floor swap: 
    texLoader.load()
    4 PBR maps from 
    assets/floor/{charId}/
    , dispose old textures, set 
    floorMat.color
    back to white (since the basecolor is already char-themed).
  • Transition: 9 diagonal lines sweep across the viewport (
    @keyframes tfx-sweep
    ) on character click + a radial flash; bg video crossfades between two 
    <video>
    elements; character GLB slides out and the new one slides in.
  • 地面：使用
    PlaneGeometry(7, 7, 220, 220)
    ，通过径向渐变
    alphaMap
    裁剪为圆盘形状。高细分度支持真实的
    displacementMap
    （使用基础色作为高度）。
  • 反射：克隆根节点并设置
    scale.y = -1
    、
    BackSide
    、
    depthWrite = false
    、
    renderOrder = -1
    。对于原点在脚部的角色，设置
    refl.position.y = root.position.y
    可生成可见镜像；地面设置
    transparent = true; opacity ≈ 0.5
    让镜像效果自然渗透。
  • 呼吸动画：每帧执行
    scale.setScalar(base * (1 + sin(t*1.3)*0.025))
    ，并为伴生生物添加微小的Y轴摆动。反射会同步摆动，保持镜像一致性。
  • 调色板切换：通过
    :root.style.setProperty('--c1', hex)
    等方式实现。所有UI元素（火花线条、脉冲效果、进度条、模型标签、边缘映射点）的颜色均取自
    var(--c1)
    / 
    var(--c2)
    。
  • 地面切换：使用
    texLoader.load()
    加载
    assets/floor/{charId}/
    下的4张PBR贴图，销毁旧纹理，将
    floorMat.color
    重置为白色（因为基础色已与角色主题匹配）。
  • 过渡效果：点击角色时，9条对角线扫过视口（
    @keyframes tfx-sweep
    ）并伴随径向闪光；背景视频在两个
    <video>
    元素间交叉淡入淡出；旧角色GLB滑出，新角色GLB滑入。

Reference implementation

参考实现

Cost reference (curated build)

成本参考（精选构建）

For one full character:
StepApprox. cost
1 GPT-Image-2 (character)$0.04
1 Meshy v6 rigged + animated$0.80
1 GPT-Image-2/edit (companion)$0.04
1 Meshy v6 static (companion)$0.20
1 PATINA floor (4 maps)$0.04
1 Seedance fast (bg video)$0.08
Total per character~$1.20
10 characters~$12
Runtime parallelizes well, the original 10-character set was generated in ~10 minutes wall-clock with 9 concurrent jobs per stage.
单个完整角色的成本：
步骤近似成本
1次GPT-Image-2（角色）$0.04
1次Meshy v6（带绑定+动画）$0.80
1次GPT-Image-2/edit（伴生生物）$0.04
1次Meshy v6（静态）$0.20
1次PATINA地面（4张贴图）$0.04
1次Seedance fast（背景视频）$0.08
单个角色总成本~$1.20
10个角色总成本~$12
运行时支持良好的并行处理，最初的10角色集在每个阶段使用9个并发任务的情况下，约10分钟即可生成完成。