2/16/2024 1 Comment Parallax shaderNormal mapping relies on this property and uses a texture to store surface normals. If we modify the surface normal, the lighting at the given point also changes. Lighting at a point on a surface varies with the angle of incidence, which is the angle between the incoming light ray and the surface normal. In the WebGL demo above, all four of the bump mapping techniques use normal mapping the parallax shaders just add extra math on top. Normal mapping is probably the most widely used bump mapping technique, and readers even casually associated with graphics will have worked with normal maps at some point. You can click on the cube to pause its rotation, and play around with the controls below to visualize the various techniques and their parameters. The diffuse map, normal map and the depth map were taken from and are licensed CC BY 4.0.Įach face of the cube below is a simple square made up of two triangles. Shader code is at the bottom of the page. The WebGL demo is built using a single JavaScript file. We will discuss four techniques: Normal mapping, parallax mapping, steep parallax mapping and parallax occlusion mapping. We will not be looking at displacement mapping techniques, which rely on adding/manipulating geometry to the shaded surface. This blog post is an attempt to study bump mapping techniques and implement a WebGL demo to compare and visualize them. These techniques allow us to add details without adding geometry. Show diffuse texture Parallax scale īump mapping is a collective term for a number of techniques used in graphics to simulate meso-features - features which aren’t large enough to be necessarily represented by geometry, and aren’t small enough to be represented by a shading model. No bump mapping Normal mapping Parallax mapping Steep parallax mapping Parallax occlusion mapping
1 Comment
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |