rapid-render 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nightre
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,149 @@
+#  <center>rapid.js</center>
+
+⚡Lightning-fast, Lightweight 2D WebGL Rendering for HTML5.
+gzip only 5kb ! [Why is Rapid so fast?](#Why-is-Rapid-so-fast?)
+
+10000 Sprites 60FPS ! [Stress Test Demo](https://nightre.github.io/rapid.js/demo//stress-test/)
+
+gzip only 5kb!
+# Demo
+* [Stress Test Demo](https://nightre.github.io/rapid.js/demo//stress-test/)
+* [Graphics Demo](https://nightre.github.io/rapid.js/demo/graphic/)
+* [MartixStack Demo](https://nightre.github.io/rapid.js/demo/matrix-stack)
+
+# Quick Start
+
+Installation
+
+```
+npm i rapid-render
+```
+
+Or use unpkg
+
+```html
+<script src="https://unpkg.com/rapid-render/dist/rapid.umd.cjs"></script>
+```
+
+Import
+
+```js
+import { Rapid } from "rapid-render";
+```
+
+# Useage
+Create Rapid.js renderer
+```js
+import { Rapid } from "../../dist/rapid";
+let rap = new Rapid({
+    canvas: document.getElementById("game"),
+    width: 600,
+    height: 600,
+    backgroundColor: Color.fromHex("00FFFF")
+})
+rap.start() // Call rap.start() before rendering to initialize the rendering context.
+// draw..
+rap.end() // Call rap.end() after rendering to finalize the rendering process.
+```
+
+# Texture
+
+create textures
+load a texture from a URL using the `rap.texture.textureFromUrl` method or `Texture.fromUrl(rapid,"./cat")`. If you want to use ImageSource to create textures,use `Texture.fromImageSource(rapid,image)`
+```js
+const catTexture = await rap.texture.textureFromUrl("../cat.png") // Load a texture from a URL.
+// or...
+// await Texture.fromUrl(rapid,"./cat")
+// Texture.fromImageSource(rapid,image)
+```
+If you only want to display a portion of the texture, you can set the clip region
+```js
+catTexture.setClipRegion(
+    0,  // The x-coordinate of the top-left corner of the region.
+    0,  // The y-coordinate of the top-left corner of the region.
+    50, // The width of the region.
+    50  // The height of the region.
+)
+```
+
+# Draw Sprite
+Sprites are used to display textures
+
+demo : [Sprites Demo](https://nightre.github.io/rapid.js/demo/stress-test/)
+
+```js
+rap.start() // Call rap.start() before rendering to initialize the rendering context.
+
+rap.drawSprite(texture, offsetX, offsetY)
+
+rap.end() // Call rap.end() after rendering to finalize the rendering process.
+```
+# Draw Graphic
+Graphics can be used to draw polygons
+
+demo : [Graphics Demo](https://nightre.github.io/rapid.js/demo/graphic/)
+```js
+rap.start() // Call rap.start() before rendering to initialize the rendering context.
+
+rap.drawShape([
+    0  , 0  ,
+    100, 0  ,
+    100, 50 ,
+    // The vertex of a triangle
+], Color.fromHex("00FFFF"))
+
+rap.end() // Call rap.end() after rendering to finalize the rendering process.
+```
+# MartixStack
+
+Matrix stacking is very powerful, you can use it to implement stretching, rotation, translation, and hierarchical transformation.
+
+demo : [MartixStack Demo](https://nightre.github.io/rapid.js/demo/matrix-stack)
+```js
+    rap.save() // Save the current state of the transformation matrix.
+    rap.drawSprite(catTexture)
+    rap.matrix.translate(32, 32)
+    rap.matrix.rotate(1)
+    rap.save()
+    rap.matrix.scale(1, 1) // or rap.matrix.scale(1)
+    rap.restore() // Restore the transformation matrix to the previously saved state.
+    rap.drawSprite(catTexture)
+    rap.restore() // Restore the transformation matrix to the previously saved state.
+    rap.drawSprite(catTexture)
+```
+
+# Custom Shader
+
+```js
+const shader = rap.createShader("vert shader", "frag shader")
+rap.drawSprite(texture, offsetX, offsetY, shader)
+rap.drawShape([
+    0  , 0  ,
+    100, 0  ,
+    100, 50 ,
+    // The vertex of a triangle
+], Color.fromHex("00FFFF"), shader)
+```
+
+## Customization
+If the built-in Sprite and Graphics classes don’t meet your needs, you can create your own rendering mode with direct control over WebGL. Here’s how:
+1. **Create a Subtype**: Start by creating a subtype that inherits from RenderRegion. This will be your custom rendering region.
+```js
+class YourRenderRegion extends RenderRegion {
+    // Your custom methods and properties here
+}
+```
+2. **Register Your Region**: Once your custom rendering region is defined, register it with the renderer.
+```js
+this.registerRegion("YourRegionName", YourRenderRegion)
+```
+3. **Use Your Region**: Now you can set your custom region as the current region. You can also pass a custom shader if needed.
+```js
+this.setRegion("YourRegionName", customShader?);
+rap.currentRegion
+```
+
+For more details, please check: [RenderRegions](./src/region)
+
+# Why is Rapid so fast?
+Rapid-Renderer is an efficient WebGL renderer that can process multiple sprites at once and intelligently group them based on the texture units they use and the maximum texture units supported by the GPU. This means that even if there are 1000 sprites, as long as the total texture units they use do not exceed the maximum supported by the GPU, Rapid-Renderer can group them together and render them in batches. This approach fully leverages the parallel processing capabilities of the GPU, resulting in efficient rendering. This greatly improves the rendering efficiency and allows Rapid-Renderer to maintain high rendering speed while handling a large number of sprites

package/dist/consts.d.ts

@@ -0,0 +1,5 @@
+export declare const MAX_BATCH = 10922;
+export declare const MATRIX_SIZE = 6;
+export declare const VERTICES_PER_SPRITE = 6;
+export declare const SPRITE_ELEMENT_PER_VERTEX = 5;
+export declare const GRAPHIC_ELEMENT_PER_VERTEX = 2;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import GraphicRegion from "./region/graphic_region";
+import RenderRegion from "./region/region";
+import SpriteRegion from "./region/sprite_region";
+import Rapid from "./renderer";
+export * from "./math";
+export * from "./interface";
+export * from "./texture";
+export { RenderRegion, SpriteRegion, GraphicRegion, Rapid };
+export * from "./utils/webgl";

package/dist/interface.d.ts

@@ -0,0 +1,23 @@
+import { Color } from "./math";
+export type WebGLContext = WebGL2RenderingContext | WebGLRenderingContext;
+export interface IRapiadOptions {
+    canvas: HTMLCanvasElement;
+    pixelDensity?: number;
+    width?: number;
+    height?: number;
+    backgroundColor?: Color;
+}
+export interface IRenderRegionOptions {
+    vs: string;
+    fs: string;
+    attribute: IAttribute[];
+}
+export interface IAttribute {
+    name: string;
+    size: number;
+    type: number;
+    normalized?: boolean;
+    stride: number;
+    offset?: number;
+}
+export type Images = ImageBitmap | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | OffscreenCanvas;

package/dist/math.d.ts

@@ -0,0 +1,128 @@
+import { WebGLContext } from "./interface";
+type ArrayType = typeof Float32Array | typeof Uint16Array;
+declare class DynamicArrayBuffer {
+    protected usedElemNum: number;
+    protected typedArray: Float32Array | Uint16Array;
+    private arrayType;
+    private maxElemNum;
+    readonly bytePerElem: number;
+    constructor(arrayType: ArrayType);
+    clear(): void;
+    /**
+     * resize the array
+     * @param size
+     * @returns
+     */
+    resize(size?: number): this | undefined;
+    /**
+     * push a new element
+     * @param value
+     */
+    push(value: number): void;
+    /**
+     * pop a element
+     * @param num
+     */
+    pop(num: number): void;
+    /**
+     * get the array
+     * @param begin
+     * @param end
+     * @returns
+     */
+    getArray(begin?: number, end?: number): Float32Array | Uint16Array;
+    /**
+     * length of the array
+     */
+    get length(): number;
+}
+declare class MatrixStack extends DynamicArrayBuffer {
+    constructor();
+    /**
+     * push a matrix to the stack
+     */
+    pushMat(): void;
+    /**
+     * pop a matrix from the stack
+     */
+    popMat(): void;
+    /**
+     * push a matrix and indentiy it
+     */
+    pushIdentity(): void;
+    /**
+     * Translates the current matrix by the specified x and y values.
+     * @param x - The amount to translate horizontally.
+     * @param y - The amount to translate vertically.
+     */
+    translate(x: number, y: number): void;
+    /**
+     * Rotates the current matrix by the specified angle.
+     * @param angle - The angle, in radians, to rotate the matrix by.
+     */
+    rotate(angle: number): void;
+    /**
+     * Multiplies the current matrix on the top of the stack by a scaling transformation.
+     * @param x - The amount to scale the matrix horizontally.
+     * @param y - The amount to scale the matrix vertically. If not specified, x is used for both horizontal and vertical scaling.
+     */
+    scale(x: number, y?: number): void;
+    apply(x: number, y: number): number[];
+}
+declare class Color {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+    constructor(r: number, g: number, b: number, a: number);
+    /**
+     * is equal to another color instance
+     * @param color
+     * @returns
+     */
+    equals(color: Color): boolean;
+    /**
+     * create a new color by hex string
+     * @param hexString
+     * @returns
+     */
+    static fromHex(hexString: string): Color;
+}
+declare class BufferArray extends DynamicArrayBuffer {
+    buffer: WebGLBuffer;
+    gl: WebGLContext;
+    readonly type: number;
+    private bufferSize;
+    constructor(gl: WebGLContext, arrayType: ArrayType, type?: number);
+    /**
+     * bind buffer to gpu
+     */
+    bindBuffer(): void;
+    /**
+     * array data to gpu
+     */
+    bufferData(): void;
+    /**
+     * clear
+     */
+    clear(): void;
+}
+declare class ElementArray extends BufferArray {
+    readonly elemVertPerObj: number;
+    private objects;
+    readonly vertexPerObject: number;
+    private dirty;
+    constructor(gl: WebGLContext, elemVertPerObj: number, vertexPerObject: number);
+    protected addObject(_vertex?: number): void;
+    /**
+     * set number of objects
+     * @param obj
+     */
+    setObjects(obj: number): void;
+    /**
+     * array data to gpu
+     */
+    bufferData(): void;
+    clear(): void;
+}
+export { MatrixStack, DynamicArrayBuffer, Color, ElementArray, BufferArray };