Transparency without sorting: the source

since 0.8.0 Shading and materials
Open the live demo · Read the guide · View on GitHub
Regions the guide quotes: panes (line 32), wall (line 64), settings (line 84).
1/// Coloured panes at three depths and two that cross through each other,
2/// composited sorted or without a sort.
3///
4/// Quoted by `order_independent_transparency.md` and shown whole in the Source
5/// tab.
6library;

8import 'dart:math' as math;

10import 'package:flutter3d/flutter3d.dart';
11import 'package:flutter3d_showcase/src/demo/demo.dart';
12import 'package:vector_math/vector_math.dart';

14final class OrderIndependentTransparencyDemo extends ShowcaseDemo {
int mode = 1;

static const List<TransparencyMode> _modes = <TransparencyMode>[
  TransparencyMode.sorted,
  TransparencyMode.weightedBlended,
];

@override
void configureView(DemoContext context) {
  context.orbit
    ..distance = 3.2
    ..yaw = 0.35
    ..pitch = 0.15;
}

@override
Scene build(DemoContext context) {
  final DeviceMesh quad = DeviceMesh.upload(
    context.device,
    const PlaneShape(width: 1.2, depth: 1.2).build(),
  );
  final List<({double x, double z, double yaw, Vector4 colour})> panes =
      <({double x, double z, double yaw, Vector4 colour})>[
        (x: -0.3, z: 0.6, yaw: 0.0, colour: Vector4(0.9, 0.1, 0.1, 0.5)),
        (x: 0.0, z: 0.0, yaw: 0.0, colour: Vector4(0.1, 0.9, 0.1, 0.45)),
        (x: 0.3, z: -0.6, yaw: 0.0, colour: Vector4(0.1, 0.2, 0.9, 0.6)),
        // These two cross through each other: no order of the two is right
        // for every pixel.
        (x: 0.1, z: 0.3, yaw: 0.6, colour: Vector4(0.9, 0.8, 0.1, 0.4)),
        (x: 0.1, z: 0.3, yaw: -0.6, colour: Vector4(0.8, 0.1, 0.9, 0.35)),
      ];
  final Scene scene = Scene();
  for (final pane in panes) {
    scene.add(
      MeshNode(
          quad,
          Material(
            lighting: LightingModel.unlit,
            baseColor: pane.colour,
            alphaMode: MaterialAlphaMode.blend,
            doubleSided: true,
          ),
          name: 'pane',
        )
        ..setPosition(pane.x, 0.0, pane.z)
        ..setRotationYawPitchRoll(pane.yaw, math.pi / 2, 0.0),
    );
  }

  return scene..add(
    MeshNode(
        DeviceMesh.upload(
          context.device,
          const PlaneShape(width: 8, depth: 8).build(),
        ),
        Material(
          lighting: LightingModel.unlit,
          baseColor: Vector4(0.45, 0.45, 0.45, 1.0),
          doubleSided: true,
        ),
        name: 'wall',
      )
      ..setPosition(0.0, 0.0, -1.6)
      ..setRotationYawPitchRoll(0.0, math.pi / 2, 0.0),
  );
}

@override
RenderSettings settings(DemoContext context) => RenderSettings(
  transparency: _modes[mode],
);

@override
List<DemoControl> controls(DemoContext context) => <DemoControl>[
  ChoiceControl(
    'Transparency',
    options: const <String>['Sorted', 'Weighted blended'],
    index: () => mode,
    onChanged: (int i) => mode = i,
  ),
];

@override
void verify(Scene scene, FrameResult frame) {
  final FramePass? pass = frame.passes
      .where((FramePass p) => p.name == 'scene')
      .firstOrNull;
  if (pass == null) throw StateError('the scene pass did not run');
  // Weighted blended adds one full-screen resolve to the scene pass, on top
  // of a draw for every mesh.
  final int meshes = scene.meshes.length;
  final int expected = _modes[mode] == TransparencyMode.weightedBlended
      ? meshes + 1
      : meshes;
  if (pass.drawCalls < expected) {
    throw StateError(
      'the scene pass drew ${pass.drawCalls}, expected at least $expected',
    );
  }
}
115}