Learn Three.js for 3D Computer Graphics/

...

/

Bumps and Wrinkles with Normal Map

Bumps and Wrinkles with Normal Map

Get detailed information about bumps and wrinkles using a normal map.

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:

Press + to interact
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: ...