@motionscript/molecule 0.0.0-stage → 0.1.0-alpha.0

package/src/protein/ribbon.ts

@@ -0,0 +1,658 @@
+/**
+ * The cartoon: a chain's backbone swept as a **ribbon** rather than as a tube.
+ *
+ * This is the one representation whose whole job is to be recognised. A figure
+ * in a paper draws a helix as a twisted band and a strand as a flat arrow, and
+ * has since Jane Richardson drew the first one by hand in 1980 — the convention
+ * is old enough that a reader decodes it without a legend, which is exactly why
+ * a picture that departs from it reads as *wrong* rather than as different.
+ *
+ * The node drew that with `Geo.tube` before this module existed, and the two
+ * things it could not express are the two the convention is made of:
+ *
+ * **A cross-section has a width and a thickness, not a radius.** A tube's is a
+ * circle, so a helix could only be told from a coil by being *fatter* — and a
+ * fat circle swept along the α-carbons of a helix is close to self-intersecting,
+ * because those carbons corkscrew about the helix axis at ~2.3 Å with a 5.4 Å
+ * pitch. What comes out is a lumpy sausage: the tube's own diameter is most of
+ * the coil's, so the spiral fills in and the shape stops being legible. Swept
+ * flat instead — ~2.2 Å across and ~0.5 Å thick — the same spiral reads as the
+ * band every textbook draws, because the eye is now reading the *face* turning
+ * rather than a diameter changing.
+ *
+ * **A band has a side, and a curve through α-carbons does not say which.** So
+ * the frame is built from the residue's own carbonyl (see
+ * {@link TracePoint.normal}), which is what turns with the fold. A ribbon swept
+ * on an arbitrary frame twists at random and looks like a misprint.
+ *
+ * Everything here is derived **per structure**, cached by the node against the
+ * inputs that produced it, and never rebuilt for a camera move — the same
+ * bargain the instance lists make in `shared.ts`.
+ */
+
+import type { BufferGeometry3D, Color, Vector3 } from "@motionscript/core"
+
+import { resolveColor3D } from "@motionscript/core/component"
+import type { ProteinChain, SecondaryStructure, TracePoint } from "./structure"
+
+/**
+ * A run of backbone drawn as one mesh: a whole stretch of one secondary
+ * structure, with its per-residue colours carried as a vertex attribute.
+ *
+ * The unit is the **span**, not the run of constant colour that a tube is swept
+ * as (see `backboneRuns`), and both halves of that matter. An arrowhead is a
+ * statement about where a strand *ends*, so it can only be placed by something
+ * that can see the whole strand — split the strand into four differently
+ * coloured pieces first and each piece grows an arrow of its own. And a colour
+ * that varies along the span is what a vertex attribute is for, which is also
+ * what retires the faceted-polyline compromise the tube path has to make under
+ * the residue spectrum.
+ */
+export interface CartoonSpan {
+  /** What this stretch is doing, which decides its cross-section. */
+  secondary: SecondaryStructure
+  /**
+   * The residues of the span, N→C, **overlapping its neighbours by one point**
+   * at each end so consecutive spans meet rather than leaving a gap.
+   */
+  points: TracePoint[]
+  /** One sRGB colour per entry of {@link points}. */
+  colors: string[]
+}
+
+/**
+ * How wide and how thick each secondary structure's ribbon is, as multiples of
+ * the node's `ribbonRadius`.
+ *
+ * Stated as a ratio to one control rather than as six numbers in the inspector:
+ * "how heavy is the cartoon" is one question an author actually asks, and the
+ * *proportions* between a helix, a strand and a loop are the convention rather
+ * than a preference. The absolute values are the ones the established viewers
+ * settled on — a helix band about 2.2 Å across and half an Ångström thick, a
+ * strand slightly wider still, and a loop a thin round cord.
+ *
+ * A coil stays round (width equals thickness), which is the other half of the
+ * statement: a loop has no face to turn, so giving it one would claim a
+ * structure the file did not annotate.
+ */
+const SECTION: Readonly<
+  Record<SecondaryStructure, { width: number; thickness: number }>
+> = {
+  helix: { width: 2.4, thickness: 0.5 },
+  sheet: { width: 2.6, thickness: 0.45 },
+  coil: { width: 1, thickness: 1 },
+}
+
+/** How wide a strand's arrowhead is at its base, in the same multiples. */
+const ARROW_WIDTH = 4.4
+
+/**
+ * How many residues at the C-terminal end of a strand the arrowhead occupies.
+ *
+ * Residues rather than a fraction of the span, because an arrowhead is a fixed
+ * *shape* — the same barb whether the strand is five residues or fifteen. A
+ * fraction would draw a stubby wedge on a short strand and a long spike on a
+ * β-hairpin's arm. Capped below at a third of the span so a three-residue
+ * strand is still a strand with a point on it rather than one long taper.
+ */
+const ARROW_RESIDUES = 2.4
+
+/** What a strand's arrow narrows to at its tip, so the point is a point. */
+const ARROW_TIP = 0.08
+
+/**
+ * How many samples each residue-to-residue step is drawn with.
+ *
+ * The curve is the picture here. Consecutive α-carbons are 3.8 Å apart and a
+ * helix turns fully in 3.6 of them, so a ribbon drawn straight between residues
+ * is a polygon with about five sides per turn — which is exactly the faceted,
+ * angular look that separates a rendering nobody trusts from one that reads as
+ * a molecule. Tied to the node's mesh detail so the same control that coarsens
+ * the spheres coarsens this.
+ */
+function subdivisionsFor(quality: number): number {
+  return Math.min(10, Math.max(3, Math.round(quality / 2)))
+}
+
+/**
+ * Splits a chain's trace into the spans a cartoon is built from — one per
+ * unbroken stretch of the same secondary structure.
+ *
+ * Consecutive spans overlap by one point, for the reason `backboneRuns`'
+ * consecutive runs do: the shared residue is the last sample of one sweep and
+ * the first of the next, so the two meshes butt up rather than leaving a hole
+ * at every helix-to-loop transition.
+ */
+export function cartoonSpans(
+  chain: ProteinChain,
+  colors: string[]
+): CartoonSpan[] {
+  const spans: CartoonSpan[] = []
+
+  chain.trace.forEach((point, index) => {
+    const color = colors[index] ?? colors[0] ?? "#ffffff"
+    let current = spans[spans.length - 1]
+
+    if (!current || current.secondary !== point.secondary) {
+      const previous = current
+      current = { secondary: point.secondary, points: [], colors: [] }
+      // Carry the previous span's last residue in as this one's first.
+      if (previous) {
+        current.points.push(previous.points[previous.points.length - 1]!)
+        current.colors.push(previous.colors[previous.colors.length - 1]!)
+      }
+      spans.push(current)
+    }
+
+    current.points.push(point)
+    current.colors.push(color)
+  })
+
+  // A lone point is not a curve: there is no direction to sweep along and no
+  // tangent to build a frame from. Only ever the first span, since every later
+  // one is seeded with its predecessor's last point.
+  return spans.filter((span) => span.points.length > 1)
+}
+
+/**
+ * One span, as a mesh.
+ *
+ * `null` when there is nothing to sweep, so the caller can skip the op rather
+ * than hand the renderer an empty buffer.
+ *
+ * The arrays are freshly allocated and never mutated afterwards, which is what
+ * makes `staticData` honest: the renderer then compares them by identity and
+ * uploads each exactly once, where re-deriving them per frame would re-upload
+ * the whole fold sixty times a second to spin the camera.
+ */
+export function cartoonGeometry(
+  span: CartoonSpan,
+  options: { radius: number; quality: number }
+): BufferGeometry3D | null {
+  const samples = sampleSpan(span, options)
+  if (samples.length < 2) return null
+  return sweep(samples, profileFor(span.secondary, options.quality))
+}
+
+// --- Sampling --------------------------------------------------------------
+
+/** One cross-section of the sweep: where it is, how it is turned, how big. */
+interface Sample {
+  position: Vector3
+  /** Unit tangent — the direction the sweep is travelling. */
+  tangent: Vector3
+  /** Unit **wide** direction: the ribbon's face turns with this. */
+  normal: Vector3
+  /** Unit binormal, completing the frame. */
+  binormal: Vector3
+  halfWidth: number
+  halfThickness: number
+  /** Linear RGB, as a vertex colour attribute holds it. */
+  color: [number, number, number]
+}
+
+/**
+ * The span, resampled onto a smooth curve with a frame and a size at every
+ * sample.
+ *
+ * Three things happen here that each fix something visible:
+ *
+ * **Catmull-Rom through the residues**, so the ribbon is a curve rather than a
+ * five-sided polygon per helical turn — see {@link subdivisionsFor}.
+ *
+ * **The frames are made continuous before anything is interpolated.** A
+ * β-strand's carbonyls point alternately to one side and the other, which is
+ * chemistry rather than noise: hydrogen bonds go to the neighbouring strand on
+ * both sides. Swept as given, the ribbon would flip 180° at every residue and
+ * come out as a chain of triangles. Flipping each frame to agree with its
+ * predecessor is what every viewer does and what makes a strand flat.
+ *
+ * **The arrow is measured in residues from the C-terminal end**, before
+ * subdivision, so it is the same barb on a long strand and a short one.
+ */
+function sampleSpan(
+  span: CartoonSpan,
+  options: { radius: number; quality: number }
+): Sample[] {
+  const points = span.points
+  const count = points.length
+  const section = SECTION[span.secondary]
+  const radius = Math.max(0.01, options.radius)
+
+  const frames = continuousFrames(points)
+  const tints = span.colors.map((color) => linearRgb(color))
+
+  // Where the arrowhead starts, as a position along the span in *residues*.
+  // A strand shorter than the barb gives up a third of itself to it rather than
+  // becoming one long taper.
+  const arrow =
+    span.secondary === "sheet"
+      ? Math.max(count - 1 - ARROW_RESIDUES, (count - 1) * (2 / 3))
+      : Infinity
+
+  const steps = subdivisionsFor(options.quality)
+  const samples: Sample[] = []
+
+  // Positions first, frames second: a tangent is a finite difference over the
+  // *sampled* curve, so every position has to exist before any of them can be
+  // taken. Doing it in one pass would take each tangent from the residues
+  // instead, which is the polyline this subdivision exists to get away from.
+  const curve: Vector3[] = []
+  const carried: Vector3[] = []
+  const colors: [number, number, number][] = []
+  const positions: number[] = []
+
+  for (let i = 0; i < count - 1; i++) {
+    // The last segment emits its endpoint too, so the sweep reaches the final
+    // residue rather than stopping one sample short of it.
+    const last = i === count - 2
+    for (let s = 0; s < steps + (last ? 1 : 0); s++) {
+      const t = s / steps
+      curve.push(
+        catmullRom(
+          points[i - 1] ?? points[i]!,
+          points[i]!,
+          points[i + 1]!,
+          points[i + 2] ?? points[i + 1]!,
+          t
+        )
+      )
+      carried.push(lerpVector(frames[i]!, frames[i + 1]!, t))
+      colors.push(lerpRgb(tints[i]!, tints[i + 1]!, t))
+      positions.push(i + t)
+    }
+  }
+
+  for (let i = 0; i < curve.length; i++) {
+    const position = curve[i]!
+    const tangent = normalize(
+      subtract(
+        curve[Math.min(curve.length - 1, i + 1)]!,
+        curve[Math.max(0, i - 1)]!
+      )
+    )
+    // Squared against the tangent, so the frame is orthonormal even though the
+    // carbonyl it came from is not perpendicular to the chain.
+    const normal = perpendicular(carried[i]!, tangent)
+    const binormal = normalize(cross(tangent, normal))
+
+    const along = positions[i]!
+    const width =
+      along <= arrow
+        ? section.width
+        : // Linear from the barb's base to its point. The base is *wider* than
+          // the strand, which is what makes an arrowhead read as one rather
+          // than as the strand simply stopping.
+          ARROW_WIDTH +
+          (ARROW_TIP - ARROW_WIDTH) *
+            clamp01((along - arrow) / Math.max(1e-6, count - 1 - arrow))
+
+    samples.push({
+      position,
+      tangent,
+      normal,
+      binormal,
+      halfWidth: radius * width,
+      halfThickness: radius * section.thickness,
+      color: colors[i]!,
+    })
+  }
+
+  return samples
+}
+
+/**
+ * Each residue's ribbon direction, made to agree with its predecessor.
+ *
+ * Falls back to the curve's own binormal — the axis its turn is about — where
+ * the file gives no carbonyl. That is the right stand-in rather than an
+ * arbitrary perpendicular: in a helix the carbonyl points very nearly along the
+ * helix axis, and so does the binormal of the curve the α-carbons trace, so a
+ * Cα-only model comes out with its bands lying the same way a complete file's
+ * do.
+ */
+function continuousFrames(points: TracePoint[]): Vector3[] {
+  const frames: Vector3[] = []
+
+  for (let i = 0; i < points.length; i++) {
+    const point = points[i]!
+    let direction = point.normal ?? binormalAt(points, i)
+    // Degenerate — three collinear residues with no carbonyl. Any perpendicular
+    // will do, and the frame is squared against the tangent anyway.
+    if (lengthOf(direction) < 1e-6) direction = { x: 0, y: 0, z: 1 }
+
+    const previous = frames[i - 1]
+    // The 180° flip a β-strand's alternating carbonyls would otherwise put into
+    // the sweep. See {@link sampleSpan}.
+    if (previous && dot(previous, direction) < 0) direction = negate(direction)
+    frames.push(normalize(direction))
+  }
+
+  return frames
+}
+
+/** The curve's binormal at a residue — the axis its local turn is about. */
+function binormalAt(points: TracePoint[], index: number): Vector3 {
+  const before = points[Math.max(0, index - 1)]!
+  const here = points[index]!
+  const after = points[Math.min(points.length - 1, index + 1)]!
+  return cross(subtract(here, before), subtract(after, here))
+}
+
+// --- Sweeping --------------------------------------------------------------
+
+/**
+ * One vertex of a cross-section: where it sits in the frame's `(wide, thick)`
+ * plane, and which way the surface faces there.
+ *
+ * A hard edge is **two entries at the same place with different normals**,
+ * which is what gives a ribbon the crisp corner a cartoon has rather than the
+ * chamfered one a shared-vertex mesh with averaged normals would. It is also
+ * why the normals are stated rather than derived: `computeNormals` averages
+ * across whatever shares a vertex, and averaging is exactly what a corner must
+ * not do.
+ */
+interface ProfileVertex {
+  /** Position along the ribbon's width, in `[-1, 1]`. */
+  u: number
+  /** Position along its thickness, in `[-1, 1]`. */
+  v: number
+  /** Surface direction at that vertex, in the same plane. */
+  nu: number
+  nv: number
+}
+
+/**
+ * The cross-section a secondary structure is swept with.
+ *
+ * A loop is a round cord and a helix or a strand is a flat band — the whole
+ * distinction the convention rests on, and the one a radius could not express.
+ * The band is a rectangle rather than an ellipse because its *edge* is what the
+ * eye reads a twist by: an ellipse turning through 90° goes smoothly from wide
+ * to narrow and reads as a tube pinching, where a rectangle's corner catches the
+ * light and reads as a face turning over.
+ */
+function profileFor(
+  secondary: SecondaryStructure,
+  quality: number
+): ProfileVertex[] {
+  if (secondary === "coil") {
+    const sides = Math.min(16, Math.max(5, Math.round(quality / 2)))
+    const profile: ProfileVertex[] = []
+    for (let i = 0; i < sides; i++) {
+      const angle = (i / sides) * Math.PI * 2
+      const u = Math.cos(angle)
+      const v = Math.sin(angle)
+      // Smooth: one vertex per side, its normal radial, so a cord reads as
+      // round rather than as a faceted prism.
+      profile.push({ u, v, nu: u, nv: v })
+    }
+    return profile
+  }
+
+  // Four faces, each with its own pair of corners, walked so consecutive
+  // entries are consecutive around the section.
+  return [
+    { u: 1, v: 1, nu: 0, nv: 1 },
+    { u: -1, v: 1, nu: 0, nv: 1 },
+    { u: -1, v: 1, nu: -1, nv: 0 },
+    { u: -1, v: -1, nu: -1, nv: 0 },
+    { u: -1, v: -1, nu: 0, nv: -1 },
+    { u: 1, v: -1, nu: 0, nv: -1 },
+    { u: 1, v: -1, nu: 1, nv: 0 },
+    { u: 1, v: 1, nu: 1, nv: 0 },
+  ]
+}
+
+/**
+ * The samples and the profile, as one indexed mesh.
+ *
+ * Ends are **capped**: a ribbon is a solid band and an open end shows the
+ * inside of the far face, which at a helix-to-loop transition would be a
+ * visible hole rather than a join. Cheap — one fan per end — and it is what
+ * lets a span be drawn as its own mesh at all.
+ */
+function sweep(samples: Sample[], profile: ProfileVertex[]): BufferGeometry3D {
+  const ring = profile.length
+  const position: number[] = []
+  const normal: number[] = []
+  const color: number[] = []
+  const index: number[] = []
+
+  for (const sample of samples) {
+    for (const vertex of profile) {
+      const u = vertex.u * sample.halfWidth
+      const v = vertex.v * sample.halfThickness
+      position.push(
+        sample.position.x + sample.normal.x * u + sample.binormal.x * v,
+        sample.position.y + sample.normal.y * u + sample.binormal.y * v,
+        sample.position.z + sample.normal.z * u + sample.binormal.z * v
+      )
+      // A normal does not survive a non-uniform scale the way a position does:
+      // squashing a circle to a 5:1 ellipse tips every one of its normals
+      // toward the wide axis. Dividing by the half-extents is the inverse
+      // transpose of that scale, written out for two dimensions.
+      const n = normalize2(
+        vertex.nu / sample.halfWidth,
+        vertex.nv / sample.halfThickness
+      )
+      normal.push(
+        sample.normal.x * n[0] + sample.binormal.x * n[1],
+        sample.normal.y * n[0] + sample.binormal.y * n[1],
+        sample.normal.z * n[0] + sample.binormal.z * n[1]
+      )
+      color.push(sample.color[0], sample.color[1], sample.color[2])
+    }
+  }
+
+  for (let i = 0; i < samples.length - 1; i++) {
+    for (let j = 0; j < ring; j++) {
+      const next = (j + 1) % ring
+      const a = profile[j]!
+      const b = profile[next]!
+      // The two halves of a hard corner sit in the same place, so the quad
+      // between them has no area. Skipping it keeps the index buffer honest
+      // rather than filling it with degenerate triangles.
+      if (a.u === b.u && a.v === b.v) continue
+      const i0 = i * ring + j
+      const i1 = i * ring + next
+      const i2 = (i + 1) * ring + next
+      const i3 = (i + 1) * ring + j
+      index.push(i0, i1, i2, i0, i2, i3)
+    }
+  }
+
+  capEnd(samples[0]!, profile, position, normal, color, index, false)
+  capEnd(
+    samples[samples.length - 1]!,
+    profile,
+    position,
+    normal,
+    color,
+    index,
+    true
+  )
+
+  return {
+    type: "buffer",
+    position: new Float32Array(position),
+    normal: new Float32Array(normal),
+    color: new Float32Array(color),
+    index: new Uint32Array(index),
+    // Built once per structure and cached by the node; nothing mutates these
+    // arrays afterwards, so the renderer may compare them by identity alone.
+    staticData: true,
+  }
+}
+
+/** A triangle fan closing one end of the sweep, facing along the tangent. */
+function capEnd(
+  sample: Sample,
+  profile: ProfileVertex[],
+  position: number[],
+  normal: number[],
+  color: number[],
+  index: number[],
+  forward: boolean
+): void {
+  const sign = forward ? 1 : -1
+  const nx = sample.tangent.x * sign
+  const ny = sample.tangent.y * sign
+  const nz = sample.tangent.z * sign
+
+  const center = position.length / 3
+  position.push(sample.position.x, sample.position.y, sample.position.z)
+  normal.push(nx, ny, nz)
+  color.push(sample.color[0], sample.color[1], sample.color[2])
+
+  const first = position.length / 3
+  for (const vertex of profile) {
+    const u = vertex.u * sample.halfWidth
+    const v = vertex.v * sample.halfThickness
+    position.push(
+      sample.position.x + sample.normal.x * u + sample.binormal.x * v,
+      sample.position.y + sample.normal.y * u + sample.binormal.y * v,
+      sample.position.z + sample.normal.z * u + sample.binormal.z * v
+    )
+    normal.push(nx, ny, nz)
+    color.push(sample.color[0], sample.color[1], sample.color[2])
+  }
+
+  for (let j = 0; j < profile.length; j++) {
+    const next = (j + 1) % profile.length
+    // Wound the opposite way at the two ends, so both caps face outward.
+    if (forward) index.push(center, first + j, first + next)
+    else index.push(center, first + next, first + j)
+  }
+}
+
+// --- Small vector maths ----------------------------------------------------
+//
+// Written out rather than reached for, on the same terms as `chemistry.ts`:
+// this package has to stay loadable in a bare Node process, and none of it is
+// more than a few lines.
+
+function catmullRom(
+  p0: { x: number; y: number; z: number },
+  p1: { x: number; y: number; z: number },
+  p2: { x: number; y: number; z: number },
+  p3: { x: number; y: number; z: number },
+  t: number
+): Vector3 {
+  const t2 = t * t
+  const t3 = t2 * t
+  const a = -0.5 * t3 + t2 - 0.5 * t
+  const b = 1.5 * t3 - 2.5 * t2 + 1
+  const c = -1.5 * t3 + 2 * t2 + 0.5 * t
+  const d = 0.5 * t3 - 0.5 * t2
+  return {
+    x: p0.x * a + p1.x * b + p2.x * c + p3.x * d,
+    y: p0.y * a + p1.y * b + p2.y * c + p3.y * d,
+    z: p0.z * a + p1.z * b + p2.z * c + p3.z * d,
+  }
+}
+
+function subtract(
+  a: { x: number; y: number; z: number },
+  b: { x: number; y: number; z: number }
+): Vector3 {
+  return { x: a.x - b.x, y: a.y - b.y, z: a.z - b.z }
+}
+
+function cross(a: Vector3, b: Vector3): Vector3 {
+  return {
+    x: a.y * b.z - a.z * b.y,
+    y: a.z * b.x - a.x * b.z,
+    z: a.x * b.y - a.y * b.x,
+  }
+}
+
+function dot(a: Vector3, b: Vector3): number {
+  return a.x * b.x + a.y * b.y + a.z * b.z
+}
+
+function negate(v: Vector3): Vector3 {
+  return { x: -v.x, y: -v.y, z: -v.z }
+}
+
+function lengthOf(v: Vector3): number {
+  return Math.hypot(v.x, v.y, v.z)
+}
+
+function normalize(v: Vector3): Vector3 {
+  const length = lengthOf(v)
+  if (length < 1e-9) return { x: 0, y: 0, z: 1 }
+  return { x: v.x / length, y: v.y / length, z: v.z / length }
+}
+
+function normalize2(u: number, v: number): [number, number] {
+  const length = Math.hypot(u, v)
+  if (length < 1e-9) return [1, 0]
+  return [u / length, v / length]
+}
+
+/** `v` with everything along `axis` taken out of it, normalized. */
+function perpendicular(v: Vector3, axis: Vector3): Vector3 {
+  const along = dot(v, axis)
+  const out = {
+    x: v.x - axis.x * along,
+    y: v.y - axis.y * along,
+    z: v.z - axis.z * along,
+  }
+  // The carbonyl parallel to the chain — vanishingly rare, but it would leave
+  // no frame at all. Any perpendicular is correct; take one from the axis.
+  if (lengthOf(out) < 1e-6) {
+    const fallback =
+      Math.abs(axis.x) < 0.9 ? { x: 1, y: 0, z: 0 } : { x: 0, y: 1, z: 0 }
+    return normalize(cross(axis, fallback))
+  }
+  return normalize(out)
+}
+
+function lerpVector(
+  a: { x: number; y: number; z: number },
+  b: { x: number; y: number; z: number },
+  t: number
+): Vector3 {
+  return {
+    x: a.x + (b.x - a.x) * t,
+    y: a.y + (b.y - a.y) * t,
+    z: a.z + (b.z - a.z) * t,
+  }
+}
+
+function lerpRgb(
+  a: [number, number, number],
+  b: [number, number, number],
+  t: number
+): [number, number, number] {
+  return [
+    a[0] + (b[0] - a[0]) * t,
+    a[1] + (b[1] - a[1]) * t,
+    a[2] + (b[2] - a[2]) * t,
+  ]
+}
+
+function clamp01(value: number): number {
+  return Math.min(1, Math.max(0, value))
+}
+
+/**
+ * A colour as the **linear** RGB triple a vertex attribute holds.
+ *
+ * The same conversion `grid3d.ts` documents and for the same reason: three
+ * reads vertex colours as linear, so an sRGB channel uploaded raw paints far
+ * too bright. Skipping it here would wash every ribbon out against the atoms
+ * beside it, which take their colour through the material instead.
+ */
+function linearRgb(value: Color): [number, number, number] {
+  const [r, g, b] = resolveColor3D(value)
+  return [srgbToLinear(r), srgbToLinear(g), srgbToLinear(b)]
+}
+
+/** The sRGB transfer function, inverted. three's own `SRGBToLinear`. */
+function srgbToLinear(channel: number): number {
+  return channel < 0.04045
+    ? channel * 0.0773993808
+    : Math.pow(channel * 0.9478672986 + 0.0521327014, 2.4)
+}