作者：vivo 互聯網前端團隊- Su Ning

本文通過depth-anything獲取圖片的深度圖，同時基于pixi.js，通過著色器編程，實現了通過深度圖驅動的偽3D效果。該方案支持鼠標/手勢與手機陀螺儀雙模式交互，在保證性能的同時，為不同終端用戶提供沉浸式的視覺體驗。

本文提供配套演示代碼，可下載體驗：

Github | vivo-parallax

一、引言

在當今的網頁設計與交互中，3D 效果能極大地提升用戶的視覺體驗和沉浸感。但是3D的物料設計成本依然很高，不僅需要專門的設計師掌握專業的建模工具，而且高精度模型帶來的渲染壓力也使移動端適配變得困難。

在這樣的背景下，利用2D圖片實現偽3D的效果，就展現出獨特的價值。開發者能以極低的資源消耗，在常規圖片素材上構建出具有空間縱深的交互效果。這種技術路徑不僅規避了傳統3D內容生產的復雜性，同時實現了視覺效果與性能消耗的平衡。

二、實現思路

相比二維平面，三維物體多了一個 z 軸作為深度信息。要讓 2D 平面呈現 3D 縱深感，關鍵在于隨著視角偏移時，畫面中的物體產生不同程度的位移，從而營造前后視差，實現偽 3D 效果。

為此，我們可以通過深度圖來獲取圖片的深度信息，根據這些信息對圖片進行分層。當視角改變時，通過調整不同層的偏移來實現視差效果。

三、獲取深度圖

在前端獲取深度圖可以借助現有的預訓練模型。例如使用 @huggingface/transformers 庫，指定任務類型為 ‘depth-estimation’，并選擇合適的預訓練模型，目前的深度圖推理模型尺寸普遍比較大，綜合效果和模型尺寸最終選擇了 ‘Xenova/depth-anything-small-hf’，量化后的模型尺寸為27.5mb。

import { pipeline } from '@huggingface/transformers';
export async function depthEstimator(url) {const depth_estimator = await pipeline('depth-estimation', 'Xenova/depth-anything-small-hf');const output = await depth_estimator(url);const blob=await output.depth.toBlob()return URL.createObjectURL(blob)
}

四、視差效果的實現

若想借助深度圖實現圖片分層，可依據深度區間進行劃分。假設深度圖中純白的色值為 0，純黑色值為 1，若將圖片切分為兩層，那么第一層的色值范圍為 0 - 0.5，第二層則是 0.5 - 1。為使畫面過渡更自然，可適當增加分層的數量。當鏡頭偏移時，層數越小的圖片位移幅度越大，層數越大的圖片位移幅度越小，借此便能實現視差效果。

然而，簡單的分層會引發一個問題：不同層的位移可能導致上層的部分區域遮擋背景圖案，而另一側則會出現空白。

針對空白部分，可采用光線步進算法進行顏色采樣。

在此，我們選用 Pixi.js 來實現這一效果。作為一款輕量級的 2D 渲染引擎，Pixi.js 在跨平臺 2D 動畫、游戲及圖形界面開發領域表現出色。其精靈支持自定義渲染管線，通過定制圖片片段著色器，能夠輕松實現視差效果。

4.1 光線步進算法(Ray Marching)

首先我們獲取到需要采樣顏色的坐標ray_origin，并根據用戶的交互事件（鼠標，觸摸，陀螺儀）增加鏡頭偏移offset。得到光線發射的起始坐標。

設置采樣步數step，設置光線的偏移向量ray_direction，每一步將光線增加ray_direction/step的坐標。獲取到當前深度圖坐標的深度信息，由于顏色越淺數值越大，要對深度值進行反轉，比對此時光線的z軸是否大于深度的反轉值，如果滿足條件則挑出循環，取此時光線坐標圖片的顏色。

由于每一步增加的偏移值可能跨度比較大，即使滿足z軸大于深度反轉值的條件，但是二者值的差距依然過大，我們還需要做一個二分搜索來優化采樣結果。即偏移值大于深度值，但二者的差值大于閾值的時候，回退一步光線，并將步進值再除以2，可以顯著提升采樣的精度。

代碼實現

varying vec2 vTextureCoord;
uniform sampler2D depthMap;
uniform sampler2D uSampler;
uniform vec3 offset;
const float enlarge = 1.06;vec3 perspective(vec2 uv) {const int step_count = 5;vec3 ray_origin = vec3(uv - 0.5, 0);ray_origin.xy -= offset.xy;vec3 ray_direction = vec3(0, 0, 1);ray_direction.xy += offset.xy;ray_direction /= float(step_count);const float hit_threshold = 0.01;vec4 color = vec4(0.0);for (int i = 0; i < step_count; i++) {ray_origin += ray_direction;float scene_z = 1.0 - texture2D(depthMap, ray_origin.xy + 0.5).x;if (ray_origin.z > scene_z) {if (ray_origin.z - scene_z < hit_threshold) {break;}ray_origin -= ray_direction;ray_direction /= 2.0;}}color = texture2D(uSampler, ray_origin.xy + 0.5);return color.rgb;
}void main(void ) {vec2 uv = (vTextureCoord - vec2(0.5)) / vec2(enlarge) + vec2(0.5);gl_FragColor = vec4(perspective(uv),1.0);
}

五、深度圖膨脹

邊緣膨脹操作主要用于處理深度圖，通過對每個像素鄰域內的深度值進行分析和處理，增強圖像的邊緣，可以使視差圖的邊緣更加平滑。這里使用一個簡單的膨脹函數實現。

varying vec2 vFilterCoord;
varying vec2 vTextureCoord;
uniform float widthPx;
uniform float heightPx;
uniform float dilation;
uniform sampler2D uSampler;
const int MAX_RADIUS = 10;float dilate(vec2 uv, vec2 px) {float maxValue = 0.0;float minValue = 1.0;for (int x = -MAX\_RADIUS; x <= +MAX_RADIUS; x++) {for (int y = -MAX\_RADIUS; y <= +MAX_RADIUS; y++) {vec2 offset = vec2(float(x), float(y));if (length(offset) > float(MAX_RADIUS)) continue;offset *= px;vec2 uv2 = uv + offset;float val = texture2D(uSampler, uv2).x;maxValue = max(val, maxValue);minValue = min(val, minValue);}}return dilation < 0.0? minValue: maxValue;
}void main(void ) {const float dilationScale = 1.26;float dilationStep = abs(dilationScale * dilation) / float(MAX_RADIUS);float aspect = widthPx / heightPx;vec2 px =widthPx > heightPx? vec2(dilationStep / aspect, dilationStep): vec2(dilationStep, dilationStep * aspect);gl_FragColor = vec4(vec3(dilate(vTextureCoord, px)), 1.0);}

六、總結

綜上所述，我們先利用預訓練模型生成圖片的深度圖，再借助 Pixi.js 與光線步進算法達成視差效果，最終通過對深度圖進行膨脹處理，實現邊緣的平滑過渡。

通過上面的操作，我們成功實現了圖片的偽 3D 效果，為用戶帶來了更具沉浸感的視覺體驗。

在實際應用過程中，我們觀察到，當視角偏移幅度過大時畫面會出現采樣失真現象。為解決這一問題，后續可考慮采用動態調整光線步進參數的方法，根據視角變化實時優化光線傳播路徑，從而減少采樣誤差；或者引入屏幕空間遮擋關系，通過精準模擬物體間的遮擋效果，增強畫面的真實感與層次感。隨著 WebGPU 技術的逐步普及，這一方案還有極大的優化空間。我們可借助計算著色器強大的并行計算能力，對復雜的 3D 計算任務進行高效處理，進一步提升計算性能，為網頁端 3D 交互開辟更多可能性，打造更加流暢、逼真的 3D 交互場景。