Snapchat Web Lenses（網頁版 Lens 濾鏡）讓你把一般的 HTML5 遊戲打包成 zip，直接以 Lens 的形式發布到 Snapchat 上。遊戲是它的第一個應用情境，這項功能目前還在測試階段（beta）；雖然任何網頁框架都能用，但 Snap 推薦 PlayCanvas，官方文件也全程以它示範。整個過程完全不需要打開 Lens Studio。
PlayCanvas 在 2026年10月23日宣布支援這項功能，同時已有四款首發遊戲上線。這篇教學會說明 Web Lens 是什麼、你的建置必須符合哪些硬性限制、Web Lens API 提供哪些功能，以及從網頁建置一路走到玩家能用名稱或 Snapcode 找到你遊戲的五個實用步驟。
Snapchat Web Lenses 快速總覽
| 是什麼 | 打包成 zip、以 Snapchat Lens 形式發布的網頁應用程式 |
| 平台 | iOS 與 Android 版 Snapchat |
| 螢幕 | 全螢幕直式，9:16（不支援橫式） |
| 引擎 | 任何網頁框架；Snap 推薦 PlayCanvas |
| 套件大小 | zip 最多 8 MB，zip 根目錄的 index.html 最多 1 MB |
| 執行環境 | 支援 WebAssembly（含多執行緒）、Web Workers 與 eval() |
| 沙盒 | 不能連網，不能用相機、麥克風或動作感測器 |
| Snapchat 功能 | 透過 Web Lens API 使用排行榜、Bitmoji 與儲存空間 |
| 狀態 | 測試階段（beta），細節可能變動 |
網頁遊戲開發者為什麼該關注
根據 Snap 2026 年第二季財報，Snapchat 每月有 9.71 億人使用；Snap 也表示旗下 Game Lenses 每月吸引超過 1.75 億人參與。Web Lenses 讓網頁開發者不必上架應用程式商店、玩家也不用安裝，就能接觸到這群使用者：玩家開啟遊戲的方式，就跟試用任何一個 Lens 一樣。
首批開發者公布的早期數據，能讓你大概感受它的潛力：
| 遊戲 | 工作室 | 類型 | 開發者公布的數據 |
|---|---|---|---|
| Bloom | NOWWA | 療癒系花園解謎 | 平均每次遊玩約 260 秒，將近 30% 玩家隔天回來 |
| Ball Smasher | MetaM | 街頭籃球投籃 | 幾小時就做出原型，幾天內累積數百萬次遊玩 |
| Snake Showdown | Elanra Studios | 貪食蛇對戰 | 前四週 180 萬名玩家貢獻 700 萬次遊玩 |
| Bitmoji Ski | Snap | 滑雪街機 | 一天做完，每天 600 萬次曝光 |
在營利方面，Snap 的 Lens+ Payouts 計畫讓符合資格的創作者（年滿 18 歲、位於適用國家）把 Lens 設為 Lens+ 與 Platinum 訂閱者專屬，並依互動程度獲得營收分潤。Snap 也邀請開發者提案原創 Web Lens 遊戲以爭取開發資金，以排行榜等社交循環為核心的遊戲會優先考慮。
建置必須遵守的規則
大部分上傳被退件，都是因為幾個打包上的錯誤，所以在寫任何遊戲程式碼之前，先把這些規則搞懂。
- 只支援直式。 Lens 以 9:16 全螢幕執行。從一開始就以單手操作來設計鏡頭、HUD 和按鈕。
- zip 最多 8 MB。 這個限制是指壓縮後上傳的檔案。把它當成上限，而不是目標：zip 越小載入越快，而玩家多快能開始玩才是最重要的。
index.html放在根目錄，最多 1 MB。 要壓縮的是建置資料夾裡的內容，而不是資料夾本身。讓index.html保持輕量入口的角色，不要把整個 bundle 或大型data:URL 內嵌進去。- 一律使用相對路徑。 在 HTML 和執行期的
fetch()呼叫中都用./a/game.js，絕對不要用/a/game.js。如果用 Vite，請設定base: './'。 - zip 內使用正斜線。 在 Windows 上，PowerShell 的
Compress-Archive會寫入反斜線，導致路徑失效。請改用檔案總管的「壓縮成 ZIP 檔案」、zip -r，或使用archiver套件的 Node 腳本，再用unzip -l檢查。
沙盒：Web Lens 不能做什麼
Web Lens 是完全自給自足的。它無法連上網路，不能使用相機或麥克風，也讀不到動作感測器；而且 localStorage 和 IndexedDB 每次啟動都是空的。實際上代表：
- 所有腳本、模型、材質、字型和音效都必須打包進 zip。
- 不能呼叫數據分析服務，不能用遠端設定，也不能接線上多人後端。
- 進度必須用 Web Lens API 的 Storage 功能儲存。
Web Lens API：排行榜、Bitmoji 與儲存空間
Snap 的 API（npm 套件 @snap/web-lens-api）負責把你的遊戲接上 Snapchat。啟動時呼叫一次 init()，使用某項功能前先用 isSupported() 確認。在 Snapchat 以外，例如在電腦上或本機開發伺服器上，API 會用內建的 stub 回傳範例資料，所以不用手機也能開發——只要確保某項功能不存在時，遊戲照樣能玩。
| 功能 | 用途 | 注意事項 |
|---|---|---|
| 排行榜 | 送出分數並開啟 Snapchat 內建的排行榜面板 | 分數必須是整數；計時賽請用遞增排序；好友的分數被超越時可以收到通知 |
| Bitmoji | 以綁好骨架的 3D GLB 或 2D 頭肩圖載入玩家的 Bitmoji | URL 約五分鐘後失效；Bitmoji 不附動畫；一定要內建一個預設角色 |
| 儲存空間 | 綁定玩家帳號的小型鍵值儲存 | 每個值為 JSON，最多 32 KiB，每位玩家每個 Lens 總共 100 KiB；進度改變時和頁面被隱藏時都要存檔 |
好的排行榜獎勵的是玩家想變強的地方——準度、速度或存活時間——而且讓「再來一局」只要點一下。存檔也值得同樣用心：想清楚哪些東西必須跨局保留（最高分、已解鎖關卡），哪些可以放心重置。
從網頁建置到發布 Lens 的 5 個步驟
- 選擇工作流程。 一種是把 PlayCanvas Engine 當成一般 JavaScript 專案來用（很適合搭配 AI 程式助理），用
npm create playcanvas@latest my-lens -- --starter web-lens建立專案骨架；另一種是在瀏覽器上使用的 PlayCanvas Editor，可透過 Editor MCP Server 連接 AI 助理。這個 starter 已經幫你設定好直式版面、安全區域、相對路徑、打包流程和 Web Lens API。 - 加入 PlayCanvas Skills（選用）。
npx skills add playcanvas/skills能教相容的 AI 程式代理如何在 PlayCanvas 裡建立場景、動畫、HUD 與特效。 - 針對手機建置。 HUD 要放在
env(safe-area-inset-*)範圍內，因為 Snapchat 會在頂部附近畫出自己的關閉按鈕；依經過時間來縮放動態（很多手機以 120 Hz 執行）；音訊要等使用者操作後才啟動，Lens 被隱藏時要暫停。以名稱匯入引擎類別，讓打包工具能移除沒用到的程式碼；壓縮材質，並略過 source map。 - 整合 API。 遊戲結束時送出分數，想要的話載入 Bitmoji，並用 Storage 儲存進度。
- 打包、上傳並送審。 在 starter 專案中，
npm run package會建置 zip 並依照 Snap 的規則檢查。接著登入 My Lenses，建立一個 Web Lens，上傳 zip，填上名稱，再附上 512 × 512 的 PNG 圖示和 5 秒、720 × 1280 的預覽影片。審核通過後，玩家就能用名稱或 Snapcode 找到你的遊戲。
完全不想寫程式？Snap 的 AI Lens 製作工具 Easy Lens 現在可以依文字提示產生由 PlayCanvas 驅動的 Web Lens 遊戲，Lens+ 訂閱者可在 Easy Lens 網頁版使用。
哪些遊戲最適合做成 Web Lens？
| 適合 | 不適合 |
|---|---|
| 單手拇指操作的街機、解謎和衝分遊戲 | 橫式或需要鍵盤滑鼠的遊戲 |
| 一局很短、可以馬上重來 | 依賴伺服器的長時間遊玩 |
| 體積小、經過壓縮的素材 | 執行時下載大量素材 |
| 以排行榜驅動的競爭 | 即時線上多人對戰 |
先從一個「開啟到開玩」路徑很短的小專案開始。在實體手機上測試觸控、螢幕邊緣、音訊、暫停和重來（npx vite preview --host 可以讓你用手機瀏覽器開啟建置），並把每一項針對平台的修改都記下來，免得之後更新時又被改回去。
官方詳細資訊請參考 Snap 的 Web Lenses 說明文件、平台需求，以及 PlayCanvas 的公告。
常見問題
什麼是 Snapchat Web Lens？
Web Lens 是以 Lens 形式在 Snapchat 內執行的網頁應用程式。你用網頁技術開發，把建置打包成 zip，再透過 My Lenses 上傳，不需要 Lens Studio。
一定要用 PlayCanvas 嗎？
不用。任何網頁框架都可以，但 Snap 推薦 PlayCanvas，官方文件使用的是 PlayCanvas 搭配 Vite。
Web Lens 遊戲最大可以多大？
壓縮後的 zip 最多 8 MB，根目錄的 index.html 最多 1 MB。這些是測試階段的限制，上傳前請先確認最新需求。
Web Lens 可以連網或使用多人伺服器嗎？
不行。Web Lens 無法連上網路，所以所有素材都必須打包在裡面，也不能使用線上多人後端。排行榜則是透過 Web Lens API 提供。
要怎麼儲存玩家進度？
使用 Web Lens API 的 Storage 功能。一般的瀏覽器儲存空間每次開啟 Lens 時都是空的。
Web Lens 遊戲能賺錢嗎？
符合資格的創作者可以加入 Lens+ Payouts，為設定成 Lens+ 與 Platinum 訂閱者專屬的 Lens 獲得營收分潤；Snap 也在受理申請資助遊戲的提案。
