@luma.gl/shadertools 9.3.0-alpha.8 → 9.3.0

package/src/lib/shader-assembly/assemble-shaders.ts

@@ -8,23 +8,28 @@ import {getPlatformShaderDefines} from './platform-defines';
 import {injectShader, DECLARATION_INJECT_MARKER} from './shader-injections';
 import {transpileGLSLShader} from '../shader-transpiler/transpile-glsl-shader';
 import {checkShaderModuleDeprecations} from '../shader-module/shader-module';
-import {validateShaderModuleUniformLayout} from '../shader-module/shader-module-uniform-layout';
+import {
+  validateShaderModuleUniformLayout,
+  warnIfGLSLUniformBlocksAreNotStd140
+} from '../shader-module/shader-module-uniform-layout';
 import type {ShaderInjection} from './shader-injections';
 import type {ShaderModule} from '../shader-module/shader-module';
 import {ShaderHook, normalizeShaderHooks, getShaderHooks} from './shader-hooks';
 import {assert} from '../utils/assert';
 import {getShaderInfo} from '../glsl-utils/get-shader-info';
 import {getShaderBindingDebugRowsFromWGSL, type ShaderBindingDebugRow} from './wgsl-binding-debug';
+import {
+  MODULE_WGSL_BINDING_DECLARATION_REGEXES,
+  WGSL_BINDING_DECLARATION_REGEXES,
+  WGSL_EXPLICIT_BINDING_DECLARATION_REGEXES,
+  getFirstWGSLAutoBindingDeclarationMatch,
+  getWGSLBindingDeclarationMatches,
+  hasWGSLAutoBinding,
+  replaceWGSLBindingDeclarationMatches,
+  type WGSLBindingDeclarationMatch
+} from './wgsl-binding-scan';
 
 const INJECT_SHADER_DECLARATIONS = `\n\n${DECLARATION_INJECT_MARKER}\n`;
-const MODULE_WGSL_BINDING_DECLARATION_REGEXES = [
-  /@binding\(\s*(auto|\d+)\s*\)\s*@group\(\s*(\d+)\s*\)\s*(var(?:<[^>]+>)?\s+([A-Za-z_][A-Za-z0-9_]*))/g,
-  /@group\(\s*(\d+)\s*\)\s*@binding\(\s*(auto|\d+)\s*\)\s*(var(?:<[^>]+>)?\s+([A-Za-z_][A-Za-z0-9_]*))/g
-] as const;
-const WGSL_BINDING_DECLARATION_REGEXES = [
-  /@binding\(\s*(\d+)\s*\)\s*@group\(\s*(\d+)\s*\)\s*(var(?:<[^>]+>)?\s+([A-Za-z_][A-Za-z0-9_]*))/g,
-  /@group\(\s*(\d+)\s*\)\s*@binding\(\s*(\d+)\s*\)\s*(var(?:<[^>]+>)?\s+([A-Za-z_][A-Za-z0-9_]*))/g
-] as const;
 const RESERVED_APPLICATION_GROUP_0_BINDING_LIMIT = 100;
 
 /**
@@ -249,7 +254,10 @@ export function assembleShaderWGSL(
 
   // TODO - hack until shadertool modules support WebGPU
   const modulesToInject = modules;
-  const usedBindingsByGroup = getUsedBindingsByGroupFromApplicationWGSL(coreSource);
+  const applicationRelocation = relocateWGSLApplicationBindings(coreSource);
+  const usedBindingsByGroup = getUsedBindingsByGroupFromApplicationWGSL(
+    applicationRelocation.source
+  );
   const reservedBindingKeysByGroup = reserveRegisteredModuleBindings(
     modulesToInject,
     options._bindingRegistry,
@@ -299,7 +307,7 @@ export function assembleShaderWGSL(
   assembledSource += formatWGSLBindingAssignmentComments(bindingAssignments);
 
   // Add the version directive and actual source of this shader
-  assembledSource += coreSource;
+  assembledSource += applicationRelocation.source;
 
   // Apply any requested shader injections
   assembledSource = injectShader(assembledSource, stage, mainInjections);
@@ -460,6 +468,10 @@ ${getApplicationDefines(allDefines)}
     assembledSource = transpileGLSLShader(assembledSource, stage);
   }
 
+  if (language === 'glsl') {
+    warnIfGLSLUniformBlocksAreNotStd140(assembledSource, stage, log);
+  }
+
   return assembledSource.trim();
 }
 
@@ -568,13 +580,16 @@ type WGSLBindingAssignment = {
   location: number;
 };
 
+type WGSLApplicationRelocationState = {
+  sawSupportedBindingDeclaration: boolean;
+};
+
 type WGSLRelocationState = {
   sawSupportedBindingDeclaration: boolean;
   nextHintedBindingLocation: number | null;
 };
 
 type WGSLRelocationParams = {
-  isBindingFirst: boolean;
   module: ShaderModule;
   context: BindingRelocationContext;
   bindingAssignments: WGSLBindingAssignment[];
@@ -584,82 +599,115 @@ type WGSLRelocationParams = {
 function getUsedBindingsByGroupFromApplicationWGSL(source: string): Map<number, Set<number>> {
   const usedBindingsByGroup = new Map<number, Set<number>>();
 
-  for (const regex of WGSL_BINDING_DECLARATION_REGEXES) {
-    regex.lastIndex = 0;
-    let match: RegExpExecArray | null;
-    while ((match = regex.exec(source))) {
-      const isBindingFirst = regex === WGSL_BINDING_DECLARATION_REGEXES[0];
-      const location = Number(match[isBindingFirst ? 1 : 2]);
-      const group = Number(match[isBindingFirst ? 2 : 1]);
-      const name = match[4];
-
-      validateApplicationWGSLBinding(group, location, name);
-      registerUsedBindingLocation(
-        usedBindingsByGroup,
-        group,
-        location,
-        `application binding "${name}"`
-      );
-    }
+  for (const match of getWGSLBindingDeclarationMatches(
+    source,
+    WGSL_EXPLICIT_BINDING_DECLARATION_REGEXES
+  )) {
+    const location = Number(match.bindingToken);
+    const group = Number(match.groupToken);
+
+    validateApplicationWGSLBinding(group, location, match.name);
+    registerUsedBindingLocation(
+      usedBindingsByGroup,
+      group,
+      location,
+      `application binding "${match.name}"`
+    );
   }
 
   return usedBindingsByGroup;
 }
 
+function relocateWGSLApplicationBindings(source: string): {source: string} {
+  const declarationMatches = getWGSLBindingDeclarationMatches(
+    source,
+    WGSL_BINDING_DECLARATION_REGEXES
+  );
+  const usedBindingsByGroup = new Map<number, Set<number>>();
+
+  for (const declarationMatch of declarationMatches) {
+    if (declarationMatch.bindingToken === 'auto') {
+      continue;
+    }
+
+    const location = Number(declarationMatch.bindingToken);
+    const group = Number(declarationMatch.groupToken);
+
+    validateApplicationWGSLBinding(group, location, declarationMatch.name);
+    registerUsedBindingLocation(
+      usedBindingsByGroup,
+      group,
+      location,
+      `application binding "${declarationMatch.name}"`
+    );
+  }
+
+  const relocationState: WGSLApplicationRelocationState = {
+    sawSupportedBindingDeclaration: declarationMatches.length > 0
+  };
+
+  const relocatedSource = replaceWGSLBindingDeclarationMatches(
+    source,
+    WGSL_BINDING_DECLARATION_REGEXES,
+    declarationMatch =>
+      relocateWGSLApplicationBindingMatch(declarationMatch, usedBindingsByGroup, relocationState)
+  );
+
+  if (hasWGSLAutoBinding(source) && !relocationState.sawSupportedBindingDeclaration) {
+    throw new Error(
+      'Unsupported @binding(auto) declaration form in application WGSL. ' +
+        'Use adjacent "@group(N)" and "@binding(auto)" decorators followed by a bindable "var" declaration.'
+    );
+  }
+
+  return {source: relocatedSource};
+}
+
 function relocateWGSLModuleBindings(
   moduleSource: string,
   module: ShaderModule,
   context: BindingRelocationContext
 ): {source: string; bindingAssignments: WGSLBindingAssignment[]} {
   const bindingAssignments: WGSLBindingAssignment[] = [];
+  const declarationMatches = getWGSLBindingDeclarationMatches(
+    moduleSource,
+    MODULE_WGSL_BINDING_DECLARATION_REGEXES
+  );
   const relocationState: WGSLRelocationState = {
-    sawSupportedBindingDeclaration: false,
+    sawSupportedBindingDeclaration: declarationMatches.length > 0,
     nextHintedBindingLocation:
       typeof module.firstBindingSlot === 'number' ? module.firstBindingSlot : null
   };
 
-  let relocatedSource = relocateWGSLModuleBindingsWithRegex(
+  const relocatedSource = replaceWGSLBindingDeclarationMatches(
     moduleSource,
-    MODULE_WGSL_BINDING_DECLARATION_REGEXES[0],
-    {isBindingFirst: true, module, context, bindingAssignments, relocationState}
-  );
-  relocatedSource = relocateWGSLModuleBindingsWithRegex(
-    relocatedSource,
-    MODULE_WGSL_BINDING_DECLARATION_REGEXES[1],
-    {isBindingFirst: false, module, context, bindingAssignments, relocationState}
+    MODULE_WGSL_BINDING_DECLARATION_REGEXES,
+    declarationMatch =>
+      relocateWGSLModuleBindingMatch(declarationMatch, {
+        module,
+        context,
+        bindingAssignments,
+        relocationState
+      })
   );
 
-  if (moduleSource.includes('@binding(auto)') && !relocationState.sawSupportedBindingDeclaration) {
+  if (hasWGSLAutoBinding(moduleSource) && !relocationState.sawSupportedBindingDeclaration) {
     throw new Error(
       `Unsupported @binding(auto) declaration form in module "${module.name}". ` +
-        'Use "@group(N) @binding(auto) var ..." or "@binding(auto) @group(N) var ..." on a single line.'
+        'Use adjacent "@group(N)" and "@binding(auto)" decorators followed by a bindable "var" declaration.'
     );
   }
 
   return {source: relocatedSource, bindingAssignments};
 }
 
-function relocateWGSLModuleBindingsWithRegex(
-  source: string,
-  regex: RegExp,
-  params: WGSLRelocationParams
-): string {
-  return source.replace(regex, (...replaceArguments) =>
-    relocateWGSLModuleBindingMatch(replaceArguments, params)
-  );
-}
-
 function relocateWGSLModuleBindingMatch(
-  replaceArguments: unknown[],
+  declarationMatch: WGSLBindingDeclarationMatch,
   params: WGSLRelocationParams
 ): string {
-  const {isBindingFirst, module, context, bindingAssignments, relocationState} = params;
-  relocationState.sawSupportedBindingDeclaration = true;
+  const {module, context, bindingAssignments, relocationState} = params;
 
-  const match = replaceArguments[0] as string;
-  const bindingToken = replaceArguments[isBindingFirst ? 1 : 2] as string;
-  const groupToken = replaceArguments[isBindingFirst ? 2 : 1] as string;
-  const name = replaceArguments[4] as string;
+  const {match, bindingToken, groupToken, name} = declarationMatch;
   const group = Number(groupToken);
 
   if (bindingToken === 'auto') {
@@ -709,6 +757,30 @@ function relocateWGSLModuleBindingMatch(
   return match;
 }
 
+function relocateWGSLApplicationBindingMatch(
+  declarationMatch: WGSLBindingDeclarationMatch,
+  usedBindingsByGroup: Map<number, Set<number>>,
+  relocationState: WGSLApplicationRelocationState
+): string {
+  const {match, bindingToken, groupToken, name} = declarationMatch;
+  const group = Number(groupToken);
+
+  if (bindingToken === 'auto') {
+    const location = allocateApplicationAutoBindingLocation(group, usedBindingsByGroup);
+    validateApplicationWGSLBinding(group, location, name);
+    registerUsedBindingLocation(
+      usedBindingsByGroup,
+      group,
+      location,
+      `application binding "${name}"`
+    );
+    return match.replace(/@binding\(\s*auto\s*\)/, `@binding(${location})`);
+  }
+
+  relocationState.sawSupportedBindingDeclaration = true;
+  return match;
+}
+
 function reserveRegisteredModuleBindings(
   modules: ShaderModule[],
   bindingRegistry: Map<string, number> | undefined,
@@ -775,16 +847,14 @@ function getModuleWGSLBindingDeclarations(module: ShaderModule): {name: string;
   const declarations: {name: string; group: number}[] = [];
   const moduleSource = module.source || '';
 
-  for (const regex of MODULE_WGSL_BINDING_DECLARATION_REGEXES) {
-    regex.lastIndex = 0;
-    let match: RegExpExecArray | null;
-    while ((match = regex.exec(moduleSource))) {
-      const isBindingFirst = regex === MODULE_WGSL_BINDING_DECLARATION_REGEXES[0];
-      declarations.push({
-        name: match[4],
-        group: Number(match[isBindingFirst ? 2 : 1])
-      });
-    }
+  for (const match of getWGSLBindingDeclarationMatches(
+    moduleSource,
+    MODULE_WGSL_BINDING_DECLARATION_REGEXES
+  )) {
+    declarations.push({
+      name: match.name,
+      group: Number(match.groupToken)
+    });
   }
 
   return declarations;
@@ -850,10 +920,45 @@ function allocateAutoBindingLocation(
   return nextBinding;
 }
 
+function allocateApplicationAutoBindingLocation(
+  group: number,
+  usedBindingsByGroup: Map<number, Set<number>>
+): number {
+  const usedBindings = usedBindingsByGroup.get(group) || new Set<number>();
+  let nextBinding = 0;
+
+  while (usedBindings.has(nextBinding)) {
+    nextBinding++;
+  }
+
+  return nextBinding;
+}
+
 function assertNoUnresolvedAutoBindings(source: string): void {
-  if (/@binding\(\s*auto\s*\)/.test(source)) {
-    throw new Error('Unresolved @binding(auto) remained in assembled WGSL source.');
+  const unresolvedBinding = getFirstWGSLAutoBindingDeclarationMatch(
+    source,
+    MODULE_WGSL_BINDING_DECLARATION_REGEXES
+  );
+  if (!unresolvedBinding) {
+    return;
+  }
+
+  const moduleName = getWGSLModuleNameAtIndex(source, unresolvedBinding.index);
+  if (moduleName) {
+    throw new Error(
+      `Unresolved @binding(auto) for module "${moduleName}" binding "${unresolvedBinding.name}" remained in assembled WGSL source.`
+    );
+  }
+
+  if (isInApplicationWGSLSection(source, unresolvedBinding.index)) {
+    throw new Error(
+      `Unresolved @binding(auto) for application binding "${unresolvedBinding.name}" remained in assembled WGSL source.`
+    );
   }
+
+  throw new Error(
+    `Unresolved @binding(auto) remained in assembled WGSL source near "${formatWGSLSourceSnippet(unresolvedBinding.match)}".`
+  );
 }
 
 function formatWGSLBindingAssignmentComments(bindingAssignments: WGSLBindingAssignment[]): string {
@@ -873,6 +978,29 @@ function getBindingRegistryKey(group: number, moduleName: string, bindingName: s
   return `${group}:${moduleName}:${bindingName}`;
 }
 
+function getWGSLModuleNameAtIndex(source: string, index: number): string | undefined {
+  const moduleHeaderRegex = /^\/\/ ----- MODULE ([^\n]+) ---------------$/gm;
+  let moduleName: string | undefined;
+  let match: RegExpExecArray | null;
+
+  match = moduleHeaderRegex.exec(source);
+  while (match && match.index <= index) {
+    moduleName = match[1];
+    match = moduleHeaderRegex.exec(source);
+  }
+
+  return moduleName;
+}
+
+function isInApplicationWGSLSection(source: string, index: number): boolean {
+  const injectionMarkerIndex = source.indexOf(INJECT_SHADER_DECLARATIONS);
+  return injectionMarkerIndex >= 0 ? index > injectionMarkerIndex : true;
+}
+
+function formatWGSLSourceSnippet(source: string): string {
+  return source.replace(/\s+/g, ' ').trim();
+}
+
 /*
 function getHookFunctions(
   hookFunctions: Record<string, HookFunction>,

package/src/lib/shader-assembly/wgsl-binding-debug.ts

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import {WGSL_BINDABLE_VARIABLE_PATTERN, maskWGSLComments} from './wgsl-binding-scan';
+
 type ShaderBindingAssignment = {
   moduleName: string;
   name: string;
@@ -10,8 +12,14 @@ type ShaderBindingAssignment = {
 };
 
 const WGSL_BINDING_DEBUG_REGEXES = [
-  /@binding\(\s*(\d+)\s*\)\s*@group\(\s*(\d+)\s*\)\s*var(?:<([^>]+)>)?\s+([A-Za-z_][A-Za-z0-9_]*)\s*:\s*([^;]+);/g,
-  /@group\(\s*(\d+)\s*\)\s*@binding\(\s*(\d+)\s*\)\s*var(?:<([^>]+)>)?\s+([A-Za-z_][A-Za-z0-9_]*)\s*:\s*([^;]+);/g
+  new RegExp(
+    `@binding\\(\\s*(\\d+)\\s*\\)\\s*@group\\(\\s*(\\d+)\\s*\\)\\s*${WGSL_BINDABLE_VARIABLE_PATTERN}\\s*:\\s*([^;]+);`,
+    'g'
+  ),
+  new RegExp(
+    `@group\\(\\s*(\\d+)\\s*\\)\\s*@binding\\(\\s*(\\d+)\\s*\\)\\s*${WGSL_BINDABLE_VARIABLE_PATTERN}\\s*:\\s*([^;]+);`,
+    'g'
+  )
 ] as const;
 
 /** One debug row describing a WGSL binding in the assembled shader source. */
@@ -54,6 +62,7 @@ export function getShaderBindingDebugRowsFromWGSL(
   source: string,
   bindingAssignments: ShaderBindingAssignment[] = []
 ): ShaderBindingDebugRow[] {
+  const maskedSource = maskWGSLComments(source);
   const assignmentMap = new Map<string, string>();
   for (const bindingAssignment of bindingAssignments) {
     assignmentMap.set(
@@ -70,7 +79,8 @@ export function getShaderBindingDebugRowsFromWGSL(
   for (const regex of WGSL_BINDING_DEBUG_REGEXES) {
     regex.lastIndex = 0;
     let match: RegExpExecArray | null;
-    while ((match = regex.exec(source))) {
+    match = regex.exec(maskedSource);
+    while (match) {
       const isBindingFirst = regex === WGSL_BINDING_DEBUG_REGEXES[0];
       const binding = Number(match[isBindingFirst ? 1 : 2]);
       const group = Number(match[isBindingFirst ? 2 : 1]);
@@ -90,6 +100,7 @@ export function getShaderBindingDebugRowsFromWGSL(
           resourceType
         })
       );
+      match = regex.exec(maskedSource);
     }
   }
 

package/src/lib/shader-assembly/wgsl-binding-scan.ts

@@ -0,0 +1,228 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export const WGSL_BINDABLE_VARIABLE_PATTERN =
+  '(?:var<\\s*(uniform|storage(?:\\s*,\\s*[A-Za-z_][A-Za-z0-9_]*)?)\\s*>|var)\\s+([A-Za-z_][A-Za-z0-9_]*)';
+const WGSL_BINDING_DECLARATION_SEPARATOR_PATTERN = '\\s*';
+
+export const MODULE_WGSL_BINDING_DECLARATION_REGEXES = [
+  new RegExp(
+    `@binding\\(\\s*(auto|\\d+)\\s*\\)${WGSL_BINDING_DECLARATION_SEPARATOR_PATTERN}@group\\(\\s*(\\d+)\\s*\\)${WGSL_BINDING_DECLARATION_SEPARATOR_PATTERN}${WGSL_BINDABLE_VARIABLE_PATTERN}`,
+    'g'
+  ),
+  new RegExp(
+    `@group\\(\\s*(\\d+)\\s*\\)${WGSL_BINDING_DECLARATION_SEPARATOR_PATTERN}@binding\\(\\s*(auto|\\d+)\\s*\\)${WGSL_BINDING_DECLARATION_SEPARATOR_PATTERN}${WGSL_BINDABLE_VARIABLE_PATTERN}`,
+    'g'
+  )
+] as const;
+
+export const WGSL_BINDING_DECLARATION_REGEXES = [
+  new RegExp(
+    `@binding\\(\\s*(auto|\\d+)\\s*\\)${WGSL_BINDING_DECLARATION_SEPARATOR_PATTERN}@group\\(\\s*(\\d+)\\s*\\)${WGSL_BINDING_DECLARATION_SEPARATOR_PATTERN}${WGSL_BINDABLE_VARIABLE_PATTERN}`,
+    'g'
+  ),
+  new RegExp(
+    `@group\\(\\s*(\\d+)\\s*\\)${WGSL_BINDING_DECLARATION_SEPARATOR_PATTERN}@binding\\(\\s*(auto|\\d+)\\s*\\)${WGSL_BINDING_DECLARATION_SEPARATOR_PATTERN}${WGSL_BINDABLE_VARIABLE_PATTERN}`,
+    'g'
+  )
+] as const;
+
+export const WGSL_EXPLICIT_BINDING_DECLARATION_REGEXES = [
+  new RegExp(
+    `@binding\\(\\s*(\\d+)\\s*\\)${WGSL_BINDING_DECLARATION_SEPARATOR_PATTERN}@group\\(\\s*(\\d+)\\s*\\)${WGSL_BINDING_DECLARATION_SEPARATOR_PATTERN}${WGSL_BINDABLE_VARIABLE_PATTERN}`,
+    'g'
+  ),
+  new RegExp(
+    `@group\\(\\s*(\\d+)\\s*\\)${WGSL_BINDING_DECLARATION_SEPARATOR_PATTERN}@binding\\(\\s*(\\d+)\\s*\\)${WGSL_BINDING_DECLARATION_SEPARATOR_PATTERN}${WGSL_BINDABLE_VARIABLE_PATTERN}`,
+    'g'
+  )
+] as const;
+
+const WGSL_AUTO_BINDING_DECLARATION_REGEXES = [
+  new RegExp(
+    `@binding\\(\\s*(auto)\\s*\\)\\s*@group\\(\\s*(\\d+)\\s*\\)\\s*${WGSL_BINDABLE_VARIABLE_PATTERN}`,
+    'g'
+  ),
+  new RegExp(
+    `@group\\(\\s*(\\d+)\\s*\\)\\s*@binding\\(\\s*(auto)\\s*\\)\\s*${WGSL_BINDABLE_VARIABLE_PATTERN}`,
+    'g'
+  ),
+  new RegExp(
+    `@binding\\(\\s*(auto)\\s*\\)\\s*@group\\(\\s*(\\d+)\\s*\\)(?:[\\s\\n\\r]*@[A-Za-z_][^\\n\\r]*)*[\\s\\n\\r]*${WGSL_BINDABLE_VARIABLE_PATTERN}`,
+    'g'
+  ),
+  new RegExp(
+    `@group\\(\\s*(\\d+)\\s*\\)\\s*@binding\\(\\s*(auto)\\s*\\)(?:[\\s\\n\\r]*@[A-Za-z_][^\\n\\r]*)*[\\s\\n\\r]*${WGSL_BINDABLE_VARIABLE_PATTERN}`,
+    'g'
+  )
+] as const;
+
+export type WGSLBindingDeclarationMatch = {
+  match: string;
+  index: number;
+  length: number;
+  bindingToken: string;
+  groupToken: string;
+  accessDeclaration?: string;
+  name: string;
+};
+
+export function maskWGSLComments(source: string): string {
+  const maskedCharacters = source.split('');
+  let index = 0;
+  let blockCommentDepth = 0;
+  let inLineComment = false;
+  let inString = false;
+  let isEscaped = false;
+
+  while (index < source.length) {
+    const character = source[index];
+    const nextCharacter = source[index + 1];
+
+    if (inString) {
+      if (isEscaped) {
+        isEscaped = false;
+      } else if (character === '\\') {
+        isEscaped = true;
+      } else if (character === '"') {
+        inString = false;
+      }
+      index++;
+      continue;
+    }
+
+    if (inLineComment) {
+      if (character === '\n' || character === '\r') {
+        inLineComment = false;
+      } else {
+        maskedCharacters[index] = ' ';
+      }
+      index++;
+      continue;
+    }
+
+    if (blockCommentDepth > 0) {
+      if (character === '/' && nextCharacter === '*') {
+        maskedCharacters[index] = ' ';
+        maskedCharacters[index + 1] = ' ';
+        blockCommentDepth++;
+        index += 2;
+        continue;
+      }
+
+      if (character === '*' && nextCharacter === '/') {
+        maskedCharacters[index] = ' ';
+        maskedCharacters[index + 1] = ' ';
+        blockCommentDepth--;
+        index += 2;
+        continue;
+      }
+
+      if (character !== '\n' && character !== '\r') {
+        maskedCharacters[index] = ' ';
+      }
+      index++;
+      continue;
+    }
+
+    if (character === '"') {
+      inString = true;
+      index++;
+      continue;
+    }
+
+    if (character === '/' && nextCharacter === '/') {
+      maskedCharacters[index] = ' ';
+      maskedCharacters[index + 1] = ' ';
+      inLineComment = true;
+      index += 2;
+      continue;
+    }
+
+    if (character === '/' && nextCharacter === '*') {
+      maskedCharacters[index] = ' ';
+      maskedCharacters[index + 1] = ' ';
+      blockCommentDepth = 1;
+      index += 2;
+      continue;
+    }
+
+    index++;
+  }
+
+  return maskedCharacters.join('');
+}
+
+export function getWGSLBindingDeclarationMatches(
+  source: string,
+  regexes: readonly RegExp[]
+): WGSLBindingDeclarationMatch[] {
+  const maskedSource = maskWGSLComments(source);
+  const matches: WGSLBindingDeclarationMatch[] = [];
+
+  for (const regex of regexes) {
+    regex.lastIndex = 0;
+    let match: RegExpExecArray | null;
+    match = regex.exec(maskedSource);
+    while (match) {
+      const isBindingFirst = regex === regexes[0];
+      const index = match.index;
+      const length = match[0].length;
+      matches.push({
+        match: source.slice(index, index + length),
+        index,
+        length,
+        bindingToken: match[isBindingFirst ? 1 : 2],
+        groupToken: match[isBindingFirst ? 2 : 1],
+        accessDeclaration: match[3]?.trim(),
+        name: match[4]
+      });
+      match = regex.exec(maskedSource);
+    }
+  }
+
+  return matches.sort((left, right) => left.index - right.index);
+}
+
+export function replaceWGSLBindingDeclarationMatches(
+  source: string,
+  regexes: readonly RegExp[],
+  replacer: (match: WGSLBindingDeclarationMatch) => string
+): string {
+  const matches = getWGSLBindingDeclarationMatches(source, regexes);
+  if (!matches.length) {
+    return source;
+  }
+
+  let relocatedSource = '';
+  let lastIndex = 0;
+
+  for (const match of matches) {
+    relocatedSource += source.slice(lastIndex, match.index);
+    relocatedSource += replacer(match);
+    lastIndex = match.index + match.length;
+  }
+
+  relocatedSource += source.slice(lastIndex);
+  return relocatedSource;
+}
+
+export function hasWGSLAutoBinding(source: string): boolean {
+  return /@binding\(\s*auto\s*\)/.test(maskWGSLComments(source));
+}
+
+export function getFirstWGSLAutoBindingDeclarationMatch(
+  source: string,
+  regexes: readonly RegExp[]
+): WGSLBindingDeclarationMatch | undefined {
+  const autoBindingRegexes =
+    regexes === MODULE_WGSL_BINDING_DECLARATION_REGEXES ||
+    regexes === WGSL_BINDING_DECLARATION_REGEXES
+      ? WGSL_AUTO_BINDING_DECLARATION_REGEXES
+      : regexes;
+
+  return getWGSLBindingDeclarationMatches(source, autoBindingRegexes).find(
+    declarationMatch => declarationMatch.bindingToken === 'auto'
+  );
+}

package/src/lib/shader-generator/glsl/generate-glsl.ts

@@ -21,11 +21,11 @@ function generateGLSLUniformDeclarations(
 ): string {
   const glsl: string[] = [];
 
-  // => uniform UniformBlockName {
+  // => layout(std140) uniform UniformBlockName {
   switch (options.uniforms) {
     case 'scoped-interface-blocks':
     case 'unscoped-interface-blocks':
-      glsl.push(`uniform ${capitalize(module.name)} {`);
+      glsl.push(`layout(std140) uniform ${capitalize(module.name)} {`);
       break;
     case 'uniforms':
     // ignore
@@ -41,11 +41,11 @@ function generateGLSLUniformDeclarations(
     const glslUniformType = getGLSLUniformType(uniformFormat as UniformFormat);
     switch (options.uniforms) {
       case 'scoped-interface-blocks':
-        // => uniform UniformBlockName {
+        // => layout(std140) uniform UniformBlockName {
         glsl.push(`  ${glslUniformType} ${uniformName};`);
         break;
       case 'unscoped-interface-blocks':
-        // => uniform UniformBlockName {
+        // => layout(std140) uniform UniformBlockName {
         glsl.push(`  ${glslUniformType} ${module.name}_${uniformName};`);
         break;
       case 'uniforms':