rapid-render 1.0.16 → 1.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <p align="center">
6
6
  <a href="https://www.npmjs.com/package/rapid-render"><img src="https://img.shields.io/npm/v/rapid-render?logo=npm&label=npm" alt="npm version"></a>
7
- <a href="https://www.npmjs.com/package/rapid-render"><img src="https://img.shields.io/badge/gzipped-~20.8%20kB-5C7CFA" alt="gzipped size"></a>
7
+ <a href="https://www.npmjs.com/package/rapid-render"><img src="https://img.shields.io/badge/gzipped-22.5%20kB-5C7CFA" alt="gzipped size"></a>
8
8
  <a href="https://github.com/Nightre/Rapid.js/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/rapid-render" alt="license"></a>
9
9
  <img src="https://img.shields.io/badge/TypeScript-strict-3178C6?logo=typescript&logoColor=white" alt="TypeScript strict">
10
10
  </p>
@@ -27,12 +27,18 @@
27
27
 
28
28
  ## What is Rapid?
29
29
 
30
- Rapid is a focused WebGL 2D rendering engine for games and visual tools. lightweight just **69 kB** (**~20 kB gzipped**) and handles only the rendering layer, leaving your game architecture entirely in your hands.
30
+ Rapid is a focused WebGL 2D rendering engine for games and visual tools.
31
31
 
32
- If you don't want your renderer to dictate how your game is organized, Rapid.js is for you!
32
+ If you want Pixi-level rendering without letting your renderer dictate how your game is organized, Rapid.js is for you!
33
+
34
+ ## Full 2D Toolkit
35
+
36
+ Particles, 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**.
33
37
 
34
38
  ## Architecture Recipes
35
39
 
40
+ Rapid.js handles only the rendering layer, leaving your game architecture entirely in your hands.
41
+
36
42
  Rapid.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.
37
43
 
38
44
  - **Architecture recipes**
@@ -56,7 +62,7 @@ Or via the unpkg CDN
56
62
  ## Quick Start
57
63
 
58
64
  ```ts
59
- import { Rapid, Color } from "rapid-render";
65
+ import { Rapid } from "rapid-render";
60
66
 
61
67
  const canvas = document.querySelector("canvas")!;
62
68
  const rapid = new Rapid({canvas});
@@ -73,7 +79,7 @@ rapid.flush();
73
79
 
74
80
  ## Render a scene
75
81
 
76
- `rapid.matrixStack` brings the familiar, intuitive `save()` and `restore()` flow from Canvas 2D into high-performance WebGL, letting you compose parent-child relationships with zero object allocation.
82
+ `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.
77
83
 
78
84
  ```ts
79
85
  // root
@@ -95,8 +101,10 @@ stack.save();
95
101
  // 3.enemies
96
102
  stack.save();
97
103
  for (let i = 0; i < 2; i++) {
98
- stack.translate(x, y);
99
- rapid.drawSprite(enemies[i]); // enemy
104
+ stack.save();
105
+ stack.translate(enemyX[i], enemyY[i]);
106
+ rapid.drawSprite(enemies[i]); // enemy
107
+ stack.restore();
100
108
  }
101
109
  stack.restore(); // 3.enemies
102
110
  stack.restore(); // 2.world
@@ -107,7 +115,7 @@ rapid.drawSprite(ui);
107
115
 
108
116
  ## Reuse and Update Matrix Subtrees
109
117
 
110
- Use `customMatrix` to render with any matrix in the hierarchy(even after its stack scope has been popped)
118
+ Use `customMatrix` to render with any matrix in the hierarchy (even after its stack scope has been popped).
111
119
 
112
120
  When 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.
113
121
 
@@ -144,7 +152,7 @@ rapid.drawSprite({
144
152
  rapid.flush();
145
153
  ```
146
154
 
147
- With 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.
155
+ With 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.
148
156
 
149
157
  For more information about matrix transformations, see the [Transformations](https://nightre.github.io/Rapid.js/docs.html#transformations).
150
158
 
@@ -0,0 +1,29 @@
1
+ import { Rapid } from '../render';
2
+ import { CustomGlShader, UniformValue } from '../webgl/glshader';
3
+ import { Vec2 } from '../math';
4
+ import { RenderTexture, Texture } from '../texture';
5
+ import { Color } from '../color';
6
+ import { MatrixSaveState } from '../matrix-engine';
7
+ export declare const MAX_LIGHTS = 8;
8
+ export declare class LightShader extends CustomGlShader {
9
+ constructor(rapid: Rapid, vs?: string, fs?: string, usedTextureUnitNum?: number, uniforms?: Record<string, UniformValue>);
10
+ }
11
+ export type LightMatrix = number | MatrixSaveState;
12
+ export interface ILight {
13
+ lightMatrix: LightMatrix | LightMatrix[];
14
+ normalMap: Texture;
15
+ lightTexture: Texture[] | Texture;
16
+ metallic?: number;
17
+ roughness?: number;
18
+ color?: Color | Color[];
19
+ lightHeight?: number | number[];
20
+ customShader?: LightShader;
21
+ }
22
+ export declare class Light {
23
+ shader: CustomGlShader;
24
+ rapid: Rapid;
25
+ rt: RenderTexture;
26
+ constructor(rapid: Rapid);
27
+ lightShadow(texture: Texture, lightMatrix: LightMatrix, points: Array<Vec2>): RenderTexture | undefined;
28
+ setupLight(option: ILight): CustomGlShader;
29
+ }
@@ -1,9 +1,9 @@
1
- import { Color } from './color';
2
- import { Vec2 } from './math';
3
- import { Rapid } from './render';
4
- import { Texture } from './texture';
5
- import { DynamicArrayBuffer } from './buffer';
6
- import { CustomGlShader } from './webgl/glshader';
1
+ import { Color } from '../color';
2
+ import { Vec2 } from '../math';
3
+ import { Rapid } from '../render';
4
+ import { Texture } from '../texture';
5
+ import { DynamicArrayBuffer } from '../buffer';
6
+ import { CustomGlShader } from '../webgl/glshader';
7
7
  /**
8
8
  * Describes an animated attribute: it transitions from `start` to `end`
9
9
  * over the particle's lifetime, optionally with a per-second damping factor.
package/dist/index.d.ts CHANGED
@@ -1,14 +1,8 @@
1
- export * from './buffer';
2
1
  export * from './color';
3
- export * from './matrix-engine';
4
2
  export * from './render';
5
- export * from './draw';
6
3
  export * from './texture';
7
4
  export * from './webgl/glshader';
8
- export * from './region/region';
9
- export * from './region/spriteRegion';
10
- export * from './region/particleRegion';
11
- export * from './region/graphicRegion';
12
5
  export * from './math';
13
- export * from './particle';
14
- export { LineTextureMode, type ILineRenderOptions } from './line';
6
+ export * from './extensions/particle';
7
+ export * from './extensions/light';
8
+ export * from './line';
@@ -249,7 +249,9 @@ export declare class MatrixStack {
249
249
  */
250
250
  restore(): void;
251
251
  restoreAll(): void;
252
- private getStep;
252
+ getStep(step: number | {
253
+ step: number;
254
+ }): number;
253
255
  private walkSubtree;
254
256
  getParent(step: number | {
255
257
  step: number;