User Rating 0.0
Total Usage 0 times
No file selected
Original Input (Grayscale)
Normal Map Output
3D Lighting Preview
Drag to Rotate Light
Is this tool helpful?

Your feedback helps us improve.

About

High-fidelity texturing in modern rendering pipelines relies heavily on normal mapping to simulate surface detail without increasing polygon count. This tool employs the Sobel operator algorithm to calculate surface gradients from grayscale luminosity data. By deriving the partial derivatives of the image intensity with respect to horizontal and vertical axes, we construct a vector field representing surface orientation at every pixel.

Accuracy is paramount when integrating assets into engines like Unreal Engine or Unity. An incorrect normal orientation (specifically the Green channel) results in inverted lighting behavior where bumps appear as dents. This generator provides granular control over channel inversion and intensity scaling. It processes data locally on your device to ensure zero latency and maximum privacy for proprietary assets.

texture tools game development 3d rendering bump mapping normal map webgl

Formulas

The core algorithm calculates the normal vector n for each pixel based on the intensity I of its neighbors. Using a central difference approximation or Sobel kernel, we determine the gradients along the x and y axes.

{
dx = I(x+1, y) I(x1, y)dy = I(x, y+1) I(x, y1)

The unnormalized normal vector v is constructed with a tunable strength parameter s.

v = dx sdy s1.0

Finally, we normalize the vector to obtain the unit normal n and map it to RGB color space.

n = v|v|

Reference Data

Target Engine / SoftwareGreen Channel (Y-Axis)Coordinate SystemStandard FormatTypical Gamma
Unreal EngineFALSE (Inverted / Y-)Left-HandedDirectXLinear (1.0)
Unity 3DTRUE (Standard / Y+)Left-HandedOpenGLLinear (1.0)
BlenderTRUE (Standard / Y+)Right-HandedOpenGLNon-Color
Godot EngineTRUE (Standard / Y+)Right-HandedOpenGLLinear
CryEngineFALSE (Inverted / Y-)Right-HandedDirectXLinear
MayaTRUE (Standard / Y+)Right-HandedOpenGLLinear
3ds MaxFALSE (Inverted / Y-)Right-HandedDirectXLinear
Source 2TRUE (Standard / Y+)Right-HandedOpenGLLinear
Substance PainterConfigurableBothBothLinear

Frequently Asked Questions

This usually indicates a mismatch in the Green Channel (Y-axis) orientation. DirectX-based engines (like Unreal) expect the Green channel to represent "down" (Y-), while OpenGL-based engines (like Unity) expect it to represent "up" (Y+). Use the "Invert Green" toggle to fix this.
A high-contrast grayscale height map (displacement map) yields the best results. If you upload a color photo, the algorithm converts it to grayscale using luminance weights (0.299R + 0.587G + 0.114B). Ensure your input is not heavily compressed to avoid artifacting.
The strength multiplier scales the gradients (dX and dY) before normalization. A higher value increases the slope steepness relative to the Z-axis, creating the illusion of deeper crevices and higher peaks. Excessive strength may cause visual noise.
A flat surface has a normal vector pointing straight up the Z-axis: (0, 0, 1). When mapped to RGB color space [0, 255], this becomes Red=128 (0 mapped), Green=128 (0 mapped), and Blue=255 (1 mapped). This specific RGB combination results in the characteristic periwinkle color.
Yes. If you select multiple files during upload, the tool will process them sequentially using the current settings. This is useful for converting entire texture folders efficiently without server uploads.