MeshToonNodeMaterial
A node material for achieving non-photorealistic cartoon or 'cel-shaded' rendering. It quantizes the lighting result using a gradient map, which replaces smooth light-to-dark transitions with discrete color steps to create a flat, cartoonish look. [1, 2] It is the node-based version of MeshToonMaterial.
Core Advantages
Provides powerful artistic control for non-photorealistic rendering (NPR). By supplying a custom `gradientMap`, developers can precisely define the color steps and hues from highlight to shadow, easily achieving a wide range of stylized visual effects. [1, 2] This shading method is often more performant than complex physically-based rendering.
Common Uses
Creating 3D characters and environments with a cartoon, anime, or comic book aesthetic [2]
Developing stylized video games [2]
Technical or architectural visualizations that require clear surface delineation
Implementing any artistic effect that calls for a flat, non-photorealistic shading style
How to adjust
The primary method of adjustment is by providing a texture to its `gradientMap` property. This texture is typically a narrow image that defines the color ramp from dark to light. [1] The material's `color` property is multiplied by the gradient map's color to tint the overall tone. The material is affected by lights in the scene; the angle and intensity of light determine which part of the gradient map is used on the model's surface. It also supports nodes like `normalMap` to add surface detail.
Code Examples
1<mesh>
2 <torusKnotGeometry args={[0.4, 0.15, 128, 32]} />
3 {/* gradientMap requires a pre-loaded texture that defines the shading steps */}
4 <meshToonNodeMaterial color="#51A8DD" gradientMap={gradientTexture} />
5</mesh>