Search⌘ K
AI Features
Home
Courses
Learn Three.js for 3D Computer Graphics

Bumps and Wrinkles with Normal Map

Explore how to enhance 3D models in Three.js by using normal maps to simulate detailed bumps and wrinkles without increasing mesh complexity. Learn to adjust normal map properties for realistic texture response to lighting and understand the creation process of normal maps using tools like Blender or Photoshop.

We'll cover the following...

Detailed bumps and wrinkles with a normal map

In a normal map, the height (displacement) is not stored, but the direction of the normal for each pixel is stored. Without going into too much detail, with normal maps, we can create very detailed-looking models that use only a small number of vertices and faces:

A model using a normal map
A model using a normal map

Example: Normal map

Let’s execute the texture-normal-map.js example in the below playground by clicking the “Run” button:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
const fs = require('fs').promises

// we should search through the directories in examples, and use
// the name from the files to generate the HtmlWebpackPlugin settings.
module.exports = async () => {

  return {
    module: {
      rules: [
        {
          test: /\.glsl$/i,
          use: 'raw-loader'
        }
      ]
    },
    mode: 'development',
    entry: {
      'chapter-10': './samples/chapters/chapter-10/texture-normal-map.js',
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      publicPath: '/',
    },
    plugins: [
      new HtmlWebpackPlugin(),
    ],
    experiments: {
      asyncWebAssembly: true
    },
    devServer: {
       allowedHosts: 'all',
       host: '0.0.0.0',
       port: '3000',
       static: [
        {
          directory: path.join(__dirname, 'assets'),
          publicPath: '/assets'
        },
        {
          directory: path.join(__dirname, 'dist')
        }
      ] 
    },
  mode: 'development',
  }
}
Acheive more control using norma map for bump map property

Note: ...