glsl_to_wgsl.js

Go to the documentation of this file.

// Install dependencies first:
//   npm install @webgpu/glslang twgsl
 
import glslangModule from "@webgpu/glslang";
import { compile } from "twgsl";
 
async function convertGLSLtoWGSL(glslCode, shaderStage = "vertex") {
  // Load glslang
  const glslang = await glslangModule();
 
  // Map shader stage string to glslang constant
  const stageMap = {
    vertex: "vertex",
    fragment: "fragment",
    compute: "compute"
  };
 
  if (!stageMap[shaderStage]) {
    throw new Error(`Invalid shader stage: ${shaderStage}`);
  }
 
  // Step 1: GLSL → SPIR-V
  const spirv = glslang.compileGLSL(glslCode, stageMap[shaderStage]);
 
  // Step 2: SPIR-V → WGSL
  const wgsl = compile(spirv);
 
  return wgsl;
}
 
// Example usage
const vertexShaderGLSL = `#version 450
layout(location = 0) in vec3 position;
void main() {
  gl_Position = vec4(position, 1.0);
}`;
 
const fragmentShaderGLSL = `#version 450
layout(location = 0) out vec4 outColor;
void main() {
  outColor = vec4(1.0, 0.0, 0.0, 1.0); // red
}`;
 
(async () => {
  const vertexWGSL = await convertGLSLtoWGSL(vertexShaderGLSL, "vertex");
  const fragmentWGSL = await convertGLSLtoWGSL(fragmentShaderGLSL, "fragment");
 
  console.log("=== Vertex Shader WGSL ===");
  console.log(vertexWGSL);
 
  console.log("\n=== Fragment Shader WGSL ===");
  console.log(fragmentWGSL);
})();