glsl-parallax-occlusion-mapping
v1.0.0
Published
glslify module implementing parallax occlusion mapping.
Downloads
4
Maintainers
Readme
glsl-parallax-occlusion-mapping
glslify module implementing parallax occlusion mapping.
Installation
glslify is required for importing.
yarn add glsl-parallax-occlusion-mapping
npm i glsl-parallax-occlusion-mapping --save
Usage
When requiring, you must specify the number of layers
to use.
#pragma glslify: pom = require('glsl-parallax-occlusion-mapping', layers=8)
vec2 pom( sampler2D depthMap, vec2 uv, vec2 displacement, float pivot )
The function accepts 4 arguments:
depthMap
is your depth/displacement map. Only the red channel is used.uv
are your regular texture coordinates fordepthMap
.displacement
is the direction in which to shift the texture. Usually this is thexy
component of your view direction multiplied by a depth scalar.pivot
(optional) describes the elevation from which to pivot the displacement (where 0.0 is the highest and 1.0 is the lowest elevation). Defaults to 0.0.
It returns the new texture coordinates.
Example
#pragma glslify: pom = require('glsl-parallax-occlusion-mapping', layers=8)
uniform sampler2D tDiffuse;
uniform sampler2D tDepth;
varying vec2 vUv;
void main() {
vec2 newUv = pom( tDepth, vUv, viewDirection.xy * .1 );
gl_FragColor = texture2D( tDiffuse, newUv );
}
Credits
This implementation is based on this great article.