Displacement to Tangent Normal Map Generator
Compute vector normal coordinates from grayscale heightmaps using Sobel and Scharr differential convolution with interactive 3D WebGL lighting in user RAM.
Direct Answer & Pipeline Overview
Displacement to Tangent Normal Map Generator is a specialized, 100% client-side engineering utility developed by Atlyxen Studios. It processes calculations and conversions directly inside your browser memory using hardware-accelerated WebAssembly and WebGL, guaranteeing instant results with zero server file transfers and zero data retention.
How to Use the Displacement to Tangent Normal Map Generator
Upload Grayscale Heightmap
Drop your grayscale displacement, bump, or photographic texture into the upload zone or choose a procedural preset.
Tune Convolution Kernel & Depth
Select between Sobel, Scharr, or 5x5 differential matrices and adjust the depth intensity slider to match your desired surface extrusion.
Configure Engine Standard
Toggle Invert Green Channel to switch between OpenGL (Blender/Unity) and DirectX (Unreal Engine) normal conventions.
Inspect 3D Lighting & Download PNG
Switch to 3D Lighting view to observe dynamic specular highlights, then download the crisp tangent normal PNG.
Key Technical Capabilities
Precision 3x3 Sobel, 3x3 Scharr, 3x3 Prewitt, and 5x5 High-Precision differential convolution kernels
Dynamic depth multiplier scaling from 0.5x subtle relief to 15.0x intense macro extrusion
One-click DirectX (Y-) and OpenGL (Y+) coordinate orientation green channel flipping
Gaussian pre-filtering noise reduction to eliminate high-frequency photographic sensor noise
Interactive 3D WebGL PBR viewport with rotating Sphere, Cube, Cylinder, and Plane geometries
Split-wipe comparison slider between input grayscale heightmap and output tangent normal map
Built-in procedural heightmap presets for cobblestone, diamond plate, fabric weave, and craters
100% client-side memory execution with zero server uploads and complete privacy
Frequently Asked Questions
How does a heightmap convert into a normal map?
A heightmap encodes elevation as scalar grayscale brightness (0.0 to 1.0). The converter evaluates the gradient of luminance across neighboring pixels using 2D convolution kernels (such as Sobel or Scharr). The horizontal partial derivative becomes the X normal vector (Red channel), the vertical partial derivative becomes the Y normal vector (Green channel), and the Z vector (Blue channel) represents perpendicular elevation.
What is the difference between OpenGL and DirectX normal maps?
In tangent space normal mapping, the Red channel always encodes horizontal direction (X+ pointing right). However, OpenGL conventions treat the Green channel (Y) as pointing upwards (+Y), which is required by Blender, Maya, Unity, and WebGL. DirectX conventions invert the Green channel (-Y pointing downwards), which is required by Unreal Engine and 3ds Max.
Why choose the Scharr kernel over Sobel?
The standard Sobel filter has a known slight bias along cardinal axes (0 and 90 degrees). The Scharr kernel optimizes gradient weights (coefficients 3 and 10 instead of 1 and 2) to achieve near-perfect rotational symmetry (angular isotropy), producing smoother normals on diagonal and organic curved surfaces.
What does the Noise Pre-Filter slider do?
When converting photographs or raw satellite terrain into normal maps, micro-level sensor noise can create harsh grain in the normal map. The pre-filter applies a gentle Gaussian blur prior to computing derivatives, preserving major ridges and bevels while eliminating pixel noise.
Can I test normal mapping under dynamic lights?
Yes! The 3D Lighting viewport provides an interactive WebGL scene with moving point lights and directional key lights. You can rotate spheres, cubes, and cylinders in real time to verify specular reflections and shadow angles before exporting to your game engine.
Are my texture files sent to an external server?
No. All image decoding, differential convolution, canvas rendering, and 3D WebGL simulations occur locally in your browser memory. Your textures are never uploaded to any remote server.