ATLAS PBR Viewer

ATLAS is a browser-based PBR material viewer built with Three.js. It provides a real-time 3D preview, procedural material controls, and separate image import fields for common PBR texture channels.

Features

• Real-time Three.js material preview
• Selectable 3D shapes:
  • Cube
  • Sphere
  • Cylinder
  • Cone
  • Pyramid
  • Rectangular box
• Valley of Desolation EXR environment lighting
• Material controls for:
  • Index of refraction (IOR)
  • Opacity
  • Roughness
  • Metalness
  • Transmission
  • Reflection
  • Clearcoat
  • Iridescence
  • Thickness
• Individual PBR texture imports:
  • Base Color
  • Roughness
  • Metalness
  • Normal
  • Height / Displacement
  • Ambient Occlusion
  • Emissive
• Procedural material generation
• Blender-inspired dark interface
• Dependency-free Node.js static server

Requirements

• Node.js 18 or newer
• A modern browser with WebGL support

Installation

Clone or download the project, then install the dependencies:

npm install

Environment File

Place the HDR environment file at:

public/environments/valley_of_desolation.exr

The application loads it from:

/environments/valley_of_desolation.exr

Running the Application

Build the application and start the local server:

npm start

Or run the steps separately:

npm run build
node server.js

Open the application at:

http://localhost:8000

Development

For Vite development mode with hot module replacement, run:

npm run dev

Then open the URL shown by Vite, usually:

http://localhost:5173

Texture Workflow

1. Choose a 3D shape from the Object panel.
2. Import each available PBR image in the PBR Textures panel.
3. Adjust the material properties with the sliders.
4. Rotate and inspect the object using the mouse controls.
5. Use Reset to restore the default material settings.

Color textures such as Base Color and Emissive are interpreted as sRGB. Data textures such as Roughness, Metalness, Normal, Height, and Ambient Occlusion are interpreted as non-color data.

Project Structure

.
├── public/
│   └── environments/
│       └── valley_of_desolation.exr
├── src/
│   ├── main.js
│   └── style.css
├── index.html
├── server.js
├── package.json
└── README.md

Available Commands

Command	Description
npm install	Install project dependencies
npm run dev	Start Vite development mode with HMR
npm run build	Create the production build in dist/
npm start	Build the application and serve it on port 8000
node server.js	Serve the existing dist/ build on port 8000

License

This project is intended for personal and educational use.

About

Made 100% by Creatimely (me)! Pls subscribe to my YouTube channel