three.js colormanagement exploration

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.container {
  margin: 1px;
  position: relative
}

.title {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
}

JavaScript

import * as THREE from "three"
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js"
import { RenderPass } from "three/addons/postprocessing/RenderPass.js"
import { OutputPass } from "three/addons/postprocessing/OutputPass"
import { OrbitControls } from "three/addons/controls/OrbitControls.js"

// see https://www.color-hex.com/color/f58231
const emissiveColor = 0xf58231;

const canvasWidth = 300
const canvasHeight = 200

THREE.ColorManagement.enabled = true

init(THREE.LinearSRGBColorSpace, true, "linear, w/ OutputPass")
init(THREE.SRGBColorSpace, true, "srgb, w/ OutputPass")
init(THREE.LinearSRGBColorSpace, false, "linear, w/o OutputPass")
init(THREE.SRGBColorSpace, false, "srgb, w/o OutputPass")

function init(rendererColorSpace, useOutputPass, title) {
  // scene
  const scene = new THREE.Scene()

  // camera
  const camera = new THREE.PerspectiveCamera(
    40,
    canvasWidth / canvasHeight,
    1,
    10000,
  )
  camera.position.set(20, 20, 20)

  // renderer
  const { renderer, composer } = createRenderPipeline(
    rendererColorSpace,
    useOutputPass,
    scene,
    camera,
  )

  // html
  createDomElements(renderer, title)

  // controls
  const controls = new OrbitControls(camera, renderer.domElement)

  // geometry
  const geometry = new THREE.SphereGeometry(5)

  // material
  const material = new THREE.MeshLambertMaterial({
    emissive: emissiveColor,
  })

  // mesh
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.setAnimationLoop(() => composer.render())
}

function createRenderPipeline(
  rendererColorSpace,
  useOutputPass,
  scene,
  camera,
) {
  const renderer = new THREE.WebGLRenderer()

  renderer.outputColorSpace = rendererColorSpace

  const composer = new EffectComposer(renderer)

  composer.addPass(new RenderPass(scene, camera))
  if (useOutputPass) {
    composer.addPass(new OutputPass())
  }

  renderer.setSize(canvasWidth, canvasHeight)
  composer.setSize(canvasWidth,...