着色器GLSL到WGSL语言的转换

把着色器从 GLSL100/GLSL300/GLSL450 升级到 WebGPU 着色器语言 WGSL。

当前库主要处理了 GLSL100 -> GLSL300 -> GLSL450 -> WGSL 中 GLSL450 -> WGSL 过程。

GLSL100 -> GLSL300 -> GLSL450这部分升级的内容由依赖的 @feng3d/glslup 库处理。

示例

@feng3d/glsl2wgsl示例

这里已经完整的把 webgl2 中使用到的着色器都转换为了 WebGPU 着色器。

功能

1. initGlsl2wgsl 初始化 glslang 与 tint，需要在使用前调用。
2. glsl2wgslProgram 把 GLSL100/GLSL300/GLSL450 着色器转换为 WGSL 着色器。

从 @feng3d/glslup 中继承。

1. glslup300 把 GLSL100 升级到 GLSL300。
2. glslup450 把 GLSL100/GLSL300 升级到 GLSL450。
3. glslup300Program 把 GLSL100 着色器程序转换为 GLSL300 着色器程序（包含顶点与片段着色器）。
4. glslup450Program 把 GLSL100/GLSL300 着色器程序转换为 GLSL450 着色器程序（包含顶点与片段着色器）。

安装

npm install @feng3d/glsl2wgsl

使用

import { glsl2wgslProgram, initGlsl2wgsl } from '@feng3d/glsl2wgsl';

main();

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

    const result = glsl2wgslProgram({
        vertex: `
        attribute vec4 aVertexPosition;
        attribute vec4 aVertexColor;
    
        uniform mat4 uModelViewMatrix;
        uniform mat4 uProjectionMatrix;
    
        varying lowp vec4 vColor;
    
        void main(void) {
          gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
          vColor = aVertexColor;
        }
        `,
        fragment: `
        varying lowp vec4 vColor;
    
        void main(void) {
          gl_FragColor = vColor;
        }
        `,
    });

    console.log(`WebGPU顶点着色器:`);
    console.log(result.vertex)
    console.log(`WebGPU片段着色器:`);
    console.log(result.fragment);
    console.log(`layoutInfo:`);
    console.log(result.layoutInfo);
}

参考

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