TexGen

The Lightweight Procedural Texture Library for Modern Web Apps

Visuals with code, not bandwidth.

TexGen (~15kb): A small JavaScript library that leverages WebGL shaders to create high-quality, procedural textures on the fly. Whether you need static baked images or real-time animated backgrounds, TexGen provides the tools to build them.

  • Built-in Noise, FBM, and Voronoi functions
  • Static baking to PNG/DataURL at any resolution
  • Real-time WebGL texture updates
  • Support for PBR (Physically Based Rendering) maps
  • High-performance, GPU-accelerated generation

TexGen Words (~20kb): An addon to TexGen to describe your textures in plain English. This powerful addon provides a natural language interface to combine complex effects without writing code:

  • 150+ keywords across 8 specialized categories
  • Automatic GLSL synthesis and boilerplate injection
  • Support for custom seeds, resolution, and animation
  • Zero-GLSL knowledge required for procedural art

Instantly turn phrases like "blue fire spiral warp" or "gold neon glowing lava" into high-performance GPU shaders.

Compact Payloads, Infinite Detail

The sky below is generated from a single 2KB compressed string. Decompressed and rendered in real-time, it supports dynamic time of day and atmospheric effects.

Base64 Payload

Talk to your GPU

Use TexGen Words to synthesize textures using natural language. Try typing keywords like lava, spiral, or neon.

Try these samples:
blue fire spiral warp green cells liquid drift red star pulse rotate purple plasma vortex glow icy stone marble rough forest leaf grass mist neon digital glitch lava smoke fire hot

Explore the Demos

Texture Editor

The full IDE for creating, compressing, and exporting your own procedural textures.

Launch Editor

TexGen Words

Generate complex procedural textures using just a natural language sentence. Try the Random Gallery!

Write Textures

API Playground

A live, interactive documentation tool for experimenting with the TexGen library methods.

Start Tinkering

TypeScript Gallery

A modern technical showcase of type-safe baking, real-time animation, and compressed payloads.

5 Textures1.1 KB Payload
View Gallery

Texture Streaming

Infinite procedural world generation using asynchronous Web Workers and OffscreenCanvas.

1 Texture1.6 KB Payload
Explore World

Multi-Pass Composition

Advanced visual effects achieved by chaining multiple TexGen instances for post-processing.

3 Textures1.5 KB Payload
View Effects

Ultimate Platformer

A 2D game where every block, enemy, and background is procedurally generated at runtime.

19 Textures5.3 KB Payload
Play Now

3D Maze Explorer

A first-person explorer featuring real-time animated textures on walls, floors, and ceilings.

8 Textures1.6 KB Payload
Explore 3D

3D Marble Cube

Navigate a 3D cube by tilting and rolling through portals and procedural mazes on every face.

6 Textures1.7 KB Payload
Enter Cube

Marble Roller

An orthographic 2.5D physics game with procedural marble, floor tiles, and environmental hazards.

5 Textures1.8 KB Payload
Start Rolling

Flight Sim

Fly over an endless procedural landscape with an animated day/night cycle, rendered from compressed shaders.

5 Textures3.3 KB Payload
Take Flight

Card Roguelike

A procedural UI demo where every card's artwork and ornate frame is uniquely generated using seeds.

19 Textures4.2 KB Payload
Play Cards

Procedural Solitaire

A fully functional Klondike Solitaire game featuring a procedural felt table, ornate card backs, and subtle paper textures.

3 Textures1.2 KB Payload
Play Solitaire

What can TexGen do for you?

🚀 Bandwidth Revolution

Stop shipping megabytes of PNGs. A complex atmospheric sky or high-res terrain displacement map can be reduced to a 1KB string. Ideal for web games and high-performance applications where every kilobyte counts.

🎨 Infinite Asset Variety

By simply changing a seed uniform, you can generate millions of unique variations from a single shader. Perfect for roguelikes, loot items, procedural characters, or unique planetary surfaces.

🤖 AI-Assisted Creation

Modern LLMs are experts at writing GLSL noise and geometric logic. Ask an AI to "generate a procedural lava shader," paste the code into TexGen, and you have a unique, optimized asset in seconds without traditional painting.

⚡ Performance First

Calculations happen directly on the GPU. Bake high-resolution 4K textures in milliseconds, or run complex animated environments at 60FPS without putting a strain on the main JavaScript thread.

🧩 Plug & Play

TexGen outputs standard HTMLCanvasElement or DataURLs. This means it integrates instantly with Three.js, Babylon.js, PixiJS, or even standard CSS background properties.

📏 Scalable by Design

Mathematical textures never lose detail. Generate textures at the exact resolution needed for the user's screen, from tiny icons to massive full-screen backgrounds, all without any blurriness.