# glslup

**Repository Path**: feng3d/glslup

## Basic Information

- **Project Name**: glslup
- **Description**: 一个GLSL升级工具，可以将 GLSL100/GLSL300 到 GLSL450 版本。

主要用于feng3d引擎中WebGL着色器升级为WebGPU着色器。
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://feng3d.com/glslup/
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 升级 GLSL 着色器到更高版本

@feng3d/glslup是一个GLSL升级工具，可以将 GLSL100/GLSL300 到 GLSL450 版本。

## 测试地址

[测试地址](https://feng3d.com/glslup)

## 使用场景
有些WebGL项目需要迁移到WebGPU进行渲染，只有GLSL的高级版本才能够通过某些工具进行转换为WebGPU可以使用的着色语言WGSL。

GLSL转换WGSL流程为 `glsl100 -> glsl300 -> glsl450 -> wgsl`。

WebGL1.0支持glsl100；
WebGL2.0支持glsl300；

当前库负责处理 `glsl100 -> glsl300 -> glsl450` 这部分升级工作。另外的 `glsl450 -> wgsl` 工作交由 @feng3d/glsl2wgsl 库进行处理。

## 功能
1. 升级 glsl100 到 glsl300
2. 升级 glsl300 到 glsl450
3. 处理 #define #ifdef 等预处理器指令，让代码更加简化。

## 安装

```
npm install @feng3d/glslup
```

## 用法

```
import { glslup450 } from "@feng3d/glslup";

(async () => {

    const glsl100 = `
    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;
    }
    `;

    const glsl450 = glslup450(glsl100); // 升级为glsl450

    console.log(glsl450.code);
    // 输出内容为：
    //     #version 450
    //     layout(location = 0)in vec4 aVertexPosition;
    //     layout(location = 1)in vec4 aVertexColor;
    //     layout(set = 0, binding = 0)uniform Unifroms
    // {
    //     mat4 uModelViewMatrix;
    //     mat4 uProjectionMatrix;
    // };layout(location = 0)out lowp vec4 vColor;
    //     void main(void) {
    //     gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
    //     vColor = aVertexColor;
    //     }

    console.log(glsl450.layoutInfo);    // 输出着色器的布局信息，包含了uniforms、attributes、varyings的信息，便于后续的WebGPU着色器代码生成。
})();
```

## 不支持

整数类型采样器， usampler ，处理过程遇到些问题不好处理。

```
#version 300 es
precision highp float;
precision highp int;
precision highp usampler2D;

uniform usampler2D diffuse;

in vec2 v_st;

out vec4 color;

void main()
{
    uvec4 intColor = texture(diffuse, v_st) / 32u * 32u;
    color = vec4(intColor) / 255.0;
}
```
texelFetchOffset
```
#version 300 es
        precision highp float;
        precision highp int;

        uniform sampler2D diffuse;

        in vec2 v_st;

        out vec4 color;

        vec4 catmullRom(in vec4 A, in vec4 B, in vec4 C, in vec4 D, in float s)
        {
            mat4 catmullRomMatrix = mat4(
                vec4(-1.0, 2.0,-1.0, 0.0),
                vec4( 3.0,-5.0, 0.0, 2.0),
                vec4(-3.0, 4.0, 1.0, 0.0),
                vec4( 1.0,-1.0, 0.0, 0.0));

            vec4 expo = vec4(s * s * s, s * s, s, 1.0);

            return 0.5 * expo * catmullRomMatrix * mat4(
                A[0], B[0], C[0], D[0],
                A[1], B[1], C[1], D[1],
                A[2], B[2], C[2], D[2],
                A[3], B[3], C[3], D[3]);
        }

        vec4 textureCatmullrom(in sampler2D sampler, in vec2 st)
        {
            ivec2 size = textureSize(sampler, 0);
            ivec2 texelCoord = ivec2(vec2(size) * st);

            vec4 texel00 = texelFetchOffset(sampler, texelCoord, 0, ivec2(-1,-1));
            vec4 texel10 = texelFetchOffset(sampler, texelCoord, 0, ivec2( 0,-1));
            vec4 texel20 = texelFetchOffset(sampler, texelCoord, 0, ivec2( 1,-1));
            vec4 texel30 = texelFetchOffset(sampler, texelCoord, 0, ivec2( 2,-1));

            vec4 texel01 = texelFetchOffset(sampler, texelCoord, 0, ivec2(-1, 0));
            vec4 texel11 = texelFetchOffset(sampler, texelCoord, 0, ivec2( 0, 0));
            vec4 texel21 = texelFetchOffset(sampler, texelCoord, 0, ivec2( 1, 0));
            vec4 texel31 = texelFetchOffset(sampler, texelCoord, 0, ivec2( 2, 0));

            vec4 texel02 = texelFetchOffset(sampler, texelCoord, 0, ivec2(-1, 1));
            vec4 texel12 = texelFetchOffset(sampler, texelCoord, 0, ivec2( 0, 1));
            vec4 texel22 = texelFetchOffset(sampler, texelCoord, 0, ivec2( 1, 1));
            vec4 texel32 = texelFetchOffset(sampler, texelCoord, 0, ivec2( 2, 1));

            vec4 texel03 = texelFetchOffset(sampler, texelCoord, 0, ivec2(-1, 2));
            vec4 texel13 = texelFetchOffset(sampler, texelCoord, 0, ivec2( 0, 2));
            vec4 texel23 = texelFetchOffset(sampler, texelCoord, 0, ivec2( 1, 2));
            vec4 texel33 = texelFetchOffset(sampler, texelCoord, 0, ivec2( 2, 2));

            vec2 splineCoord = fract(vec2(size * texelCoord));

            vec4 row0 = catmullRom(texel00, texel10, texel20, texel30, splineCoord.x);
            vec4 row1 = catmullRom(texel01, texel11, texel21, texel31, splineCoord.x);
            vec4 row2 = catmullRom(texel02, texel12, texel22, texel32, splineCoord.x);
            vec4 row3 = catmullRom(texel03, texel13, texel23, texel33, splineCoord.x);

            return catmullRom(row0, row1, row2, row3, splineCoord.y);
        }

        void main()
        {
            color = textureCatmullrom(diffuse, v_st);
        }
```