Teardown Cinema
與 teardown 使用相同的引擎（three.js 程式碼、一個時鐘、逐幀捕捉、程式碼生成的配樂），但目的相反。Teardown 用於解釋，因此它包含面板。Cinema 用於展示，因此畫面上除了世界本身之外沒有任何東西。工作範例，所有檔案：此技能中的 example/orison（30 秒的影片《Orison》及其互動頁面）。
需要旁邊的 teardown 技能來提供 node_modules（three、esbuild、playwright）、sims/capture.mjs 和 sfx/。捕捉功能不需要 Playwright 自己的 Chromium：請設定 CHROMIUM 為已安裝的 Chrome。如果下載停滯不前，Chrome 也可以使用。
方法，依序
- 一張主圖。 使用任何強大的影像模型生成一張複雜的圖片。使用 Codex 應用程式：
codex exec --skip-git-repo-check -s workspace-write -C <dir> - < prompt.txt。提示會離開你的機器，所以不要在其中包含機密內容。要求一些你可以命名的結構：圓頂、肋骨、環、緞帶。Codex 不會回報使用了哪個影像模型。 - 從主圖生成紋理圖版。 使用
-i master.png附加上它，並生成平坦、正面、光線均勻的圖版：玻璃面板、純黑背景上的金屬紋飾、絲綢、黑色背景上的行星、環的橫截面、俯視的生物。黑色是你將裁切掉的區域。這些圖版是為什麼結果能保留繪畫細節的原因。一次生成一個。 - 測量主圖，然後重建它。 以像素為單位讀取圖片的比例，並在編寫幾何形狀之前將它們轉換為世界單位。這裡幾乎所有的早期錯誤都是因為沒有人測量過比例。
- 一個輸入驅動整體。 選取生物或機器的節拍，用 JS 和 GLSL 編寫它，並在頂點著色器中根據它來擺放所有部分。沒有任何關鍵幀。請參閱
shared/kin.js、shared/glsl.js。 - 鏡頭，而非飛越。 一系列鏡頭，每個鏡頭都是其內部時間的純函數，具有硬切換和每個鏡頭的色調。切換是使它成為一部電影的原因。請參閱
orison-film/shots.js。 - 每次迭代都與主圖比較。 將主要幀渲染在圖片旁邊，並記錄下差異。修正，重複。
- 在同一個時間軸上以程式碼製作配樂，使用 teardown 的
sfx/。請參閱score.py。 - 頁面是同一個世界，但由不同的手操控相機。 滾動選擇路徑上的一點，點擊是一個節拍，拖曳則環顧四周。請參閱
orison-live/。
佈局
my-film/
brief/ 主圖和提示
assets/ 圖版，以 .jpg 格式（內嵌到頁面中）
shared/ 世界：kin.js, glsl.js, sky.js, creature.js, world.js
my-film-film/ main.js, shots.js, timeline.json
my-film-live/ main.js, path.js, audio.js, body.html, style.css
score.py
指令
從影片的資料夾中執行。SKILL_DIR 是此技能，T 是相鄰的 teardown 技能。在 Windows PowerShell 5.1 中，請使用 npx.cmd 和 npm.cmd，並且不要使用 &&。
node "$SKILL_DIR/build.mjs" ./my-film-film ./my-film-live
export CHROMIUM="C:/Program Files/Google/Chrome/Application/chrome.exe" # capture 可以使用已安裝的 Chrome
# 一個幀，或一張圖表，以選定的品質：--config 指向 {"samples": N}
node "$T/sims/capture.mjs" my-film-film --size 1920x1080 --dpr 1 --config s.json --still 12.5 --out frame.png
node "$T/sims/capture.mjs" my-film-film --size 1920x1080 --dpr 1 --config s.json --stills 3,8,12,18,23,29 --cols 3 --out sheet.png
# 整部影片
node "$T/sims/capture.mjs" my-film-film --size 1920x1080 --dpr 1 --fps 24 --crf 15 --config s.json --out silent.mp4
python "$T/run_sfx.py" score.py
ffmpeg -i silent.mp4 -i teardown-out/my-score.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 256k -shortest -movflags +faststart film.mp4
--stills 會透過一個調色盤平鋪顯示，因此圖表會顯示出假的頻帶。請在它們旁邊的完整幀上判斷顏色和頻帶。
kit/cinema.js 為你提供的功能
new Cinema({canvas, samples, fps, shutter, msaa})，然後 cine.frame(t, draw, look)。
一個影片幀是 N 個子幀的平均值。每個子幀會在快門內移動時間（真正的運動模糊）、在鏡頭圓盤上移動相機並保持焦平面（真正的景深，也能穿透透明圖層）、以及移動一個子像素偏移（反鋸齒）。抖動的射線行進與之收斂。後處理在平均後的 HDR 影像上執行一次：光暈、變形寬銀幕條紋、朝向某一點的光束、ACES、色調、顆粒、暗角。samples: 1 是即時頁面的相同管線。
來自筆記型電腦（配備整合式 Radeon 780M）的數據，解析度為 1920x1080：每個幀 32 個樣本（包含編碼）需要 2.3 秒：30 秒的影片（24 fps）需要 27 分鐘。草稿解析度為 960x480 且 4 個樣本時，整部影片需要 41 秒，因此可以自由使用草稿。即時頁面在 1600x900 解析度下，整個滾動過程中幀率為 37 到 51 fps，在沒有其他程式運行的定點讀數中更高。請檢查 capture 輸出中的 gpu:；如果使用軟體渲染器，則表示 GPU 標誌未生效。
決定是否成功的規則
- 畫面上無文字。沒有標籤、數字、標題卡或字幕。 圖片本身就能傳達。
- 只捆綁一個 three.js。
build.mjs會強制執行。如果靠近影片處（專案自己的node_modules）有第二個副本，會默默地失敗：反射環境會失去其模糊級別，金屬會變暗。 - 將渲染結果並排放置在相同大小的主圖旁邊，並列出差異。 先看比例，再看顏色。以像素為單位測量位置，並將其轉換為方向。《Orison》的大部分相似度都來自這些迭代。
- 僅對小物體保持淺景深。 對巨大物體使用強烈的模糊會使它看起來像微縮模型。影片的鏡頭半徑在一個 26 單位的生物上是 0.012 到 0.03 單位。
- 時間和鏡頭樣本不得共享序列。 如果共享，模糊會產生可見的弧線。鏡頭使用黃金角，時間使用 Halton 基數 5。
- 永遠不要對可能為負的值使用
pow()。 D3D 會回傳 NaN，一個 NaN 像素會透過光暈擴散成黑色矩形。請使用x*x。使用max(1.-ndv,0.)，而不是1.-ndv。此工具套件也會清理其輸入。 - 在 Windows 上，
a > b的smoothstep(a, b, x)會回傳 0。 請使用1.-smoothstep(b,a,x)。 - 在變窄的表面上使用鏡像圖版： 使用 Mercator 投影映射，使細胞保持圓形，並且只鏡像圖版的大細胞。細小的細胞在近距離會變成五彩紙屑。
- 與光線對齊的面板必須更清晰，而不是更亮。 否則，玻璃體內的物體永遠無法被識別。
- 黑暗的開口需要其中有活的東西。 在第一次節拍之前，穿過霧氣的一縷微光就能撐住場面。
- 即時雲朵： 半解析度搭配運行平均值；在靠近相機處進行更密集的射線行進。雲朵是柔和的，因此不會遺失任何東西。
- 即時頁面的第一秒是著色器編譯。 在第一個幀之前編譯，同時顯示一個小脈衝，不要顯示載入文字。
即時頁面規則
teardown 即時頁面的所有規則都適用（品質分層、暖機著色器）。此外：開啟時顯示主圖，並在著色器準備就緒後溶解到 3D 世界中；當幀率恢復時，品質分層會回升，而不僅僅是下降；頁面上沒有標籤；為畫布和任何按鈕提供可存取名稱；點擊目標至少為 44 像素；聲音僅在第一次手勢後開始；主體在一個節拍後穩定下來，而不是永遠上升；根據測量的幀率降低品質，無需詢問。
審查
你無法觀看影片，但可以讀取幀。先檢查每個鏡頭的圖表，然後檢查圖表標記出的完整幀，接著使用 --stills every:0.2 --from A --to B 檢查過渡區域。讀取最終編碼的每秒一幀圖表：這會顯示編碼器寫入了什麼。使用 ffmpeg -af ebur128=peak=true 測量配樂。必須有人觀看影片並聽一次配樂；報告時請說明這一點。
對於會添加自己文件骨架的主機（例如 Claude Artifact），請使用 FRAGMENT=1 建構，並使用 PAGE_TITLE 設定名稱：它也會寫入 <name>.fragment.html。