glsl-100-to-300 v1.2.0
glsl-100-to-300
Transpile GLSL source tokens from version "100"
(WebGL1) to "300 es"
(WebGL2).
Example
Source:
var transpile = require('glsl-100-to-300')
var tokenize = require('glsl-tokenizer')
var stringify = require('glsl-token-string')
var tokens = transpile.fragment(tokenize(inputShader))
console.log(stringify(tokens))
Input fragment shader:
#version 100
#extension GL_OES_standard_derivatives : enable
varying vec2 vUv;
uniform sampler2D iChannel0;
void main() {
float sample = 1.0;
vec4 fragColor = vec4(sample);
gl_FragColor = texture2D(iChannel0, vUv);
}
The resulting WebGL2 shader.
#version 300 es
out vec4 fragColor_1;
in vec2 vUv;
uniform sampler2D iChannel0;
void main() {
float sample_0 = 1.0;
vec4 fragColor = vec4(sample_0);
fragColor_1 = texture(iChannel0, vUv);
}
sample
is a reserved word in 300es so it must be renamed, and GL_OES_standard_derivatives
has been promoted to core so the extension pragma should be removed.
Usage
Operates on GLSL tokens, but ignoring column
, position
and line
.
transpile.vertex(tokens)
Transpiles the tokens
array from a vertex shader and modifies them in place, to allow the code to run in a WebGL2 context.
In this case, varying
will be converted to out
.
Returns the tokens
array.
transpile.fragment(tokens)
Same as above, but handles fragment shaders, where varying
will be converted to in
.
Limitations
If any of your attributes conflict with a new builtin function or keyword like texture
or sample
, this method will throw an error.
License
MIT, see LICENSE.md for details.