Normal Map Generator

A modern browser-based tool to create PBR textures (Normal, AO, etc.) with real-time 3D preview. 100% private.

Comment 1

Inspiration

Most 3D artists need a quick way to generate PBR maps from photos or sketches. However, existing web tools often look like they're from 2005, and many require uploading your proprietary assets to a remote server. We wanted to build a modern, fast, and secure alternative that respects the user's creative privacy while providing professional-grade results.

What it does

Normal Map Generator allows you to drag and drop any image and instantly generate four critical PBR maps: Normal, Displacement, Ambient Occlusion, and Specular. It features a real-time 3D preview powered by Three.js, allowing you to see your material on various 3D shapes before exporting. You can fine-tune parameters like strength, blur/sharpness, and axis orientation to match your workflow in Unity, Unreal, or Blender.

How I built it

The core processing engine uses custom Sobel and Scharr filters implemented in JavaScript/TypeScript for high-performance edge detection. For the frontend, we used Next.js and Tailwind CSS for a modern dark-mode UI. The 3D preview is built with @react-three/fiber and @react-three/drei , enabling high-fidelity PBR rendering directly in the browser. The entire application is deployed on Cloudflare Workers for global speed.

Challenges I ran into

Handling high-resolution images (up to 4K) entirely on the client-side without freezing the UI was a significant challenge. We optimized the canvas processing logic and utilized React's state management effectively to ensure the real-time preview remains responsive even when complex calculations are happening.

Accomplishments that I'm proud of

We are proud of creating a tool that offers professional-grade functionality without a single byte of user data ever touching our servers. Achieving parity with desktop-based edge detection tools in a simple web interface is a big win for us.

What I learned

Through this project, I gained a deep understanding of image processing algorithms like Sobel and Scharr and how to implement them efficiently in a browser environment. I also learned how to integrate Three.js with React to create a high-performance 3D preview system. More importantly, I realized that 'Privacy-by-Design' is not just a concept—it's a technical commitment. Building a fully functional tool that operates entirely on the client-side requires careful optimization but provides immense value in terms of user trust and security.

What's next for Normal Map Generator

Our roadmap includes several exciting features to make the workflow even more powerful:

  • Batch Processing: Allow users to generate and export maps for multiple textures simultaneously.
  • AI Enhancement: Integrate optional AI-driven upscaling and noise reduction for cleaner map generation from low-res photos.
  • Advanced Material Support: Add more complex PBR preview options, such as clear coat and metallic/roughness presets.
  • API Access: Provide a professional API for developers to integrate normal map generation into their own creative pipelines.
  • Community Presets: Enable users to save and share their best settings for different types of textures (e.g., stone, wood, fabric).

Built With

Share this project:

Updates