Skip to content

Examples

Shortcuts to getting started.

Self contained cloneable templates that demonstrate real world use of three-flatland features.

Basic Sprite

Minimal Sprite2D setup with hover and press states.

Animation

CPU-clocked spritesheet animation, frames sampled from a packed atlas.

Batch Rendering

Interactive building placement, one shared material, batchCount locked at 1.

Knightmark

Spatial-hashed knight collision stress test, spacebar adds 100 more.

Pass Effects

Full-screen post-processing: CRT, LCD, VHS, scanlines, swapped between presets.

TSL Nodes

Per-sprite TSL node shader effects, still drawn in one shared batch.

Tilemap

A procedurally generated dungeon as batched tile layers, with animated tiles.

Skia

Skia WASM vector rendering through the active WebGPU or WebGL backend.

Slug Text

Per-pixel Bezier glyph outlines via the Slug algorithm, crisp at any scale.

2D Lighting

Forward+ lighting (DefaultLightEffect) in a dungeon: torch flicker, click-to-walk.

Hit Testing

Raycaster sprite picking: hover, drag, and walk-to-collect coins.

Docs Examples Showcases

Getting Started

Introduction Installation Quick Start

Concepts

The Flatland Pipeline Batch Rendering 2D Lighting Shadows & Occlusion Devtools Architecture

Guides

Sprites Animation Loaders Tilemaps Hit Testing Lighting Shadows Baking TSL Nodes Pass Effects Skia Slug Text Devtools

Resources

API Reference

nodes/src

Interfaces

CRTOptions DissolveOptions Light2DResult LitSpriteOptions OutlineOptions

Type Aliases

ColorInput FloatInput Vec2Input Vec3Input Vec4Input

Functions

afterimage afterimageGlow afterimageTinted alphaMask alphaMaskInvert alphaMaskValue alphaTest alphaTestOpaque ambientLight2D analogGlitch bayerDither bayerDither2x2 bayerDither4x4 bayerDither8x8 bloom bloomAnamorphic bloomSimple bloomThreshold blurBox blurBox3x3 blurBoxDirectional blurBoxSmooth blurFocus blurGaussian blurGaussian2Pass blurGaussian9 blurKawase blurKawaseDown blurKawaseMulti blurKawaseSimple blurKawaseUp blurMotion blurMotionObject blurMotionVelocity blurRadial blurRadialDistance blurShake blurSpin brightness brightnessClamped brightnessMultiply c64Palette cgaPalette chromaticAberration chromaticAberrationCustom chromaticAberrationPulse chromaticAberrationRadial colorBleeding colorRemap colorRemapCustom colorReplace colorReplaceHard colorReplaceMultiple contrast contrastSCurve crtBloom crtColorBleed crtComplete crtConvergence crtCurvature crtCurvatureWithCorners crtVignette directionalLight2D dissolve dissolveDirectional dissolvePixelated dissolveSimple distortBarrel distortBulge distortDisplace distortNoise distortPerlin distortPinch distortPixelate distortPixelateCount distortShatter distortSimplex distortSpherize distortTurbulence distortTwirl dmgPalette dotMatrix eagle fadeEdge fadeEdgeHorizontal fadeEdgeRadial fadeEdgeVertical filmGrain flash flashAdditive flashAlpha flashDamage flashHeal flashPowerUp flashSmooth gbcPalette ghost ghostSpeed ghostTrail glowSelective grayscale hq2x hq3x hq4x hueShift hueShiftNormalized interlacing lcdBacklightBleed lcdGBC lcdGhosting lcdGrid lcdMotionGhost lcdPocket linearRgbToOklab linearRgbToOklch litCelShaded litDiffuse litRim litSpecular litSprite litSpriteMulti md9bitPalette normalFromHeight normalFromHeightSmooth ntscComposite oklabLerp oklabToLinearRgb oklabToRgb oklchHueShift oklchLerp oklchLightness oklchSaturate oklchToLinearRgb oklchToRgb outline outline8 palettize palettizeDithered palettizeNearest phosphorApertureGrille phosphorMask phosphorShadowMask phosphorSimple phosphorSlotMask pixelate pixelateBySize pocketPalette pointLight2D posterize posterizeGamma ppuPalette pulse pulseGlow pulseHeartbeat pulseRadial pulseRainbow quantize quantizeRGB rgbToOklab rgbToOklch sai2x sampleSprite saturate scale2x scale3x scanlines scanlinesGlow scanlinesGrid scanlinesInterlaced scanlinesSmooth shadow2D shadowDrop shadowDropSoft shadowSDF2D shadowSoft2D shimmer shimmerHolographic shimmerMetallic shimmerWave signalInterference snesPalette sparkle sparkleRainbow sparkleStar speedLines spotLight2D spriteUV staticNoise superEagle tint tintAdditive trail trailAdditive trailBlur trailVelocity uvFlip uvOffset uvRotate uvScale vbPalette vhsDistortion vignette waveHorizontal waveRadial waveRipple waveVertical waveWater

presets/src

Variables

DefaultLightEffect NormalMapProvider

three-flatland/src

Classes

AlphaMap AnimatedSprite2D AnimationController BatchQueryView EffectMaterial Flatland ForwardPlusLighting GlobalUniforms LDtkLoader Light2D LightEffect MaterialEffect PassEffect SortLayer SortLayerGroup Sprite2D Sprite2DMaterial SpriteGroup SpriteSheetLoader TextureConfig TextureLoader TiledLoader TileLayer TileMap2D Tileset

Interfaces

AnimatedSprite2DOptions Animation AnimationFrame AnimationSetDefinition AnimationState BatchKey BatchQueryTag ChannelNodeContext ChannelNodeMap ChunkCoord ColorTransformContext DevtoolsProviderHandle EffectField EffectMaterialOptions EffectNodeContext FlatlandOptions InstanceAttributeConfig LDtkLoaderOptions Light2DOptions Light2DUniforms LightEffectBuildContext LightEffectRuntimeContext NormalRegion NormalSourceDescriptor ObjectLayerData OcclusionPassOptions Oklab Oklch PassEffectContext PlayOptions RayPlaneHit RemoteBridgeHandle RenderStats ResolveAlphaMapOptions SortLayerConfig SortLayerDescriptor SortLayerRegistry Sprite2DMaterialOptions Sprite2DOptions SpriteFrame SpriteFrameRect SpriteGroupOptions SpriteSheet SpriteSheetJSONArray SpriteSheetJSONHash SpriteSheetLoaderOptions TextureLoaderOptions TextureOptions TileAnimationFrame TileDefinition TiledLoaderOptions TileInstance TileLayerData TileLayerOptions TileMap2DOptions TileMapData TileMapObject TileNormalCustomData TilesetCell TilesetData WebSocketLike

Type Aliases

BlendMode BuiltInSortLayer ChannelName CollisionShape ColorTransformFn EffectConstants EffectSchema EffectSchemaValue EffectValues HitTestMode InstanceAttributeType Light2DType LightEffectClass MaterialEffectClass NormalBump NormalDirection ObservableStrategy PassEffectClass PassEffectFn Snapshot SortLayerName SortLayerValue SortMode SpriteSortFunction TexturePreset TileLookupFn UniformKeys WithRequiredChannels

Variables

ALL_HIT_TEST_MODES ALPHA_SIDECAR_DESCRIPTOR channelDefaults EFFECT_BIT_OFFSET IsAlphaBlendedBatch IsAlphaTestedBatch IsLitBatch IsUnlitBatch LIT_FLAG_MASK MAX_LIGHTS_PER_TILE observable RECEIVE_SHADOWS_MASK SortLayers TEXTURE_PRESETS TILE_SIZE VERSION

Functions

analogous applyHierarchicalPresets applyTextureOptions clampOklch colorToOklab colorToOklch complementary computeTier concatAnimations contrastRatio createAnimation createAnimationFromPattern createAnimationsFromNaming createConsumerRemoteBridge createDevtoolsProvider createIntersection createLightEffect createMaterialEffect createPassEffect createProviderRemoteBridge declareSortLayer decodeAlphaPng decodeDebugMessage decodeSortKey deltaEOklab encodeDebugMessage encodeSortKey equallySpacedHues framesToRegions gamutMapOklch getPackedComponent getSortLayer gradientOklch isDevtoolsActive isInGamut isLight2D lerpOklab lerpOklch linearRgbToOklab linearToSrgb monochromaticPalette oklabToColor oklabToLinearRgb oklabToOklch oklchToColor oklchToOklab rayPlaneZ0 readCastShadowFlag readEnableBits readFlip readLitFlag readReceiveShadowsFlag readShadowRadius readSystemFlags registerDebugArray registerDebugTexture relativeLuminance resolveAlphaMap resolveHitTestMode resolveSortLayer resolveTextureOptions reverseAnimation shallowEqual splitComplementary srgbToLinear tetradic tilesetToRegions tileToRegions touchDebugArray touchDebugTexture triadic unregisterDebugArray unregisterDebugTexture uvToWorld wcagLevel wholeTextureRegion worldToUV wrapWithLightFlags

three-flatland/src/react

Type Aliases

EffectElement LightEffectElement

Functions

attachEffect attachLighting createFlatlandCompute