Skip to main content

Node System Overview

TypeScript Shading Language​

GLRE の Node System は、TypeScript の構文でシェーダーコードを記述できる独自の DSL（Domain Specific Language）です。 Three.js TSL の仕様と完全互換性を持ちながら、GLSL/WGSL の両方に対応したコード生成を提供します。

Core Architecture​

Node Construction​

ComponentPurposeExample
NodeProxyメソッドチェーンによる操作vec3(1, 0, 0).mul(2).add(offset)
Type System型推論と自動変換float + vec3 → vec3
Abstract Syntax Tree構文木による表現add(mul(vec3, 2), offset)

Factory Functions​

Basic Types​

FunctionParametersReturn TypeDescription
float(value)number|Nodefloat32-bit floating point
int(value)number|Nodeint32-bit integer
bool(value)boolean|NodeboolBoolean value
vec2(x, y)number|Node, number|Nodevec22D vector
vec3(x, y, z)number|Node, ...vec33D vector
vec4(x, y, z, w)number|Node, ...vec44D vector

Matrix Types​

FunctionParametersReturn TypeDescription
mat2(...)number[]|Nodemat22x2 matrix
mat3(...)number[]|Nodemat33x3 matrix
mat4(...)number[]|Nodemat44x4 matrix

Variable Declaration​

FunctionPurposeUsageDescription
uniform(value, id?)CPU-GPU data transferuniform(1.0)Reactive uniform variable
attribute(data, id?)Vertex attributesattribute([0, 1, 0])Vertex data input
builtin(name)Built-in variablesbuiltin('position')System variables
constant(value, id?)Compile-time constantsconstant(3.14159)Immutable values

Type System​

Automatic Type Conversion​

// 自動型変換の例
const scalar = float(2.0)
const vector = vec3(1, 0, 0)

// float は vec3 に自動拡張
const result = scalar.add(vector) // vec3(3, 2, 2)

Type Conversion Methods​

MethodSource → TargetExample
.toFloat()any → floatvec3(1,2,3).toFloat() // 1.0
.toVec2()any → vec2vec4(1,2,3,4).toVec2() // vec2(1,2)
.toVec3()any → vec3float(1).toVec3() // vec3(1,1,1)
.toVec4()any → vec4vec3(1,2,3).toVec4() // vec4(1,2,3,1)
.toColor()any → vec3Color space conversion

Swizzling Operations​

PatternUsageResult TypeExample
xyzwPosition coordinatesVariespos.xyz, pos.xy
rgbaColor componentsVariescolor.rgb, color.rg
stpqTexture coordinatesVariesuv.st, uv.s
const pos = vec4(1, 2, 3, 4)
const xyz = pos.xyz // vec3(1, 2, 3)
const yx = pos.yx // vec2(2, 1)
const w = pos.w // float(4)

Operators and Functions​

Arithmetic Operations​

MethodSymbolVector SupportExample
.add(x)+✓a.add(b)
.sub(x)-✓a.sub(b)
.mul(x)*✓a.mul(b)
.div(x)/✓a.div(b)
.mod(x)%✓a.mod(b)

Comparison Operations​

MethodSymbolReturn TypeExample
.equal(x)==boola.equal(b)
.notEqual(x)!=boola.notEqual(b)
.lessThan(x)<boola.lessThan(b)
.greaterThan(x)>boola.greaterThan(b)
.lessThanEqual(x)<=boola.lessThanEqual(b)
.greaterThanEqual(x)>=boola.greaterThanEqual(b)

Mathematical Functions​

FunctionDescriptionVector SupportExample
sin(x), cos(x), tan(x)Trigonometric✓sin(angle)
pow(x, y)Power✓pow(base, exp)
sqrt(x)Square root✓sqrt(value)
abs(x)Absolute value✓abs(signed)
floor(x), ceil(x)Rounding✓floor(value)
min(x, y), max(x, y)Min/Max✓min(a, b)
mix(x, y, a)Linear interpolation✓mix(a, b, t)
step(edge, x)Step function✓step(0.5, x)
smoothstep(a, b, x)Smooth step✓smoothstep(0, 1, x)

Control Structures​

Conditional Branching​

// If-ElseIf-Else構文
If(condition, () => {
        return vec3(1, 0, 0)
})
        .ElseIf(condition2, () => {
                return vec3(0, 1, 0)
        })
        .Else(() => {
                return vec3(0, 0, 1)
        })

// Ternary operator
const result = select(condition, trueValue, falseValue)

Loop Structures​

// Count-based loop
Loop(10, ({ i }) => {
        accumulator.assign(accumulator.add(sample(i)))
})

// Condition-based loop
Loop(value.lessThan(threshold), () => {
        value.assign(value.mul(2))
})

// Nested loops
Loop(10, 5, ({ i, j }) => {
        grid.element(i, j).assign(calculate(i, j))
})

Switch Statements​

Switch(mode)
        .Case(0, () => {
                return normalMode()
        })
        .Case(1, 2, () => {
                return enhancedMode()
        })
        .Default(() => {
                return fallbackMode()
        })

Function Definition​

Custom Functions​

// Basic function definition
const myFunction = Fn(([input]) => {
        return input.mul(2).add(1)
})

// Function with layout specification
const complexFunction = Fn(({ input, scale }) => {
        return input.mul(scale).normalize()
}).setLayout({
        name: 'complexFunction',
        type: 'vec3',
        inputs: [
                { name: 'input', type: 'vec3' },
                { name: 'scale', type: 'float' },
        ],
})

Built-in Variables​

VariableTypeStageDescription
positionvec4Vertex/FragmentCurrent position
normalvec3FragmentSurface normal
uvvec2FragmentTexture coordinates
vertexIndexintVertexCurrent vertex index
instanceIndexintVertexCurrent instance index

Standard Uniforms​

UniformTypeDescription
iTimefloatElapsed time in seconds
iResolutionvec2Canvas resolution
iMousevec2Normalized mouse position

Code Generation Flow​

TypeScript DSL
      │
  ┌───▼───┐
  │ Node  │ ──── Abstract Syntax Tree
  │ Tree  │      Type Inference
  └───┬───┘      Optimization
      │
  ┌───▼───┐
  │ Code  │ ──── GLSL Generation
  │ Gen   │      WGSL Generation
  └───┬───┘      Binding Assignment
      │
  ┌───▼───┐
  │Shader │ ──── Compilation
  │Program│      GPU Upload
  └───────┘

Advanced Features​

Vertex Stage Processing​

// Vertex computation with fragment usage
const worldPos = vertexStage(attribute('position').mul(uniform('modelMatrix')))

// Use in fragment shader
const fragmentColor = worldPos.normalize()

Struct Definitions​

// Define custom struct
const Material = struct({
        albedo: 'vec3',
        roughness: 'float',
        metallic: 'float',
})

// Create instance
const material = Material({
        albedo: vec3(1, 0, 0),
        roughness: 0.5,
        metallic: 0.0,
})

// Member access
const color = material.albedo

Texture Sampling​

// Basic texture sampling
const color = texture(uniform('mainTexture'), uv)

// Mipmap level sampling
const detail = texture(uniform('detailTexture'), uv, level)

// Cube texture sampling
const envColor = cubeTexture(uniform('envMap'), reflectVector)

GLRE の Node System は、従来のシェーダープログラミングの複雑さを抽象化し、TypeScript の表現力を活用した直感的な記述を可能にします。