Skip to main content

GLRE API Documentation

Complete technical reference for the GLRE Reactive GPU Engine.

Overview

GLRE is a TypeScript library that bridges CPU-side JavaScript with GPU-side shader programming. It provides automatic configuration for data transmission between CPU and GPU, supporting both WebGL2 and WebGPU platforms.

Architecture

JavaScript/TypeScript Code

┌────▼────┐
│ GLRE │ ──── Automatic binding
│ Engine │ Resource management
└────┬────┘ Event syscd etem

GPU Execution

Core Components

ComponentPurposeKey Features
Core EngineGPU abstraction layerWebGL2/WebGPU support, automatic initialization
Event SystemReactive programmingMount/cleanup, mouse/keyboard, animation loops
ConfigurationEngine settingsPlatform detection, quality settings

Node System

ComponentPurposeKey Features
TSL OverviewTypeScript Shading LanguageReact-like syntax, type inference
Type SystemsShader types in TypeScriptAutomatic conversion, swizzling
Function ReferenceComplete function library150+ mathematical functions

Reference

ComponentPurposeKey Features
Implementation PatternsCode patternsBest practices, common solutions
Advanced TechniquesComplex featuresMulti-pass rendering, compute shaders
TroubleshootingProblem solvingError handling, debugging

Quick Start

Basic Setup

import { createGL, vec4 } from 'glre'

const gl = createGL({
fragment: () => {
return vec4(1.0, 0.5, 0.2, 1.0) // Orange color
},
})

With Animation

const gl = createGL({
fragment: () => {
const time = uniform('iTime')
const color = sin(time).mul(0.5).add(0.5)
return vec4(color, color, color, 1.0)
},
})

gl('loop', () => {
gl.uniform('iTime', performance.now() / 1000)
})

API Categories

Factory Functions

FunctionPurposeExample
createGL()Engine initializationcreateGL({ width: 800, height: 600 })
vec3()3D vector creationvec3(1, 0, 0)
uniform()CPU-GPU data bindinguniform('time')

Mathematical Operations

CategoryFunctionsCount
Trigonometricsin, cos, tan, asin, acos, atan7
Exponentialpow, sqrt, exp, log10
Common Mathabs, floor, ceil, min, max15+
Vectorlength, normalize, dot, cross8

Control Structures

StructureSyntaxPurpose
ConditionalIf().ElseIf().Else()Branching logic
LoopsLoop(count, callback)Iteration
FunctionsFn(callback).setLayout()Custom functions

Platform Support

WebGL2 Features

  • OpenGL ES 3.0 compatibility
  • Automatic extension detection
  • Fallback handling

WebGPU Features

  • Modern graphics API
  • Compute shader support
  • Advanced pipeline management

Type System

Basic Types

TypeSizeDescription
float32-bitFloating point number
int32-bitInteger number
bool1-bitBoolean value
vec264-bit2D vector
vec396-bit3D vector
vec4128-bit4D vector

Advanced Types

TypePurposeUsage
mat2/3/4Matrix operationsTransformations
texture2DImage samplingTexture access
structCustom data typesComplex objects

Next Steps

GLRE provides a complete toolkit for GPU programming in TypeScript, making complex graphics accessible through familiar syntax.