Materials

Check your scene's materials

check() runs in the browser and works offline. It uploads nothing and needs no account.

const report = bakery3.check();

report.score; // 0.97
report.counts; // { info: 1, warning: 2, error: 0 }
report.issues;

Each issue tells you which material, where it is and what happens to it.

{
  code: 'material_approximated',
  severity: 'warning',
  message: 'MeshPhongMaterial "chrome" is approximated. It renders as a fully rough…',
  path: '<Lamp>/<Shade>/<Chrome>',
  materialId: 'a1b2c3d4',
  materialName: 'chrome',
  materialType: 'MeshPhongMaterial',
  docs: 'https://bakery3.com/docs/materials',
}

These are the codes a material can get.

How each material renders

On Lambert, Phong and Toon materials, emissiveIntensity is not used: an emissive color glows at intensity 1.

Any other material type is an error with the code material_unknown. It renders as a fully rough surface in its color, or flat gray if it has no color. A node material without a TSL graph renders like the material it is built on, so a MeshBasicNodeMaterial renders like a MeshBasicMaterial.

Glass refracts in the render, but by default it casts a solid shadow, like it does in your viewport. To get the bright pool of light a real glass throws on a table, turn on caustics.

Sheen shows best in motion. This fabric chair turns in the viewport and in the render:

Texture slots that render

map, normalMap, roughnessMap, metalnessMap, emissiveMap, clearcoatMap, clearcoatNormalMap, clearcoatRoughnessMap, transmissionMap, sheenColorMap, sheenRoughnessMap, anisotropyMap, specularColorMap and specularIntensityMap.

The renderer traces shadowed corners and the depth of glass from your geometry, so aoMap and thicknessMap are not used. A material's own envMap and lightMap are not used either: the render lights every surface from the scene.

Slots the render ignores

check() warns with material_map_ignored when a material uses one of these, and names each one.

A slot your viewport does not draw either, such as an alphaMap on an opaque material, gets no warning.

What the score means

score is the share of your scene's triangles that belong to objects without an error. It counts triangles and not objects, so one unsupported bolt barely moves it and an unsupported car body does. An empty scene scores 1.

Stop a render when there are errors

Neither a warning nor an error stops a render. What check() reports is approximated or left out, and the report is saved with the render.

To stop on errors and show them in your own UI instead:

const report = bakery3.check();

if (report.counts.error > 0) {
  return showIssues(
    report.issues.filter((issue) => issue.severity === 'error'),
  );
}

Leave an object out of the render

Helpers, gizmos and grids are left out automatically. Leave anything else out with userData.

selectionOutline.userData.bakery3 = { exclude: true };

check(), renders and bakes all skip an excluded object and its children. To run the same test yourself, for example in an object picker:

import { shouldExclude } from '@oeave/bakery3';

const pickable = meshes.filter((mesh) => !shouldExclude(mesh));

Render an object your viewport hides

Say your shop shows the sofa on white, and the render should put it in a room. Keep the room visible = false and mark it renderOnly.

room.visible = false;
room.userData.bakery3 = { renderOnly: true };

The room renders like any visible object. Objects hidden inside it, such as a finish the user has not picked, stay hidden.

Instanced meshes

InstancedMesh renders. Its triangles are multiplied by count in the estimate and the size warnings. An instanced mesh cannot be baked. See Bake a scene.

When a material is not supported

You have three options, best first.

1. Change it to MeshStandardMaterial or MeshPhysicalMaterial.
2. Port it to TSL as a node material. See Custom shaders.
3. Declare a fallback that says what it should look like. See Material fallbacks.