@luma.gl/core 9.0.11 → 9.1.0-alpha.1

package/src/adapter/device.ts

@@ -5,8 +5,8 @@
 import {VERSION} from '../init';
 import {StatsManager, lumaStats} from '../utils/stats-manager';
 import {log} from '../utils/log';
-import {uid} from '../utils/utils';
-import type {TextureFormat} from './types/texture-formats';
+import {uid} from '../utils/uid';
+import type {TextureFormat} from '../gpu-type-utils//texture-formats';
 import type {CanvasContext, CanvasContextProps} from './canvas-context';
 import type {BufferProps} from './resources/buffer';
 import {Buffer} from './resources/buffer';
@@ -14,7 +14,7 @@ import type {RenderPipeline, RenderPipelineProps} from './resources/render-pipel
 import type {ComputePipeline, ComputePipelineProps} from './resources/compute-pipeline';
 import type {Sampler, SamplerProps} from './resources/sampler';
 import type {Shader, ShaderProps} from './resources/shader';
-import type {Texture, TextureProps, TextureData} from './resources/texture';
+import type {Texture, TextureProps} from './resources/texture';
 import type {ExternalTexture, ExternalTextureProps} from './resources/external-texture';
 import type {Framebuffer, FramebufferProps} from './resources/framebuffer';
 import type {RenderPass, RenderPassProps} from './resources/render-pass';
@@ -24,7 +24,7 @@ import type {VertexArray, VertexArrayProps} from './resources/vertex-array';
 import type {TransformFeedback, TransformFeedbackProps} from './resources/transform-feedback';
 import type {QuerySet, QuerySetProps} from './resources/query-set';
 
-import {isTextureFormatCompressed} from './type-utils/decode-texture-format';
+import {isTextureFormatCompressed} from '../gpu-type-utils/decode-texture-format';
 
 /**
  * Identifies the GPU vendor and driver.
@@ -131,7 +131,7 @@ export class DeviceFeatures {
   }
 
   has(feature: DeviceFeature): boolean {
-    return !this.disabledFeatures[feature] && this.features.has(feature);
+    return !this.disabledFeatures?.[feature] && this.features.has(feature);
   }
 }
 
@@ -219,24 +219,26 @@ export type DeviceProps = {
   /** Error handling */
   onError?: (error: Error) => unknown;
 
-  // DEBUG SETTINGS
+  // @deprecated Attach to existing context. Rename to handle? Use Device.attach?
+  gl?: WebGL2RenderingContext | null;
 
+  // DEBUG SETTINGS
   /** WebGL: Instrument WebGL2RenderingContext (at the expense of performance) */
   debug?: boolean;
   /** Break on WebGL functions matching these strings */
   break?: string[];
   /** WebGL: Initialize the SpectorJS WebGL debugger */
   spector?: boolean;
+
+  // EXPERIMENTAL SETTINGS
+  /** Set to false to disable WebGL state management instrumentation: TODO- Unclear if still supported / useful */
+  manageState?: boolean;
   /** Initialize all features on startup */
   initalizeFeatures?: boolean;
   /** Disable specific features */
   disabledFeatures?: Partial<Record<DeviceFeature, boolean>>;
-
-  /** TODO- Unclear if still supported: Set to false to disable WebGL state management instrumentation */
-  manageState?: boolean;
-
-  // @deprecated Attach to existing context. Rename to handle? Use Device.attach?
-  gl?: WebGL2RenderingContext | null;
+  /** Never destroy cached shaders and pipelines */
+  _factoryDestroyPolicy?: 'unused' | 'never';
 };
 
 /**
@@ -250,17 +252,12 @@ export abstract class Device {
     manageState: true,
     width: 800, // width are height are only used by headless gl
     height: 600,
-
     requestMaxLimits: true,
-    debug: Boolean(log.get('debug')), // Instrument context (at the expense of performance)
-    spector: Boolean(log.get('spector')), // Initialize the SpectorJS WebGL debugger
-    break: [],
 
-    // TODO - Change these after confirming things work as expected
-    initalizeFeatures: true,
-    disabledFeatures: {
-      'compilation-status-async-webgl': true
-    },
+    // Callbacks
+    onError: (error: Error) => log.error(error.message),
+
+    gl: null,
 
     // alpha: undefined,
     // depth: undefined,
@@ -270,10 +267,16 @@ export abstract class Device {
     // preserveDrawingBuffer: undefined,
     // failIfMajorPerformanceCaveat: undefined
 
-    gl: null,
+    debug: Boolean(log.get('debug')), // Instrument context (at the expense of performance)
+    spector: Boolean(log.get('spector')), // Initialize the SpectorJS WebGL debugger
+    break: (log.get('break') as string[]) || [],
 
-    // Callbacks
-    onError: (error: Error) => log.error(error.message)
+    // TODO - Change these after confirming things work as expected
+    initalizeFeatures: true,
+    disabledFeatures: {
+      'compilation-status-async-webgl': true
+    },
+    _factoryDestroyPolicy: 'unused'
   };
 
   get [Symbol.toStringTag](): string {
@@ -343,6 +346,11 @@ export abstract class Device {
     return false;
   }
 
+  /** Report error (normally for unhandled device errors) */
+  error(error: Error): void {
+    this.props.onError(error);
+  }
+
   // Canvas context
 
   /** Default / primary canvas context. Can be null as WebGPU devices can be created without a CanvasContext */
@@ -370,14 +378,9 @@ export abstract class Device {
   /** Create a texture */
   abstract _createTexture(props: TextureProps): Texture;
   createTexture(props: TextureProps): Texture;
-  createTexture(data: Promise<TextureData>): Texture;
-  createTexture(url: string): Texture;
+  // createTexture(data: Promise<TextureData>): Texture;
 
-  createTexture(props: TextureProps | Promise<TextureData> | string): Texture {
-    // Signature: new Texture2D(gl, url | Promise)
-    if (props instanceof Promise || typeof props === 'string') {
-      props = {data: props};
-    }
+  createTexture(props: TextureProps): Texture {
     return this._createTexture(props);
   }
 

package/src/{lib → adapter}/luma.ts

@@ -3,12 +3,11 @@
 // Copyright (c) vis.gl contributors
 
 import type {Log} from '@probe.gl/log';
-import type {DeviceProps} from '../adapter/device';
-import {Device} from '../adapter/device';
+import type {DeviceProps} from './device';
+import {Device} from './device';
 import {StatsManager} from '../utils/stats-manager';
 import {lumaStats} from '../utils/stats-manager';
 import {log} from '../utils/log';
-import {assert} from '../utils/assert';
 
 const deviceMap = new Map<string, typeof Device>();
 
@@ -46,7 +45,6 @@ export class luma {
 
   static registerDevices(deviceClasses: any[] /* : typeof Device */): void {
     for (const deviceClass of deviceClasses) {
-      assert(deviceClass.type && deviceClass.isSupported && deviceClass.create);
       deviceMap.set(deviceClass.type, deviceClass);
     }
   }
@@ -67,7 +65,7 @@ export class luma {
   }
 
   static setDefaultDeviceProps(props: CreateDeviceProps): void {
-    Object.assign(Device.defaultProps, props);
+    Object.assign(luma.defaultProps, props);
   }
 
   /** Attach to an existing GPU API handle (WebGL2RenderingContext or GPUDevice). */
@@ -105,23 +103,25 @@ export class luma {
 
   /** Creates a device. Asynchronously. */
   static async createDevice(props: CreateDeviceProps = {}): Promise<Device> {
-    props = {...Device.defaultProps, ...props};
+    props = {...luma.defaultProps, ...props};
     if (props.gl) {
       props.type = 'webgl';
     }
 
     const devices = getDeviceMap(props.devices) || deviceMap;
 
+    let WebGPUDevice;
+    let WebGLDevice;
     switch (props.type) {
       case 'webgpu':
-        let WebGPUDevice = devices.get('webgpu') as any;
+        WebGPUDevice = devices.get('webgpu') as any;
         if (WebGPUDevice) {
           return await WebGPUDevice.create(props);
         }
         break;
 
       case 'webgl':
-        let WebGLDevice = devices.get('webgl') as any;
+        WebGLDevice = devices.get('webgl') as any;
         if (WebGLDevice) {
           return await WebGLDevice.create(props);
         }
@@ -139,7 +139,7 @@ export class luma {
         if (WebGPUDevice?.isSupported?.()) {
           return await WebGPUDevice.create(props);
         }
-        WebGLDevice = devices.get('webgl');
+        WebGLDevice = devices.get('webgl') as any;
         if (WebGLDevice?.isSupported?.()) {
           return await WebGLDevice.create(props);
         }

package/src/adapter/resources/buffer.ts

@@ -107,17 +107,17 @@ export abstract class Buffer extends Resource<BufferProps> {
     byteOffset: number,
     byteLength: number
   ): void {
-    const buffer: ArrayBuffer | null = ArrayBuffer.isView(data) ? data.buffer : data;
+    const arrayBuffer: ArrayBuffer | null = ArrayBuffer.isView(data) ? data.buffer : data;
     const debugDataLength = Math.min(
       data ? data.byteLength : byteLength,
       Buffer.DEBUG_DATA_MAX_LENGTH
     );
-    if (data === null) {
+    if (arrayBuffer === null) {
       this.debugData = new ArrayBuffer(debugDataLength);
-    } else if (byteOffset === 0 && byteLength === data.byteLength) {
-      this.debugData = buffer.slice(0, debugDataLength);
+    } else if (byteOffset === 0 && byteLength === arrayBuffer.byteLength) {
+      this.debugData = arrayBuffer.slice(0, debugDataLength);
     } else {
-      this.debugData = buffer.slice(byteOffset, byteOffset + debugDataLength);
+      this.debugData = arrayBuffer.slice(byteOffset, byteOffset + debugDataLength);
     }
   }
 }

package/src/adapter/resources/command-encoder.ts

@@ -133,7 +133,7 @@ export type CommandEncoderProps = ResourceProps & {
 export abstract class CommandEncoder extends Resource<CommandEncoderProps> {
   static override defaultProps: Required<CommandEncoderProps> = {
     ...Resource.defaultProps,
-    measureExecutionTime: undefined
+    measureExecutionTime: undefined!
   };
 
   override get [Symbol.toStringTag](): string {

package/src/adapter/resources/compute-pass.ts

@@ -20,9 +20,9 @@ export type ComputePassProps = ResourceProps & {
 export abstract class ComputePass extends Resource<ComputePassProps> {
   static override defaultProps: Required<ComputePassProps> = {
     ...Resource.defaultProps,
-    timestampQuerySet: undefined,
-    beginTimestampIndex: undefined,
-    endTimestampIndex: undefined
+    timestampQuerySet: undefined!,
+    beginTimestampIndex: undefined!,
+    endTimestampIndex: undefined!
   };
 
   override get [Symbol.toStringTag](): string {

package/src/adapter/resources/compute-pipeline.ts

@@ -28,10 +28,10 @@ export type ComputePipelineProps = ResourceProps & {
 export abstract class ComputePipeline extends Resource<ComputePipelineProps> {
   static override defaultProps: Required<ComputePipelineProps> = {
     ...Resource.defaultProps,
-    shader: undefined,
-    entryPoint: undefined,
+    shader: undefined!,
+    entryPoint: undefined!,
     constants: {},
-    shaderLayout: undefined
+    shaderLayout: undefined!
   };
 
   override get [Symbol.toStringTag](): string {
@@ -39,9 +39,12 @@ export abstract class ComputePipeline extends Resource<ComputePipelineProps> {
   }
 
   hash: string = '';
+  /** The merged shader layout */
+  shaderLayout: ComputeShaderLayout;
 
   constructor(device: Device, props: ComputePipelineProps) {
     super(device, props, ComputePipeline.defaultProps);
+    this.shaderLayout = props.shaderLayout!;
   }
 
   /**

package/src/adapter/resources/external-texture.ts

@@ -6,13 +6,13 @@ import type {Device} from '../device';
 import {Resource, ResourceProps} from './resource';
 
 export type ExternalTextureProps = ResourceProps & {
-  source: HTMLVideoElement | null;
+  source: HTMLVideoElement; //  | null;
   colorSpace?: 'srgb';
 };
 export abstract class ExternalTexture extends Resource<ExternalTextureProps> {
   static override defaultProps: Required<ExternalTextureProps> = {
     ...Resource.defaultProps,
-    source: null,
+    source: undefined!,
     colorSpace: 'srgb'
   };
 

package/src/adapter/resources/framebuffer.ts

@@ -6,7 +6,7 @@ import type {
   ColorTextureFormat,
   DepthStencilTextureFormat,
   TextureFormat
-} from '../types/texture-formats';
+} from '../../gpu-type-utils/texture-formats';
 import type {Device} from '../device';
 import {Resource, ResourceProps} from './resource';
 import {Texture} from './texture';
@@ -42,17 +42,14 @@ export abstract class Framebuffer extends Resource<FramebufferProps> {
   /** Height of all attachments in this framebuffer */
   height: number;
   /** Color attachments */
-  colorAttachments: TextureView[] = [];
+  abstract colorAttachments: TextureView[];
   /** Depth-stencil attachment, if provided */
-  depthStencilAttachment: TextureView | null = null;
+  abstract depthStencilAttachment: TextureView | null;
 
   constructor(device: Device, props: FramebufferProps = {}) {
     super(device, props, Framebuffer.defaultProps);
     this.width = this.props.width;
     this.height = this.props.height;
-
-    // NOTE: call from subclass constructor as we cannot call overridden methods here (subclass not yet constructed)
-    // this.autoCreateAttachmentTextures();
   }
 
   /**
@@ -139,7 +136,7 @@ export abstract class Framebuffer extends Resource<FramebufferProps> {
     for (let i = 0; i < this.colorAttachments.length; ++i) {
       if (this.colorAttachments[i]) {
         const resizedTexture = this.device._createTexture({
-          ...this.colorAttachments[i].props,
+          ...this.colorAttachments[i].texture.props,
           width,
           height
         });
@@ -151,7 +148,7 @@ export abstract class Framebuffer extends Resource<FramebufferProps> {
 
     if (this.depthStencilAttachment) {
       const resizedTexture = this.device._createTexture({
-        ...this.depthStencilAttachment.props,
+        ...this.depthStencilAttachment.texture.props,
         width,
         height
       });
@@ -161,87 +158,3 @@ export abstract class Framebuffer extends Resource<FramebufferProps> {
     }
   }
 }
-
-// TODO - remove if not needed
-
-// Create a color attachment for WebGL *
-// protected override createColorTexture(colorAttachment: Required<ColorAttachment>): Required<ColorAttachment> {
-//   return this.device._createTexture({
-//     id: `${this.id}-color`,
-//     data: null, // reserves texture memory, but texels are undefined
-//     format,
-//     // type: GL.UNSIGNED_BYTE,
-//     width: this.width,
-//     height: this.height,
-//     // Note: Mipmapping can be disabled by texture resource when we resize the texture
-//     // to a non-power-of-two dimenstion (NPOT texture) under WebGL1. To have consistant
-//     // behavior we always disable mipmaps.
-//     mipmaps: false,
-//     // Set MIN and MAG filtering parameters so mipmaps are not used in sampling.
-//     // Use LINEAR so subpixel algos like fxaa work.
-//     // Set WRAP modes that support NPOT textures too.
-//     sampler: {
-//       minFilter: 'linear',
-//       magFilter: 'linear',
-//       addressModeU: 'clamp-to-edge',
-//       addressModeV: 'clamp-to-edge'
-//     }
-//     // parameters: {
-//     //   [GL.TEXTURE_MIN_FILTER]: GL.LINEAR,
-//     //   [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
-//     //   [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
-//     //   [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
-//     // }
-//   });
-// }
-
-// /** Returns fully populated attachment object. */
-// protected normalizeColorAttachment(
-//   attachment: Texture | ColorTextureFormat
-// ): Required<ColorAttachment> {
-
-//   const COLOR_ATTACHMENT_DEFAULTS: Required<ColorAttachment> = {
-//     texture: undefined!,
-//     format: undefined!,
-//     clearValue: [0.0, 0.0, 0.0, 0.0],
-//     loadOp: 'clear',
-//     storeOp: 'store'
-//   };
-
-//   if (attachment instanceof Texture) {
-//     return {...COLOR_ATTACHMENT_DEFAULTS, texture: attachment};
-//   }
-//   if (typeof attachment === 'string') {
-//     return {...COLOR_ATTACHMENT_DEFAULTS, format: attachment};
-//   }
-//   return {...COLOR_ATTACHMENT_DEFAULTS, ...attachment};
-// }
-
-// /** Wraps texture inside fully populated attachment object. */
-// protected normalizeDepthStencilAttachment(
-//   attachment: DepthStencilAttachment | Texture | DepthStencilTextureFormat
-// ): Required<DepthStencilAttachment> {
-//   const DEPTH_STENCIL_ATTACHMENT_DEFAULTS: Required<DepthStencilAttachment> = {
-//     texture: undefined!,
-//     format: undefined!,
-
-//     depthClearValue: 1.0,
-//     depthLoadOp: 'clear',
-//     depthStoreOp: 'store',
-//     depthReadOnly: false,
-
-//     stencilClearValue: 0,
-//     stencilLoadOp: 'clear',
-//     stencilStoreOp: 'store',
-//     stencilReadOnly: false
-//   };
-
-//   if (typeof attachment === 'string') {
-//     return {...DEPTH_STENCIL_ATTACHMENT_DEFAULTS, format: attachment};
-//   }
-//   // @ts-expect-error attachment instanceof Texture doesn't cover Renderbuffer
-//   if (attachment.handle || attachment instanceof Texture) {
-//     return {...DEPTH_STENCIL_ATTACHMENT_DEFAULTS, texture: attachment as Texture};
-//   }
-//   return {...DEPTH_STENCIL_ATTACHMENT_DEFAULTS, ...attachment};
-// }

package/src/adapter/resources/query-set.ts

@@ -27,8 +27,8 @@ export type QuerySetProps = ResourceProps & {
 export abstract class QuerySet extends Resource<QuerySetProps> {
   static override defaultProps: Required<QuerySetProps> = {
     ...Resource.defaultProps,
-    type: undefined,
-    count: undefined
+    type: undefined!,
+    count: undefined!
   };
 
   get [Symbol.toStringTag](): string {

package/src/adapter/resources/render-pass.ts

@@ -18,8 +18,14 @@ export type RenderPassProps = ResourceProps & {
   framebuffer?: Framebuffer | null;
   /** Control viewport, scissor rect, blend constant and stencil ref */
   parameters?: RenderPassParameters;
+
+  // TODO - API needs to be able to control multiple render targets
+
   /** Clear value for color attachment, or `load` to preserve the previous value */
   clearColor?: NumberArray | false;
+  /** Whether to disable / discard the output of the rasterizer */
+  discard?: boolean;
+
   /** Clear value for depth attachment, or `load` to preserve the previous value */
   clearDepth?: number | false;
   /** Clear value for stencil attachment, or `load` to preserve the previous value */
@@ -28,8 +34,6 @@ export type RenderPassProps = ResourceProps & {
   depthReadOnly?: boolean;
   /** Indicates that the stencil component is read only. */
   stencilReadOnly?: boolean;
-  /** Whether to disable / discard the output of the rasterizer */
-  discard?: boolean;
 
   /** QuerySet to write begin/end timestamps to */
   occlusionQuerySet?: QuerySet;
@@ -54,7 +58,7 @@ export abstract class RenderPass extends Resource<RenderPassProps> {
   static override defaultProps: Required<RenderPassProps> = {
     ...Resource.defaultProps,
     framebuffer: null,
-    parameters: undefined,
+    parameters: undefined!,
     clearColor: [0, 0, 0, 0],
     clearDepth: 1,
     clearStencil: 0,
@@ -62,10 +66,10 @@ export abstract class RenderPass extends Resource<RenderPassProps> {
     stencilReadOnly: false,
     discard: false,
 
-    occlusionQuerySet: undefined,
-    timestampQuerySet: undefined,
-    beginTimestampIndex: undefined,
-    endTimestampIndex: undefined
+    occlusionQuerySet: undefined!,
+    timestampQuerySet: undefined!,
+    beginTimestampIndex: undefined!,
+    endTimestampIndex: undefined!
   };
 
   override get [Symbol.toStringTag](): string {

package/src/adapter/resources/render-pipeline.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import type {Device} from '../device';
-import type {UniformValue} from '../types/types';
+import type {UniformValue} from '../types/uniforms';
 import type {PrimitiveTopology, RenderPipelineParameters} from '../types/parameters';
 import type {ShaderLayout, Binding} from '../types/shader-layout';
 import type {BufferLayout} from '../types/buffer-layout';
@@ -32,10 +32,7 @@ export type RenderPipelineProps = ResourceProps & {
 
   /** Describes the attributes and bindings exposed by the pipeline shader(s). */
   shaderLayout?: ShaderLayout | null;
-  /**
-   * Describes the buffers accepted by this pipeline and how they are mapped to shader attributes.
-   * A default mapping of one buffer per attribute is always created.
-   */
+  /** Describes the buffers accepted by this pipeline and how they are mapped to shader attributes. */
   bufferLayout?: BufferLayout[]; // Record<string, Omit<BufferLayout, 'name'>
 
   /** Determines how vertices are read from the 'vertex' attributes */
@@ -102,7 +99,7 @@ export abstract class RenderPipeline extends Resource<RenderPipelineProps> {
 
   constructor(device: Device, props: RenderPipelineProps) {
     super(device, props, RenderPipeline.defaultProps);
-    this.shaderLayout = this.props.shaderLayout;
+    this.shaderLayout = this.props.shaderLayout!;
     this.bufferLayout = this.props.bufferLayout || [];
   }
 

package/src/adapter/resources/resource.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import type {Device} from '../device';
-import {uid} from '../../utils/utils';
+import {uid} from '../../utils/uid';
 
 export type ResourceProps = {
   /** Name of resource, mainly for debugging purposes. A unique name will be assigned if not provided */
@@ -22,7 +22,7 @@ export abstract class Resource<Props extends ResourceProps> {
   static defaultProps: Required<ResourceProps> = {
     id: 'undefined',
     handle: undefined,
-    userData: undefined
+    userData: undefined!
   };
 
   abstract get [Symbol.toStringTag](): string;
@@ -39,7 +39,7 @@ export abstract class Resource<Props extends ResourceProps> {
   /** For resources that allocate GPU memory */
   private allocatedBytes: number = 0;
   /** Attached resources will be destroyed when this resource is destroyed. Tracks auto-created "sub" resources. */
-  private _attachedResources = new Set<Resource<unknown>>();
+  private _attachedResources = new Set<Resource<ResourceProps>>();
 
   /**
    * Create a new Resource. Called from Subclass
@@ -91,21 +91,21 @@ export abstract class Resource<Props extends ResourceProps> {
    * Attaches a resource. Attached resources are auto destroyed when this resource is destroyed
    * Called automatically when sub resources are auto created but can be called by application
    */
-  attachResource(resource: Resource<unknown>): void {
+  attachResource(resource: Resource<ResourceProps>): void {
     this._attachedResources.add(resource);
   }
 
   /**
    * Detach an attached resource. The resource will no longer be auto-destroyed when this resource is destroyed.
    */
-  detachResource(resource: Resource<unknown>): void {
+  detachResource(resource: Resource<ResourceProps>): void {
     this._attachedResources.delete(resource);
   }
 
   /**
    * Destroys a resource (only if owned), and removes from the owned (auto-destroy) list for this resource.
    */
-  destroyAttachedResource(resource: Resource<unknown>): void {
+  destroyAttachedResource(resource: Resource<ResourceProps>): void {
     if (this._attachedResources.delete(resource)) {
       resource.destroy();
     }
@@ -117,7 +117,7 @@ export abstract class Resource<Props extends ResourceProps> {
       resource.destroy();
     }
     // don't remove while we are iterating
-    this._attachedResources = new Set<Resource<unknown>>();
+    this._attachedResources = new Set<Resource<ResourceProps>>();
   }
 
   // PROTECTED METHODS

package/src/adapter/resources/shader.ts

@@ -5,10 +5,9 @@
 import type {Device} from '../device';
 import {Resource, ResourceProps} from './resource';
 // import { log } from '../../utils/log';
-import {uid} from '../../utils/utils';
-import {CompilerMessage} from '../../lib/compiler-log/compiler-message';
-import {formatCompilerLog} from '../../lib/compiler-log/format-compiler-log';
-import {getShaderInfo} from '../../lib/compiler-log/get-shader-info';
+import {uid} from '../../utils/uid';
+import {CompilerMessage} from '../types/compiler-message';
+import {formatCompilerLog} from '../../adapter-utils/format-compiler-log';
 
 /**
  * Properties for a Shader
@@ -36,7 +35,7 @@ export abstract class Shader extends Resource<ShaderProps> {
   static override defaultProps: Required<ShaderProps> = {
     ...Resource.defaultProps,
     language: 'auto',
-    stage: undefined,
+    stage: undefined!,
     source: '',
     sourceMap: null,
     entryPoint: 'main',
@@ -101,14 +100,17 @@ export abstract class Shader extends Resource<ShaderProps> {
 
   // PRIVATE
 
-  /** In-browser UI logging of errors */
+  /**
+   * In-browser UI logging of errors
+   * TODO - this HTML formatting code should not be in Device, should be pluggable
+   */
   protected _displayShaderLog(messages: readonly CompilerMessage[]): void {
     // Return if under Node.js / incomplete `document` polyfills
     if (typeof document === 'undefined' || !document?.createElement) {
       return;
     }
 
-    const shaderName: string = getShaderInfo(this.source).name;
+    const shaderName: string = getShaderName(this.source);
     const shaderTitle: string = `${this.stage} ${shaderName}`;
     let htmlLog = formatCompilerLog(messages, this.source, {showSourceCode: 'all', html: true});
     // Show translated source if available
@@ -132,9 +134,7 @@ ${htmlLog}
     document.body.appendChild(button);
 
     const errors = document.getElementsByClassName('luma-compiler-log-error');
-    if (errors[0]?.scrollIntoView) {
-      errors[0].scrollIntoView();
-    }
+    errors[0]?.scrollIntoView();
 
     // TODO - add a small embedded copy button (instead of main button)
     button.onclick = () => {
@@ -151,5 +151,12 @@ ${htmlLog}
 
 /** Deduce an id, from shader source, or supplied id, or shader type */
 function getShaderIdFromProps(props: ShaderProps): string {
-  return getShaderInfo(props.source).name || props.id || uid(`unnamed ${props.stage}-shader`);
+  return getShaderName(props.source) || props.id || uid(`unnamed ${props.stage}-shader`);
+}
+
+/** Extracts GLSLIFY style naming of shaders: `#define SHADER_NAME ...` */
+function getShaderName(shader: string, defaultName: string = 'unnamed'): string {
+  const SHADER_NAME_REGEXP = /#define[\s*]SHADER_NAME[\s*]([A-Za-z0-9_-]+)[\s*]/;
+  const match = SHADER_NAME_REGEXP.exec(shader);
+  return match ? match[1] : defaultName;
 }