本文提供配套演示代碼，可下載體驗(yàn)：

Github | vivo-parallax

一、引言

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

在這樣的背景下，利用2D圖片實(shí)現(xiàn)偽3D的效果，就展現(xiàn)出獨(dú)特的價(jià)值。開(kāi)發(fā)者能以極低的資源消耗，在常規(guī)圖片素材上構(gòu)建出具有空間縱深的交互效果。這種技術(shù)路徑不僅規(guī)避了傳統(tǒng)3D內(nèi)容生產(chǎn)的復(fù)雜性，同時(shí)實(shí)現(xiàn)了視覺(jué)效果與性能消耗的平衡。

二、實(shí)現(xiàn)思路

相比二維平面，三維物體多了一個(gè) z 軸作為深度信息。要讓 2D 平面呈現(xiàn) 3D 縱深感，關(guān)鍵在于隨著視角偏移時(shí)，畫(huà)面中的物體產(chǎn)生不同程度的位移，從而營(yíng)造前后視差，實(shí)現(xiàn)偽 3D 效果。

為此，我們可以通過(guò)深度圖來(lái)獲取圖片的深度信息，根據(jù)這些信息對(duì)圖片進(jìn)行分層。當(dāng)視角改變時(shí)，通過(guò)調(diào)整不同層的偏移來(lái)實(shí)現(xiàn)視差效果。

三、獲取深度圖

在前端獲取深度圖可以借助現(xiàn)有的預(yù)訓(xùn)練模型。例如使用 @huggingface/transformers 庫(kù)，指定任務(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)
}

四、視差效果的實(shí)現(xiàn)

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

然而，簡(jiǎn)單的分層會(huì)引發(fā)一個(gè)問(wèn)題：不同層的位移可能導(dǎo)致上層的部分區(qū)域遮擋背景圖案，而另一側(cè)則會(huì)出現(xiàn)空白。

針對(duì)空白部分，可采用光線步進(jìn)算法進(jìn)行顏色采樣。

在此，我們選用 Pixi.js 來(lái)實(shí)現(xiàn)這一效果。作為一款輕量級(jí)的 2D 渲染引擎，Pixi.js 在跨平臺(tái) 2D 動(dòng)畫(huà)、游戲及圖形界面開(kāi)發(fā)領(lǐng)域表現(xiàn)出色。其精靈支持自定義渲染管線，通過(guò)定制圖片片段著色器，能夠輕松實(shí)現(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ù)值越大，要對(duì)深度值進(jìn)行反轉(zhuǎn)，比對(duì)此時(shí)光線的z軸是否大于深度的反轉(zhuǎn)值，如果滿足條件則挑出循環(huán)，取此時(shí)光線坐標(biāo)圖片的顏色。

由于每一步增加的偏移值可能跨度比較大，即使?jié)M足z軸大于深度反轉(zhuǎn)值的條件，但是二者值的差距依然過(guò)大，我們還需要做一個(gè)二分搜索來(lái)優(yōu)化采樣結(jié)果。即偏移值大于深度值，但二者的差值大于閾值的時(shí)候，回退一步光線，并將步進(jìn)值再除以2，可以顯著提升采樣的精度。

代碼實(shí)現(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
  );
}

五、深度圖膨脹

邊緣膨脹操作主要用于處理深度圖，通過(guò)對(duì)每個(gè)像素鄰域內(nèi)的深度值進(jìn)行分析和處理，增強(qiáng)圖像的邊緣，可以使視差圖的邊緣更加平滑。這里使用一個(gè)簡(jiǎn)單的膨脹函數(shù)實(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á)成視差效果，最終通過(guò)對(duì)深度圖進(jìn)行膨脹處理，實(shí)現(xiàn)邊緣的平滑過(guò)渡。

通過(guò)上面的操作，我們成功實(shí)現(xiàn)了圖片的偽 3D 效果，為用戶帶來(lái)了更具沉浸感的視覺(jué)體驗(yàn)。

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