webgl-const-minify v1.0.0

webgl-const-minify

TypeScript transformer that minifies WebGL 1.0 and 2.0 constants to numbers.

Example

Before:

gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

After:

gl.bufferData(34962, data, 35044);

Install

npm install --save-dev webgl-const-minify

Usage

Option 1: ttypescript

ttypescript wraps the standard TypeScript compiler to help you extend it with transformer plugins:

npm install --save-dev ttypescript

Update your tsconfig.json:

{
  "compilerOptions": {
    "plugins": [{ "transform": "webgl-const-minify" }]
  }
}

Now use tssc instead of tsc:

npx ttsc

Option 2: TypeScript API

If you are using the TypeScript compiler API, pass the transformer to the customTransformers parameter of Program.emit:

import webglConstMinifyTransform from "webgl-const-minify";
import * as ts from "typescript";

// Note this is not a complete example. For more information see
// https://github.com/microsoft/TypeScript-wiki/blob/master/Using-the-Compiler-API.md
const program = ts.createProgram(rootNames, options);
const result = program.emit(undefined, undefined, undefined, undefined, {
  before: [webglConstMinifyTransform(program)],
});

Why?

Expressions like gl.ARRAY_BUFFER will always evaluate to a specific constant number dictated by the WebGL specification. We can improve WebGL code compression by replacing these constant names with numbers up-front. General-purpose JavaScript minifiers can't easily do this, as they typically lack the type information needed to recognize WebGL context objects.

How?

Constant values are first extracted from the WebGL IDL specifications (v1, v2). (Note you can also directly access these constants via webgl1consts.js and webgl2consts.js).

The transformer walks the ASTs of each of your files, and looks for any property or element access expression where the left-hand-side's type is named either WebGLRenderingContext or WebGL2RenderingContext, and the right-hand-side identifier or string matches one of our known constant values for that version of WebGL. If there is a match, the expression is replaced with the corresponding numeric constant.