wgsl_reflect

import { WgslReflect } from 'wgsl_reflect/wgsl_reflect.module.js'; const shaderCode = ` struct ViewUniforms { viewProjection: mat4x4<f32>; }; struct ModelUniforms { model: mat4x4<f32>; color: vec4<f32>; intensity: f32; }; @group(0) @binding(0) var<uniform> viewUniforms: ViewUniforms; @group(0) @binding(1) var<uniform> modelUniforms: ModelUniforms; @group(0) @binding(2) var u_sampler: sampler; @group(0) @binding(3) var u_texture: texture_2d<f32>; @vertex fn vs_main(@builtin(vertex_index) in_vertex_index: u32) -> @builtin(position) vec4<f32> { _ = in_vertex_index; // Use to avoid unused variable warning _ = u_sampler; _ = u_texture; return viewUniforms.viewProjection[0]; } @fragment fn fs_main(@builtin(position) fragCoord: vec4<f32>) -> @location(0) vec4<f32> { _ = fragCoord; return modelUniforms.color * modelUniforms.intensity; } `; const reflect = new WgslReflect(shaderCode); console.log('--- Reflected Uniforms ---'); reflect.uniforms.forEach(u => { console.log(` Name: ${u.name}, Group: ${u.group}, Binding: ${u.binding}, Size: ${u.size} bytes`); }); const viewUniformsStruct = reflect.getStructInfo('ViewUniforms'); if (viewUniformsStruct) { console.log('\n--- ViewUniforms Struct Members ---'); viewUniformsStruct.members.forEach(m => { console.log(` Name: ${m.name}, Type: ${m.type.name}, Offset: ${m.offset}, Size: ${m.size} bytes`); }); } console.log('\n--- Entry Points ---'); for (const entryType in reflect.entry) { reflect.entry[entryType].forEach(e => console.log(` ${entryType}: ${e.name}`)); } // This quickstart demonstrates how to parse a WGSL shader, extract its uniform buffer layouts, // individual resource bindings, and entry point functions. It prints detailed information // about the uniform variables, their struct members, and the shader's entry points, // which is crucial for setting up WebGPU pipelines dynamically.