着色器GLSL到WGSL语言的转换

代码从 Babylon.js 中获得。

注： 目前只能用于浏览器中。

使用方式

import { glsl2wgsl, initGlsl2wgsl } from 'glsl2wgsl';

main();

async function main()
{
    // 初始化
    await initGlsl2wgsl();

    const glslVertex = `
    #version 450

    const vec2 pos[4] = vec2[4](vec2(-1.0f, 1.0f), vec2(1.0f, 1.0f), vec2(-1.0f, -1.0f), vec2(1.0f, -1.0f));
    const vec2 tex[4] = vec2[4](vec2(0.0f, 0.0f), vec2(1.0f, 0.0f), vec2(0.0f, 1.0f), vec2(1.0f, 1.0f));

    layout(location = 0) out vec2 vTex;

    void main() {
        vTex = tex[gl_VertexIndex];
        gl_Position = vec4(pos[gl_VertexIndex], 0.0, 1.0);
    }
    `;
    const glslFragment = `
    #version 450

    layout(set = 0, binding = 0) uniform sampler imgSampler;
    layout(set = 0, binding = 1) uniform texture2D img;

    layout(location = 0) in vec2 vTex;
    layout(location = 0) out vec4 outColor;

    void main() {
        outColor = texture(sampler2D(img, imgSampler), vTex);
    }`;

    // 转换顶点着色器
    const wgslVertex = glsl2wgsl(glslVertex, 'vertex');
    // 转换片段着色器
    const wgslFragment = glsl2wgsl(glslFragment, 'fragment');

    console.log(`WebGPU顶点着色器`);
    console.log(wgslVertex);
    console.log(`WebGPU片段着色器`);
    console.log(wgslFragment);
}

参考

1. https://github.com/BabylonJS/Babylon.js