ris-framework 0.1.0-dev.7 → 0.1.0

package/src/api/data/Color.ts

@@ -0,0 +1,228 @@
+import { vec3, vec4 } from 'gl-matrix';
+
+/**
+ * The color.
+ */
+export class Color implements Iterable<number>{
+
+    private _colors = [0,0,0,0];
+
+    /**
+     * Create a new color.
+     * @param r - The red value.
+     * @param g - The green value.
+     * @param b - The blue value.
+     * @param a - The alpha value. By default, it is 1.0.
+     */
+    public constructor(
+         r: number,
+         g: number,
+         b: number,
+         a = 1) {
+
+        this._colors[0] = r;
+        this._colors[1] = g;
+        this._colors[2] = b;
+        this._colors[3] = a;
+    }
+
+    [Symbol.iterator](): Iterator<number, any, any> {
+        return this._colors[Symbol.iterator]();
+    }
+
+    /**
+     * The red color.
+     */
+    public get r() : number {
+        return this._colors[0];
+    }
+
+    public set r(value: number) {
+        this._colors[0] = value;
+    }
+
+    /**
+     * The green color.
+     */
+    public get g() : number {
+        return this._colors[1];
+    }
+
+    public set g(value: number) {
+        this._colors[1] = value;
+    }
+
+    /**
+     * The green color.
+     */
+    public get b() : number {
+        return this._colors[2];
+    }
+
+    public set b(value: number) {
+        this._colors[2] = value;
+    }
+
+    /**
+     * The alpha.
+     */
+    public get a() : number {
+        return this._colors[3];
+    }
+
+    public set a(value: number) {
+        this._colors[3] = value;
+    }
+
+    /**
+     * Returns the Black color.
+     */
+    public static black(): Color {
+        return new Color(0, 0, 0);
+    }
+
+    /**
+     * Returns the White color.
+     */
+    public static white(): Color {
+        return new Color(1, 1, 1);
+    }
+
+    /** The transparent color. */
+    public static transparent() {
+        return new Color(0,0,0,0);
+    }
+
+    /**
+     * Returns the Light Pink color.
+     */
+    public static lightPink(): Color {
+        return new Color(1.0, 0.71, 0.76);
+    }
+
+    /**
+     * Returns the Red color.
+     */
+    public static red(): Color {
+        return new Color(1, 0, 0);
+    }
+
+    /**
+     * Returns the Green color.
+     */
+    public static green(): Color {
+        return new Color(0, 1, 0);
+    }
+
+    /**
+     * Returns the Blue color.
+     */
+    public static blue(): Color {
+        return new Color(0, 0, 1);
+    }
+
+    /**
+     * Returns the Gray color.
+     */
+    public static gray(): Color {
+        return new Color(0.5, 0.5, 0.5);
+    }
+
+    /**
+     * Returns the Yellow color.
+     */
+    public static yellow(): Color {
+        return new Color(1, 1, 0);
+    }
+
+    /**
+     * Returns the Wheat color.
+     */
+    public static wheat(): Color {
+        return new Color(0.96, 0.87, 0.7);
+    }
+
+    /**
+     * Returns the White Smoke color.
+     */
+    public static whiteSmoke(): Color {
+        return new Color(0.96, 0.96, 0.96);
+    }
+
+    /**
+     * Returns the Slate Gray color.
+     */
+    public static slateGray(): Color {
+        return new Color(0.439, 0.502, 0.565);
+    }
+
+    /**
+     * Returns the Cornflower Blue color.
+     */
+    public static cornerFlowerBlue(): Color {
+        return new Color(0.39, 0.58, 0.93);
+    }
+
+    /**
+     * Returns the Orange color.
+     */
+    public static orange(): Color {
+        return new Color(1.0, 0.647, 0.0);
+    }
+
+    /**
+     * Sets the value of this color to be equal to other color.
+     * @param other The other color.
+     */
+    public set(other: Color): void {
+        this.r = other.r;
+        this.g = other.g;
+        this.b = other.b;
+        this.a = other.a;
+    }
+
+    /**
+     * Are two colors equal.
+     * @param other The other color.
+     */
+    public equals(other: Color): boolean {
+        return this.r === other.r &&
+            this.g === other.g &&
+            this.b === other.b &&
+            this.a === other.a && this.b === other.b;
+    }
+
+    /**
+     * Convert to vector.
+     * @returns The vec4.
+     */
+    public toVector4(): vec4 {
+        return vec4.fromValues(this.r, this.g, this.b, this.a);
+    }
+
+    /**
+     * Convert to vector.
+     * @returns The vec3.
+     */
+    public toVector3(): vec3 {
+        return vec3.fromValues(this.r, this.g, this.b);
+    }
+
+    /**
+     * Linearly interpolate between two colors.
+     * @param a - The first color.
+     * @param b - The second color.
+     * @param t - The time step.
+     * @param o - The color that receives value.
+     */
+    public lerp(a: Color, b: Color, t: number, o: Color) {
+        void a;
+        void b;
+        void t;
+        o
+    }
+
+
+}
+
+

package/src/api/data/Rect.ts

@@ -0,0 +1,92 @@
+/**
+ * The rectangle.
+ */
+export class Rect {
+
+    /**
+     * The rectangle constructor.
+     * @param x - The position x.
+     * @param y - The position y.
+     * @param width - The width of a rectangle.
+     * @param height - The height of a rectangle.
+     */
+    public constructor(public x: number,
+                       public y: number,
+                       public width: number,
+                       public height: number) {
+    }
+
+    /**
+     * The left side of a rectangle.
+     */
+    public get left(): number {
+        return this.x;
+    }
+
+    /**
+     * The top side of a rectangle.
+     */
+    public get top(): number {
+        return this.y;
+    }
+
+    /**
+     * The right side of a rectangle.
+     */
+    public get right(): number {
+        return this.x + this.width;
+    }
+
+    /**
+     * The bottom side of a rectangle.
+     */
+    public get bottom(): number {
+        return this.y + this.height;
+    }
+
+    /**
+     * The rectangle contains a point.
+     * @param x - The x position of a point.
+     * @param y - The y position of a point.
+     * @returns True if it contains a point.
+     */
+    public contains(x: number, y: number): boolean {
+        return x >= this.left && x <= this.right
+            && y <= this.top && y <= this.bottom;
+    }
+
+    /**
+     * Check if the rectangle intersects with another rectangle.
+     * @param other - The other .
+     * @returns true if there is intersection, false otherwise.
+     */
+    public intersects(other: Rect): boolean {
+        return this.left < other.right && this.right > other.left
+        && this.top < other.bottom && this.bottom > other.top;
+    }
+
+    /**
+     * Offsets the position of a rectangle.
+     * @param x - The x position.
+     * @param y - The y position.
+     */
+    public offset(x: number, y: number): void {
+        this.x = x;
+        this.y = y;
+    }
+
+    /**
+     * Creates a new instance of this rect.
+     * @param x The x position.
+     * @param y The y position.
+     * @param width The width.
+     * @param height The height.
+     */
+    public clone(x?: number, y?: number, width?: number, height?: number): Rect {
+        void x;
+        void y;
+        void width;
+        void height;
+        return new Rect(this.x ?? 0, this.y ?? 0, this.width ?? 0, this.height ?? 0);
+    }
+}

package/src/api/data/State.ts

@@ -0,0 +1,10 @@
+/**
+ * The current state of a resource, such as a texture.
+ *     This enum is used to track the lifecycle of resources and ensure that they are properly initialized and disposed of.
+ */
+export enum State {
+  CREATED = 0,
+  INITIALIZED = 1,
+  DISPOSING = 2,
+  DISPOSED = 3
+}

package/src/api/data/_export.ts

@@ -0,0 +1,3 @@
+export * from "./Color.ts";
+export * from "./State.ts";
+export * from "./Rect.ts";

package/src/{geometry → api/geometry}/BaseGeometry.ts

@@ -1,7 +1,10 @@
 import { GeometryFormat } from "./GeometryFormat.ts";
-import {VertexFormat} from "../VertexFormat.ts";
-import type {IGeometry} from "ris-framework-api";
+import {VertexFormat} from "./VertexFormat.ts";
+import type {IGeometry} from "../index.ts";
 
+/**
+ * The default IGeometry implementation. GeometryBuilder fills it with vertex data.
+ */
 export class BaseGeometry implements IGeometry {
 
     /** @inheritdoc */
@@ -96,6 +99,16 @@ export class BaseGeometry implements IGeometry {
         let interleavedData: number[] = [];
 
         switch (format) {
+            case GeometryFormat.POS3_COLOR4:
+                {
+                    let count = this.positions!.length / 3;
+
+                    for (let i = 0; i < count; i++) {
+                        this.pushFormat(i, this.positions!, VertexFormat.FLOAT_32X3, interleavedData, VertexFormat.FLOAT_32X3);
+                        this.pushFormat(i, this.colors!, VertexFormat.FLOAT_32X4, interleavedData, VertexFormat.FLOAT_32X4);
+                    }
+                    break;
+                }
             case GeometryFormat.POS3_TEXTURECOORDS2:
                 {
                     let count = this.positions!.length / 3;

package/src/{geometry → api/geometry}/GeometryBuilder.ts

@@ -1,6 +1,6 @@
 import { vec2 } from "gl-matrix"
 import { BaseGeometry } from "./BaseGeometry.ts";
-import type {IGeometry, IGeometryBuilder} from "ris-framework-api";
+import type {IGeometry, IGeometryBuilder} from "../index.ts";
 
 /**
  * The GeometryBuilder class provides methods for creating various types of geometries, such as quads, with specified parameters like scale and winding order.

package/src/api/geometry/GeometryFormat.ts

@@ -0,0 +1,33 @@
+/**
+ * The geometry format.
+ */
+export enum GeometryFormat {
+    /**
+     * Geometry format where:
+     First 3 floats are reserved for vertex position.Following 4 floats are reserved for vertex color.
+     */
+    POS3_COLOR4 = 0,
+    /**
+     * Geometry format where:
+     First 3 floats are reserved for vertex position.Following 4 floats are reserved for vertex color.Following 2 floats are reserved for vertex texture coordinates.
+     */
+    POS3_COLOR4_TEXTURECOORDS2 = 1,
+    /**
+     * Geometry format where:
+     First 3 floats are reserved for vertex position.Following 4 floats are reserved for vertex color.Following 2 floats are reserved for vertex texture coordinates.
+     When aligned, the vertex format is aligned to 4 floats.
+     Meaning:
+     First 4 floats are reserved for vertex position, but only 3 are used.Following 4 floats are reserved for vertex color.Following 4 floats are reserved for vertex texture coordinates, but only 2 are used.
+     */
+    POS3_COLOR4_TEXTURECOORDS2_ALIGNED = 2,
+    /**
+     * Geometry format where:
+     First 3 floats are reserved for vertex position.Following 4 floats are reserved for vertex color.Following 2 floats are reserved for vertex texture coordinates.Following 3 floats are reserved for vertex normal.
+     */
+    POS3_COLOR4_TEXTURECOORDS2_NORMAL3 = 3,
+    /**
+     * Geometry format where:
+     First 3 floats are reserved for vertex position.Following 2 floats are reserved for texture coordinates.
+     */
+    POS3_TEXTURECOORDS2 = 4
+}

package/src/api/geometry/IGeometry.ts

@@ -0,0 +1,66 @@
+import {VertexFormat} from "./VertexFormat.ts";
+import {GeometryFormat} from "./GeometryFormat.ts";
+
+/**
+ * The geometry.
+ */
+export interface IGeometry {
+
+    /**
+     * The vertex count of the geometry.
+     */
+    readonly vertexCount: number;
+
+    /**
+     * The positions of geometry.
+     */
+    readonly positions?: number[];
+
+    /**
+     * The position vertex format of the geometry.
+     */
+    readonly positionsFormat: VertexFormat;
+
+    /**
+     * The color vertices of the geometry.
+     */
+    colors?: number[];
+
+    /**
+     * The color format of geometry.
+     */
+    readonly colorFormat: VertexFormat;
+
+    /**
+     * The texture coordinates of geometry.
+     */
+    readonly textureCoords?: number[];
+
+    /**
+     * The texture coordinates the vertex format of geometry.
+     */
+    readonly textureFormat: VertexFormat;
+
+    /**
+     * The normals of a vertex.
+     */
+    readonly normals?: number[];
+
+    /**
+     * The vertex format of normal property.
+     */
+    readonly normalsFormat: VertexFormat;
+
+    /**
+     * The indices of geometry.
+     */
+    readonly indices?: number[];
+
+    /**
+     * Converts data of this geometry to interleaved buffer format.
+     * @param format - The format of the geometry.
+     * @returns The interleaved data of the geometry.
+     */
+    toInterleaved(format: GeometryFormat): number[];
+
+}

package/src/api/geometry/IGeometryBuilder.ts

@@ -0,0 +1,17 @@
+import type { IGeometry } from "./IGeometry.ts";
+import {vec2} from "gl-matrix";
+
+/**
+ * The geometry builder.
+ */
+export interface IGeometryBuilder {
+
+/**
+ * Creates the geometry of a quad.
+ * @param scale - The scale of the quad. If omitted it is set to (1,1).
+ * @param counterClockwise - True for counter-clockwise winding (the default), false for clockwise.
+ * @returns The geometry.
+ */
+  quadGeometry(scale?: vec2, counterClockwise?: boolean): IGeometry;
+
+}

package/src/{VertexFormat.ts → api/geometry/VertexFormat.ts}

@@ -3,15 +3,11 @@
  */
 export enum VertexFormat {
   FLOAT_32 = 0,
-
   FLOAT_32X2 = 1,
-
   FLOAT_32X3 = 2,
-
   FLOAT_32X4 = 3,
-
-  /**
-   * The format of a 32-bit float with 16 components. Used for matrix attributes.
-   */
+/**
+ * The format of a 32-bit float with 16 components. Used for matrix attributes.
+ */
   FLOAT_32X16 = 4
 }

package/src/api/geometry/_export-geometry.ts

@@ -0,0 +1,4 @@
+export * from "./IGeometryBuilder.ts";
+export * from "./IGeometry.ts";
+export * from "./VertexFormat.ts";
+export * from "./GeometryFormat.ts";

package/src/api/image/CpuImageProcessor.ts

@@ -0,0 +1,125 @@
+import type { IImageProcessor } from "./IImageProcessor.ts";
+import {RawImageData} from "./RawImageData.ts";
+import {vec2} from "gl-matrix";
+
+/**
+ * The default CPU-based image processor.
+ */
+export class CpuImageProcessor implements IImageProcessor {
+
+    /** @inheritdoc */
+    public async resizeAsync(image: RawImageData, vec2: vec2): Promise<RawImageData> {
+        const data = image.getData(0);
+
+        if (data === undefined) {
+            throw new Error("Invalid image data");
+        }
+
+        if (data instanceof HTMLImageElement) {
+            const htmlImage = await this._resizeHTMLImageAsync(data, vec2);
+            return new RawImageData([htmlImage], htmlImage.width, htmlImage.height, image.channels);
+        } else {
+            throw new Error("Not implemented.");
+        }
+    }
+
+    /** @inheritdoc */
+    public getBytesFromHtmlImage(image: HTMLImageElement): Uint8ClampedArray<ArrayBuffer> {
+        const canvas = document.createElement("canvas");
+        canvas.width = image.naturalWidth;
+        canvas.height = image.naturalHeight;
+
+        const ctx = canvas.getContext("2d")!;
+        ctx.drawImage(image, 0, 0);
+
+        const imageData = ctx.getImageData(
+            0,
+            0,
+            image.naturalWidth,
+            image.naturalHeight
+        );
+
+        return imageData.data;
+    }
+
+    /** @inheritdoc */
+    public async generateMipmapsAsync(image: RawImageData, levels = -1): Promise<RawImageData> {
+
+        const data = image.getData(0);
+        const resultData = [data];
+
+        const resize = vec2.create();
+        let w = image.baseWidth;
+        let h = image.baseHeight;
+
+        if (levels < 0) {
+
+            while (w > 1 && h > 1) {
+                w = Math.floor(w / 2);
+                h = Math.floor(h / 2);
+
+                resize[0] = w;
+                resize[1] = h;
+
+                if (data instanceof HTMLImageElement) {
+                    const htmlImage = await this._resizeHTMLImageAsync(data, resize);
+                    resultData.push(htmlImage);
+                } else {
+                    throw new Error("Not implemented.");
+                }
+            }
+        } else {
+            for(let i = 0; i < levels; i++) {
+
+                w = Math.floor(w / 2);
+                h = Math.floor(h / 2);
+
+                resize[0] = w;
+                resize[1] = h;
+
+                if (data instanceof HTMLImageElement) {
+                    const htmlImage = await this._resizeHTMLImageAsync(data, resize);
+                    resultData.push(htmlImage);
+                } else {
+                    throw new Error("Not implemented.");
+                }
+            }
+        }
+
+        return new RawImageData(resultData, image.baseWidth, image.baseHeight, image.channels);
+    }
+
+    private async _resizeHTMLImageAsync(image: HTMLImageElement, vec2: vec2): Promise<HTMLImageElement> {
+
+        const w = Math.floor(vec2[0]);
+        const h = Math.floor(vec2[1]);
+
+        const canvas = document.createElement("canvas");
+        canvas.width = w;
+        canvas.height = h;
+
+        const context = canvas.getContext("2d")!;
+        context.imageSmoothingEnabled = true;
+        context.imageSmoothingQuality = "high";
+        context.drawImage(image, 0, 0, w, h);
+
+        const pixels = context.getImageData(0, 0, w, h);
+        void pixels;
+
+        const resizedImage = new Image();
+        resizedImage.width = w;
+        resizedImage.height = h;
+        resizedImage.src = canvas.toDataURL("image/png");
+
+        const promise = new Promise<HTMLImageElement>((resolve, reject) => {
+            resizedImage.onload = () => {
+                resolve(resizedImage);
+            };
+            resizedImage.onerror = () => {
+                reject(new Error("Failed to load resized image."));
+            };
+        });
+
+        return promise;
+    }
+}

package/src/api/image/IImageProcessor.ts

@@ -0,0 +1,28 @@
+import {RawImageData} from "./RawImageData.ts";
+import {vec2} from "gl-matrix";
+/** The image processor. */
+export interface IImageProcessor {
+
+    /**
+     * Resize the image to the given size.
+     * @param image The image to resize.
+     * @param vec2 The new size.
+     * @returns The resized image.
+     */
+    resizeAsync(image: RawImageData, vec2: vec2): Promise<RawImageData>;
+
+    /**
+     * Generate mipmaps levels for the image.
+     * @param image The image to generate mipmaps for.
+     * @param levels The number of mip levels to generate. -1 for automatic.
+     * @returns The new image data with mipmaps.
+     */
+    generateMipmapsAsync(image: RawImageData, levels?: number): Promise<RawImageData>;
+
+    /**
+     * Get the bytes from an HTML image element.
+     * @param image The image to get the bytes from.
+     * @returns The bytes of the image.
+     */
+    getBytesFromHtmlImage(image: HTMLImageElement): Uint8ClampedArray<ArrayBuffer>;
+}