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/
npm install
npm run build
npm run dev
Take 4 identical photo with light source coming from north, east, west, east, as well as a 5th photo with ambient lighting.
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 );
}