WebGL Parallax Mapping Demo
WebGL Parallax Mapping Demo, by Jorge Gascon Perez
Based on the works of Manuel Oliveira.
Preview:
Live Demo:
Drag the image below with your mouse to see the webgl demo in action.
Drag the image above with your mouse to see the webgl demo in action.
This little demo simulates the parallax mapping effect. It simulates millions of polygons using only three images:
- A color image of the earth map (called color texture).
- An image which stores the normals and the depth vectors (normal & depth map).
- An image which stores the specularity (gloss) of the image.
The geometry is very simple (only 1 quad, or 2 triangles), all the depth and parallax is generated using a GLSL shader that perform a short distance ray tracing through the depth map.
The three textures used are:
The diffuse map, or color texture:
The normal map and depth map (depth is encoded in the alpha channel)
The specular map, or glossy map:
See you in the next post!
Jorge Gascon Perez