使用three.js的视差效果

Question

我想使用深度图similar to this，or this但使用three.js从2D图像构建视差效果。

问题是，我应该从哪里开始？仅将PlaneGeometry与MeshStandardMaterial一起使用将呈现我的2D图像，而没有视差遮挡。将depth map添加为displacementMap属性后，我可以看到某种位移，但是它的分辨率很低。 （也许是因为位移图不打算用于此？）

我的第一次尝试

import * as THREE from "three";
import image from "./Resources/Images/image.jpg";
import depth from "./Resources/Images/depth.jpg";

[...]

const geometry = new THREE.PlaneGeometry(200, 200, 10, 10);
const material = new THREE.MeshStandardMaterial();

const spriteMap = new THREE.TextureLoader().load(image);
const depthMap = new THREE.TextureLoader().load(depth);
material.map = spriteMap;
material.displacementMap = depthMap;
material.displacementScale = 20;

const plane = new THREE.Mesh(geometry, material);

还是我应该使用Sprite对象，该对象始终指向相机？但是如何将depth map应用于它呢？

I've set up a codesandbox with what I've got so far。它还包含event listener用于鼠标移动，并以work in progress的原样旋转相机。

---

更新1

因此我发现，我似乎需要为此使用自定义ShaderMaterial。看了pixijs's implementation后，我发现它是基于自定义着色器的。

由于我可以访问源代码，所以我要做的就是重写它以与threejs兼容。但是最大的问题是：如何

如果有人能指出我正确的方向，那就太好了！