MeshBakedMaterial

A material for ThreeJS that allows you to combine the baked lighting from a MeshBasicMaterial, with the specular highlights of MeshStandardMaterial. Check out the live example to see what this does for you. For more info, scroll down to About.

How to use

Install with npm via npm install mesh-baked-material.

Use in your project like so:

import MeshBakedMaterial from 'mesh-baked-material';

const mat = new MeshBakedMaterial({map: bakedMap, roughness: 0.1, metalness: 0.3});
const mesh = new THREE.Mesh(new THREE.BoxGeometry(1), mat);

About

The classic approach to using a baked texture in Three.js is as a MeshBasicMaterial. This material is used because it will not interact with any lighting in your scene - we want it to be rendered without realtime lighting, since the lighting has been baked into the texture already. However, if you're trying to bake a material that is shiny or metallic, you'll find that your textures look very flat in ThreeJS, since MeshBasicMaterial cannot render materials that interact with lights. For some materials this can really change how it looks:

How it looks in Blender

Baked Texture

How it looks in Three.js

Note the lack of specular/glossy reflections in the Three.js result. You may attempt to fix this by using a MeshStandardMaterial instead - however this will result in other problems. First, your object will render completely black unless you add in lights to your Three.js scene. You can add an AmbientLight to match the flat look of a MeshBasicMaterial - but in order to get the same reflections as in your render, you'll have to add the same lighting as in your bake. However, when you do so, you'll now be "double-dipping" on your lighting. Areas that were in shadow or light in your bake, are doubly so in your Three.js scene:

Three.js with MeshStandardMaterial

This doesn't look too bad at first glance - we have our reflections, and some soft shadows in there. But on closer looks there's some issues that make it looks worse than our initial render. For example:

• the pillars are too bright and too dark
• the shadows on the floor are washed out
• the monkey is too contrasty

In order to look as best as possible - we need to make sure we're not "double-dipping" on our lighting. This is where MeshBakedMaterial comes in. It's the same as MeshStandardMaterial, but will add addition diffuse lighting to an texture, only specular lighting. This means you can add roughness/metalness maps to a baked texture, without it being over or underlit from the scene lights. Take a look:

MeshBakedMaterial will enable you to have specular reflections on your baked textures, without double-dipping on your lighting. With this approach you can continue to use roughness/metalness values or maps, and get dramatic results, while still saving on performance by baking nice shadows.

Shout out to Bruno Simon and his ThreeJS Journey class, without which I'd be completely lost.