Minifying & Obfuscating Shaders

Regular JS minification & obfuscation does not alter the shader code generated by TypeGPU. This is why we provide specific options for transforming shaders.

Mangling variable names in plugin

unplugin-typegpu collects function metadata, which is later used for WGSL code generation. With the { unstable_obfuscate: true } option, all saved identifiers will be obfuscated:

In the AST, all parameters and variables will have their names changed to a, b, c, …
Externals (the captured scope used by the function) will also have their respective identifiers changed.

As an example, take a look at the following function:

const 
const coneVolume: TgpuFn<(radius: d.F32, height: d.F32) => d.F32>
coneVolume = 
const tgpu: {
    const: typeof import("node_modules/typegpu/src/core/constant/tgpuConstant").constant;
    fn: typeof import("node_modules/typegpu/src/core/function/tgpuFn").fn;
    comptime: typeof import("node_modules/typegpu/src/core/function/comptime").comptime;
    resolve: typeof import("node_modules/typegpu/src/core/resolve/tgpuResolve").resolve;
    resolveWithContext: typeof import("node_modules/typegpu/src/core/resolve/tgpuResolve").resolveWithContext;
    init: typeof import("node_modules/typegpu/src/core/root/init").init;
    initFromDevice: typeof import("node_modules/typegpu/src/core/root/init").initFromDevice;
    slot: typeof import("node_modules/typegpu/src/core/slot/slot").slot;
    lazy: typeof import("node_modules/typegpu/src/core/slot/lazy").lazy;
    ... 10 more ...;
    '~unstable': typeof import("node_modules/typegpu/src/tgpuUnstable");
}@module ― typegpu
tgpu.
fn: <[d.F32, d.F32], d.F32>(argTypes: [d.F32, d.F32], returnType: d.F32) => TgpuFnShell<[d.F32, d.F32], d.F32> (+2 overloads)
fn([
import d
d.
const f32: d.F32
export f32
A schema that represents a 32-bit float value. (equivalent to f32 in WGSL)
Can also be called to cast a value to an f32.
@example const value = f32(); // 0
@example const value = f32(1.23); // 1.23
@example const value = f32(true); // 1
f32, 
import d
d.
const f32: d.F32
export f32
A schema that represents a 32-bit float value. (equivalent to f32 in WGSL)
Can also be called to cast a value to an f32.
@example const value = f32(); // 0
@example const value = f32(1.23); // 1.23
@example const value = f32(true); // 1
f32], 
import d
d.
const f32: d.F32
export f32
A schema that represents a 32-bit float value. (equivalent to f32 in WGSL)
Can also be called to cast a value to an f32.
@example const value = f32(); // 0
@example const value = f32(1.23); // 1.23
@example const value = f32(true); // 1
f32)((
radius: number
radius, 
height: number
height) => {
  'use gpu';
  const 
const baseArea: number
baseArea = 
var Math: Math
An intrinsic object that provides basic mathematics functionality and constants.
Math.
Math.PI: number
Pi. This is the ratio of the circumference of a circle to its diameter.
PI * 
radius: number
radius ** 2;
  const 
const volume: number
volume = (
const baseArea: number
baseArea * 
height: number
height) / 3;
  return 
const volume: number
volume;
});

When obfuscated and resolved, it will look like this:

fn item(a: f32, b: f32) -> f32 {
  let c = (3.141592653589793f * pow(a, 2f));
  let e = ((c * b) / 3f);
  return e;
}

Removing whitespaces in runtime

Runtime minification removes all comments (possibly present in raw-WGSL implemented functions), and all redundant whitespaces.

To enable minification, set the { unstable_minify: true } option in either tgpu.resolve, or in tgpu.init where it will act as a default for all rooted resolves.

tgpu.init({ unstable_minify: true }) is not a global setting, as your application may use multiple roots. For example, the following function will not be minified:

import { 
const tgpu: {
    const: typeof import("node_modules/typegpu/src/core/constant/tgpuConstant").constant;
    fn: typeof import("node_modules/typegpu/src/core/function/tgpuFn").fn;
    comptime: typeof import("node_modules/typegpu/src/core/function/comptime").comptime;
    resolve: typeof import("node_modules/typegpu/src/core/resolve/tgpuResolve").resolve;
    resolveWithContext: typeof import("node_modules/typegpu/src/core/resolve/tgpuResolve").resolveWithContext;
    init: typeof import("node_modules/typegpu/src/core/root/init").init;
    initFromDevice: typeof import("node_modules/typegpu/src/core/root/init").initFromDevice;
    slot: typeof import("node_modules/typegpu/src/core/slot/slot").slot;
    lazy: typeof import("node_modules/typegpu/src/core/slot/lazy").lazy;
    ... 10 more ...;
    '~unstable': typeof import("node_modules/typegpu/src/tgpuUnstable");
}@module ― typegpu
tgpu } from 'typegpu';
const 
const root: TgpuRoot
root = await 
const tgpu: {
    const: typeof import("node_modules/typegpu/src/core/constant/tgpuConstant").constant;
    fn: typeof import("node_modules/typegpu/src/core/function/tgpuFn").fn;
    comptime: typeof import("node_modules/typegpu/src/core/function/comptime").comptime;
    resolve: typeof import("node_modules/typegpu/src/core/resolve/tgpuResolve").resolve;
    resolveWithContext: typeof import("node_modules/typegpu/src/core/resolve/tgpuResolve").resolveWithContext;
    init: typeof import("node_modules/typegpu/src/core/root/init").init;
    initFromDevice: typeof import("node_modules/typegpu/src/core/root/init").initFromDevice;
    slot: typeof import("node_modules/typegpu/src/core/slot/slot").slot;
    lazy: typeof import("node_modules/typegpu/src/core/slot/lazy").lazy;
    ... 10 more ...;
    '~unstable': typeof import("node_modules/typegpu/src/tgpuUnstable");
}@module ― typegpu
tgpu.
init: (options?: InitOptions) => Promise<TgpuRoot>
Requests a new GPU device and creates a root around it.
If a specific device should be used instead, use
@see ― initFromDevice. *
@example 
When given no options, the function will ask the browser for a suitable GPU device.
const root = await tgpu.init();
@example 
If there are specific options that should be used when requesting a device, you can pass those in.
const adapterOptions: GPURequestAdapterOptions = ...;
const deviceDescriptor: GPUDeviceDescriptor = ...;
const root = await tgpu.init({ adapter: adapterOptions, device: deviceDescriptor });
init({ 
unstable_minify?: boolean | undefined
If set to true, rooted resolves will be stripped of all excessive spaces.
Rooted resolves include pipelines and all their transitive dependencies,
but not, for example, tgpu.resolve([MyStruct]),
as there may be multiple roots with different settings in one program.
@default ― false
unstable_minify: true });

const 
const fn: () => void
fn = () => {
  'use gpu';
}

// The following resolve does not reference the root.
var console: Console
The console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@see ― source
console.
Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.
@since ― v0.1.100
log(
const tgpu: {
    const: typeof import("node_modules/typegpu/src/core/constant/tgpuConstant").constant;
    fn: typeof import("node_modules/typegpu/src/core/function/tgpuFn").fn;
    comptime: typeof import("node_modules/typegpu/src/core/function/comptime").comptime;
    resolve: typeof import("node_modules/typegpu/src/core/resolve/tgpuResolve").resolve;
    resolveWithContext: typeof import("node_modules/typegpu/src/core/resolve/tgpuResolve").resolveWithContext;
    init: typeof import("node_modules/typegpu/src/core/root/init").init;
    initFromDevice: typeof import("node_modules/typegpu/src/core/root/init").initFromDevice;
    slot: typeof import("node_modules/typegpu/src/core/slot/slot").slot;
    lazy: typeof import("node_modules/typegpu/src/core/slot/lazy").lazy;
    ... 10 more ...;
    '~unstable': typeof import("node_modules/typegpu/src/tgpuUnstable");
}@module ― typegpu
tgpu.
resolve: (items: ResolvableObject[], options?: TgpuResolveOptions) => string (+1 overload)
A shorthand for calling tgpu.resolveWithContext(...).code.
@example 
const Gradient = d.struct({ from: d.vec3f, to: d.vec3f });

const resolved = tgpu.resolve([Gradient]);

console.log(resolved);
// struct Gradient_0 {
//   from: vec3f,
//   to: vec3f,
// }
@example 
const Gradient = d.struct({ from: d.vec3f, to: d.vec3f });

const code = tgpu.resolve({
  template: `
    fn getGradientAngle(gradient: Gradient) -> f32 {
      return atan(gradient.to.y - gradient.from.y, gradient.to.x - gradient.from.x);
    }
  `,
  externals: {
    Gradient,
  },
});

console.log(code);
// struct Gradient_0 {
//   from: vec3f,
//   to: vec3f,
// }
// fn getGradientAngle(gradient: Gradient_0) -> f32 {
//   return atan(gradient.to.y - gradient.from.y, gradient.to.x - gradient.from.x);
// }
resolve([
const fn: () => void
fn])) // Not minified!

Resolves involving pipelines will inherit the root’s setting.

As an example, the coneVolume function would look like this when minified:

fn coneVolume(radius:f32,height:f32)->f32{let baseArea=(3.141592653589793f*pow(radius,2f));let volume=((baseArea*height)/3f);return volume;}

Of course, minification and obfuscation can be combined to achieve the following:

fn item(a:f32,b:f32)->f32{let c=(3.141592653589793f*pow(a,2f));let e=((c*b)/3f);return e;}