# glsl2wgsl

**Repository Path**: feng3d/glsl2wgsl

## Basic Information

- **Project Name**: glsl2wgsl
- **Description**: 着色器GLSL到WGSL语言的转换
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://feng3d.com/glsl2wgsl
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-28
- **Last Updated**: 2025-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 着色器GLSL到WGSL语言的转换

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

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

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

## 示例

[@feng3d/glsl2wgsl示例](https://feng3d.com/glsl2wgsl)

这里已经完整的把 [webgl2](https://github.com/WebGLSamples/WebGL2Samples.git) 中使用到的着色器都转换为了 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