npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mesh-baked-material

v1.0.4

Published

A material for ThreeJS that allows you to combine the baked lighting from a MeshBasicMaterial, with the specular highlights of MeshStandardMaterial.

Downloads

15

Readme

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:

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:

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.