![\"Rapid.js](\"./screenshot/logo.png\"){kind=logo}
\r \r \r
![\"Rapid\"](\"./docs/image/logo_title.png\"){kind=logo}
\r \r
\r \r
\r \r
\r \r
\r \r
\r \r
\r \r
\r \r
\r \r
\r \r
\r\n \r\n
\r\n ![\"npm](\"https://img.shields.io/npm/v/rapid-render?logo=npm&label=npm\")
![\"gzipped](\"https://img.shields.io/badge/gzipped-22.5%20kB-5C7CFA\"){kind=icon}
![\"license\"](\"https://img.shields.io/npm/l/rapid-render\")
![\"TypeScript](\"https://img.shields.io/badge/TypeScript-strict-3178C6?logo=typescript&logoColor=white\"){kind=icon}
\r\n An immediate-mode, high-performance WebGL 2D renderer for browser games.\r\n
\r\n\r\n\r\n Website & Examples\r\n |\r\n Docs\r\n |\r\n API Reference\r\n |\r\n NPM\r\n
\r\n\r\n---\r\n\r\n## What is Rapid?\r\n\r\nRapid is a focused WebGL 2D rendering engine for games and visual tools.\r\n\r\nIf you want Pixi-level rendering without letting your renderer dictate how your game is organized, Rapid.js is for you!\r\n\r\n## Full 2D Toolkit\r\n\r\nParticles, Light & Shadow, Custom Shaders, Lines, Masks, Render textures, Sprites, Custom Geometry, Filters and more. all from one focused WebGL renderer. Yet it is only **22.5 kB gzipped**.\r\n\r\n## Architecture Recipes\r\n\r\nRapid.js handles only the rendering layer, leaving your game architecture entirely in your hands.\r\n\r\nRapid.js is frame-stateless, making it easy to build games with different architectures. Below are minimal, working implementations of several popular architectures built on Rapid.js, each in **around 100 lines** of JavaScript.\r\n\r\n- **Architecture recipes** \r\n [Game Object](recipes/game-object.js) · [Component](recipes/component.js) · [Display List](recipes/display-list.js) · [ECS Integration](recipes/ecs-integration.js) · [Immediate Mode](recipes/immediate-mode.js)\r\n\r\n- **Game-engine-style recipes** \r\n[Kaplay-like](recipes/game-engine/kaplay-like.js) · [Pixi-like](recipes/game-engine/pixi-like.js) · [Phaser-like](recipes/game-engine/phaser-like.js) · [Excalibur-like](recipes/game-engine/excalibur-like.js) · [LittleJS-like](recipes/game-engine/littlejs-like.js) · [p5-like](recipes/game-engine/p5-like.js)\r\n\r\n## Install\r\n\r\n```bash\r\nnpm install rapid-render\r\n```\r\n\r\nOr via the unpkg CDN\r\n\r\n```html\r\n\r\n```\r\n\r\n## Quick Start\r\n\r\n```ts\r\nimport { Rapid } from \"rapid-render\";\r\n\r\nconst canvas = document.querySelector(\"canvas\")!;\r\nconst rapid = new Rapid({canvas});\r\nconst texture = await rapid.texture.load(\"./image/sprite.png\")\r\n\r\nrapid.clear();\r\nrapid.drawSprite({\r\n texture: texture,\r\n x: 40,\r\n y: 40,\r\n});\r\nrapid.flush();\r\n```\r\n\r\n## Render a scene\r\n\r\n`rapid.matrixStack` brings the familiar, intuitive `save()` and `restore()` flow from Canvas 2D into high-performance WebGL. It reuses typed-array-backed matrix storage and avoids per-transform matrix allocation.\r\n\r\n```ts\r\n// root\r\n// ├── world\r\n// │ ├── player\r\n// │ └── enemies\r\n// │ ├── enemy #0\r\n// │ ├── enemy #1\r\n// │ └── ...\r\n// └── ui\r\n\r\nconst stack = rapid.matrixStack;\r\n// 1.root\r\nstack.save();\r\n stack.translate(0, 0);\r\n // 2.world\r\n stack.save();\r\n rapid.drawSprite(player); // player\r\n // 3.enemies\r\n stack.save();\r\n for (let i = 0; i < 2; i++) {\r\n stack.save();\r\n stack.translate(enemyX[i], enemyY[i]);\r\n rapid.drawSprite(enemies[i]); // enemy\r\n stack.restore();\r\n }\r\n stack.restore(); // 3.enemies\r\n stack.restore(); // 2.world\r\nstack.restore(); // 1.root\r\n// ui\r\nrapid.drawSprite(ui);\r\n```\r\n\r\n## Reuse and Update Matrix Subtrees\r\n\r\nUse `customMatrix` to render with any matrix in the hierarchy (even after its stack scope has been popped).\r\n\r\nWhen you modify a node's local matrix, call `updateMatrixSubtree()` to automatically recalculate that node and all affected descendant world matrices, without rebuilding the entire matrix hierarchy.\r\n\r\n```ts\r\nrapid.clear();\r\n\r\nconst stack = rapid.matrixStack;\r\nconst matrix = rapid.matrix;\r\n\r\n// Build a transform hierarchy.\r\nconst world = stack.save();\r\nstack.translate(200, 200);\r\n\r\nconst enemyNode = stack.save();\r\nstack.translate(80, 0);\r\n\r\nstack.restore(); // enemyNode\r\nstack.restore(); // world\r\n\r\n// Both nodes have been popped, but their matrices remain available.\r\n// Move the world node later in the same frame.\r\nmatrix.identity(world.local);\r\nmatrix.translate(world.local, 100, 100);\r\n\r\n// Recalculate only `world` and its descendants.\r\nstack.updateMatrixSubtree(world);\r\n\r\n// Render using the stored matrix of the popped child node.\r\nrapid.drawSprite({\r\n texture: enemy,\r\n customMatrix: enemyNode.world,\r\n});\r\n\r\nrapid.flush();\r\n```\r\n\r\nWith this flexible matrix stack, you can build your own architecture with minimal friction. It doesn't care how you organize your game logic. You can use ECS, scene graphs, components, or any hybrid approach you prefer.\r\n\r\nFor more information about matrix transformations, see the [Transformations](https://nightre.github.io/Rapid.js/docs.html#transformations).\r\n\r\n## Benchmark\r\n\r\nPerformance Comparison: Rapid vs. Other Renderers and Game Engines\r\n\r\n\r\n \r\n ![\"Benchmark](\"./docs/benchmark/benchmark.png\")
\r\n \r\n
\r\n \r\n ![\"Avoid](\"./docs/image/with-rapid-0.png\") \r\n \r\n | \r\n \r\n Avoid the Zeros by Foxdog Studios \r\n Foxdog Studios used Rapid.js to deliver fast download times and smooth multi-sprite rendering for thousands of audience members playing simultaneously on their mobile phones at the Sydney Opera House. \r\n | \r\n
\r\n \r\n ![\"Emoji](\"./docs/image/with-rapid-1.png\") \r\n \r\n | \r\n \r\n Emoji Party by illusivegames \r\n A featured puzzle hit on Poki, surpassing 6 million plays. Rapid.js powers its smooth rendering and instant-play experience across hundreds of thousands of diverse mobile and desktop browser environments. \r\n | \r\n