PBR-Gen; A Free Browser/Client-Based PBR Texture Generator & PBR Tool Suite

Hello everyone,

I’m excited to introduce a free, browser-based PBR texture generator that is completely client-side! This tool is perfect for anyone working with Physically Based Rendering (PBR) workflows, or anyone wanting to make their flat textures pop some more!

Key Features:

  • Base Texture to PBR Maps: Generate:
    • Normal Maps (add depth and detail)
    • Metallic Maps (define material properties)
    • Roughness Maps (control surface irregularities)
    • Ambient Occlusion Maps: Not yet supported but could be added by request
  • Export Options: Easily export all generated maps for use in your projects.
  • Two Processing Modes:
    • Canvas API: CPU-based, works across all devices.
    • WebGL: GPU-accelerated, faster, and more accurate for supported hardware.
  • Local Material Library:

New Feature: 3D PBR Viewer

I’ve added a 3D WebGL PBR Viewer! You can now preview your materials in a real-time 3D environment. Load materials directly from the library and apply them to 3D objects, adjusting lighting and maps to get instant feedback. A supported GPU is required.

Why Use This Tool?

  • Make Flat Textures Pop: Turn ordinary textures into stunning PBR assets.
  • No Installs: Fully browser-based, works anywhere.
  • Client-Side Processing: No data uploads—everything happens on your machine.
  • Free Forever: All features are free to use!

Try the PBR Texture Generator Here!

WebGL Version (Recommended for GPU)


Examples/Screenshots

(Examples and screenshots use quite exaggerated strength values)
📺 Canvas Comparison Video (Maps/No Maps)

📺 WebGL Comparison Video/Gif (Maps/No Maps)


PBR Map Comparison

Another Result (Canvas)

3D PBR Viewer Screenshot

App UI



How the Algorithms Work (in Simple Terms)

🛠️ How the Pixel (Canvas) Algorithms Work

The Canvas version processes each pixel individually using basic 2D image operations on your CPU.

  1. Normal Maps:

    • The tool looks at your image, pixel by pixel, and tries to detect the edges and depth in the image. It uses something called a Sobel filter to find these edges, which measures how quickly the colors change from one pixel to the next.
    • Once it finds the edges, it creates a map where these changes represent bumps or indentations in the surface. This is how it simulates 3D effects (like bumps) from a 2D texture.
  2. Metallic Maps:

    • The very simple algorithm checks how bright or colorful each part of the image is. It uses this information to decide whether a part of the texture should look metallic or not.
    • For example, shiny areas are usually treated as more metallic, while duller areas are treated as less metallic.
  3. Roughness Maps:

    • The roughness map calculates how rough or smooth each part of the image should look. It checks how much the colors in the texture vary between neighboring pixels.
    • If there’s a lot of variation (meaning the colors change a lot), it will be considered rough. If the colors are similar, it will be smoother.
🛠️ How the Shader (WebGL) Algorithms Work

The WebGL version uses GPU-powered shaders to process textures efficiently. Shaders are programs that run on the GPU, which allows for complex and fast calculations ideal for 3D graphics and effects. In contrast, the Canvas API processes textures using your CPU, pixel by pixel, which is slower for intensive operations.

What Each Shader Does:

  1. Normal Maps:

    • The shader compares the brightness of neighboring pixels in the texture to figure out where the edges or bumps are.
    • It uses vectors to simulate the direction of these bumps, creating a “normal map” that gives the illusion of depth and texture when light interacts with the surface.
    • The shader calculates the differences in brightness (like a slope) and assigns colors that correspond to the direction of the “bumps”.
  2. Metallic Maps:

    • This shader checks how colorful each pixel is by converting the image to a format called HSV (Hue, Saturation, Value).
    • Less colorful (desaturated) areas are considered metallic, meaning they reflect light like metal. The more colorful areas are treated as non-metallic, making them look less reflective.
    • The metallic intensity is adjustable, allowing you to fine-tune how shiny or metallic the texture appears.
  3. Roughness Maps:

    • The roughness shader determines how “rough” or “smooth” a texture should look. It calculates the brightness variance (how much the brightness changes) between neighboring pixels.
    • If there’s a lot of variance, it makes that area look rougher. If the brightness is similar across pixels, the surface looks smoother.
    • This is important for making materials like wood, metal, or fabric look more realistic in 3D environments.

Why Use Shaders?

  • Shaders run directly on the GPU, making these operations fast and efficient.
  • They handle complex math (like vector calculations and lighting effects) that are essential for realistic textures in 3D environments.
  • The normal, metallic, and roughness maps generated by the shaders enhance the appearance of materials by simulating real-world lighting and surface behavior.

Note: Performance may vary depending on your hardware and browser. For best results, I recommend using a modern browser with a decent CPU/GPU.

9 Likes

Wow, great tool to use. Really getting tired of looking at PBR sites that everyone uses, this actually provides a bit of unique-ness(?) to the PBR.

Can’t wait to use this for my games, thank you for making this.

1 Like

This is great. I have a collection of several bookmarked websites, some used for normals and some for roughness, etc.

Now I can have it all in one website, amazing.
super useful

1 Like

Glad you like it and find it useful! I’ve added another “all-in-one” type of tool for people like you.

I’ve just added a Local PBR Material Library to make organizing and managing your PBR materials easier than ever! With this powerful local storage system, you can now:

  • Upload and store your PBR materials for quick access
  • Tag materials for easy searching and filtering
  • Customize sort orders for efficient browsing
  • Store multiple maps (Normal, Metallic, Roughness) for each material
  • Track material iterations with version control

This feature is designed to streamline your workflow and keep everything organized in one place!

Check it out here!

Again, please let me know what you think or if you have any feature requests! :blush:

2 Likes

what a g.

really cool features. just wanted to know, how does the whole library manage to save locally without losing any data? (not a web developer by any means so I really don’t know much)

1 Like

Hey no worries, glad you think it’s cool and I appreciate you checking it out! I added some more features tying all the tools together with the library (along with the 3d preview tool), so you can load/add materials directly to the library without having to save/upload/organize the materials manually.

Here’s a quick explanation of how the local features work with the library:

The PBR Material Library saves your materials locally using an IndexedDB, which is a database system built directly into your browser (I utilize something called opendb to access this database). This system allows the tool to store all your materials (images aren’t stored as pngs or anything, the image is converted to raw data and stored), versions, and tags directly on your device without the need for any internet connection or external servers. You could even download the website locally and continue running it without internet.

This is all handled securely and privately, ensuring your data stays on your machine!

1 Like

does client side means you can run this locally without nodejs/server setup? just html and js/css?

off topic question : how did you learn webgl? especially for local (client brower no server)?

?
this is even a thing?
source?

edit : got source, it is a thing, whats the storage limits?

Hey! To answer your questions:

  1. Local client-side means that once the server sends you the web page, everything can function offline without a connection. The website and your browser simply stores all of the algorithms, functions, etc that power and render the website, these are then built and compiled into static pages that can utilize these functions once the page is loaded/stored. The code that initially serves the frontend and backend (there’s really no backend beyond serving the page/code) is all built in TypeScript using a React framework called Next.js, served to the web by Vercel.

  2. I learned WebGL originally learning GLSL shader programming for other engines, AI tools help me with the mathematics and algorithms a lot, I usually just provide the technique and implementation I want to use in my tools for writing the rendering & transformation logic.

  3. IndexedDBs have no storage limits, but most browsers will ask you to confirm continued use if a website domain begins using over 50MBs of data or so. As mentioned previously, OpenDB is a javascript library I use to access your browser’s Indexed database.

1 Like