threepipe/website/plugin/ParallaxMappingPlugin.md

---

prev:

text: 'FragmentClippingExtensionPlugin'
link: './FragmentClippingExtensionPlugin'

next:

text: 'HDRiGroundPlugin'
link: './HDRiGroundPlugin'

---

ParallaxMappingPlugin

Example — Source Code — API Reference

ParallaxMappingPlugin adds a material extension to PhysicalMaterial to add support for parallax relief mapping. The idea is to walk along a ray that has entered the bumpMap’s volume, finding the intersection point of the ray with the bumpMap. Steep parallax mapping and parallax occlusion mapping are other common names for these techniques.

To use the plugin, add the plugin to the viewer and use the bumpMap in PhysicalMaterial normally. The max height is determined by the bumpScale in the material. This is assumed to be in world scale.

import {ThreeViewer, ParallaxMappingPlugin} from 'threepipe'

const viewer = new ThreeViewer({...})

const parallaxMapping = viewer.addPluginSync(ParallaxMappingPlugin)

// load or create an object 

// set the bump map
object.material.bumpMap = await viewer.load<ITexture>(bumps[0]) || null
// set the bump scale
object.material.bumpScale = 0.1
// setDirty to notify the viewer to update.
object.material.setDirty()

References and related links:

• WebGL implementation by Rabbid76 - github.com/Rabbid76/graphics-snippets
• Lesson on Parallax Occlusion Mapping in GLSL - http://sunandblackcat.com/tipFullView.php?topicid=28
• Learn OpenGL - https://learnopengl.com/Advanced-Lighting/Parallax-Mapping