GLSL-Types

GLSL-Types is a lightweight library designed to generate TypeScript types for GLSL (OpenGL Shading Language) shaders. By leveraging the glsl crate, this library simplifies the integration between GLSL and TypeScript, enabling developers to safely and efficiently use GLSL code within TypeScript projects.

Features

• Automatic Type Generation: Automatically generate TypeScript types based on GLSL shader code.
• Type Safety: Helps prevent runtime errors by ensuring type correctness when working with shaders in TypeScript.
• Easy Integration: Seamlessly integrates with GLSL shaders, making it easy to use in projects requiring WebGL or other GLSL-based graphics rendering.

Installation

npm install
npm run build

How to use

node dist/index.js -f ./shaders/test.vert

Example

Given the following GLSL vertex shader code:

#version 300 es

in vec2 aPosition;
uniform mat3 uProjection;
uniform mat3 uTransform;
uniform vec4 uColor;

out vec4 vColor;

void main() {
    vec3 position = uProjection * uTransform * vec3(aPosition, 1.0f);
    gl_Position = vec4(position.xy, 0.0f, 1.0f);
    vColor = uColor;
}

The library will generate the following TypeScript types:

// DO NOT EDIT THIS FILE
// This file is generated by glsl-types

const SOURCE = /* glsl */ `#version 300 es

// File: test.vert
in vec2 aPosition;
uniform mat3 uProjection;
uniform mat3 uTransform;
uniform vec4 uColor;

out vec4 vColor;

void main() {
    vec3 position = uProjection * uTransform * vec3(aPosition, 1.0f);
    gl_Position = vec4(position.xy, 0.0f, 1.0f);
    vColor = uColor;
}`;

export const Test = {
  uniforms: {
    uProjection: "mat3",
    uTransform: "mat3",
    uColor: "vec4",
  },
  ins: {
    aPosition: "vec2",
  },
  outs: {
    vColor: "vec4",
  },
  source: SOURCE,
};

Contributing

Contributions are welcome! If you'd like to contribute to the project, feel free to open an issue or submit a pull request on GitHub.