Parallax-Corrected CubeMap

So I was creating a room scene and wanted to attach a cube texture environment map to the ground ( taken with the three.js CubeCamera ). The environment map showed up but since environment maps are used under the assumption that all objects are at an infinite distance, there was a major parallax issue that made the env map unusable for my scene.

This article covers the topic pretty clearly:

I think it would be nice to include this little patch for those who desire it. I’ve already wrote a patch for the current physical shader, which simply applies the correction if the #define PARALLAX_CORRECT exists. The user would have to specify two uniforms, maybe like so :

var parallaxCorrectMat = new THREE.MeshPhysicalMaterial({
envMap: someEnvMap,
cubeMapSize: new Vector3(100,200,100),
cubeMapPos: new Vector3(0,0,0)

Let me know your thoughts —


Author: Fantashit

3 thoughts on “Parallax-Corrected CubeMap

  1. There are some interesting comparisons between these different approaches like:


    Using a mirror is more expensive than using just a static environment map. So depending on the use case, Box Projected Cubemaps seem to provide a good visual approximation with better performance.

  2. We should definitely implement light probes eventually.

    In the meantime, we can add an example of BPCE in the examples folder (just like THREE.Reflector and THREE.Refractor). I would not modify the current built-in materials just for this.

  3. alright sounds good, I’ll fix the example I have to use shader injection instead, adjust the scene a bit, and make a PR in the next few days.

Comments are closed.