Graphics Types

Since 1.9.0

Types for graphics rendering and 3D applications.

Overview

Graphics Types provides type-level graphics and rendering utilities. It supports color types, vectors, matrices, shaders, textures, lights, materials, and GPU pipeline configurations.

This module enables building type-safe graphics applications with proper constraints for rendering pipelines, materials, and shader programs.

Basic Usage

import type { Vector3, Matrix4x4, Color, Shader, Texture, Material, Light } from 'uni-types'

// Define vector types
type Position = Vector3
type Rotation = Vector3

// Define material type
type StandardMaterial = PBRMaterial

// Define light type
type MainLight = DirectionalLight

Key Types

Color

Color type (CSS color string).

type Color = string

RGB / RGBA

Color tuple types.

type RGB = [r: number, g: number, b: number]
type RGBA = [r: number, g: number, b: number, a: number]

Vector2 / Vector3 / Vector4

Vector types.

interface Vector2 {
  x: number
  y: number
}

interface Vector3 {
  x: number
  y: number
  z: number
}

interface Vector4 {
  x: number
  y: number
  z: number
  w: number
}

Matrix4x4

4x4 Matrix type.

type Matrix4x4 = [
  [number, number, number, number],
  [number, number, number, number],
  [number, number, number, number],
  [number, number, number, number],
]

Transform

Transform combined type.

interface Transform {
  translation: Translation
  rotation: Rotation
  scale: Scale
}

ShaderProgram

Shader program type.

interface ShaderProgram {
  vertex?: VertexShader
  fragment?: FragmentShader
  compute?: ComputeShader
  bindGroupLayouts?: BindGroupLayout[]
}

TextureFormat

Texture format types.

type TextureFormat =
  | 'rgba8unorm' | 'rgba8snorm' | 'rgba8uint' | 'rgba8sint'
  | 'bgra8unorm' | 'bgra8unorm-srgb'
  | 'rgba16float' | 'r32float' | 'rg32float' | 'rgba32float'
  | 'depth16unorm' | 'depth24plus' | 'depth24plus-stencil8' | 'depth32float'

Light

All light types.

type Light =
  | DirectionalLight
  | PointLight
  | SpotLight
  | AmbientLight
  | HemisphereLight

Material

All material types.

type Material =
  | PBRMaterial
  | UnlitMaterial
  | PhongMaterial

PBRMaterial

Physically Based Rendering material.

interface PBRMaterial extends MaterialBase {
  type: 'pbr'
  baseColor?: Color | Texture
  metallic?: number | Texture
  roughness?: number | Texture
  normal?: Texture
  occlusion?: Texture
  emissive?: Color | Texture
  emissiveIntensity?: number
}

RenderPipelineDescriptor

Render pipeline configuration.

interface RenderPipelineDescriptor {
  label?: string
  layout?: 'auto' | unknown
  vertex: VertexState
  fragment?: FragmentState
  primitive?: PrimitiveState
  depthStencil?: DepthStencilState
  multisample?: MultisampleState
}

Shape

All shape types.

type Shape =
  | Circle
  | Ellipse
  | Rectangle
  | Sphere
  | Box
  | Cylinder
  | Cone
  | Capsule
  | Torus

Related

• Animation - Animation types
• Game Development - Game ECS types
• Audio Processing - Audio types