纯前端实现图片伪3D视差效果

作者：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 交互场景。