2

I would like to build a parallax effect from a 2D image using a depth map, similar to this, or this but using three.js.

Question is, where should I start with? Using just a PlaneGeometry with a MeshStandardMaterial renders my 2D image without parallax occlusion. Once I add my depth map as displacementMap property I can see some sort of displacement, but it is very low-res. (Maybe, since displacement maps are not meant to be used for this?)

My first attempt

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);

Or should I use a Sprite object, which face always points to the camera? But how to apply the depth map to it then?

I've set up a codesandbox with what I've got so far. It also contains event listener for mouse movement and rotates the camera on movement as it is work in progress.

Update 1

So I figured out, that I seem to need a custom ShaderMaterial for this. After looking at pixijs's implementation I've found out, that it is based on a custom shader.

Since I have access to the source, all I need to do is rewrite it to be compatible with threejs. But the big question is: HOW

Would be awesome if someone could point me into the right direction, thanks!

Community
  • 1
  • 1
dschu
  • 4,992
  • 5
  • 31
  • 48
  • 1
    I don't know if this gets close enough to what you're looking for, but you could set up parallel rows of images on planes or sprites and then use three.js's perspective camera. Alternaltively, you could use the orthographic camera and then in the shaders or js calculate the relative speed at which each image moves relative to it's distance from the camera. There are also a few related thoughts in this old question of mine: https://stackoverflow.com/questions/21786184/setting-up-a-2d-view-in-three-js – gromiczek Nov 29 '18 at 18:01
  • 1
    Here's a WebGL version: https://stackoverflow.com/questions/44372487/webgl-drawing-2d-image-with-depth-map-to-achieve-pseudo-3d-effect – gman Nov 30 '18 at 00:36
  • @gman Thanks! I'm currently reading [the book of shaders](https://thebookofshaders.com) to get started with GLSL and shaders. Seems like a bigger adventure than I expected at first.. :) – dschu Nov 30 '18 at 08:59

0 Answers0