example.html

<html>
  <body>
    <h1>WGSL Reflection Library</h1>
    <h1>Shader</h1>
    <textarea id="shader" style="width: 100%; height: 300px"></textarea>
    <button id="parse" style="margin-top: 10px; width: 100px; background-color: #afa">COMPILE</button>
    <h1>Reflection Info</h1>
    <div
      id="shader_info"
      style="width: 100%; background-color: #eee; padding: 10px; border: 1px solid #888;"></div>

    <script type="module">
      import * as wgsl from "./wgsl_reflect.module.js";

      const shader = `
struct ViewUniforms {
    viewProjection: mat4x4<f32>
}

struct ModelUniforms {
    model: mat4x4<f32>,
    color: vec4<f32>,
    intensity: f32
}

@binding(0) @group(0) var<uniform> viewUniforms: ViewUniforms;
@binding(1) @group(0) var<uniform> modelUniforms: ModelUniforms;
@binding(2) @group(0) var u_sampler: sampler;
@binding(3) @group(0) var u_texture: texture_2d<f32>;

struct VertexInput {
    @location(0) a_position: vec3<f32>,
    @location(1) a_normal: vec3<f32>,
    @location(2) a_color: vec4<f32>,
    @location(3) a_uv: vec2<f32>
}

struct VertexOutput {
    @builtin(position) Position: vec4<f32>,
    @location(0) v_position: vec4<f32>,
    @location(1) v_normal: vec3<f32>,
    @location(2) v_color: vec4<f32>,
    @location(3) v_uv: vec2<f32>
}

@vertex
fn main(input: VertexInput) -> VertexOutput {
    var output: VertexOutput;
    output.Position = viewUniforms.viewProjection * modelUniforms.model * vec4<f32>(input.a_position, 1.0);
    output.v_position = output.Position;
    output.v_normal = input.a_normal;
    output.v_color = input.a_color * modelUniforms.color * modelUniforms.intensity;
    output.v_uv = input.a_uv;
    return output;
}`;

      const shadercode = document.getElementById("shader");
      shadercode.value = shader;

      const shaderInfo = document.getElementById("shader_info");

      function getTypeName(type) {
        if (type === null) {
          return "i32";
        }
        let name = type.name;
        if (type.format) {
          name += `&lt;${getTypeName(type.format)}&gt;`;
        }
        return name;
      }

      function getStructInfo(type, offset) {
        let info = "";
        info += `<li><b>Size:</b> ${type.size}</li>`;
        info += `<li><b>Members:</b></li>`;
        info += "<ul>";
        for (let m in type.members) {
          info += `<li><b>${type.members[m].name}</b> : <b>${getTypeName(type.members[m].type)}</b></li>`;
          info += "<ul>";
          info += `<li><b>Offset:</b>${type.members[m].offset}</li>`;
          if (type.members[m].type.isArray) {
            info += getArrayInfo(type.members[m].type, offset + type.members[m].offset);
          } else if (type.members[m].type.isStruct) {
            info += `<li><b>Size:</b>${type.members[m].size}</li>`;
            info += getStructInfo(type.members[m].type, offset + type.members[m].offset);
          } else {
            info += `<li><b>Size:</b>${type.members[m].size}</li>`;
          }
          info += "</ul>";
        }
        info += "</ul>";
        return info;
      }

      function getArrayInfo(type, offset) {
        let info = "";
        info += `<li><b>Size:</b> ${type.size}</li>`;
        info += `<li><b>Count:</b> ${type.count}</li>`;
        info += `<li><b>Stride:</b> ${type.stride}</li>`;
        info += `<li><b>Format:</b> <b>${getTypeName(type.format)}</b></li>`;
        info += "<ul>";
        if (type.format.isArray) {
          info += getArrayInfo(type.format, offset);
        } else if (type.format.isStruct) {
          info += getStructInfo(type.format, offset);
        }
        info += "</ul>";
        return info;
      }

      function parse() {
        let info = "";
        const t1 = performance.now();
        let reflect;
        try {
          reflect = new wgsl.WgslReflect(shadercode.value);
        } catch (e) {
          let msg = e.message;
          if (e.token) {
            msg += ` Line ${e.token.line}. Found: '${e.token}'.`;
          }
          shaderInfo.innerHTML = `<h2 style="color:#f00;">${msg}</h2>`;
          return;
        }
        const t2 = performance.now();

        info += "<b>Entry Points</b>";
        info += "<ul>";
        for (let s in reflect.entry) {
          for (let e of reflect.entry[s]) {
            info += `<li><b>${e.name}</b>: ${s}</li>`;
            if (e.inputs.length) {
              info += "<ul>";
              info += "<li><b>Inputs</b></li>";
              info += "<ul>";
              for (let ei of e.inputs) {
                info += `<li><b>${ei.name}</b>: <b>${getTypeName(ei.type)}</b>  location:<b> ${ei.location}</b></li>`;
              }
              info += "</ul>";
              info += "</ul>";
            }
          }
        }
        info += "</ul>";

        if (reflect.overrides.length) {
          info += `<b>Overrides</b><p>`;
          info += "<ul>";
          for (const o of reflect.overrides) {
            info += `<li><b>${o.name}</b>: <b>${getTypeName(o.type)}</b></li>`;
            let first = true;
            for (const f of reflect.functions) {
              if (f.overrides.indexOf(o) !== -1) {
                if (first) {
                  info += `<ul><li><b>Functions</b></li><ul>`;
                  first = false;
                }
                info += `<li><b>Function:</b> ${f.name}</li>`;
              }
            }
            if (!first) {
              info += "</ul></ul>";
            }
          }
          info += "</ul>";
        }

        if (reflect.textures.length) {
          info += `<b>Textures</b><p>`;
          info += "<ul>";
          for (let s of reflect.textures) {
            info += `<li><b>${s.name}</b>: <b>${s.type.name}</b></li>`;
            info += "<ul>";
            info += `<li><b>Group:</b> ${s.group}</li>`;
            info += `<li><b>Binding:</b> ${s.binding}</li>`;
            info += `<li><b>Format:</b> ${s.type?.format?.name ?? "<unknown>"}</li>`;
            info += `<li><b>Access:</b> ${s.access}</li>`;
            info += "</ul>";
          }
          info += "</ul>";
        }

        if (reflect.samplers.length) {
          info += `<b>Samplers</b><p>`;
          info += "<ul>";
          for (let s of reflect.samplers) {
            info += `<li><b>${s.name}</b>: <b>${s.type.name}</b></li>`;
            info += "<ul>";
            info += `<li><b>Group:</b> ${s.group}</li>`;
            info += `<li><b>Binding:</b> ${s.binding}</li>`;
            info += "</ul>";
          }
          info += "</ul>";
        }

        if (reflect.storage.length) {
          info += `<b>Storage Buffers</b><p>`;
          info += "<ul>";
          for (let s of reflect.storage) {
            info += `<li><b>${s.name}</b>: <b>${s.type.name}</b></li>`;
            info += "<ul>";
            info += `<li><b>Group:</b> ${s.group}</li>`;
            info += `<li><b>Binding:</b> ${s.binding}</li>`;
            info += `<li><b>Access:</b> ${s.access}</li>`;
            if (s.type.isStruct) {
              info += getStructInfo(s.type, 0);
            } else if (s.type.isArray) {
              info += getArrayInfo(s.type, 0);
            }
            info += "</ul>";
          }
          info += "</ul>";
        }

        if (reflect.uniforms.length) {
          info += `<b>Uniforms</b><p>`;
          info += "<ul>";
          for (let s of reflect.uniforms) {
            info += `<li><b>${s.name}</b>: <b>${s.type.name}</b></li>`;

            info += "<ul>";
            info += `<li><b>Buffer Size:</b> ${s.type.size}</li>`;
            info += `<li><b>Group:</b> ${s.group}</li>`;
            info += `<li><b>Binding:</b> ${s.binding}</li>`;
            if (s.type.isStruct) {
              info += getStructInfo(s.type, 0);
            } else if (s.type.isArray) {
              info += getArrayInfo(s.type, 0);
            }
            info += "</ul>";
          }
          info += "</ul>";
        }

        shaderInfo.innerHTML = info;
      }
      parse();

      const parseButton = document.getElementById("parse");
      parseButton.addEventListener("click", function () {
        parse();
      });
    </script>
  </body>
</html>