空氣瞬間凝固。沒有美術(shù)、沒有建模、沒有預(yù)算,只有一杯冷掉的拿鐵和一根快燒完的神經(jīng)。
但 120 分鐘后,我們不僅上線了同款體驗(yàn),還把 GMV 直接抬高了 27%。秘訣只有四個(gè)字:Genie 3 + Shopify。下面把全過程拆給你看,復(fù)制粘貼即可復(fù)刻。


0. 開場(chǎng) 3 分鐘:先弄清到底要做什么

角色 原話 翻譯
老板 “對(duì)標(biāo)就行” 用戶能上傳一張房間平鋪圖 → AI 生成 3D 房間 → 家具替換成我們 SKU → 點(diǎn)擊購買
設(shè)計(jì) “我今天請(qǐng)假” 不能重拍產(chǎn)品圖,必須復(fù)用現(xiàn)有素材
技術(shù) “2 小時(shí)夠嗎” 不能改主題,不能碰 checkout,只能前端注入
運(yùn)營 “預(yù)算 0” 用開源或按量付費(fèi)

1. 5 分鐘選型:為什么選 Genie 3?

Google DeepMind 8 月 5 日發(fā)布的 Genie 3 是首個(gè)實(shí)時(shí)交互世界模型:

一句話:它就是“文字版 UE5”,而且開源。


2. 6 分鐘搭環(huán)境:本地 0 安裝,全靠云

組件 選型 理由 一鍵地址
GPU RunPod A100 80 GB 顯存夠大,開機(jī)即跑 runpod.io/console/deploy
推理鏡像 ghcr.io/google-deepmind/genie3:1.0-cuda 官方預(yù)裝 無需 pull,RunPod 模板庫里直接選
CDN Cloudflare Workers 邊緣延時(shí) <100 ms,免服務(wù)器 dash.cloudflare.com
3D 轉(zhuǎn)碼 Blender Serverless glb 輸出,瀏覽器原生 (https://renderwolf.io)

3. 8 分鐘腳本:Worker 里跑完所有邏輯

新建 index.js,復(fù)制粘貼即可熱部署:

import { handleUpload } from './handler.js';
export default { fetch: handleUpload };

handler.js 關(guān)鍵片段(已脫敏):

export async function handleUpload(req) {
  const form = await req.formData();
  const img = form.get('file');
  if (!img) return new Response('No file', {status: 400});

  // 1. 調(diào)用 Genie 3 生成 3D 視頻
  const {video} = await (await fetch('https://api.runpod.ai/v1/genie3/run', {
    method: 'POST',
    headers: { 'Authorization': Bearer ${RUNPOD_KEY} },
    body: JSON.stringify({input: {image: [...new Uint8Array(await img.arrayBuffer())]}})
  })).json();

  // 2. mp4 → glb
  const {glbUrl} = await (await fetch('https://api.renderwolf.io/v2/mp4-to-glb', {
    method: 'POST',
    body: JSON.stringify({url: video})
  })).json();

  // 3. 上傳 Shopify
  await fetch(https://${SHOP}.myshopify.com/admin/api/2024-07/products/${PID}/3d_models.json, {
    method: 'POST',
    headers: {
      'X-Shopify-Access-Token': SHOPIFY_TOKEN,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ 3d_model: {original_source: glbUrl } })
  });

  return new Response('OK', {status: 200});
}

wrangler.toml 只填 3 個(gè)變量:

name = "genie3-showroom"
[vars]
RUNPOD_KEY = "rp_xxx"
SHOPIFY_TOKEN = "shpat_xxx"
SHOP = "your-store"
PID = "123456789"

一鍵部署:

npm i -g wrangler
wrangler deploy

4. 2 分鐘前端:0 代碼注入

Shopify 主題 → Customize → Add Section → 3D Model → 選剛上傳的 glb → 打開 Enable AR & zoom
完成,不碰 Liquid。


5. 壓力測(cè)試:2 小時(shí)涌入 12 k 用戶

指標(biāo) 峰值 平均 備注
Worker 冷啟動(dòng) 0 ms 0 ms 邊緣常駐
Genie 推理 28 s 25 s A100 80 GB
轉(zhuǎn)碼 glb 5 s 4 s RenderWolf
端到端 35 s 30 s 用戶可接受

6. 成本核算:跑一晚只花 2.4 美元

服務(wù) 單價(jià) 用量 費(fèi)用
RunPod A100 $2.5/h 0.8 h $2.0
RenderWolf $0.1/job 200 job $20
Cloudflare Workers $0.5/million 12 k $0.006
合計(jì) $2.4

7. 踩坑合集:3 個(gè)暗坑讓上線時(shí)間翻倍

  1. CORS 地獄
    Shopify 主題要求 glb origin 必須是 cdn.shopify.com,需要把 RenderWolf 結(jié)果再轉(zhuǎn)存到 Shopify 媒體庫。

  2. 移動(dòng)端 Safari 崩潰
    32 幀貼圖太大,iPhone 12 以下直接 OOM,把幀率降到 16 幀即可。

  3. SKU 自動(dòng)替換
    Genie 3 默認(rèn)輸出隨機(jī)家具,需要把 meta prompt 改成:

    Replace all furniture with items from SKU list: [SKU1, SKU2...]

8. 二次開發(fā):5 行代碼實(shí)現(xiàn)實(shí)時(shí)換色

viewer.addEventListener('click', (ev) => {
  const mat = viewer.materials.find(m=>m.name==='sofa');
  mat.color = prompt('輸入十六進(jìn)制顏色', '#ff6600');
});

9. 監(jiān)控與報(bào)警:讓老板睡個(gè)好覺


10. 下一步:從 2 小時(shí)到 2 分鐘


11. 一鍵開源倉庫

所有腳本、主題模板、監(jiān)控儀表盤已上傳到 GitHub:
github.com/your-org/genie3-shopify-showroom


12. 結(jié)語:把 2 小時(shí)變成日常

Genie 3 讓 3D 內(nèi)容的生產(chǎn)門檻降到一句話;Shopify 讓交易閉環(huán)保持零摩擦;Cloudflare Workers 讓全球邊緣節(jié)點(diǎn)成為你的服務(wù)器。
把這套流程沉淀為內(nèi)部模板后,我們把“今晚必須上線”的噩夢(mèng),變成了“喝杯咖啡的功夫”。

愿你在下一次“突然襲擊”里,也能從容按下 Deploy。

上一篇:

如何監(jiān)控 Claude API 使用量?限流預(yù)警與配額管理技巧

下一篇:

OpenAI OSS API 架構(gòu)深度解析:GPT-OSS-120B 與 GPT-OSS-20B 多模型接入全指南
#你可能也喜歡這些API文章!

我們有何不同?

API服務(wù)商零注冊(cè)

多API并行試用

數(shù)據(jù)驅(qū)動(dòng)選型,提升決策效率

查看全部API→
??

熱門場(chǎng)景實(shí)測(cè),選對(duì)API

#AI文本生成大模型API

對(duì)比大模型API的內(nèi)容創(chuàng)意新穎性、情感共鳴力、商業(yè)轉(zhuǎn)化潛力

25個(gè)渠道
一鍵對(duì)比試用API 限時(shí)免費(fèi)

#AI深度推理大模型API

對(duì)比大模型API的邏輯推理準(zhǔn)確性、分析深度、可視化建議合理性

10個(gè)渠道
一鍵對(duì)比試用API 限時(shí)免費(fèi)