Perspective illusion
templates/ 中的範本是完整且可運作的場景，因此請從其中一個開始：
street.html是一條日本街道，有電線桿、三角錐、人行穿越道和紅色天空。market.html是一間日本超市，有走道、端架、紅色購物籃和燈光列。
兩者共用相同的攝影機裝置、時間軸和插畫處理流程。只有場景部分不同。
設定（每個專案資料夾）
mkdir -p ~/Movies/edits/<date>-<name>/stills && cd $_
printf '{"type":"module"}' > package.json && npm i [email protected] [email protected]
cp ~/simcraft/skills/perspective-illusion/templates/{street.html,render.mjs} .
node render.mjs street.html x --stills=0.2,1,2,4,6 # 先檢查影格（stills/st_<t>.png）
node render.mjs street.html out.mp4 # 7 秒循環，1920x1080，4 子幀動態模糊（約 2.5 分鐘）
技巧，分為四個部分
- 將場景沿一條長軸展開（街道或走道沿 -z 方向延伸），讓物體前後排列：電線桿或柱子在同一 x 位置，盡頭是建築物或後牆。從 400 公尺處以 2° 長焦鏡頭拍攝，會將所有物體壓扁成一個平面。排成一列的電線桿會疊合成一根，長側牆則會消失成邊緣。
- 絕不傾斜或轉動攝影機。攝影機始終直視軸線方向且保持水平，因此垂直線條保持垂直。若要「俯視」或「仰視」，請使用鏡頭移位（
H，畫框中的地平線位置），就像使用 tilt-shift 鏡頭一樣。每個鏡位是{x, y（攝影機高度）, zf, W, fov, H, lay, cs}。 - 在鏡頭之間以 Dolly Zoom 方式進行變形。當 fov 變化時，
W保持對焦平面zf的構圖。每個參數都通過一條貫穿所有關鍵幀的單調三次曲線運行，因此速度永遠不會跳躍。 - 在扁平狀態下進行欺騙。物體（三角錐、購物籃）僅在扁平保持期間向攝影機滑動或遠離，因為此時移動是看不見的。這就是一排物體如何變成對角線（「前後交換」）。它們也可以在扁平視圖中畫得更大（
cs）。
比對參考影片（請這樣做，不要憑感覺）
- 擷取參考影片在每個鏡位時的影格。然後，對於每個鏡位，測量：
- 消失點和地平線的位置（從而得出
H）， - 兩個已知寬度的物體的位置（從而得出
x和W）， - 某個已知長度物體的近端和遠端邊緣，例如人行穿越道（從而得出攝影機高度
y、距離和 fov）。 已解出的數值會標註在範本的註解中。
- 消失點和地平線的位置（從而得出
- 將參考影格分群成一個調色盤（對 4 個影格進行 k-means），並使用這些確切的顏色。
- 在每次修改後，將參考影格與你的影格在相同時間點進行並排比較。
插畫處理流程（為何看起來像繪畫，而非渲染）
頁面會渲染三個通道：顏色（雙色調 cel 著色）、視圖空間法線含深度，以及僅有太陽的陰影遮罩。最後一個著色器會執行三項工作：
- 墨水線條：在深度（二階差分，因此從邊緣觀看的平坦地面不會被描線）或法線發生變化的地方繪製。線條粗細會根據雜訊變化，且查詢位置會輕微擺動，因此線條並非完全筆直。深度閾值會隨距離增加而增大。
- 陰影線：僅在投射陰影區域：冷色調和細微的對角線筆觸，在幾乎邊緣觀看的表面上會淡出。
- 天空（或天花板）：在沒有幾何物體的地方繪製為平坦色塊。
曾遇到的問題，以免你重蹈覆轍
- 在單行語句上添加的
//註解會吞噬scene.add(sun)，導致遮罩變黑且所有物體都被畫上陰影線。請改用/* */，或是換行。 - 重疊的共面地板在遠處會閃爍。請讓地板碎片邊緣對邊緣相接。
- 以淺角度掠過牆壁的光源會產生斑駁的自投影。請將主光源保持在正面約 45° 角，並避免全高的柱子和天花板配件投射陰影。
- 產生的圖像或標誌上絕對不要有文字。標誌僅由形狀構成。
- 在每次完整渲染前先檢查靜止影格，並執行動態檢查（vox-explainer 的
motion_check.py）。