Extract shared WebGL utilities to @jbrowse/core/gpu/webglUtils

Consolidate duplicated createShader, createProgram, splitPositionWithFrac,
and cacheUniforms functions from 6 separate copies across wiggle, hic,
variants, alignments, canvas, sequence, dotplot, and synteny plugins into
a single shared module in packages/core.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: cmdcolin

packages/core/package.json

@@ -36,6 +36,7 @@
     "./data_adapters/dataAdapterCache": "./src/data_adapters/dataAdapterCache.ts",
     "./gpu/getGpuDevice": "./src/gpu/getGpuDevice.ts",
     "./gpu/initGpuContext": "./src/gpu/initGpuContext.ts",
+    "./gpu/webglUtils": "./src/gpu/webglUtils.ts",
     "./pluggableElementTypes": "./src/pluggableElementTypes/index.ts",
     "./pluggableElementTypes/AdapterType": "./src/pluggableElementTypes/AdapterType.ts",
     "./pluggableElementTypes/ConnectionType": "./src/pluggableElementTypes/ConnectionType.ts",
@@ -165,7 +166,7 @@
     "@mui/material": "^7.3.9",
     "@mui/system": "^7.3.9",
     "@mui/types": "^7.4.12",
-    "@mui/x-data-grid": "^8.27.5",
+    "@mui/x-data-grid": "^8.28.0",
     "@types/file-saver-es": "^2.0.3",
     "canvas-sequencer-ts": "^3.1.3",
     "copy-to-clipboard": "^3.3.3",
@@ -254,6 +255,10 @@
         "types": "./esm/gpu/initGpuContext.d.ts",
         "import": "./esm/gpu/initGpuContext.js"
       },
+      "./gpu/webglUtils": {
+        "types": "./esm/gpu/webglUtils.d.ts",
+        "import": "./esm/gpu/webglUtils.js"
+      },
       "./pluggableElementTypes": {
         "types": "./esm/pluggableElementTypes/index.d.ts",
         "import": "./esm/pluggableElementTypes/index.js"
@@ -693,6 +698,9 @@
         "gpu/initGpuContext": [
           "esm/gpu/initGpuContext.d.ts"
         ],
+        "gpu/webglUtils": [
+          "esm/gpu/webglUtils.d.ts"
+        ],
         "pluggableElementTypes": [
           "esm/pluggableElementTypes/index.d.ts"
         ],

packages/core/src/gpu/webglUtils.ts

@@ -0,0 +1,59 @@
+export function splitPositionWithFrac(value: number): [number, number] {
+  const intValue = Math.floor(value)
+  const frac = value - intValue
+  const loInt = intValue & 0xfff
+  const hi = intValue - loInt
+  const lo = loInt + frac
+  return [hi, lo]
+}
+
+export function createShader(
+  gl: WebGL2RenderingContext,
+  type: number,
+  source: string,
+) {
+  const shader = gl.createShader(type)!
+  gl.shaderSource(shader, source)
+  gl.compileShader(shader)
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const info = gl.getShaderInfoLog(shader)
+    gl.deleteShader(shader)
+    throw new Error(`Shader compile error: ${info}`)
+  }
+  return shader
+}
+
+export function createProgram(
+  gl: WebGL2RenderingContext,
+  vsSource: string,
+  fsSource: string,
+) {
+  const vs = createShader(gl, gl.VERTEX_SHADER, vsSource)
+  const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSource)
+  const program = gl.createProgram()
+  gl.attachShader(program, vs)
+  gl.attachShader(program, fs)
+  gl.linkProgram(program)
+  gl.detachShader(program, vs)
+  gl.detachShader(program, fs)
+  gl.deleteShader(vs)
+  gl.deleteShader(fs)
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const info = gl.getProgramInfoLog(program)
+    gl.deleteProgram(program)
+    throw new Error(`Program link error: ${info}`)
+  }
+  return program
+}
+
+export function cacheUniforms(
+  gl: WebGL2RenderingContext,
+  program: WebGLProgram,
+  names: string[],
+) {
+  const cache: Record<string, WebGLUniformLocation | null> = {}
+  for (const name of names) {
+    cache[name] = gl.getUniformLocation(program, name)
+  }
+  return cache
+}

plugins/alignments/src/LinearAlignmentsDisplay/components/ArcsRenderer.ts

@@ -10,8 +10,8 @@ import {
   splitPositionWithFrac,
 } from './shaders/index.ts'
 
-import type { RenderState } from './rendererTypes.ts'
 import type { WebGLRenderer } from './WebGLRenderer.ts'
+import type { RenderState } from './rendererTypes.ts'
 
 export interface RegionTableEntry {
   startBpOffset: number

plugins/alignments/src/LinearAlignmentsDisplay/components/Canvas2DAlignmentsRenderer.ts

@@ -259,10 +259,7 @@ export class Canvas2DAlignmentsRenderer implements AlignmentsBackend {
     this.ctx = ctx
   }
 
-  uploadFromTypedArraysForRegion(
-    regionNumber: number,
-    data: ReadUploadData,
-  ) {
+  uploadFromTypedArraysForRegion(regionNumber: number, data: ReadUploadData) {
     let r = this.regions.get(regionNumber)
     if (!r) {
       r = emptyRegion(data.regionStart)
@@ -472,10 +469,7 @@ export class Canvas2DAlignmentsRenderer implements AlignmentsBackend {
     this.regions.clear()
   }
 
-  renderBlocks(
-    blocks: RenderBlock[],
-    state: RenderState,
-  ) {
+  renderBlocks(blocks: RenderBlock[], state: RenderState) {
     const { canvasWidth, canvasHeight } = state
     const dpr = window.devicePixelRatio || 1
     const bufW = Math.round(canvasWidth * dpr)

plugins/alignments/src/LinearAlignmentsDisplay/components/ConnectingLineRenderer.ts

@@ -1,7 +1,7 @@
 import { splitPositionWithFrac } from './shaders/index.ts'
 
-import type { RenderState } from './rendererTypes.ts'
 import type { WebGLRenderer } from './WebGLRenderer.ts'
+import type { RenderState } from './rendererTypes.ts'
 
 export function renderConnectingLine(
   renderer: WebGLRenderer,

plugins/alignments/src/LinearAlignmentsDisplay/components/CoverageRenderer.ts

@@ -1,5 +1,5 @@
-import type { RenderState } from './rendererTypes.ts'
 import type { WebGLRenderer } from './WebGLRenderer.ts'
+import type { RenderState } from './rendererTypes.ts'
 import type { ColorPalette } from './shaders/index.ts'
 
 export function renderCoverage(

plugins/alignments/src/LinearAlignmentsDisplay/components/PileupRenderer.ts

@@ -1,9 +1,9 @@
 import { getChainBounds, toClipRect } from './chainOverlayUtils.ts'
 import { splitPositionWithFrac } from './shaders/index.ts'
 
-import type { RenderState } from './rendererTypes.ts'
 import type { WebGLRenderer } from './WebGLRenderer.ts'
 import type { ClipRect } from './chainOverlayUtils.ts'
+import type { RenderState } from './rendererTypes.ts'
 import type { ColorPalette } from './shaders/index.ts'
 
 function setCigarUniforms(

plugins/alignments/src/LinearAlignmentsDisplay/components/WebGLRenderer.ts

@@ -85,7 +85,6 @@ import type {
   SashimiUploadData,
 } from './rendererTypes.ts'
 
-
 export interface GPUBuffers {
   // Reference point for all position offsets
   regionStart: number
@@ -1742,10 +1741,7 @@ export class WebGLRenderer implements AlignmentsBackend {
     this.deactivateRegion(regionNumber)
   }
 
-  uploadFromTypedArraysForRegion(
-    regionNumber: number,
-    data: ReadUploadData,
-  ) {
+  uploadFromTypedArraysForRegion(regionNumber: number, data: ReadUploadData) {
     this.withRegion(regionNumber, this.uploadFromTypedArrays, data)
   }
 
@@ -1874,10 +1870,7 @@ export class WebGLRenderer implements AlignmentsBackend {
   /**
    * Render multiple blocks with scissor rects, each from a different refName's GPU buffers.
    */
-  renderBlocks(
-    blocks: RenderBlock[],
-    state: RenderState,
-  ) {
+  renderBlocks(blocks: RenderBlock[], state: RenderState) {
     const gl = this.gl
     const canvas = this.canvas
     const { canvasWidth, canvasHeight } = state

plugins/alignments/src/LinearAlignmentsDisplay/components/shaders/utils.ts

@@ -1,11 +1,4 @@
-export function splitPositionWithFrac(value: number): [number, number] {
-  const intValue = Math.floor(value)
-  const frac = value - intValue
-  const loInt = intValue & 0xfff
-  const hi = intValue - loInt
-  const lo = loInt + frac
-  return [hi, lo]
-}
+export { splitPositionWithFrac } from '@jbrowse/core/gpu/webglUtils'
 
 export const HP_GLSL_FUNCTIONS = `
 // SYNC(wgsl/common.ts): HP_LOW_MASK=0xFFF, hpSplitUint/hpToClipX/hpScaleLinear must match hp_split_uint/hp_to_clip_x/hp_scale_linear

plugins/canvas/src/LinearFeatureDisplay/components/FeatureComponent.tsx

@@ -422,7 +422,7 @@ const FeatureComponent = observer(function FeatureComponent({ model }: Props) {
   // WebGL features in sync with the DOM label overlay (which is computed
   // during the same render via useMemo). useEffect would run after paint,
   // causing a frame where labels show new data but WebGL shows old data.
-   
+
   useLayoutEffect(() => {
     const renderer = rendererRef.current
     if (!renderer || !rendererReady) {