Convert flat 2D textures and heightmaps into tangent-space normal maps with Sobel gradient filters, invert Y controls, and 3D lighting preview.
Normal maps describe shading directions derived from image gradients. They do not add actual surface geometry.
Uniform pixels produce near-zero horizontal and vertical gradients. The blue channel represents a normal pointing mainly out of the surface.
Inspect the map in your target renderer. Use its required convention rather than assuming every engine expects the same green-channel orientation.
A color photograph is not necessarily a reliable heightmap. Strong settings can turn color changes or image noise into misleading surface shading.
The Free Normal Map / Bump Map Generator is an interactive WebGL and canvas texture authoring tool that converts flat 2D diffuse images into realistic 3D tangent-space normal maps. In 3D game engines, architectural visualization, and web graphics pipelines like Three.js, Babylon.js, Blender, and Unreal Engine, normal mapping simulates microscopic surface relief, crevices, bumps, and bevels without increasing polygon mesh complexity. Our browser studio extracts surface gradients to produce production-ready normal maps in real time.
The conversion pipeline transforms diffuse color inputs into luminance heightmaps, applies configurable Sobel or Prewitt $3 \times 3$ gradient filters to compute horizontal ($dx$) and vertical ($dy$) slope vectors, and normalizes the resulting vectors into standard tangent-space RGB colors ($R=X$, $G=Y$, $B=Z$). Fine-tune height strength, apply Gaussian smoothing to eliminate high-frequency photographic noise, and invert Red or Green color channels to guarantee direct compatibility with DirectX or OpenGL normal map conventions.
Preview your surface relief on an interactive 3D sphere or cube lit by a movable dynamic point light directly in your browser. Inspect how specular highlights and directional shadows interact with surface bumps before downloading your finalized lossless PNG normal map.
Drag and drop any flat texture, photograph, or grayscale heightmap into the studio canvas to initialize the surface pipeline.
Use the Strength slider to amplify surface depth and adjust the Blur radius to smooth out photographic camera sensor grain.
Toggle Invert Green (Y) to switch between OpenGL (Y+) and DirectX (Y-) normal coordinate conventions required by your 3D engine.
Move the virtual light source over the 3D preview model to inspect dynamic shadows, then download the lossless PNG normal map.
Computes precision spatial derivatives across image height fields to calculate accurate tangent-space surface normal vectors.
One-click toggles to invert Red (X) and Green (Y) channels, ensuring compatibility with Unity, Unreal, Blender, and Three.js.
Interactive 3D geometry viewer with movable point lights rendering Blinn-Phong specular shading across your generated normal map.
Processes large multi-megapixel textures entirely in browser memory using HTML5 canvas and WebGL with zero cloud latency.
Normal maps encode surface slope angles into RGB vectors without adding 3D polygons. Verify your engine coordinate convention (DirectX Y- vs OpenGL Y+) before exporting.
Generate a map from a height-like texture and inspect the result under changing light before using it in a scene.
Compare green-channel inversion settings against the target material’s expected normal-map convention.
| Normal Map Property | Channel Vector / Calculation | 3D Graphics Engine Standard & Behavior |
|---|---|---|
| Red Channel (X) | Horizontal surface derivative dx * strength | Light gradient across horizontal axis (-1 left, +1 right) |
| Green Channel (Y) | Vertical surface derivative dy * strength | OpenGL uses Y+ (upward); DirectX uses Y- (downward, inverted) |
| Blue Channel (Z) | Perpendicular surface normal vector dz = 1.0 | Points directly outward from polygon face; produces lavender hue |
| Sobel 3x3 Kernel | Weighted finite difference convolution | Smooths high-frequency noise while calculating accurate edge angles |
| Specular Lighting | Blinn-Phong half-angle dot product | Simulates shiny highlights and tactile surface roughness in real time |
The primary difference is the orientation of the Green (Y) color channel. OpenGL uses Y+ (pointing upward, appearing as if lit from above), whereas DirectX uses Y- (pointing downward, appearing as if lit from below). Toggle "Invert Y" to match your target game engine.
Normal maps use RGB color channels to represent 3D surface vector directions: Red represents the horizontal X axis (-1 to +1), Green represents the vertical Y axis (-1 to +1), and Blue represents the perpendicular surface depth Z axis (pointing directly outward, which is why neutral normal maps are predominantly lavender blue).
Yes. The tool automatically converts color photographs into a luminance heightmap before running gradient filters. For best results, use diffuse photos with flat, even lighting rather than strong cast shadows.
An internet connection is required to open tools and refresh a temporary session. Processing stays on your device; the handshake sends a random challenge, not files or text inputs. Libraries, fonts or models may download. Local processing cannot remove risks from an untrusted device or extension.
