Compatibility

See which parts of a Three.js scene render as they are, which are approximated, and which need a fallback. bakery3.check() answers it for your own scene.

Check your scene

check() runs in the browser. It is free, uploads nothing and needs no account.

const report = bakery3.check();
// {
//   score: 0.97,
//   counts: { info: 1, warning: 2, error: 0 },
//   issues: [{ code: 'material_approximated', severity: 'warning', path: '<Lamp>/<Shade>', … }],
// }

Every issue names the material, its type, where it is in your scene, and the docs page with the fix. This is what a ShaderMaterial gets:

{
  code: 'material_custom_shader',
  severity: 'error',
  message:
    'ShaderMaterial "CarPaintFlakes" renders flat gray, because the render cannot run GLSL. Declare a fallback, or port it to TSL.',
  path: '<Car>/<Body>/<Paint>',
  materialName: 'CarPaintFlakes',
  materialType: 'ShaderMaterial',
  docs: 'https://bakery3.com/docs/material-fallbacks',
}

Materials explains the report in full.

What is supported

Feature	Support	Notes
`MeshStandardMaterial`	Full	Base color, roughness, metalness, normal, emissive, opacity
`MeshPhysicalMaterial`	Full	Plus clearcoat, transmission, thickness, IOR, sheen, specular, anisotropy. Not iridescence or dispersion
`MeshStandardNodeMaterial`, `MeshPhysicalNodeMaterial`	Full	Your TSL graph renders. See Custom shaders
`MeshBasicMaterial`	Approximated	Its color, unlit. It does not light the scene, cast a shadow or show in reflections
`MeshLambertMaterial`	Approximated	Rendered as a fully rough, non-metal surface in its color
`MeshPhongMaterial`	Approximated	Rendered like Lambert. Shininess is not used, so there are no sharp highlights
`MeshToonMaterial`	Approximated	Rendered like Lambert, without the cel shading
`MeshMatcapMaterial`	Approximated	Rendered like Lambert, in its color and map. The matcap is not used
`MeshNormalMaterial`, `MeshDepthMaterial`, `MeshDistanceMaterial`	Approximated	Rendered flat gray
`ShaderMaterial`	Not supported	Rendered flat gray. Declare a fallback material or port it to TSL
`RawShaderMaterial`	Not supported	As above
`alphaMap`, `bumpMap`, `displacementMap`, `specularMap`	Not rendered	`check()` warns. See Slots the render ignores
`PerspectiveCamera`	Full	Including zoom. Everything is in focus
`OrthographicCamera`	Full
`InstancedMesh`	Full	Every instance renders
`SkinnedMesh`	Full	Rendered in its current pose
Morph targets	Full	Rendered with their current influences
`DirectionalLight`	Full
`PointLight` / `SpotLight`	Full	Intensity is converted to physical units
`RectAreaLight`	Full	Intensity is converted to physical units
`HemisphereLight`	Full	Sky color from above, ground color from below, added to the HDRI
HDRI environment	Full	Intensity and rotation are kept
Post-processing	Not rendered	Bloom, depth-of-field passes and color grading are screen-space effects

The pages that follow go deeper: Materials covers every material and texture slot, Custom shaders the TSL operations, and Cameras and Environment & lighting the projections and light units.

Render a custom shader as a physical material

Declare the material the renderer should use instead. Your shader stays in the viewport.

import { Bakery3Material } from '@oeave/bakery3/r3f';

<Bakery3Material
  web={<CarPaintShader />}
  render={
    <meshPhysicalMaterial
      color="#830000"
      metalness={0.9}
      roughness={0.14}
      clearcoat={1}
    />
  }
/>

See Material fallbacks for the plain Three.js form and every field it accepts.