rapid-render 1.0.0 → 1.0.3

package/README.md

@@ -1,70 +1,87 @@
-<p align="center">
-  <img src="./docs/image/logo_title.png" alt="Rapid" width="180" height="97" style="image-rendering: pixelated;">
-</p>
-
-<p align="center">
-  A stateless, high-performance WebGL 2D renderer for browser games.
-</p>
-
-<p align="center">
-  <a href="https://nightre.github.io/Rapid.js/">Website</a>
-  &middot;
-  <a href="https://nightre.github.io/Rapid.js/docs.html">Docs</a>
-  &middot;
-  <a href="https://nightre.github.io/Rapid.js/api/">API Reference</a>
-</p>
-
----
-
-## What is Rapid?
-
-Rapid is a focused WebGL 2D rendering engine for games and visual tools. It handles the rendering layer while leaving your game architecture, update loop, and state management fully in your hands.
-
-> The documentation and demos are still being written.
-
-## Highlights
-
-- **Automatic batching**  
-  Rapid automatically batches compatible draw work. Multi-texture batching binds different textures into a single draw call, eliminating manual grouping.
-
-- **Powerful custom shaders**  
-  Add sprite and geometry effects through shader hooks while still using Rapid's normal renderer, transforms, textures, and draw APIs.
-
-- **Flexible transforms**  
-  Compose motion, hierarchy, camera behavior, and local drawing with multiple transform styles backed by a fast matrix engine.
-
-- **A complete 2D toolkit**  
-  Draw sprites, lines, masks, particles, render textures, text, and custom geometry from one compact WebGL renderer.
-
-## Install
-
-```bash
-npm install rapid-render
-```
-
-## Quick Start
-
-```ts
-import { Rapid, Color } from "rapid-render";
-
-const canvas = document.querySelector("canvas")!;
-const rapid = new Rapid({
-  canvas,
-  backgroundColor: new Color(247, 253, 255),
-});
-
-function frame() {
-  rapid.clear();
-  rapid.drawRect({
-    x: 40,
-    y: 40,
-    width: 160,
-    height: 96,
-    color: new Color(84, 184, 234),
-  });
-  rapid.flush();
-  requestAnimationFrame(frame);
-}
-
-frame();
-```
+<p align="center">
+  <img src="./docs/image/logo_title.png" alt="Rapid" width="180" height="97" style="image-rendering: pixelated;">
+</p>
+
+<p align="center">
+  A stateless, high-performance WebGL 2D renderer for browser games.
+</p>
+
+<p align="center">
+  <a href="https://nightre.github.io/Rapid.js/">Website</a>
+  &middot;
+  <a href="https://nightre.github.io/Rapid.js/docs.html">Docs</a>
+  &middot;
+  <a href="https://nightre.github.io/Rapid.js/api/">API Reference</a>
+</p>
+
+---
+
+## What is Rapid?
+
+Rapid is a focused WebGL 2D rendering engine for games and visual tools. lightweight at just **67 kB** (**~19.5 kB gzipped**) It handles the rendering layer while leaving your game architecture, update loop, and state management fully in your hands.
+
+> The documentation and demos are still being written.
+
+## Highlights
+
+- **Automatic batching**  
+  Rapid automatically batches compatible draw work. Multi-texture batching binds different textures into a single draw call, eliminating manual grouping.
+
+- **Powerful custom shaders**  
+  Add sprite and geometry effects through shader hooks while still using Rapid's normal renderer, transforms, textures, and draw APIs.
+
+- **Flexible transforms**  
+  Compose motion, hierarchy, camera behavior, and local drawing with multiple transform styles backed by a fast matrix engine.
+
+- **A complete 2D toolkit**  
+  Draw sprites, lines, masks, particles, render textures, text, and custom geometry from one compact WebGL renderer.
+
+## Install
+
+```bash
+npm install rapid-render
+```
+
+## Quick Start
+
+```ts
+import { Rapid, Color } from "rapid-render";
+
+const canvas = document.querySelector("canvas")!;
+const rapid = new Rapid({canvas});
+
+rapid.clear();
+rapid.drawRect({
+   x: 40,
+   y: 40,
+   width: 160,
+   height: 96,
+   color: new Color(84, 184, 234),
+});
+rapid.flush();
+```
+
+## Benchmark
+
+Performance Comparison: Rapid vs. Other Renderers and Game Engines
+
+<p align="center">
+  <a href="https://nightre.github.io/Rapid.js/benchmark/">
+    <img src="./docs/benchmark/benchmark.png" alt="Benchmark Result">
+    <img src="./docs/benchmark/benchmark2.png" alt="Benchmark Result">
+  </a>
+</p>
+
+<p align="center">
+  🎮 <strong><a href="https://nightre.github.io/Rapid.js/benchmark/">Run Interactive Benchmark Live &rarr;</a></strong>
+</p>
+
+Tested on **Windows 11 / Intel i7-12850H / NVIDIA RTX 4070 Laptop GPU / Google Chrome (WebGL 2.0)** (Chrome / WebGL 2.0)
+
+## Contributing
+
+Contributions, issues, and feature requests are welcome!
+
+Before submitting a Pull Request, please ensure:
+- **Strict TypeScript (Zero any)**: All code must pass strict type checking with zero `any`, loose casts, or `@ts-ignore` directives.
+- **Passing Checks**: Run `npm run build` to ensure clean compilation with zero warnings or errors.

package/dist/draw.d.ts

@@ -14,6 +14,34 @@ export interface IDrawOptions extends ITransformOptions {
     shader?: DrawShader;
     customMatrix?: number;
 }
+export interface IDrawParticleOptions {
+    shader?: DrawShader;
+    texture: Texture;
+    color?: Color;
+    flipX?: boolean;
+    flipY?: boolean;
+    x?: number;
+    y?: number;
+    position?: Vec2;
+    rotation?: number;
+    scaleX?: number;
+    scaleY?: number;
+    isRotated?: boolean;
+}
+export interface IDrawParticleBatchOptions {
+    shader?: DrawShader;
+    texture: Texture;
+    x: Array<number>;
+    y: Array<number>;
+    rotation: Array<number>;
+    color: Array<Color>;
+    count?: number;
+    scaleX?: number;
+    scaleY?: number;
+    flipX?: boolean;
+    flipY?: boolean;
+    isRotated?: boolean;
+}
 export interface ISpriteOptions extends IDrawOptions {
     texture: Texture;
     color?: Color;
@@ -46,6 +74,8 @@ export interface ICircleOptions extends IDrawOptions {
 }
 export declare const drawSpriteRaw: (rapid: Rapid, options: ISpriteOptions) => void;
 export declare const drawSprite: (rapid: Rapid, options: ISpriteOptions) => void;
+export declare const drawParticle: (rapid: Rapid, options: IDrawParticleOptions) => void;
+export declare const drawParticles: (rapid: Rapid, options: IDrawParticleBatchOptions) => void;
 export declare const drawGraphic: (rapid: Rapid, options: IGraphicOptions) => void;
 export declare const drawLine: (rapid: Rapid, options: ILineOptions) => void;
 export declare const drawMaskImage: (rapid: Rapid, options: IMaskImageOptions) => void;

package/dist/index.d.ts

@@ -10,3 +10,4 @@ export * from './region/spriteRegion';
 export * from './region/graphicRegion';
 export * from './math';
 export * from './particle';
+export { LineTextureMode, type ILineRenderOptions } from './line';

package/dist/math.d.ts

@@ -44,3 +44,5 @@ export declare class Vec2 {
     static FromArray(array: number[][]): Vec2[];
     static fromAngle(angle: number): Vec2;
 }
+export declare const composeProjectionWithAffine: (projection: Float32Array, affine: Float32Array) => Float32Array;
+export declare const multiplyMat4: (A: Float32Array, B: Float32Array) => Float32Array;

package/dist/matrix-engine.d.ts

@@ -202,6 +202,7 @@ export declare class MatrixStore {
      * @param f - An array (Float32Array or standard number array) containing the 6 new elements.
      */
     setMatrix(index: number, f: Float32Array | number[]): void;
+    multiplyAffineInPlace(index: number, a: number, b: number, c: number, dValue: number, tx: number, ty: number): void;
 }
 /**
  * A highly performant MatrixStack useful for hierarchal scene graphs.

package/dist/particle.d.ts

@@ -43,10 +43,8 @@ export interface IParticleAnimation {
     scale?: ParticleAttribute<number> | number;
     /** Tint color (0-255 components, uses engine Color class). */
     color?: ParticleAttribute<Color> | Color;
-    /** Additive velocity vector (pixels/sec). */
+    /** Additive velocity vector (pixels/sec). Use `velocity.delta` to simulate constant acceleration (e.g. gravity). */
     velocity?: ParticleAttribute<Vec2> | Vec2;
-    /** Acceleration vector added to velocity each second (pixels/sec²). */
-    acceleration?: ParticleAttribute<Vec2> | Vec2;
 }
 export interface IParticleOptions {
     /** Texture(s) to pick from. Pass a weighted tuple `[Texture, weight][]` for weighted random. */