Skip to content
Generate normal maps from 4 photos (top, right, bottom, left)
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
psd
scripts
src
.babelrc
.eslintrc
.gitignore
LICENSE
README.md
package-lock.json
package.json
webpack.config.dev.js
webpack.config.js
webpack.config.prod.js

README.md

photo-normal-map

Just like the repo title says: ThreeJS with ES6 to S3 bucket boilerplate project using Webpack

Live Demo: https://mikatalk.github.io/photo-normal-map/

Install/Setup

npm install

npm run build

Dev

npm run dev

Basic of generating normal map:

Take 4 identical photo with light source coming from north, east, west, east, as well as a 5th photo with ambient lighting.

Alt text

Then in your shader:

    float cheapLuma ( vec3 rgb ) {
        return ( rgb.r + rgb.r + rgb.b + rgb.g + rgb.g + rgb.g ) / 6.0;
    }

    void main () {

        vec4 pixelTop = texture2D(imageTop, vUv);
        float lTop = cheapLuma( pixelTop.rgb );
        
        vec4 pixelBottom = texture2D(imageBottom, vUv);
        float lBottom = cheapLuma( pixelBottom.rgb );

        vec4 pixelRight = texture2D(imageRight, vUv);
        float lRight = cheapLuma( pixelRight.rgb );
        
        vec4 pixelLeft = texture2D(imageLeft, vUv);
        float lLeft = cheapLuma( pixelLeft.rgb );

        float distX = (1.0-lLeft + lRight)/2.0; 
        float distY = (1.0-lBottom + lTop)/2.0; 
        gl_FragColor = vec4( distX, distY, 1.0, 1.0 );
    }
You can’t perform that action at this time.