@rings-webgpu/core 1.0.0 → 1.0.2

package/dist/src/shape/SphereGeometry.d.ts

@@ -0,0 +1,25 @@
+import { GeometryBase } from "../core/geometry/GeometryBase";
+export declare class SphereGeometry extends GeometryBase {
+    shape_vertices: any[];
+    shape_indices: any[];
+    radius: number;
+    widthSegments: number;
+    heightSegments: number;
+    phiStart: number;
+    phiLength: number;
+    thetaStart: number;
+    thetaLength: number;
+    /**
+     * 球体几何体
+     * @constructor
+     * @param radius 球体半径
+     * @param widthSegments 定义水平分段数
+     * @param heightSegments 定义垂直分段数
+     * @param phiStart 球体赤道线起始点的弧度
+     * @param phiLength 球体赤道线的弧长
+     * @param thetaStart 球体经线起始点的弧度
+     * @param thetaLength 球体经线的弧长
+     */
+    constructor(radius: any, widthSegments: any, heightSegments: any, phiStart?: any, phiLength?: any, thetaStart?: any, thetaLength?: any);
+    protected buildGeometry(): void;
+}

package/dist/src/shape/SphereGeometry.js

@@ -0,0 +1,102 @@
+import { BoundingBox, Vector3 } from "..";
+import { GeometryBase } from "../core/geometry/GeometryBase";
+import { VertexAttributeName } from "../core/geometry/VertexAttributeName";
+export class SphereGeometry extends GeometryBase {
+    /**
+     * 球体几何体
+     * @constructor
+     * @param radius 球体半径
+     * @param widthSegments 定义水平分段数
+     * @param heightSegments 定义垂直分段数
+     * @param phiStart 球体赤道线起始点的弧度
+     * @param phiLength 球体赤道线的弧长
+     * @param thetaStart 球体经线起始点的弧度
+     * @param thetaLength 球体经线的弧长
+     */
+    constructor(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength) {
+        super();
+        this.shape_vertices = [];
+        this.shape_indices = [];
+        this.radius = radius;
+        this.widthSegments = widthSegments;
+        this.heightSegments = heightSegments;
+        this.phiStart = phiStart;
+        this.phiLength = phiLength;
+        this.thetaStart = thetaStart;
+        this.thetaLength = thetaLength;
+        this.buildGeometry();
+    }
+    buildGeometry() {
+        var i, j, triIndex = 0;
+        let _segmentsH = this.heightSegments;
+        let _segmentsW = this.widthSegments;
+        let _radius = this.radius;
+        var vertexCount = (_segmentsH + 1) * (_segmentsW + 1);
+        let position_arr = new Float32Array(vertexCount * 3);
+        let normal_arr = new Float32Array(vertexCount * 3);
+        let uv_arr = new Float32Array(vertexCount * 2);
+        let indice_arr = new Uint16Array(_segmentsW * _segmentsH * 2 * 3);
+        let pi = 0;
+        let ni = 0;
+        let ui = 0;
+        for (j = 0; j <= _segmentsH; ++j) {
+            var horAngle = (Math.PI * j) / _segmentsH;
+            var y = _radius * Math.cos(horAngle);
+            var ringRadius = _radius * Math.sin(horAngle);
+            for (i = 0; i <= _segmentsW; ++i) {
+                var verAngle = (2 * Math.PI * i) / _segmentsW;
+                var x = ringRadius * Math.cos(verAngle);
+                var z = ringRadius * Math.sin(verAngle);
+                var normLen = 1 / Math.sqrt(x * x + y * y + z * z);
+                let index = i * _segmentsW + j;
+                position_arr[pi++] = x;
+                position_arr[pi++] = y;
+                position_arr[pi++] = z;
+                normal_arr[ni++] = x * normLen;
+                normal_arr[ni++] = y * normLen;
+                normal_arr[ni++] = z * normLen;
+                uv_arr[ui++] = i / _segmentsW;
+                uv_arr[ui++] = j / _segmentsH;
+                if (i > 0 && j > 0) {
+                    var a = (_segmentsW + 1) * j + i;
+                    var b = (_segmentsW + 1) * j + i - 1;
+                    var c = (_segmentsW + 1) * (j - 1) + i - 1;
+                    var d = (_segmentsW + 1) * (j - 1) + i;
+                    if (j == _segmentsH) {
+                        indice_arr[triIndex++] = a;
+                        indice_arr[triIndex++] = c;
+                        indice_arr[triIndex++] = d;
+                    }
+                    else if (j == 1) {
+                        indice_arr[triIndex++] = a;
+                        indice_arr[triIndex++] = b;
+                        indice_arr[triIndex++] = c;
+                    }
+                    else {
+                        indice_arr[triIndex++] = a;
+                        indice_arr[triIndex++] = b;
+                        indice_arr[triIndex++] = c;
+                        indice_arr[triIndex++] = a;
+                        indice_arr[triIndex++] = c;
+                        indice_arr[triIndex++] = d;
+                    }
+                }
+            }
+        }
+        this.setIndices(indice_arr);
+        this.setAttribute(VertexAttributeName.position, position_arr);
+        this.setAttribute(VertexAttributeName.normal, normal_arr);
+        this.setAttribute(VertexAttributeName.uv, uv_arr);
+        this.setAttribute(VertexAttributeName.TEXCOORD_1, uv_arr);
+        this.addSubGeometry({
+            indexStart: 0,
+            indexCount: indice_arr.length,
+            vertexStart: 0,
+            vertexCount: 0,
+            firstStart: 0,
+            index: 0,
+            topology: 0,
+        });
+        this.bounds = new BoundingBox(Vector3.ZERO, new Vector3(this.radius * 2, this.radius * 2, this.radius * 2));
+    }
+}

package/dist/src/shape/TorusGeometry.d.ts

@@ -0,0 +1,33 @@
+import { GeometryBase } from "../core/geometry/GeometryBase";
+/**
+ * Torus Geometry
+ * @group Geometry
+ */
+export declare class TorusGeometry extends GeometryBase {
+    /**
+     * Radius of torus
+     */
+    radius: number;
+    /**
+     * Pipe radius
+     */
+    tube: number;
+    /**
+     * Number of torus segments.
+     */
+    radialSegments: number;
+    /**
+     * Number of pipeline segments.
+     */
+    tubularSegments: number;
+    /**
+     *
+     * @constructor
+     * @param radius {number} Radius of torus, default value is 0.4
+     * @param tube {number} Pipe radius, default value is 0.1.
+     * @param radialSegments {number}Number of torus segments, default value is 32.
+     * @param tubularSegments {number} Number of pipeline segments, defualt value is 32.
+     */
+    constructor(radius?: number, tube?: number, radialSegments?: number, tubularSegments?: number);
+    private initVertex;
+}

package/dist/src/shape/TorusGeometry.js

@@ -0,0 +1,88 @@
+import { BoundingBox } from "../core/bound/BoundingBox";
+import { GeometryBase } from "../core/geometry/GeometryBase";
+import { VertexAttributeName } from "../core/geometry/VertexAttributeName";
+import { Vector3 } from "../math/Vector3";
+/**
+ * Torus Geometry
+ * @group Geometry
+ */
+export class TorusGeometry extends GeometryBase {
+    /**
+     *
+     * @constructor
+     * @param radius {number} Radius of torus, default value is 0.4
+     * @param tube {number} Pipe radius, default value is 0.1.
+     * @param radialSegments {number}Number of torus segments, default value is 32.
+     * @param tubularSegments {number} Number of pipeline segments, defualt value is 32.
+     */
+    constructor(radius = 0.4, tube = 0.1, radialSegments = 32, tubularSegments = 32) {
+        super();
+        // this.geometrySource = new SerializeGeometrySource().setPrimitive('primitive-torus');
+        this.radius = radius;
+        this.tube = tube;
+        this.radialSegments = radialSegments;
+        this.tubularSegments = tubularSegments;
+        // this.name = 'TorusGeometry';
+        this.initVertex();
+    }
+    initVertex() {
+        const arc = 2.0 * Math.PI;
+        const radius = this.radius;
+        const tube = this.tube;
+        const radialSegments = this.radialSegments;
+        const tubularSegments = this.tubularSegments;
+        this.bounds = new BoundingBox(Vector3.ZERO.clone(), new Vector3(radius * 2, tube * 2, radius * 2));
+        var vertexCount = (radialSegments + 1) * (tubularSegments + 1);
+        let position_arr = new Float32Array(vertexCount * 3);
+        let normal_arr = new Float32Array(vertexCount * 3);
+        let uv_arr = new Float32Array(vertexCount * 2);
+        let indicesData = new Uint16Array(radialSegments * tubularSegments * 2 * 3);
+        let pi = 0;
+        let ni = 0;
+        let ui = 0;
+        let triIndex = 0;
+        for (let j = 0; j <= radialSegments; j++) {
+            for (let i = 0; i <= tubularSegments; i++) {
+                const u = i / tubularSegments;
+                const v = j / radialSegments;
+                const u1 = u * arc;
+                const v1 = v * Math.PI * 2;
+                position_arr[pi++] = (radius + tube * Math.cos(v1)) * Math.sin(u1);
+                position_arr[pi++] = tube * Math.sin(v1);
+                position_arr[pi++] = (radius + tube * Math.cos(v1)) * Math.cos(u1);
+                normal_arr[ni++] = Math.sin(u1) * Math.cos(v1);
+                normal_arr[ni++] = Math.sin(v1);
+                normal_arr[ni++] = Math.cos(u1) * Math.cos(v1);
+                uv_arr[ui++] = u;
+                uv_arr[ui++] = v;
+                if (i < tubularSegments && j < radialSegments) {
+                    const segment = tubularSegments + 1;
+                    const a = segment * j + i;
+                    const b = segment * (j + 1) + i;
+                    const c = segment * (j + 1) + i + 1;
+                    const d = segment * j + i + 1;
+                    indicesData[triIndex++] = a;
+                    indicesData[triIndex++] = d;
+                    indicesData[triIndex++] = b;
+                    indicesData[triIndex++] = d;
+                    indicesData[triIndex++] = c;
+                    indicesData[triIndex++] = b;
+                }
+            }
+        }
+        this.setIndices(indicesData);
+        this.setAttribute(VertexAttributeName.position, position_arr);
+        this.setAttribute(VertexAttributeName.normal, normal_arr);
+        this.setAttribute(VertexAttributeName.uv, uv_arr);
+        this.setAttribute(VertexAttributeName.TEXCOORD_1, uv_arr);
+        this.addSubGeometry({
+            indexStart: 0,
+            indexCount: indicesData.length,
+            vertexStart: 0,
+            vertexCount: 0,
+            firstStart: 0,
+            index: 0,
+            topology: 0,
+        });
+    }
+}

package/dist/src/shape/TrailGeometry.d.ts

@@ -0,0 +1,18 @@
+import { GeometryBase } from "../core/geometry/GeometryBase";
+/**
+ * Plane geometry
+ * @group Geometry
+ */
+export declare class TrailGeometry extends GeometryBase {
+    /**
+     * Number of trail segments of a plane
+     */
+    segment: number;
+    private row;
+    /**
+     *
+     * @constructor
+     */
+    constructor(segment: number);
+    private buildGeometry;
+}

package/dist/src/shape/TrailGeometry.js

@@ -0,0 +1,68 @@
+import { GeometryBase } from "../core/geometry/GeometryBase";
+import { VertexAttributeName } from "../core/geometry/VertexAttributeName";
+/**
+ * Plane geometry
+ * @group Geometry
+ */
+export class TrailGeometry extends GeometryBase {
+    /**
+     *
+     * @constructor
+     */
+    constructor(segment) {
+        super();
+        this.row = 0;
+        this.segment = segment;
+        this.buildGeometry();
+    }
+    buildGeometry() {
+        this.row = this.segment + 1;
+        let indices_arr = new Uint32Array(this.segment * 6);
+        let position_arr = new Float32Array(this.row * 3 * 2);
+        let normal_arr = new Float32Array(this.row * 3 * 2);
+        let uv_arr = new Float32Array(this.row * 2 * 2);
+        for (let i = 0; i < this.row; i++) {
+            position_arr[i * 3 * 2 + 0] = 0;
+            position_arr[i * 3 * 2 + 1] = 0;
+            position_arr[i * 3 * 2 + 2] = 0;
+            position_arr[i * 3 * 2 + 3] = 0;
+            position_arr[i * 3 * 2 + 4] = 0;
+            position_arr[i * 3 * 2 + 5] = 0;
+            normal_arr[i * 3 * 2 + 0] = 0;
+            normal_arr[i * 3 * 2 + 1] = 0;
+            normal_arr[i * 3 * 2 + 2] = 1;
+            normal_arr[i * 3 * 2 + 3] = 0;
+            normal_arr[i * 3 * 2 + 4] = 0;
+            normal_arr[i * 3 * 2 + 5] = 1;
+            uv_arr[i * 2 * 2 + 0] = 0;
+            uv_arr[i * 2 * 2 + 1] = i / this.segment;
+            uv_arr[i * 2 * 2 + 2] = 1;
+            uv_arr[i * 2 * 2 + 3] = i / this.segment;
+            let c = i * 2;
+            let f0 = c;
+            let f1 = c + 1;
+            let f2 = c + 2;
+            let f3 = c + 3;
+            indices_arr[i * 6 + 0] = f0;
+            indices_arr[i * 6 + 1] = f1;
+            indices_arr[i * 6 + 2] = f2;
+            indices_arr[i * 6 + 3] = f1;
+            indices_arr[i * 6 + 4] = f3;
+            indices_arr[i * 6 + 5] = f2;
+        }
+        this.setIndices(indices_arr);
+        this.setAttribute(VertexAttributeName.position, position_arr);
+        this.setAttribute(VertexAttributeName.normal, normal_arr);
+        this.setAttribute(VertexAttributeName.uv, uv_arr);
+        this.setAttribute(VertexAttributeName.TEXCOORD_1, uv_arr);
+        this.addSubGeometry({
+            indexStart: 0,
+            indexCount: indices_arr.length,
+            vertexStart: 0,
+            vertexCount: 0,
+            firstStart: 0,
+            index: 0,
+            topology: 0,
+        });
+    }
+}

package/dist/src/shape/TriGeometry.d.ts

@@ -0,0 +1,13 @@
+import { GeometryBase } from "../core/geometry/GeometryBase";
+/**
+ * @group Geometry
+ */
+export declare class TriGeometry extends GeometryBase {
+    private faceCount;
+    /**
+     *
+     * @constructor
+     */
+    constructor(count: number);
+    private buildGeometry;
+}

package/dist/src/shape/TriGeometry.js

@@ -0,0 +1,47 @@
+import { GeometryBase } from "../core/geometry/GeometryBase";
+import { VertexAttributeName } from "../core/geometry/VertexAttributeName";
+/**
+ * @group Geometry
+ */
+export class TriGeometry extends GeometryBase {
+    /**
+     *
+     * @constructor
+     */
+    constructor(count) {
+        super();
+        this.faceCount = 0;
+        this.faceCount = count;
+        this.buildGeometry();
+    }
+    buildGeometry() {
+        let indices_arr = new Uint32Array(this.faceCount * 3);
+        let position_arr = new Float32Array(this.faceCount * 3 * 3);
+        let normal_arr = new Float32Array(this.faceCount * 3 * 3);
+        let uv_arr = new Float32Array(this.faceCount * 3 * 2);
+        let meshIndexList = new Float32Array(this.faceCount * 3 * 1);
+        for (let index = 0; index < this.faceCount; index++) {
+            let i1 = index * 3 + 0;
+            let i2 = index * 3 + 1;
+            let i3 = index * 3 + 2;
+            indices_arr[i1] = i1;
+            indices_arr[i2] = i2;
+            indices_arr[i3] = i3;
+        }
+        this.setIndices(indices_arr);
+        this.setAttribute(VertexAttributeName.position, position_arr);
+        this.setAttribute(VertexAttributeName.normal, normal_arr);
+        this.setAttribute(VertexAttributeName.uv, uv_arr);
+        this.setAttribute(VertexAttributeName.TEXCOORD_1, uv_arr);
+        this.setAttribute(VertexAttributeName.vIndex, meshIndexList);
+        this.addSubGeometry({
+            indexStart: 0,
+            indexCount: indices_arr.length,
+            vertexStart: 0,
+            vertexCount: 0,
+            firstStart: 0,
+            index: 0,
+            topology: 0,
+        });
+    }
+}

package/dist/src/textures/AtmosphericScatteringSky.d.ts

@@ -0,0 +1,42 @@
+import { Texture } from '../gfx/graphics/webGpu/core/texture/Texture';
+import { Color } from '../math/Color';
+import { LDRTextureCube } from './LDRTextureCube';
+/**
+ * AtmosphericScattering Sky Setting
+ * @group Texture
+ */
+export declare class AtmosphericScatteringSkySetting {
+    sunRadius: number;
+    sunRadiance: number;
+    mieG: number;
+    mieHeight: number;
+    eyePos: number;
+    sunX: number;
+    sunY: number;
+    sunBrightness: number;
+    displaySun: boolean;
+    defaultTextureCubeSize: number;
+    defaultTexture2DSize: number;
+    skyColor: Color;
+}
+/**
+ * Atmospheric Scattering Sky Texture
+ * @group Texture
+ */
+export declare class AtmosphericScatteringSky extends LDRTextureCube {
+    private _internalTexture;
+    private _cubeSize;
+    readonly setting: AtmosphericScatteringSkySetting;
+    /**
+     * @constructor
+     * @param setting AtmosphericScatteringSkySetting
+     * @returns
+     */
+    constructor(setting: AtmosphericScatteringSkySetting);
+    get texture2D(): Texture;
+    /**
+     * @internal
+     * @returns
+     */
+    apply(): this;
+}

package/dist/src/textures/AtmosphericScatteringSky.js

@@ -0,0 +1,97 @@
+import { AtmosphericScatteringSky_shader } from '../assets/shader/sky/AtmosphericScatteringSky_shader';
+import { UniformGPUBuffer } from '../gfx/graphics/webGpu/core/buffer/UniformGPUBuffer';
+import { ComputeShader } from '../gfx/graphics/webGpu/shader/ComputeShader';
+import { GPUTextureFormat } from '../gfx/graphics/webGpu/WebGPUConst';
+import { GPUContext } from '../gfx/renderJob/GPUContext';
+import { Color } from '../math/Color';
+import { LDRTextureCube } from './LDRTextureCube';
+import { VirtualTexture } from './VirtualTexture';
+/**
+ * AtmosphericScattering Sky Setting
+ * @group Texture
+ */
+export class AtmosphericScatteringSkySetting {
+    constructor() {
+        this.sunRadius = 500.0;
+        this.sunRadiance = 11.0;
+        this.mieG = 0.76;
+        this.mieHeight = 1200;
+        this.eyePos = 1500;
+        this.sunX = 0.71;
+        this.sunY = 0.56;
+        this.sunBrightness = 1.0;
+        this.displaySun = true;
+        this.defaultTextureCubeSize = 512;
+        this.defaultTexture2DSize = 1024;
+        this.skyColor = new Color(1, 1, 1, 1);
+    }
+}
+/**
+ * Atmospheric Scattering Sky Texture
+ * @group Texture
+ */
+export class AtmosphericScatteringSky extends LDRTextureCube {
+    /**
+     * @constructor
+     * @param setting AtmosphericScatteringSkySetting
+     * @returns
+     */
+    constructor(setting) {
+        super();
+        this.setting = setting;
+        this._cubeSize = setting.defaultTextureCubeSize;
+        this._internalTexture = new AtmosphericTexture2D(setting.defaultTexture2DSize, setting.defaultTexture2DSize * 0.5);
+        this._internalTexture.update(this.setting);
+        this.createFromTexture(this._cubeSize, this._internalTexture);
+        return this;
+    }
+    get texture2D() {
+        return this._internalTexture;
+    }
+    /**
+     * @internal
+     * @returns
+     */
+    apply() {
+        this._internalTexture.update(this.setting);
+        this._faceData.uploadErpTexture(this._internalTexture);
+        return this;
+    }
+}
+/**
+ * @internal
+ */
+class AtmosphericTexture2D extends VirtualTexture {
+    constructor(width, height) {
+        super(width, height, GPUTextureFormat.rgba16float, false, GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING);
+        this.initCompute(width, height);
+    }
+    initCompute(w, h) {
+        this._uniformBuffer = new UniformGPUBuffer(16 * 4);
+        this._uniformBuffer.apply();
+        this._computeShader = new ComputeShader(AtmosphericScatteringSky_shader.cs);
+        this._computeShader.setUniformBuffer('uniformBuffer', this._uniformBuffer);
+        this._computeShader.setStorageTexture(`outTexture`, this);
+        this._computeShader.workerSizeX = w / 8;
+        this._computeShader.workerSizeY = h / 8;
+    }
+    update(setting) {
+        this._uniformBuffer.setFloat('width', this.width);
+        this._uniformBuffer.setFloat('height', this.height);
+        this._uniformBuffer.setFloat('sunU', setting.sunX);
+        this._uniformBuffer.setFloat('sunV', setting.sunY);
+        this._uniformBuffer.setFloat('eyePos', setting.eyePos);
+        this._uniformBuffer.setFloat('sunRadius', setting.sunRadius);
+        this._uniformBuffer.setFloat('sunRadiance', setting.sunRadiance);
+        this._uniformBuffer.setFloat('mieG', setting.mieG);
+        this._uniformBuffer.setFloat('mieHeight', setting.mieHeight);
+        this._uniformBuffer.setFloat('sunBrightness', setting.sunBrightness);
+        this._uniformBuffer.setFloat('displaySun', setting.displaySun ? 1 : 0);
+        this._uniformBuffer.setColor('skyColor', setting.skyColor);
+        this._uniformBuffer.apply();
+        let command = GPUContext.beginCommandEncoder();
+        GPUContext.computeCommand(command, [this._computeShader]);
+        GPUContext.endCommandEncoder(command);
+        return this;
+    }
+}

package/dist/src/textures/BitmapTexture2D.d.ts

@@ -0,0 +1,12 @@
+import { LoaderFunctions } from "../loader/LoaderFunctions";
+import { Texture } from "../gfx/graphics/webGpu/core/texture/Texture";
+export declare class BitmapTexture2D extends Texture {
+    private _source;
+    premultiplyAlpha: PremultiplyAlpha;
+    constructor(useMipmap?: boolean);
+    get source(): HTMLCanvasElement | ImageBitmap | OffscreenCanvas | HTMLImageElement;
+    set source(value: HTMLCanvasElement | ImageBitmap | OffscreenCanvas | HTMLImageElement);
+    load(url: string, loaderFunctions?: LoaderFunctions): Promise<unknown>;
+    private imageData;
+    loadFromBlob(imgData: Blob): Promise<boolean>;
+}

package/dist/src/textures/BitmapTexture2D.js

@@ -0,0 +1,94 @@
+import { GPUTextureFormat } from "../gfx/graphics/webGpu/WebGPUConst";
+import { LoaderBase } from "../loader/LoaderBase";
+import { StringUtil } from "../util/StringUtil";
+import { Texture } from "../gfx/graphics/webGpu/core/texture/Texture";
+export class BitmapTexture2D extends Texture {
+    constructor(useMipmap = true) {
+        super();
+        this.premultiplyAlpha = "none";
+        this.useMipmap = useMipmap;
+        this.lodMinClamp = 0;
+        this.lodMaxClamp = 4;
+    }
+    get source() {
+        return this._source;
+    }
+    set source(value) {
+        this._source = value;
+        if (this._source instanceof HTMLImageElement) {
+            this._source.decode().then(async () => {
+                if (this._source instanceof HTMLImageElement) {
+                    const imageBitmap = await createImageBitmap(this._source, {
+                        imageOrientation: this.flipY ? "flipY" : "from-image",
+                        premultiplyAlpha: "none",
+                    });
+                    this.generate(imageBitmap);
+                }
+            });
+        }
+        else {
+            if (this._source instanceof HTMLCanvasElement ||
+                this._source instanceof ImageBitmap) {
+                this.generate(this._source);
+            }
+        }
+    }
+    async load(url, loaderFunctions) {
+        this.name = StringUtil.getURLName(url);
+        if (url.indexOf(";base64") != -1) {
+            const img = document.createElement("img");
+            let start = url.indexOf("data:image");
+            let uri = url.substring(start, url.length);
+            img.src = uri;
+            await img.decode();
+            img.width = Math.max(img.width, 32);
+            img.height = Math.max(img.height, 32);
+            const imageBitmap = await createImageBitmap(img, {
+                resizeWidth: img.width,
+                resizeHeight: img.height,
+                imageOrientation: this.flipY ? "flipY" : "from-image",
+                premultiplyAlpha: "none",
+            });
+            this.format = GPUTextureFormat.rgba8unorm;
+            this.generate(imageBitmap);
+        }
+        else {
+            return new Promise((succ, fial) => {
+                fetch(url, {
+                    headers: Object.assign({
+                        Accept: "image/avif,image/webp,*/*",
+                    }, loaderFunctions?.headers),
+                }).then((r) => {
+                    LoaderBase.read(url, r, loaderFunctions).then((chunks) => {
+                        let img = new Blob([chunks], { type: "image/jpeg" });
+                        chunks = null;
+                        this.loadFromBlob(img).then(() => {
+                            succ(true);
+                        });
+                    });
+                });
+            });
+        }
+        return true;
+    }
+    async loadFromBlob(imgData) {
+        this.imageData = imgData;
+        let imageBitmap = await createImageBitmap(imgData, {
+            imageOrientation: this.flipY ? "flipY" : "from-image",
+            premultiplyAlpha: "none",
+        });
+        if (imageBitmap.width < 32 || imageBitmap.height < 32) {
+            let width = Math.max(imageBitmap.width, 32);
+            let height = Math.max(imageBitmap.height, 32);
+            imageBitmap = await createImageBitmap(imageBitmap, {
+                resizeWidth: width,
+                resizeHeight: height,
+                imageOrientation: this.flipY ? "flipY" : "from-image",
+                premultiplyAlpha: "none",
+            });
+        }
+        this.format = GPUTextureFormat.rgba8unorm;
+        this.generate(imageBitmap);
+        return true;
+    }
+}

package/dist/src/textures/BitmapTexture2DArray.d.ts

@@ -0,0 +1,15 @@
+import { BitmapTexture2D } from "./BitmapTexture2D";
+import { ITexture } from "../gfx/graphics/webGpu/core/texture/ITexture";
+import { Texture } from "../gfx/graphics/webGpu/core/texture/Texture";
+export declare class BitmapTexture2DArray extends Texture implements ITexture {
+    private _bitmapTextures;
+    constructor(width: number, height: number, numberLayer: number);
+    setTextures(texs: BitmapTexture2D[]): void;
+    addTexture(bitmapTexture: BitmapTexture2D): void;
+    removeTexture(bitmapTexture: BitmapTexture2D): void;
+    private updateTexture;
+    internalCreateBindingLayoutDesc(): void;
+    internalCreateTexture(): void;
+    internalCreateView(): void;
+    internalCreateSampler(): void;
+}