How to implement Blender Principled BSDF Materials in Three.js (Intro)
Achieving realism in computer graphics requires a phenomenal amount of computing power. In order to reduce that workload, 3D graphics uses techniques like Physically Based Rendering (PBR), which simulates the realistic way that light interacts with surfaces. PBR relies on image-based data which can enhance a surface with additional detail using precalculated image-based representations of different properties. For example, the metallic map defines which areas of a texture are more reactive to light reflection.
Implementing PBR in real-time environments like web browsers presents additional challenges. Web technologies, such as WebGL, have more constraints compared to desktop software APIs like OpenGL. Compared to Three.js, Blender has more flexibility and more advanced rendering options that can be applied without concern for performance overhead. Shaders, the small programs that run on the GPU, can play a critical role in bridging this gap, allowing developers to create custom effects, lighting models, and procedural textures that can approximate a great level of detail without sacrificing performance.
In this article, I’ll walk through the process of creating physically based materials for a web game using Three.js and custom shaders, showcasing both the obstacles and breakthroughs involved in adapting complex materials originally designed in Blender to run efficiently in a browser environment.
Designing physically based materials for the web
As part of my recent sprint on the Open Studios project Langenium, I worked on a ticket called “Basic Scenery”. While models have come and gone over the history of this project, the game has retained only one model for the player’s avatar and one for background scenery, both developed for the original Langenium project back in 2012 so they were noticeably lacking in detail.
Originally I thought I’d add some common materials to the game using free materials from online resources like FreePBR, however for ease of use I opted to use free materials provided by the BlenderKit add-on. Unfortunately the models exported for use in the game engine had no textures despite the materials being ticked for export. After some Googling I learned that I had to “bake” the shader materials in order for them to be exported and loaded in other environments like Three.js.
Baking the materials fixed the issue and allowed shader material textures to export from Blender, but the file sizes had grown from 170KB to 30MB, which isn’t acceptable for a web based game. Even if I could get away with one model, the cumulative effect of several models that size would mean people on mobile can’t play. Worse yet — the textures, even with good compression, were blurry and no longer dynamically reacting to directional light, or showing animations. That file size is pretty standard in video games but it just wasn’t acceptable given how much better everything looked in Blender where the materials were at a higher resolution and, most importantly, were animated and reacting to directional light.
This is just the introduction for a larger article, if you’d like to read on please continue to the full article on the Open Studios blog.
Want more content? Find me on
- Medium: https://medium.com/@paulbrzeski
- LinkedIn: https://www.linkedin.com/in/paul-b-23620b209/
- Website: https://www.paulbrzeski.com
- YouTube: https://www.youtube.com/@paulbrzeski4237/
