@luma.gl/core 9.0.0-alpha.50 → 9.0.0-alpha.51

package/dist/adapter/resources/shader.d.ts

@@ -5,12 +5,18 @@ import { CompilerMessage } from '../../lib/compiler-log/compiler-message';
  * Properties for a Shader
  */
 export type ShaderProps = ResourceProps & {
+    /** Shader language (defaults to auto) */
+    language?: 'glsl' | 'wgsl' | 'auto';
+    /** Which stage are we compiling? Required by WebGL and GLSL transpiler */
     stage: 'vertex' | 'fragment' | 'compute';
+    /** Shader source code */
     source: string;
+    /** Optional shader source map (WebGPU only) */
     sourceMap?: string | null;
-    language?: 'glsl' | 'wgsl' | 'auto';
-    /** @deprecated use props.stage */
-    shaderType?: 0x8b30 | 0x8b31 | 0;
+    /** Optional shader entry point (WebGPU only) */
+    entryPoint?: string;
+    /** Show shader source in browser? */
+    debug?: 'never' | 'errors' | 'warnings' | 'always';
 };
 /**
  * Immutable Shader object
@@ -19,9 +25,21 @@ export type ShaderProps = ResourceProps & {
 export declare abstract class Shader extends Resource<ShaderProps> {
     static defaultProps: Required<ShaderProps>;
     get [Symbol.toStringTag](): string;
+    /** The stage of this shader */
     readonly stage: 'vertex' | 'fragment' | 'compute';
+    /** The source code of this shader */
     readonly source: string;
+    /** The compilation status of this shader. May be 'pending' if compilation is done asynchronously */
+    compilationStatus: 'success' | 'error' | 'pending';
+    /** Create a new Shader instance */
     constructor(device: Device, props: ShaderProps);
-    abstract compilationInfo(): Promise<readonly CompilerMessage[]>;
+    /** Get compiler log asynchronously */
+    abstract getCompilationInfo(): Promise<readonly CompilerMessage[]>;
+    /** Get compiler log synchronously (WebGL only) */
+    getCompilationInfoSync(): (readonly CompilerMessage[]) | null;
+    /** In browser logging of errors */
+    debugShader(): Promise<void>;
+    /** In-browser UI logging of errors */
+    protected _displayShaderLog(messages: readonly CompilerMessage[]): void;
 }
 //# sourceMappingURL=shader.d.ts.map

package/dist/adapter/resources/shader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shader.d.ts","sourceRoot":"","sources":["../../../src/adapter/resources/shader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,WAAW,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAE,aAAa,EAAC,MAAM,YAAY,CAAC;AACnD,OAAO,EAAC,eAAe,EAAC,MAAM,yCAAyC,CAAC;AAExE;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG;IACxC,KAAK,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IAEzC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAIpC,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC;CAClC,CAAC;AAEF;;;GAGG;AACH,8BAAsB,MAAO,SAAQ,QAAQ,CAAC,WAAW,CAAC;IACxD,OAAgB,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,CAOjD;IAEF,IAAa,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,MAAM,CAAqB;IAEhE,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IAClD,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;gBAEZ,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW;IAM9C,QAAQ,CAAC,eAAe,IAAI,OAAO,CAAC,SAAS,eAAe,EAAE,CAAC;CAChE"}
+{"version":3,"file":"shader.d.ts","sourceRoot":"","sources":["../../../src/adapter/resources/shader.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,WAAW,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAE,aAAa,EAAC,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAC,eAAe,EAAC,MAAM,yCAAyC,CAAC;AAIxE;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG;IACxC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACpC,0EAA0E;IAC1E,KAAK,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IACzC,yBAAyB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC;CACpD,CAAC;AAEF;;;GAGG;AACH,8BAAsB,MAAO,SAAQ,QAAQ,CAAC,WAAW,CAAC;IACxD,OAAgB,YAAY,EAAE,QAAQ,CAAC,WAAW,CAAC,CAQjD;IAEF,IAAa,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,MAAM,CAAqB;IAEhE,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;IAClD,qCAAqC;IACrC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,oGAAoG;IACpG,iBAAiB,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAa;IAE/D,mCAAmC;gBACvB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW;IAM9C,sCAAsC;IACtC,QAAQ,CAAC,kBAAkB,IAAI,OAAO,CAAC,SAAS,eAAe,EAAE,CAAC;IAElE,kDAAkD;IAClD,sBAAsB,IAAI,CAAC,SAAS,eAAe,EAAE,CAAC,GAAG,IAAI;IAM7D,mCAAmC;IAC7B,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;IAwBlC,sCAAsC;IACtC,SAAS,CAAC,iBAAiB,CAAC,QAAQ,EAAE,SAAS,eAAe,EAAE,GAAG,IAAI;CAoCxE"}

package/dist/adapter/resources/shader.js

@@ -1,24 +1,87 @@
 let _Symbol$toStringTag;
 import { Resource } from "./resource.js";
+import { uid } from "../../lib/utils/utils.js";
+import { formatCompilerLog } from "../../lib/compiler-log/format-compiler-log.js";
+import { getShaderInfo } from "../../lib/compiler-log/get-shader-info.js";
 _Symbol$toStringTag = Symbol.toStringTag;
 export class Shader extends Resource {
   get [_Symbol$toStringTag]() {
     return 'Shader';
   }
   constructor(device, props) {
-    super(device, props, Shader.defaultProps);
+    super(device, {
+      id: getShaderIdFromProps(props),
+      ...props
+    }, Shader.defaultProps);
     this.stage = void 0;
     this.source = void 0;
+    this.compilationStatus = 'pending';
     this.stage = this.props.stage;
     this.source = this.props.source;
   }
+  getCompilationInfoSync() {
+    return null;
+  }
+  async debugShader() {
+    switch (this.props.debug) {
+      case 'never':
+        return;
+      case 'errors':
+        if (this.compilationStatus === 'success') {
+          return;
+        }
+        break;
+      case 'warnings':
+      case 'always':
+        break;
+    }
+    const messages = await this.getCompilationInfo();
+    if (this.props.debug === 'warnings' && (messages === null || messages === void 0 ? void 0 : messages.length) === 0) {
+      return;
+    }
+    this._displayShaderLog(messages);
+  }
+  _displayShaderLog(messages) {
+    var _document, _document$getElements;
+    if (typeof document === 'undefined' || !((_document = document) !== null && _document !== void 0 && _document.createElement)) {
+      return;
+    }
+    const shaderName = getShaderInfo(this.source).name;
+    const shaderTitle = `${this.stage} ${shaderName}`;
+    const htmlLog = formatCompilerLog(messages, this.source, {
+      showSourceCode: 'all',
+      html: true
+    });
+    const button = document.createElement('Button');
+    button.innerHTML = `
+<h1>Shader Compilation Error in ${shaderTitle}</h1><br /><br />
+<code style="user-select:text;"><pre>
+${htmlLog}
+</pre></code>`;
+    button.style.top = '10px';
+    button.style.left = '10px';
+    button.style.position = 'absolute';
+    button.style.zIndex = '9999';
+    button.style.width = '100%';
+    button.style.textAlign = 'left';
+    document.body.appendChild(button);
+    (_document$getElements = document.getElementsByClassName('luma-compiler-log-error')[0]) === null || _document$getElements === void 0 ? void 0 : _document$getElements.scrollIntoView();
+    button.onclick = () => {
+      const dataURI = `data:text/plain,${encodeURIComponent(this.source)}`;
+      navigator.clipboard.writeText(dataURI);
+    };
+  }
 }
 Shader.defaultProps = {
   ...Resource.defaultProps,
+  language: 'auto',
   stage: 'vertex',
   source: '',
   sourceMap: null,
-  language: 'auto',
-  shaderType: 0
+  entryPoint: 'main',
+  debug: 'errors'
 };
+function getShaderIdFromProps(props) {
+  return getShaderInfo(props.source).name || props.id || uid(`unnamed ${props.stage}-shader`);
+}
 //# sourceMappingURL=shader.js.map

package/dist/adapter/resources/shader.js.map

@@ -1 +1 @@
-{"version":3,"file":"shader.js","names":["Resource","_Symbol$toStringTag","Symbol","toStringTag","Shader","constructor","device","props","defaultProps","stage","source","sourceMap","language","shaderType"],"sources":["../../../src/adapter/resources/shader.ts"],"sourcesContent":["// luma.gl, MIT license\nimport type {Device} from '../device';\nimport {Resource, ResourceProps} from './resource';\nimport {CompilerMessage} from '../../lib/compiler-log/compiler-message';\n\n/**\n * Properties for a Shader\n */\nexport type ShaderProps = ResourceProps & {\n  stage: 'vertex' | 'fragment' | 'compute'; // Required by WebGL and GLSL transpiler\n  // code: string;\n  source: string;\n  sourceMap?: string | null; // WebGPU only\n  language?: 'glsl' | 'wgsl' | 'auto'; // wgsl in WebGPU only\n  // entryPoint?: string;\n\n  // WEBGL\n  /** @deprecated use props.stage */\n  shaderType?: 0x8b30 | 0x8b31 | 0; // GL_FRAGMENT_SHADER | GL_VERTEX_SHADER\n};\n\n/**\n * Immutable Shader object\n * In WebGPU the handle can be copied between threads\n */\nexport abstract class Shader extends Resource<ShaderProps> {\n  static override defaultProps: Required<ShaderProps> = {\n    ...Resource.defaultProps,\n    stage: 'vertex',\n    source: '',\n    sourceMap: null,\n    language: 'auto',\n    shaderType: 0\n  };\n\n  override get [Symbol.toStringTag](): string { return 'Shader'; }\n\n  readonly stage: 'vertex' | 'fragment' | 'compute';\n  readonly source: string;\n\n  constructor(device: Device, props: ShaderProps) {\n    super(device, props, Shader.defaultProps);\n    this.stage = this.props.stage;\n    this.source = this.props.source;\n  }\n\n  abstract compilationInfo(): Promise<readonly CompilerMessage[]>;\n}\n"],"mappings":";SAEQA,QAAQ;AAAAC,mBAAA,GAiCAC,MAAM,CAACC,WAAW;AAVlC,OAAO,MAAeC,MAAM,SAASJ,QAAQ,CAAc;EAUzD,KAAAC,mBAAA,IAA4C;IAAE,OAAO,QAAQ;EAAE;EAK/DI,WAAWA,CAACC,MAAc,EAAEC,KAAkB,EAAE;IAC9C,KAAK,CAACD,MAAM,EAAEC,KAAK,EAAEH,MAAM,CAACI,YAAY,CAAC;IAAC,KAJnCC,KAAK;IAAA,KACLC,MAAM;IAIb,IAAI,CAACD,KAAK,GAAG,IAAI,CAACF,KAAK,CAACE,KAAK;IAC7B,IAAI,CAACC,MAAM,GAAG,IAAI,CAACH,KAAK,CAACG,MAAM;EACjC;AAGF;AAtBsBN,MAAM,CACVI,YAAY,GAA0B;EACpD,GAAGR,QAAQ,CAACQ,YAAY;EACxBC,KAAK,EAAE,QAAQ;EACfC,MAAM,EAAE,EAAE;EACVC,SAAS,EAAE,IAAI;EACfC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE;AACd,CAAC"}
+{"version":3,"file":"shader.js","names":["Resource","uid","formatCompilerLog","getShaderInfo","_Symbol$toStringTag","Symbol","toStringTag","Shader","constructor","device","props","id","getShaderIdFromProps","defaultProps","stage","source","compilationStatus","getCompilationInfoSync","debugShader","debug","messages","getCompilationInfo","length","_displayShaderLog","_document","_document$getElements","document","createElement","shaderName","name","shaderTitle","htmlLog","showSourceCode","html","button","innerHTML","style","top","left","position","zIndex","width","textAlign","body","appendChild","getElementsByClassName","scrollIntoView","onclick","dataURI","encodeURIComponent","navigator","clipboard","writeText","language","sourceMap","entryPoint"],"sources":["../../../src/adapter/resources/shader.ts"],"sourcesContent":["// luma.gl, MIT license\nimport type {Device} from '../device';\nimport {Resource, ResourceProps} from './resource';\n// import { log } from '../../lib/utils/log';\nimport {uid} from '../../lib/utils/utils';\nimport {CompilerMessage} from '../../lib/compiler-log/compiler-message';\nimport {formatCompilerLog} from '../../lib/compiler-log/format-compiler-log';\nimport {getShaderInfo} from '../../lib/compiler-log/get-shader-info';\n\n/**\n * Properties for a Shader\n */\nexport type ShaderProps = ResourceProps & {\n  /** Shader language (defaults to auto) */ \n  language?: 'glsl' | 'wgsl' | 'auto';\n  /** Which stage are we compiling? Required by WebGL and GLSL transpiler */\n  stage: 'vertex' | 'fragment' | 'compute';\n  /** Shader source code */\n  source: string;\n  /** Optional shader source map (WebGPU only) */\n  sourceMap?: string | null;\n  /** Optional shader entry point (WebGPU only) */\n  entryPoint?: string;\n  /** Show shader source in browser? */\n  debug?: 'never' | 'errors' | 'warnings' | 'always';\n};\n\n/**\n * Immutable Shader object\n * In WebGPU the handle can be copied between threads\n */\nexport abstract class Shader extends Resource<ShaderProps> {\n  static override defaultProps: Required<ShaderProps> = {\n    ...Resource.defaultProps,\n    language: 'auto',\n    stage: 'vertex',\n    source: '',\n    sourceMap: null,\n    entryPoint: 'main',\n    debug: 'errors'\n  };\n\n  override get [Symbol.toStringTag](): string { return 'Shader'; }\n\n  /** The stage of this shader */\n  readonly stage: 'vertex' | 'fragment' | 'compute';\n  /** The source code of this shader */\n  readonly source: string;\n  /** The compilation status of this shader. May be 'pending' if compilation is done asynchronously */\n  compilationStatus: 'success' | 'error' | 'pending' = 'pending';\n\n  /** Create a new Shader instance */\n  constructor(device: Device, props: ShaderProps) {\n    super(device, {id: getShaderIdFromProps(props), ...props}, Shader.defaultProps);\n    this.stage = this.props.stage;\n    this.source = this.props.source;\n  }\n\n  /** Get compiler log asynchronously */\n  abstract getCompilationInfo(): Promise<readonly CompilerMessage[]>;\n\n  /** Get compiler log synchronously (WebGL only) */\n  getCompilationInfoSync(): (readonly CompilerMessage[]) | null {\n    return null;\n  }\n\n  // PORTABLE HELPERS\n\n  /** In browser logging of errors */\n  async debugShader(): Promise<void> {\n    switch (this.props.debug) {\n      case 'never':\n        return;\n      case 'errors':\n        // On WebGL - Don't extract the log unless errors\n        if (this.compilationStatus === 'success') {\n          return;\n        }\n        break;\n      case 'warnings':\n      case 'always':\n        break;\n    }\n\n    const messages = await this.getCompilationInfo();\n    if (this.props.debug === 'warnings' && messages?.length === 0) {\n      return;\n    }\n    this._displayShaderLog(messages);\n  }\n\n  // PRIVATE\n\n  /** In-browser UI logging of errors */\n  protected _displayShaderLog(messages: readonly CompilerMessage[]): void {\n    // Return if under Node.js / incomplete `document` polyfills\n    if (typeof document === 'undefined' || !document?.createElement) {\n      return;\n    }\n\n    const shaderName: string = getShaderInfo(this.source).name;\n    const shaderTitle: string = `${this.stage} ${shaderName}`;\n    const htmlLog = formatCompilerLog(messages, this.source, {showSourceCode: 'all', html: true});\n\n    // Make it clickable so we can copy to clipboard \n    const button = document.createElement('Button');\n    button.innerHTML = `\n<h1>Shader Compilation Error in ${shaderTitle}</h1><br /><br />\n<code style=\"user-select:text;\"><pre>\n${htmlLog}\n</pre></code>`;\n    button.style.top = '10px';\n    button.style.left = '10px';\n    button.style.position = 'absolute';\n    button.style.zIndex = '9999';\n    button.style.width = '100%';\n    button.style.textAlign = 'left';\n    document.body.appendChild(button);\n\n    document.getElementsByClassName('luma-compiler-log-error')[0]?.scrollIntoView();\n\n    // TODO - add a small embedded copy button (instead of main button)\n    button.onclick = () => {\n      // const source = this.source.replaceAll('\\n', '<br />');\n      const dataURI = `data:text/plain,${encodeURIComponent(this.source)}`;\n      navigator.clipboard.writeText(dataURI);\n    };\n\n    // TODO - add a small embedded close button\n  }\n}\n\n// HELPERS\n\n/** Deduce an id, from shader source, or supplied id, or shader type */\nfunction getShaderIdFromProps(props: ShaderProps): string {\n  return getShaderInfo(props.source).name || props.id || uid(`unnamed ${props.stage}-shader`);\n}\n"],"mappings":"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"}

package/dist/dist.dev.js

@@ -1455,26 +1455,172 @@ var __exports__ = (() => {
     colorSpace: "srgb"
   });
 
+  // src/lib/compiler-log/format-compiler-log.ts
+  function formatCompilerLog(shaderLog, source, options) {
+    let formattedLog = "";
+    const lines = source.split(/\r?\n/);
+    const log2 = shaderLog.slice().sort((a, b) => a.lineNum - b.lineNum);
+    switch (options?.showSourceCode || "no") {
+      case "all":
+        let currentMessage = 0;
+        for (let lineNum = 1; lineNum <= lines.length; lineNum++) {
+          formattedLog += getNumberedLine(lines[lineNum - 1], lineNum, options);
+          while (log2.length > currentMessage && log2[currentMessage].lineNum === lineNum) {
+            const message = log2[currentMessage++];
+            formattedLog += formatCompilerMessage(message, lines, message.lineNum, {
+              ...options,
+              inlineSource: false
+            });
+          }
+        }
+        return formattedLog;
+      case "issues":
+      case "no":
+        for (const message of shaderLog) {
+          formattedLog += formatCompilerMessage(message, lines, message.lineNum, {
+            inlineSource: options?.showSourceCode !== "no"
+          });
+        }
+        return formattedLog;
+    }
+  }
+  function formatCompilerMessage(message, lines, lineNum, options) {
+    if (options?.inlineSource) {
+      const numberedLines = getNumberedLines(lines, lineNum);
+      const positionIndicator = message.linePos > 0 ? `${" ".repeat(message.linePos + 5)}^^^
+` : "";
+      return `
+${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.message}
+
+`;
+    }
+    return options?.html ? `<div class='luma-compiler-log-error' style="color:red;"><b> ${message.type.toUpperCase()}: ${message.message}</b></div>` : `${message.type.toUpperCase()}: ${message.message}`;
+  }
+  function getNumberedLines(lines, lineNum, options) {
+    let numberedLines = "";
+    for (let lineIndex = lineNum - 2; lineIndex <= lineNum; lineIndex++) {
+      const sourceLine = lines[lineIndex - 1];
+      if (sourceLine !== void 0) {
+        numberedLines += getNumberedLine(sourceLine, lineNum, options);
+      }
+    }
+    return numberedLines;
+  }
+  function getNumberedLine(line, lineNum, options) {
+    return `${padLeft(String(lineNum), 4)}: ${line}${options?.html ? "<br/>" : "\n"}`;
+  }
+  function padLeft(string, paddedLength) {
+    let result = "";
+    for (let i = string.length; i < paddedLength; ++i) {
+      result += " ";
+    }
+    return result + string;
+  }
+
+  // src/lib/compiler-log/get-shader-info.ts
+  function getShaderInfo(source, defaultName) {
+    return {
+      name: getShaderName(source, defaultName),
+      language: "glsl",
+      version: getShaderVersion(source)
+    };
+  }
+  function getShaderName(shader, defaultName = "unnamed") {
+    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;
+  }
+  function getShaderVersion(source) {
+    let version = 100;
+    const words = source.match(/[^\s]+/g);
+    if (words && words.length >= 2 && words[0] === "#version") {
+      const v = parseInt(words[1], 10);
+      if (Number.isFinite(v)) {
+        version = v;
+      }
+    }
+    return version;
+  }
+
   // src/adapter/resources/shader.ts
   var _Shader = class extends Resource {
     get [Symbol.toStringTag]() {
       return "Shader";
     }
+    compilationStatus = "pending";
     constructor(device, props) {
-      super(device, props, _Shader.defaultProps);
+      super(device, {
+        id: getShaderIdFromProps(props),
+        ...props
+      }, _Shader.defaultProps);
       this.stage = this.props.stage;
       this.source = this.props.source;
     }
+    getCompilationInfoSync() {
+      return null;
+    }
+    async debugShader() {
+      switch (this.props.debug) {
+        case "never":
+          return;
+        case "errors":
+          if (this.compilationStatus === "success") {
+            return;
+          }
+          break;
+        case "warnings":
+        case "always":
+          break;
+      }
+      const messages = await this.getCompilationInfo();
+      if (this.props.debug === "warnings" && messages?.length === 0) {
+        return;
+      }
+      this._displayShaderLog(messages);
+    }
+    _displayShaderLog(messages) {
+      if (typeof document === "undefined" || !document?.createElement) {
+        return;
+      }
+      const shaderName = getShaderInfo(this.source).name;
+      const shaderTitle = `${this.stage} ${shaderName}`;
+      const htmlLog = formatCompilerLog(messages, this.source, {
+        showSourceCode: "all",
+        html: true
+      });
+      const button = document.createElement("Button");
+      button.innerHTML = `
+<h1>Shader Compilation Error in ${shaderTitle}</h1><br /><br />
+<code style="user-select:text;"><pre>
+${htmlLog}
+</pre></code>`;
+      button.style.top = "10px";
+      button.style.left = "10px";
+      button.style.position = "absolute";
+      button.style.zIndex = "9999";
+      button.style.width = "100%";
+      button.style.textAlign = "left";
+      document.body.appendChild(button);
+      document.getElementsByClassName("luma-compiler-log-error")[0]?.scrollIntoView();
+      button.onclick = () => {
+        const dataURI = `data:text/plain,${encodeURIComponent(this.source)}`;
+        navigator.clipboard.writeText(dataURI);
+      };
+    }
   };
   var Shader = _Shader;
   __publicField(Shader, "defaultProps", {
     ...Resource.defaultProps,
+    language: "auto",
     stage: "vertex",
     source: "",
     sourceMap: null,
-    language: "auto",
-    shaderType: 0
+    entryPoint: "main",
+    debug: "errors"
   });
+  function getShaderIdFromProps(props) {
+    return getShaderInfo(props.source).name || props.id || uid(`unnamed ${props.stage}-shader`);
+  }
 
   // src/adapter/resources/sampler.ts
   var _Sampler = class extends Resource {
@@ -2559,46 +2705,6 @@ var __exports__ = (() => {
     return `${dataType}x${components}`;
   }
 
-  // src/lib/compiler-log/format-compiler-log.ts
-  function formatCompilerLog(shaderLog, source, options) {
-    const lines = source.split(/\r?\n/);
-    let formattedLog = "";
-    for (const message of shaderLog) {
-      formattedLog += formatCompilerMessage(message, lines, message.lineNum, options);
-    }
-    return formattedLog;
-  }
-  function formatCompilerMessage(message, lines, lineNum, options) {
-    if (options?.showSourceCode) {
-      const positionIndicator = message.linePos > 0 ? `${" ".repeat(message.linePos + 5)}^^^
-` : "";
-      const numberedLines = getNumberedLines(lines, lineNum);
-      return `${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.message}
-
-`;
-    }
-    return `${message.type.toUpperCase()}: ${message.message}
-`;
-  }
-  function getNumberedLines(lines, lineNum) {
-    let numberedLines = "";
-    for (let line = lineNum - 2; line <= lineNum; line++) {
-      const sourceLine = lines[line];
-      if (sourceLine !== void 0) {
-        numberedLines += `${padLeft(String(line), 4)}: ${sourceLine}
-`;
-      }
-    }
-    return numberedLines;
-  }
-  function padLeft(string, paddedLength) {
-    let result = "";
-    for (let i = string.length; i < paddedLength; ++i) {
-      result += " ";
-    }
-    return result + string;
-  }
-
   // src/lib/utils/cast.ts
   function cast(value) {
     return value;

package/dist/index.cjs

@@ -887,28 +887,178 @@ __publicField(ExternalTexture, "defaultProps", {
   colorSpace: "srgb"
 });
 
+// src/lib/compiler-log/format-compiler-log.ts
+function formatCompilerLog(shaderLog, source, options) {
+  let formattedLog = "";
+  const lines = source.split(/\r?\n/);
+  const log2 = shaderLog.slice().sort((a, b) => a.lineNum - b.lineNum);
+  switch ((options == null ? void 0 : options.showSourceCode) || "no") {
+    case "all":
+      let currentMessage = 0;
+      for (let lineNum = 1; lineNum <= lines.length; lineNum++) {
+        formattedLog += getNumberedLine(lines[lineNum - 1], lineNum, options);
+        while (log2.length > currentMessage && log2[currentMessage].lineNum === lineNum) {
+          const message = log2[currentMessage++];
+          formattedLog += formatCompilerMessage(message, lines, message.lineNum, {
+            ...options,
+            inlineSource: false
+          });
+        }
+      }
+      return formattedLog;
+    case "issues":
+    case "no":
+      for (const message of shaderLog) {
+        formattedLog += formatCompilerMessage(message, lines, message.lineNum, {
+          inlineSource: (options == null ? void 0 : options.showSourceCode) !== "no"
+        });
+      }
+      return formattedLog;
+  }
+}
+function formatCompilerMessage(message, lines, lineNum, options) {
+  if (options == null ? void 0 : options.inlineSource) {
+    const numberedLines = getNumberedLines(lines, lineNum);
+    const positionIndicator = message.linePos > 0 ? `${" ".repeat(message.linePos + 5)}^^^
+` : "";
+    return `
+${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.message}
+
+`;
+  }
+  return (options == null ? void 0 : options.html) ? `<div class='luma-compiler-log-error' style="color:red;"><b> ${message.type.toUpperCase()}: ${message.message}</b></div>` : `${message.type.toUpperCase()}: ${message.message}`;
+}
+function getNumberedLines(lines, lineNum, options) {
+  let numberedLines = "";
+  for (let lineIndex = lineNum - 2; lineIndex <= lineNum; lineIndex++) {
+    const sourceLine = lines[lineIndex - 1];
+    if (sourceLine !== void 0) {
+      numberedLines += getNumberedLine(sourceLine, lineNum, options);
+    }
+  }
+  return numberedLines;
+}
+function getNumberedLine(line, lineNum, options) {
+  return `${padLeft(String(lineNum), 4)}: ${line}${(options == null ? void 0 : options.html) ? "<br/>" : "\n"}`;
+}
+function padLeft(string, paddedLength) {
+  let result = "";
+  for (let i = string.length; i < paddedLength; ++i) {
+    result += " ";
+  }
+  return result + string;
+}
+
+// src/lib/compiler-log/get-shader-info.ts
+function getShaderInfo(source, defaultName) {
+  return {
+    name: getShaderName(source, defaultName),
+    language: "glsl",
+    version: getShaderVersion(source)
+  };
+}
+function getShaderName(shader, defaultName = "unnamed") {
+  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;
+}
+function getShaderVersion(source) {
+  let version = 100;
+  const words = source.match(/[^\s]+/g);
+  if (words && words.length >= 2 && words[0] === "#version") {
+    const v = parseInt(words[1], 10);
+    if (Number.isFinite(v)) {
+      version = v;
+    }
+  }
+  return version;
+}
+
 // src/adapter/resources/shader.ts
 var _Shader = class extends Resource {
   get [Symbol.toStringTag]() {
     return "Shader";
   }
+  /** The stage of this shader */
   stage;
+  /** The source code of this shader */
   source;
+  /** The compilation status of this shader. May be 'pending' if compilation is done asynchronously */
+  compilationStatus = "pending";
+  /** Create a new Shader instance */
   constructor(device, props) {
-    super(device, props, _Shader.defaultProps);
+    super(device, { id: getShaderIdFromProps(props), ...props }, _Shader.defaultProps);
     this.stage = this.props.stage;
     this.source = this.props.source;
   }
+  /** Get compiler log synchronously (WebGL only) */
+  getCompilationInfoSync() {
+    return null;
+  }
+  // PORTABLE HELPERS
+  /** In browser logging of errors */
+  async debugShader() {
+    switch (this.props.debug) {
+      case "never":
+        return;
+      case "errors":
+        if (this.compilationStatus === "success") {
+          return;
+        }
+        break;
+      case "warnings":
+      case "always":
+        break;
+    }
+    const messages = await this.getCompilationInfo();
+    if (this.props.debug === "warnings" && (messages == null ? void 0 : messages.length) === 0) {
+      return;
+    }
+    this._displayShaderLog(messages);
+  }
+  // PRIVATE
+  /** In-browser UI logging of errors */
+  _displayShaderLog(messages) {
+    var _a;
+    if (typeof document === "undefined" || !(document == null ? void 0 : document.createElement)) {
+      return;
+    }
+    const shaderName = getShaderInfo(this.source).name;
+    const shaderTitle = `${this.stage} ${shaderName}`;
+    const htmlLog = formatCompilerLog(messages, this.source, { showSourceCode: "all", html: true });
+    const button = document.createElement("Button");
+    button.innerHTML = `
+<h1>Shader Compilation Error in ${shaderTitle}</h1><br /><br />
+<code style="user-select:text;"><pre>
+${htmlLog}
+</pre></code>`;
+    button.style.top = "10px";
+    button.style.left = "10px";
+    button.style.position = "absolute";
+    button.style.zIndex = "9999";
+    button.style.width = "100%";
+    button.style.textAlign = "left";
+    document.body.appendChild(button);
+    (_a = document.getElementsByClassName("luma-compiler-log-error")[0]) == null ? void 0 : _a.scrollIntoView();
+    button.onclick = () => {
+      const dataURI = `data:text/plain,${encodeURIComponent(this.source)}`;
+      navigator.clipboard.writeText(dataURI);
+    };
+  }
 };
 var Shader = _Shader;
 __publicField(Shader, "defaultProps", {
   ...Resource.defaultProps,
+  language: "auto",
   stage: "vertex",
   source: "",
   sourceMap: null,
-  language: "auto",
-  shaderType: 0
+  entryPoint: "main",
+  debug: "errors"
 });
+function getShaderIdFromProps(props) {
+  return getShaderInfo(props.source).name || props.id || uid(`unnamed ${props.stage}-shader`);
+}
 
 // src/adapter/resources/sampler.ts
 var _Sampler = class extends Resource {
@@ -2066,46 +2216,6 @@ function getVertexFormatFromAttribute(typedArray, size, normalized) {
   return `${dataType}x${components}`;
 }
 
-// src/lib/compiler-log/format-compiler-log.ts
-function formatCompilerLog(shaderLog, source, options) {
-  const lines = source.split(/\r?\n/);
-  let formattedLog = "";
-  for (const message of shaderLog) {
-    formattedLog += formatCompilerMessage(message, lines, message.lineNum, options);
-  }
-  return formattedLog;
-}
-function formatCompilerMessage(message, lines, lineNum, options) {
-  if (options == null ? void 0 : options.showSourceCode) {
-    const positionIndicator = message.linePos > 0 ? `${" ".repeat(message.linePos + 5)}^^^
-` : "";
-    const numberedLines = getNumberedLines(lines, lineNum);
-    return `${numberedLines}${positionIndicator}${message.type.toUpperCase()}: ${message.message}
-
-`;
-  }
-  return `${message.type.toUpperCase()}: ${message.message}
-`;
-}
-function getNumberedLines(lines, lineNum) {
-  let numberedLines = "";
-  for (let line = lineNum - 2; line <= lineNum; line++) {
-    const sourceLine = lines[line];
-    if (sourceLine !== void 0) {
-      numberedLines += `${padLeft(String(line), 4)}: ${sourceLine}
-`;
-    }
-  }
-  return numberedLines;
-}
-function padLeft(string, paddedLength) {
-  let result = "";
-  for (let i = string.length; i < paddedLength; ++i) {
-    result += " ";
-  }
-  return result + string;
-}
-
 // src/lib/utils/cast.ts
 function cast(value) {
   return value;

package/dist/lib/compiler-log/format-compiler-log.d.ts

@@ -1,6 +1,8 @@
 import type { CompilerMessage } from './compiler-message';
 /** @returns annotated errors or warnings */
 export declare function formatCompilerLog(shaderLog: readonly CompilerMessage[], source: string, options?: {
-    showSourceCode?: boolean;
+    /** Include source code in the log. Either just the lines before issues or all source code */
+    showSourceCode?: 'no' | 'issues' | 'all';
+    html?: boolean;
 }): string;
 //# sourceMappingURL=format-compiler-log.d.ts.map

package/dist/lib/compiler-log/format-compiler-log.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"format-compiler-log.d.ts","sourceRoot":"","sources":["../../../src/lib/compiler-log/format-compiler-log.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,oBAAoB,CAAC;AAExD,4CAA4C;AAC5C,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,SAAS,eAAe,EAAE,EACrC,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE;IACR,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,GACA,MAAM,CAQR"}
+{"version":3,"file":"format-compiler-log.d.ts","sourceRoot":"","sources":["../../../src/lib/compiler-log/format-compiler-log.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,oBAAoB,CAAC;AAExD,4CAA4C;AAC5C,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,SAAS,eAAe,EAAE,EACrC,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE;IACR,6FAA6F;IAC7F,cAAc,CAAC,EAAE,IAAI,GAAG,QAAQ,GAAG,KAAK,CAAC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,GACA,MAAM,CA+BR"}