純前端實現(xiàn)圖片偽3D視差效果
本文提供配套演示代碼，可下載體驗：
一、引言
在當(dāng)今的網(wǎng)頁設(shè)計與交互中，3D 效果能極大地提升用戶的視覺體驗和沉浸感。但是3D的物料設(shè)計成本依然很高，不僅需要專門的設(shè)計師掌握專業(yè)的建模工具，而且高精度模型帶來的渲染壓力也使移動端適配變得困難。
在這樣的背景下，利用2D圖片實現(xiàn)偽3D的效果，就展現(xiàn)出獨(dú)特的價值。開發(fā)者能以極低的資源消耗，在常規(guī)圖片素材上構(gòu)建出具有空間縱深的交互效果。這種技術(shù)路徑不僅規(guī)避了傳統(tǒng)3D內(nèi)容生產(chǎn)的復(fù)雜性，同時實現(xiàn)了視覺效果與性能消耗的平衡。
二、實現(xiàn)思路
相比二維平面，三維物體多了一個 z 軸作為深度信息。要讓 2D 平面呈現(xiàn) 3D 縱深感，關(guān)鍵在于隨著視角偏移時，畫面中的物體產(chǎn)生不同程度的位移，從而營造前后視差，實現(xiàn)偽 3D 效果。
為此，我們可以通過深度圖來獲取圖片的深度信息，根據(jù)這些信息對圖片進(jìn)行分層。當(dāng)視角改變時，通過調(diào)整不同層的偏移來實現(xiàn)視差效果。
三、獲取深度圖
在前端獲取深度圖可以借助現(xiàn)有的預(yù)訓(xùn)練模型。例如使用 @huggingface/transformers 庫，指定任務(wù)類型為 'depth-estimation'，并選擇合適的預(yù)訓(xùn)練模型，目前的深度圖推理模型尺寸普遍比較大，綜合效果和模型尺寸最終選擇了 '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)
}四、視差效果的實現(xiàn)
若想借助深度圖實現(xiàn)圖片分層，可依據(jù)深度區(qū)間進(jìn)行劃分。假設(shè)深度圖中純白的色值為 0，純黑色值為 1，若將圖片切分為兩層，那么第一層的色值范圍為 0 - 0.5，第二層則是 0.5 - 1。為使畫面過渡更自然，可適當(dāng)增加分層的數(shù)量。當(dāng)鏡頭偏移時，層數(shù)越小的圖片位移幅度越大，層數(shù)越大的圖片位移幅度越小，借此便能實現(xiàn)視差效果。
然而，簡單的分層會引發(fā)一個問題：不同層的位移可能導(dǎo)致上層的部分區(qū)域遮擋背景圖案，而另一側(cè)則會出現(xiàn)空白。
針對空白部分，可采用光線步進(jìn)算法進(jìn)行顏色采樣。
在此，我們選用 Pixi.js 來實現(xiàn)這一效果。作為一款輕量級的 2D 渲染引擎，Pixi.js 在跨平臺 2D 動畫、游戲及圖形界面開發(fā)領(lǐng)域表現(xiàn)出色。其精靈支持自定義渲染管線，通過定制圖片片段著色器，能夠輕松實現(xiàn)視差效果。
4.1 光線步進(jìn)算法(Ray Marching)
首先我們獲取到需要采樣顏色的坐標(biāo)ray_origin，并根據(jù)用戶的交互事件（鼠標(biāo)，觸摸，陀螺儀）增加鏡頭偏移offset。得到光線發(fā)射的起始坐標(biāo)。
設(shè)置采樣步數(shù)step，設(shè)置光線的偏移向量ray_direction，每一步將光線增加ray_direction/step的坐標(biāo)。獲取到當(dāng)前深度圖坐標(biāo)的深度信息，由于顏色越淺數(shù)值越大，要對深度值進(jìn)行反轉(zhuǎn)，比對此時光線的z軸是否大于深度的反轉(zhuǎn)值，如果滿足條件則挑出循環(huán)，取此時光線坐標(biāo)圖片的顏色。
由于每一步增加的偏移值可能跨度比較大，即使?jié)M足z軸大于深度反轉(zhuǎn)值的條件，但是二者值的差距依然過大，我們還需要做一個二分搜索來優(yōu)化采樣結(jié)果。即偏移值大于深度值，但二者的差值大于閾值的時候，回退一步光線，并將步進(jìn)值再除以2，可以顯著提升采樣的精度。
代碼實現(xiàn)
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
);
}五、深度圖膨脹
邊緣膨脹操作主要用于處理深度圖，通過對每個像素鄰域內(nèi)的深度值進(jìn)行分析和處理，增強(qiáng)圖像的邊緣，可以使視差圖的邊緣更加平滑。這里使用一個簡單的膨脹函數(shù)實現(xiàn)。
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);
}六、總結(jié)
綜上所述，我們先利用預(yù)訓(xùn)練模型生成圖片的深度圖，再借助 Pixi.js 與光線步進(jìn)算法達(dá)成視差效果，最終通過對深度圖進(jìn)行膨脹處理，實現(xiàn)邊緣的平滑過渡。
通過上面的操作，我們成功實現(xiàn)了圖片的偽 3D 效果，為用戶帶來了更具沉浸感的視覺體驗。
在實際應(yīng)用過程中，我們觀察到，當(dāng)視角偏移幅度過大時畫面會出現(xiàn)采樣失真現(xiàn)象。為解決這一問題，后續(xù)可考慮采用動態(tài)調(diào)整光線步進(jìn)參數(shù)的方法，根據(jù)視角變化實時優(yōu)化光線傳播路徑，從而減少采樣誤差；或者引入屏幕空間遮擋關(guān)系，通過精準(zhǔn)模擬物體間的遮擋效果，增強(qiáng)畫面的真實感與層次感。隨著 WebGPU 技術(shù)的逐步普及，這一方案還有極大的優(yōu)化空間。我們可借助計算著色器強(qiáng)大的并行計算能力，對復(fù)雜的 3D 計算任務(wù)進(jìn)行高效處理，進(jìn)一步提升計算性能，為網(wǎng)頁端 3D 交互開辟更多可能性，打造更加流暢、逼真的 3D 交互場景。
