0.0.4 • Published 7 years ago
glslx-loader v0.0.4
glslx-loader
WebGL integration for Webpack and TypeScript
Table of contents
- About
- Usage
- Known issues
About
This project parses and type check GLSL code, then it generates JavaScript boilerplate code and TypeScript definitions. This project uses GLSLX so you can conbine vertex and fragment shaders on the same file.
GLSL source :
uniform mat4 transform;
uniform vec3 color;
attribute vec4 position;
export void Vertex() {
gl_Position = transform * vec4(position.xy, 0, 1);
}
export void Fragment() {
gl_FragColor = vec4(color, 1);
}
export void ColorFragment() {
gl_FragColor = vec4(0, .5, 0, 1);
}
Generated TypeScript definition:
import {Shader} from 'glslx-loader/runtime/shader'
export class Vertex extends Shader {
enablePosition(): void
disablePosition(): void
setPositionPointer(size: number, type: number, normalized: boolean, stride: number, offset: number): void
setPosition(x: number, y: number, z: number, w: number): void
setTransform(value: Float32Array|number[], transpose?: boolean): void
}
export class Fragment extends Shader {
setColor(x: number, y: number, z: number): void
}
export class ColorFragment extends Shader {}
Generated JavaScript :
import {Shader} from 'glslx-loader/runtime/shader'
export function Vertex(gl, type) {
Shader.call(this, gl, type, Vertex.source)
}
Vertex.source = "precision mediump float;uniform mat4 c;attribute vec4 a;void main(){gl_Position=c*vec4(a.xy,0,1);}"
Vertex.attributes = [{
name: "position",
type: "vec4",
symbol:"a"
}]
Vertex.uniforms = [{
name: "transform",
type:" mat4",
symbol: "c"
}]
export function Fragment(gl, type) {
Shader.call(this, gl, type, Fragment.source)
}
Fragment.source = "precision mediump float;uniform vec3 b;void main(){gl_FragColor=vec4(b.rgb,1);}"
Fragment.attributes = []
Fragment.uniforms = [{
name: "color",
type: "vec3",
symbol: "b"
}]
export function ColorFragment(gl, type) {
Shader.call(this, gl, type, ColorFragment.source)
}
ColorFragment.source = "precision mediump float;void main(){gl_FragColor=vec4(0,.5,0,1);}"
ColorFragment.attributes = []
ColorFragment.uniforms = []
Usage
Just add glslx-loader
for your files webpack.config.js
, if your files end with .gl
:
{
test: /\.gl$/,
include: [
path.resolve(__dirname, 'src')
],
loader: 'glslx-loader'
}
Known issues
- It does not work with
ts-loader
fork type checker plugin, it's not really an issue ofglslx-loader
0.0.4
7 years ago
0.0.3-alpha.2
7 years ago
0.0.3-alpha.1
7 years ago
0.0.3-alpha.0
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago