Glslang.js

Real-time GLSL to SPIR-V translation, powered by Glslang.

Download » Github » Glslang »

Demo

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.





Drop files here!

GLSL

#version 150 out vec4 finalColor; void main() { finalColor = vec4(1.0, 1.0, 1.0, 1.0); }

SPIR-V


Information

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.

Installation

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

Tutorial

// 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();