// clearcoat

Clearcoat

Clearcoat adds a thin, glossy lacquer layer on top of a material, like the clear coat on car paint or varnish on wood. The base layer keeps its own look (it can be rough or matte), and the coat adds a second, sharper reflection above it.

It is a property of Fiber3DStandardMaterial. The coat reflects the scene's environment and lights. The canvas uses a procedural sky by default, so it works with no extra setup.

// demo

Demo

Five metal spheres with roughness stepped from 0.0 to 1.0, shown against a checkerboard test environment so the reflections are easy to see. The roughest sphere also has a clearcoat, so it keeps a sharp reflection over its blurry base; the other four have none.

// how to use it

How to use it

Set clearcoat (and optionally clearcoatRoughness) on a standard material:

dart
Fiber3DStandardMaterial(
  color: 0xcc1111,
  roughness: 0.5,
  clearcoat: 1.0,
  clearcoatRoughness: 0.03,
)

A complete scene that compares the same red paint without a clearcoat (left) and with one (right). Drag to orbit and watch the sharp highlight on the right sphere:

dart
import 'package:flutter/material.dart';
import 'package:flutter_fiber/flutter_fiber.dart';

void main() => runApp(const ClearcoatDemo());

class ClearcoatDemo extends StatelessWidget {
  const ClearcoatDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('flutter_fiber: clearcoat')),
        body: Fiber3DCanvas(
          backgroundColor: 0x303130,
          toneMapping: Fiber3DToneMapping.acesFilmic,
          camera: Fiber3DCamera(
            position: const Fiber3DVector3(0, 0, 5),
            target: const Fiber3DVector3.zero(),
          ),
          orbitEnabled: true,
          lights: const [
            Fiber3DAmbientLight(color: 0xffffff, intensity: 0.3),
            Fiber3DPointLight(
              color: 0xffffff,
              intensity: 3.0,
              position: Fiber3DVector3(3, 4, 5),
            ),
          ],
          children: [
            // Left: base paint only, no clearcoat.
            Fiber3DMesh(
              geometry: Fiber3DSphere(radius: 0.9),
              material: Fiber3DStandardMaterial(
                color: 0xcc1111,
                roughness: 0.5,
                metalness: 0.0,
              ),
              showEdges: false,
              onFrame: (elapsed, delta, transform) {
                transform.position.set(-1.3, 0, 0);
              },
            ),
            // Right: the same paint with a clearcoat on top.
            Fiber3DMesh(
              geometry: Fiber3DSphere(radius: 0.9),
              material: Fiber3DStandardMaterial(
                color: 0xcc1111,
                roughness: 0.5,
                metalness: 0.0,
                clearcoat: 1.0,
                clearcoatRoughness: 0.03,
              ),
              showEdges: false,
              onFrame: (elapsed, delta, transform) {
                transform.position.set(1.3, 0, 0);
              },
            ),
          ],
        ),
      ),
    );
  }
}

// parameters

Parameters

clearcoat

Fiber3DStandardMaterial · default 0.0

Strength of the lacquer layer. 0.0 = none, 1.0 = full.

clearcoatRoughness

Fiber3DStandardMaterial · default 0.0

Roughness of the coat layer itself. 0.0 gives a sharp, mirror-like glint; higher values blur it. The base layer keeps its own roughness.

// tips & limits

Tips & limits

  • Only Fiber3DStandardMaterial has a clearcoat. The other materials do not.
  • The coat follows the surface's own normals. There is no separate clearcoat normal map.
  • glTF models that use KHR_materials_clearcoat get their clearcoat factors applied automatically when loaded.
  • Clearcoat combines with transparency for a glassy look. A single transparent surface renders correctly; there is no depth-sorted transparency yet, so several overlapping transparent meshes can show sorting artifacts.
dart
Fiber3DStandardMaterial(
  color: 0xffffff,
  roughness: 0.05,
  opacity: 0.35,
  transparent: true,
  clearcoat: 1.0,
  clearcoatRoughness: 0.02,
)