gulp-shadify
Generates typed WebGL programs from a .glslx file.
Install
npm install gulp-shadify --save-dev
Create a .glslx file
For example: ./examples/shape.glslx
precision mediump float;
uniform mat4 u_projection; // Projection matrix (maps from world space to clip space)
uniform mat3 u_model; // Model matrix (maps from model space to world space)
uniform vec4 u_color; // Color of shape
attribute vec2 a_position; // Position of current vertex in model space
export void vertex(){
vec3 worldPosition = u_model * vec3(a_position, 1.0);
gl_Position = u_projection * vec4(worldPosition, 1.0);
}
export void fragment(){
gl_FragColor = u_color;
}
See http://evanw.github.io/glslx/ for information on GLSLX.
Create a gulp task
var gulp = require("gulp");
var rename = require("gulp-rename");
var shadify = require("gulp-shadify");
gulp.task("build:examples", function () {
// Search for files ending in .glslx
return gulp.src("./examples/*.glslx")
.pipe(shadify())
.pipe(rename({ extname: ".ts" }))
.pipe(gulp.dest("./examples/"));
});
Run gulp task
gulp shadify
Output: ./examples/shape.ts
export interface Uniforms {
readonly [name: string]: WebGLUniformLocation;
/**
* The location of uniform mat4 u_projection.
*/
u_projection: WebGLUniformLocation;
/**
* The location of uniform mat3 u_model.
*/
u_model: WebGLUniformLocation;
/**
* The location of uniform vec4 u_color.
*/
u_color: WebGLUniformLocation;
}
export interface Attributes {
readonly [name: string]: number;
/**
* The location of attribute vec2 a_position.
*/
a_position: number;
}
export type Variables = Uniforms|Attributes;
export const vertex = "precision mediump float;uniform mat4 b;uniform mat3 a;attribute vec2 c;void main(){vec3 e=a*vec3(c,1.);gl_Position=b*vec4(e,1.);}";
export const fragment = "precision mediump float;uniform vec4 d;void main(){gl_FragColor=d;}";
export const UniformRenaming = {"u_projection":"b","u_model":"a","u_color":"d"};
export const AttributeRenaming = {"a_position":"c"};
Examples
GLSLX | Output |
---|---|
shape.glslx | shape.ts |
ellipse.glslx | ellipse.ts |
line.glslx | line.ts |