Types

Types are referred to with classes such as FloatNode, Vec3Node, Mat4Node, etc. Although these can be instantiated, a nicer way that is less verbose making it easier to read and more similar to GLSL syntax is to use their respective creator functions float or vec3 as will be illustrated for each type below.

These types have methods to support logical and arithmetic operators in GLSL such as + - / * && ||. Typescript types ensure that you can not not for example multiply a 3-component vector with a 4x4 matrix so you can quickly discover bugs in your code.

Scalar

Boolean

const aBool: BooleanNode = bool(true)

.or(other: BooleanNode): BooleanNode
.and(other: BooleanNode): BooleanNode

Float

const aFloat: FloatNode = float(.5)
const bFloat: FloatNode = float(aFloat)

.add(other: FloatNode): FloatNode
.subtract(other: FloatNode): FloatNode
.divide(other: FloatNode): FloatNode
.multiply(other: FloatNode): FloatNode
.multiplyVec2(other: Vec2Node): Vec2Node
.multiplyVec3(other: Vec3Node): Vec3Node
.multiplyVec4(other: Vec4Node): Vec4Node
.gt(other: FloatNode): BooleanNode
.lt(other: FloatNode): BooleanNode
.gte(other: FloatNode): BooleanNode
.lte(other: FloatNode): BooleanNode
.equals(other: FloatNode): BooleanNode
.notEquals(other: FloatNode): BooleanNode

Integer

const aInt: IntNode = int(5)
const bInt: IntNode = int(aInt)

.add(other: IntNode): IntNode
.subtract(other: IntNode): IntNode
.multiply(other: IntNode): IntNode
.gt(other: IntNode): BooleanNode
.lt(other: IntNode): BooleanNode
.gte(other: IntNode): BooleanNode
.lte(other: IntNode): BooleanNode
.equals(other: IntNode): BooleanNode
.notEquals(other: IntNode): BooleanNode

Vectors

2-component floating point vector

const aVec = vec2(0.5, 1)
const bVec = vec2(THREE.Vector2(0.5, 1))
const cVec = vec2(THREE.Vector3(0.5, 1, 0.2))
const dVec = vec2(THREE.Vector4(0.5, 1, 0.2, 0.8))
const eVec = vec2(vec3(1,1,1))
const fVec = vec2(vec4(1,1,1,1))

There are multiple ways of defining a vector.

• Provide constant values

• Use a ThreeJS vector class. Only the first components will be used.

• Use a higher dimensional vector node and only the first components will be used.

.x: FloatNode
.y: FloatNode
.subtractScalar(other: FloatNode): Vec2Node
.subtract(other: Vec2Node): Vec2Node
.addScalar(other: FloatNode): Vec2Node
.add(other: Vec2Node): Vec2Node
.divideScalar(other: FloatNode): Vec2Node
.divide(other: Vec2Node): Vec2Node
.multiplyScalar(other: FloatNode): Vec2Node
.multiply(other: Vec2Node): Vec2Node
.multiplyMat(other: Mat2Node): Vec2Node
.equals(other: Vec2Node): BooleanNode
.notEquals(other: Vec2Node): BooleanNode

3 and 4-component floating point vectors

The higher dimensional vectors have the same functionality as a 2-component vector as described above. Their individual components can be extracted with .x, .y, .z, and .w for their respective first, second, third and fourth components.

These also have additional methods beyond their equivalents of Vec2Node.

// Additional Vec3Node properties
.xy: Vec2Node
.xz: Vec2Node
.yz: Vec2Node
.rgb: RgbNode

// Additional Vec4Node properties
.xy: Vec2Node
.xyz: Vec3Node
.rgb: RgbNode
.rgba: RgbaNode

Colors

Colors are represented using the types RgbNode and RgbaNode, where the latter has an alpha component for transparency. These inherit from Vec3Node and Vec4Node respectively so any RgbNode or RgbaNode is a valid Vec3Node or Vec4Node. The reason for this is to make the code easier to understand as it makes it clear what is supposed to represent a color. These types also have methods for extracting the RGBA components which are just wrapping the methods to extract XYZW components from the vector parent class.

RGB

The color can be passed in as a hexadecimal value, string or a THREE.Color instance.

const aColor = rgb(0x00ff00)
const bColor = rgb("#00ff00")
const cColor = rgb(THREE.Color(0x00ff00))

Color with transparency

const aColor = rgba(0x00ff00)
const bColor = rgba(0x00ff00, 0.5)
const cColor = rgba(0x00ff00, float(0.5))
const dColor = rgba(vec3(0, 1.0, 0.0))
const eColor = rgba(vec4(0, 1.0, 0.0, 1.0))

• A Vec3Node or RgbNode can be used to represent the color for rgba.

• A Vec4Node can be used to represent the color and transparency for rgba.

• The transparency (alpha channel) can be defined by a constant number

• The transparency can also be defined with a FloatNode instance which can be used to control the transparency programaticaly.

Matrices

At the moment, no creator methods exist beyond the constructors of the matrix type node implementations. Most of the time, you don't instantiate these yourself but instead get them from uniforms or attributes.

2x2 floating point matrix

const aMat = new ConstantMat2Node(
    1, 2, 
    3, 4)
const bMat = new ComponentsMat2Node(
    float(1), float(2), 
    float(3), float(4)
)

3x3 floating point matrix

const aMat = new ConstantMat3Node(
    1, 2, 3,
    4, 5, 6,
    7, 8, 9
)
const bMat = new ComponentsMat3Node(
    float(0), float(0), float(1), 
    float(0), float(0), float(1), 
    float(0), float(0), float(1)
)

4x4 floating point matrix

const aMat = new ConstantMat4Node(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 0,
)
const bMat = new ComponentsMat4Node(float(1), ...)
const cMat = new ConstantMat4Node(THREE.Matrix4(1, ...))

.add(other: Mat4Node): Mat4Node
.subtract(other: Mat4Node): Mat4Node
.divideScalar(other: FloatNode): Mat4Node
.multiplyScalar(other: FloatNode): Mat4Node
.multiplyVec(other: Vec4Node): Vec4Node
.multiply(other: Mat4Node): Mat4Node
.equals(other: Mat4Node): BooleanNode
.notEquals(other: Mat4Node): BooleanNode