Before going to the Installation / Tutorial panels below, you might want to know how Glslang.js tastes like. Here you have a simple demo, providing realtime client-side GLSL to SPIR-V translation thanks to GLSLang and SPIR-V Tools. Note that the scripts might take a while to load.
Glslang.js is a port of the Glslang compiler to JavaScript done with Emscripten. It's released as a 3 MB JavaScript file.
Glslang is the official reference compiler front-end for the OpenGL and OpenGL ES shading languages and includes a back-end to emit SPIR-V.
To use the Glslang.js in your web application, download and include it with:
<script src="glslang.min.js"></script>
or install it through the Bower command:
bower install glslangjs
// Input: GLSL source code and shader type
var type = glslang.EShLangFragment;
var source = `
#version 150
out vec4 finalColor;
void main() {
finalColor = vec4(1.0, 1.0, 1.0, 1.0);
}`;
// Initialize Glslang
glslang.initialize();
// Compile shader
var shader = new glslang.Shader(type, source);
// Output: SPIR-V binary and disassembly
var binary = shader.data();
var disassembly = shader.disasm();
// Delete shader
shader.delete();
// Finalize Glslang
glslang.finalize();