@rings-webgpu/core 1.0.0 → 1.0.2

package/dist/src/components/gui/core/GUIGeometry.d.ts

@@ -0,0 +1,36 @@
+import { GeometryBase } from "../../../core/geometry/GeometryBase";
+import { StorageGPUBuffer } from "../../../gfx/graphics/webGpu/core/buffer/StorageGPUBuffer";
+import { Vector3 } from "../../../math/Vector3";
+import { UITransform } from "../uiComponents/UITransform";
+import { GUIQuad } from "./GUIQuad";
+/**
+ * composite geometry of gui, holding and updating attribute data
+ * @group GPU GUI
+ */
+export declare class GUIGeometry extends GeometryBase {
+    private _attributeUV;
+    private _attributeVIndex;
+    private _faceIndexes;
+    private _uvSize;
+    private _vIndexSize;
+    private _posAttribute;
+    private _spriteAttribute;
+    private _colorAttribute;
+    private _onPositionChange;
+    private _onSpriteChange;
+    private _onColorChange;
+    readonly maxQuadCount: number;
+    constructor(max: number);
+    updateSubGeometry(index: number, start: number, count: number): import("../../..").SubGeometry;
+    resetSubGeometries(): void;
+    updateBounds(min?: Vector3, max?: Vector3): this;
+    getPositionBuffer(): StorageGPUBuffer;
+    getSpriteBuffer(): StorageGPUBuffer;
+    getColorBuffer(): StorageGPUBuffer;
+    create(): this;
+    private createBuffer;
+    fillQuad(quad: GUIQuad, transform: UITransform): void;
+    private fillQuadPosition;
+    private fillQuadColor;
+    private fillQuadSprite;
+}

package/dist/src/components/gui/core/GUIGeometry.js

@@ -0,0 +1,215 @@
+import { GeometryBase } from "../../../core/geometry/GeometryBase";
+import { VertexAttributeName } from "../../../core/geometry/VertexAttributeName";
+import { StorageGPUBuffer } from "../../../gfx/graphics/webGpu/core/buffer/StorageGPUBuffer";
+import { Vector3 } from "../../../math/Vector3";
+import { ImageType } from "../GUIConfig";
+import { GUIQuadAttrEnum } from "./GUIDefine";
+class GUIAttribute {
+    constructor(count) {
+        this.buffer = new StorageGPUBuffer(count, 0);
+        this.array = new Float32Array(this.buffer.memory.shareDataBuffer);
+    }
+}
+/**
+ * composite geometry of gui, holding and updating attribute data
+ * @group GPU GUI
+ */
+export class GUIGeometry extends GeometryBase {
+    constructor(max) {
+        super();
+        this._uvSize = 2;
+        this._vIndexSize = 1;
+        this._onPositionChange = true;
+        this._onSpriteChange = true;
+        this._onColorChange = true;
+        this.maxQuadCount = max;
+    }
+    updateSubGeometry(index, start, count) {
+        let geom = this.subGeometries[index];
+        if (geom) {
+            let desc = geom.lodLevels[0];
+            desc.indexStart = start;
+            desc.indexCount = count;
+            desc.index = index;
+        }
+        else {
+            geom = this.addSubGeometry({
+                indexStart: start,
+                indexCount: count,
+                vertexStart: 0,
+                vertexCount: 0,
+                firstStart: 0,
+                index: index,
+                topology: 0,
+            });
+        }
+        return geom;
+    }
+    resetSubGeometries() {
+        for (let item of this.subGeometries) {
+            let desc = item.lodLevels[0];
+            desc.indexStart = 0;
+            desc.indexCount = 0;
+            desc.index = 0;
+        }
+    }
+    updateBounds(min, max) {
+        let halfMax = Number.MAX_VALUE * 0.1;
+        min = new Vector3(-halfMax, -halfMax, -halfMax);
+        max = new Vector3(halfMax, halfMax, halfMax);
+        this.bounds.setFromMinMax(min, max);
+        return this;
+    }
+    getPositionBuffer() {
+        if (this._onPositionChange) {
+            this._posAttribute.buffer.apply();
+            this._onPositionChange = false;
+        }
+        return this._posAttribute.buffer;
+    }
+    getSpriteBuffer() {
+        if (this._onSpriteChange) {
+            this._spriteAttribute.buffer.apply();
+            this._onSpriteChange = false;
+        }
+        return this._spriteAttribute.buffer;
+    }
+    getColorBuffer() {
+        if (this._onColorChange) {
+            this._colorAttribute.buffer.apply();
+            this._onColorChange = false;
+        }
+        return this._colorAttribute.buffer;
+    }
+    create() {
+        this.createBuffer();
+        this.updateBounds();
+        let quadNum = this.maxQuadCount;
+        let uvList = [];
+        let vIndexList = [];
+        for (let i = 0; i < quadNum; i++) {
+            uvList.push(...QuadStruct.attUV);
+        }
+        for (let i = 0, count = this.maxQuadCount * QuadStruct.vertexCount; i < count; i++) {
+            vIndexList[i] = i;
+        }
+        this._attributeUV = new Float32Array(QuadStruct.vertexCount * quadNum * this._uvSize);
+        this._attributeVIndex = new Float32Array(QuadStruct.vertexCount * quadNum * this._vIndexSize);
+        this._attributeUV.set(uvList, 0);
+        this._attributeVIndex.set(vIndexList, 0);
+        let indexList = [];
+        for (let i = 0; i < quadNum; i++) {
+            for (let j = 0; j < QuadStruct.indecies.length; j++) {
+                const ind = QuadStruct.indecies[j] + i * 4;
+                indexList.push(ind);
+            }
+        }
+        this._faceIndexes = new Uint32Array(quadNum * 6);
+        this._faceIndexes.set(indexList, 0);
+        this.setIndices(this._faceIndexes);
+        this.setAttribute(VertexAttributeName.uv, this._attributeUV);
+        this.setAttribute(VertexAttributeName.vIndex, this._attributeVIndex);
+        this.updateSubGeometry(0, 0, this._faceIndexes.length);
+        return this;
+    }
+    createBuffer() {
+        let quadNum = this.maxQuadCount;
+        this._posAttribute = new GUIAttribute(quadNum * 4);
+        this._spriteAttribute = new GUIAttribute(quadNum * (4 + 4 + 2 + 2));
+        this._colorAttribute = new GUIAttribute(quadNum * 4);
+    }
+    fillQuad(quad, transform) {
+        if (quad.dirtyAttributes & GUIQuadAttrEnum.POSITION) {
+            this.fillQuadPosition(quad, transform);
+        }
+        if (quad.dirtyAttributes & GUIQuadAttrEnum.COLOR) {
+            this.fillQuadColor(quad, transform);
+        }
+        if (quad.dirtyAttributes & GUIQuadAttrEnum.SPRITE) {
+            this.fillQuadSprite(quad, transform);
+        }
+    }
+    fillQuadPosition(quad, transform) {
+        SetBufferDataV4.setXYZW(this._posAttribute.array, quad.z, quad.left, quad.bottom, quad.right, quad.top);
+        this._onPositionChange = true;
+    }
+    fillQuadColor(quad, transform) {
+        let color = quad.color;
+        let array = this._colorAttribute.array;
+        SetBufferDataV4.setXYZW(array, quad.z, color.r, color.g, color.b, color.a);
+        this._onColorChange = true;
+    }
+    fillQuadSprite(quad, transform) {
+        let texture = quad.sprite;
+        let uvSliceWidth = 0;
+        let uvSliceHeight = 0;
+        if (texture.isSliced && quad.imageType == ImageType.Sliced) {
+            uvSliceWidth = texture.trimSize.x;
+            uvSliceWidth =
+                (transform.width - (texture.offsetSize.z - texture.trimSize.x)) /
+                    uvSliceWidth;
+            uvSliceHeight = texture.trimSize.y;
+            uvSliceHeight =
+                (transform.height - (texture.offsetSize.w - texture.trimSize.y)) /
+                    uvSliceHeight;
+        }
+        let textureID = texture.guiTexture.dynamicId;
+        let uvRec = texture.uvRec;
+        let uvBorder = texture.uvBorder;
+        let spriteArray = this._spriteAttribute.array;
+        let offset = (4 + 4 + 2 + 2) * quad.z;
+        spriteArray[offset + 0] = uvRec.x;
+        spriteArray[offset + 1] = uvRec.y;
+        spriteArray[offset + 2] = uvRec.z;
+        spriteArray[offset + 3] = uvRec.w;
+        spriteArray[offset + 4] = uvBorder.x;
+        spriteArray[offset + 5] = uvBorder.y;
+        spriteArray[offset + 6] = uvBorder.z;
+        spriteArray[offset + 7] = uvBorder.w;
+        spriteArray[offset + 8] = uvSliceWidth;
+        spriteArray[offset + 9] = uvSliceHeight;
+        spriteArray[offset + 10] = textureID;
+        spriteArray[offset + 11] = quad.visible ? 1 : 0;
+        this._onSpriteChange = true;
+    }
+}
+class SetBufferData {
+    static set(array, index, offset, stride, ...args) {
+        let from = index * stride + offset;
+        for (let i = 0, c = args.length; i < c; i++) {
+            array[from + i] = args[i];
+        }
+    }
+}
+class SetBufferDataV4 extends SetBufferData {
+    static setXYZW(array, index, x, y, z, w) {
+        this.set(array, index, 0, 4, x, y, z, w);
+    }
+    static setXYZ(array, index, x, y, z) {
+        this.set(array, index, 0, 4, x, y, z);
+    }
+    static setZ(array, index, z) {
+        this.set(array, index, 3, 4, z);
+    }
+}
+class SetBufferDataV3 extends SetBufferData {
+    static setXY(array, index, x, y) {
+        this.set(array, index, 0, 3, x, y);
+    }
+    static setXYZ(array, index, x, y, z) {
+        this.set(array, index, 0, 3, x, y, z);
+    }
+    static setZ(array, index, z) {
+        this.set(array, index, 2, 3, z);
+    }
+}
+class SetBufferDataV2 extends SetBufferData {
+    static setXY(array, index, x, y) {
+        this.set(array, index, 0, 2, x, y);
+    }
+}
+class QuadStruct {
+    static { this.vertexCount = 4; }
+    static { this.attUV = [0, 0, 1, 0, 1, 1, 0, 1]; }
+    static { this.indecies = [0, 1, 2, 0, 2, 3]; }
+}

package/dist/src/components/gui/core/GUIGeometryRebuild.d.ts

@@ -0,0 +1,21 @@
+import { UITransform } from "../uiComponents/UITransform";
+import { UIPanel } from "../uiComponents/UIPanel";
+/**
+ * 检查和重建GUI网格(包括几何体和材质)，处理UI元素的批量渲染优化
+ * @group GPU GUI
+ */
+export declare class GUIGeometryRebuild {
+    private _textureMap;
+    private _textureList;
+    /**
+     * 重建指定的GUI网格
+     * 检查并重建GUI网格，包括几何体和材质
+     * @param transforms 指定GUI Mesh的UITransform列表
+     * @param panel 指定要重建几何体的GUI Mesh对象
+     * @param forceUpdate 是否需要强制重构
+     * @returns 返回构建结果(单个UIPanel的GUIMaterials支持的纹理数量有限制，不能超过限制)
+     */
+    build(transforms: UITransform[], panel: UIPanel, forceUpdate: boolean): boolean;
+    private collectQuads;
+    private push;
+}

package/dist/src/components/gui/core/GUIGeometryRebuild.js

@@ -0,0 +1,105 @@
+import { GUIQuadAttrEnum } from "./GUIDefine";
+/**
+ * 检查和重建GUI网格(包括几何体和材质)，处理UI元素的批量渲染优化
+ * @group GPU GUI
+ */
+export class GUIGeometryRebuild {
+    constructor() {
+        this._textureMap = new Map();
+        this._textureList = [];
+    }
+    /**
+     * 重建指定的GUI网格
+     * 检查并重建GUI网格，包括几何体和材质
+     * @param transforms 指定GUI Mesh的UITransform列表
+     * @param panel 指定要重建几何体的GUI Mesh对象
+     * @param forceUpdate 是否需要强制重构
+     * @returns 返回构建结果(单个UIPanel的GUIMaterials支持的纹理数量有限制，不能超过限制)
+     */
+    build(transforms, panel, forceUpdate) {
+        let geometry = panel["_geometry"];
+        geometry.resetSubGeometries();
+        let quadIndex = -1;
+        let texIndex = 0;
+        let indexStart = 0;
+        let indexCount = 0;
+        let geometryIndex = 0;
+        let textureList = this._textureList;
+        let textureMap = this._textureMap;
+        function flushPanel() {
+            if (indexCount > 0) {
+                panel.updateDrawCallSegment(geometryIndex, indexStart, indexCount);
+                let material = panel["_uiRenderer"]["materials"][geometryIndex];
+                material.setTextures(textureList);
+                textureMap.clear();
+                textureList.length = 0;
+                geometryIndex++;
+                indexStart += indexCount;
+                indexCount = 0;
+                texIndex = 0;
+            }
+        }
+        textureMap.clear();
+        textureList.length = 0;
+        let collectQuads = [];
+        let zMax = panel.quadMaxCount - 1;
+        for (let transform of transforms) {
+            let needUpdateQuads = transform.needUpdateQuads;
+            collectQuads.length = 0;
+            const quads = this.collectQuads(transform.object3D, collectQuads);
+            for (let quad of quads) {
+                let textureSource = quad.sprite.guiTexture;
+                if (!textureMap.has(textureSource.staticId)) {
+                    if (texIndex == 7)
+                        flushPanel();
+                    textureMap.set(textureSource.staticId, textureSource);
+                    textureSource.dynamicId = texIndex;
+                    textureList[texIndex] = textureSource.texture;
+                    texIndex += 1;
+                }
+                quad.z = ++quadIndex;
+                indexCount += 6;
+                if (quad.cacheTextureId != textureSource.dynamicId) {
+                    quad.dirtyAttributes = GUIQuadAttrEnum.MAX;
+                    quad.cacheTextureId = textureSource.dynamicId;
+                }
+                let updateAllAttr = needUpdateQuads || forceUpdate;
+                if (updateAllAttr) {
+                    quad.dirtyAttributes = GUIQuadAttrEnum.MAX;
+                }
+                if (quad.dirtyAttributes & GUIQuadAttrEnum.POSITION) {
+                    quad.applyTransform(transform);
+                }
+                if (quad.dirtyAttributes) {
+                    quad.writeToGeometry(geometry, transform);
+                }
+                if (quadIndex == zMax) {
+                    flushPanel();
+                    return true;
+                }
+            }
+        }
+        flushPanel();
+        return false;
+    }
+    collectQuads(object3D, list) {
+        list ||= [];
+        let components = object3D.components.values();
+        for (let i of components) {
+            let item = i;
+            if (item.isUIShadow || !item.mainQuads)
+                continue;
+            // push shadow
+            let shadowRender = item.getShadowRender();
+            if (shadowRender) {
+                this.push(shadowRender.mainQuads, list);
+            }
+            //push main
+            this.push(item.mainQuads, list);
+        }
+        return list;
+    }
+    push(src, dst) {
+        src && src.length > 0 && dst.push(...src);
+    }
+}

package/dist/src/components/gui/core/GUIMaterial.d.ts

@@ -0,0 +1,29 @@
+import { Texture } from "../../../gfx/graphics/webGpu/core/texture/Texture";
+import { Material } from "../../../materials/Material";
+import { GUISpace } from "../GUIConfig";
+/**
+ * 材质相关
+ * @group GPU GUI
+ */
+export declare class GUIMaterial extends Material {
+    private _scissorRect;
+    private _screenSize;
+    private _scissorEnable;
+    constructor(space: GUISpace);
+    private addColorPass;
+    setPanelRatio(pixelRatio: number): void;
+    setScissorRect(left: number, bottom: number, right: number, top: number): void;
+    setScissorEnable(value: boolean): void;
+    setScissorCorner(radius: number, fadeOut: number): void;
+    setScreenSize(width: number, height: number): this;
+    setTextures(list: Texture[]): void;
+    private _videoTextureFlags;
+    private setVideoTextureDefine;
+    set envMap(texture: Texture);
+    set shadowMap(texture: Texture);
+    set baseMap(texture: Texture);
+    set normalMap(value: Texture);
+    set emissiveMap(value: Texture);
+    set irradianceMap(value: Texture);
+    set irradianceDepthMap(value: Texture);
+}

package/dist/src/components/gui/core/GUIMaterial.js

@@ -0,0 +1,111 @@
+import { Engine3D } from "../../../Engine3D";
+import { ShaderLib } from "../../../assets/shader/ShaderLib";
+import { GPUCompareFunction, GPUCullMode, } from "../../../gfx/graphics/webGpu/WebGPUConst";
+import { RenderShaderPass } from "../../../gfx/graphics/webGpu/shader/RenderShaderPass";
+import { Shader } from "../../../gfx/graphics/webGpu/shader/Shader";
+import { PassType } from "../../../gfx/renderJob/passRenderer/state/PassType";
+import { BlendMode } from "../../../materials/BlendMode";
+import { Material } from "../../../materials/Material";
+import { Vector2 } from "../../../math/Vector2";
+import { Vector3 } from "../../../math/Vector3";
+import { Vector4 } from "../../../math/Vector4";
+import { GUISpace } from "../GUIConfig";
+import { GUIShader } from "./GUIShader";
+/**
+ * 材质相关
+ * @group GPU GUI
+ */
+export class GUIMaterial extends Material {
+    constructor(space) {
+        super();
+        this._screenSize = new Vector2(1024, 768);
+        this._scissorEnable = false;
+        this._videoTextureFlags = {};
+        ShaderLib.register("GUI_shader_view", GUIShader.GUI_shader_view);
+        ShaderLib.register("GUI_shader_world", GUIShader.GUI_shader_world);
+        let newShader = new Shader();
+        this.addColorPass(newShader, PassType.COLOR, space);
+        this.addColorPass(newShader, PassType.UI, space);
+        this.shader = newShader;
+    }
+    addColorPass(shader, passType, space) {
+        let shaderKey = space == GUISpace.View ? "GUI_shader_view" : "GUI_shader_world";
+        let shaderPass = new RenderShaderPass(shaderKey, shaderKey);
+        shaderPass.passType = passType;
+        shaderPass.setShaderEntry(`VertMain`, `FragMain`);
+        shaderPass.setUniformVector4("scissorRect", new Vector4());
+        shaderPass.setUniformVector2("screenSize", this._screenSize);
+        shaderPass.setUniformFloat("scissorCornerRadius", 0.0);
+        shaderPass.setUniformFloat("scissorFadeOutSize", 0.0);
+        shaderPass.setUniformFloat("pixelRatio", 1);
+        shaderPass.setUniformVector3("v3", Vector3.ZERO);
+        let shaderState = shaderPass.shaderState;
+        shaderState.depthWriteEnabled = false;
+        shaderPass.blendMode = BlendMode.NORMAL;
+        shaderPass.depthCompare =
+            space == GUISpace.View
+                ? GPUCompareFunction.always
+                : GPUCompareFunction.less_equal;
+        shaderPass.cullMode = GPUCullMode.back;
+        shader.addRenderPass(shaderPass);
+    }
+    setPanelRatio(pixelRatio) {
+        this.shader.setUniformFloat("pixelRatio", pixelRatio);
+    }
+    setScissorRect(left, bottom, right, top) {
+        this._scissorRect ||= new Vector4();
+        this._scissorRect.set(left, bottom, right, top);
+        this.shader.setUniformVector4("scissorRect", this._scissorRect);
+    }
+    setScissorEnable(value) {
+        if (this._scissorEnable != value) {
+            this._scissorEnable = value;
+            if (value) {
+                this.shader.setDefine("SCISSOR_ENABLE", true);
+            }
+            else {
+                this.shader.deleteDefine("SCISSOR_ENABLE");
+            }
+            this.shader.noticeValueChange();
+        }
+    }
+    setScissorCorner(radius, fadeOut) {
+        this.shader.setUniformFloat("scissorCornerRadius", radius);
+        this.shader.setUniformFloat("scissorFadeOutSize", fadeOut);
+    }
+    setScreenSize(width, height) {
+        this._screenSize.set(width, height);
+        this.shader.setUniformVector2("screenSize", this._screenSize);
+        return this;
+    }
+    setTextures(list) {
+        for (let i = 0; i < 7; i++) {
+            let texture = list[i] || Engine3D.res.whiteTexture;
+            this.shader.setTexture(`tex_${i}`, texture);
+            this.setVideoTextureDefine(i, texture.isVideoTexture);
+        }
+    }
+    setVideoTextureDefine(i, isVideoTexture) {
+        let changed = false;
+        if (isVideoTexture != this._videoTextureFlags[i]) {
+            if (isVideoTexture) {
+                this.shader.setDefine(`VideoTexture${i}`, true);
+            }
+            else {
+                this.shader.deleteDefine(`VideoTexture${i}`);
+            }
+            this._videoTextureFlags[i] = isVideoTexture;
+            changed = true;
+        }
+        if (changed) {
+            this.shader.noticeValueChange();
+        }
+    }
+    set envMap(texture) { }
+    set shadowMap(texture) { }
+    set baseMap(texture) { }
+    set normalMap(value) { }
+    set emissiveMap(value) { }
+    set irradianceMap(value) { }
+    set irradianceDepthMap(value) { }
+}

package/dist/src/components/gui/core/GUIQuad.d.ts

@@ -0,0 +1,52 @@
+import { UITransform } from "../uiComponents/UITransform";
+import { GUIGeometry } from "./GUIGeometry";
+import { GUISprite } from "./GUISprite";
+import { ImageType } from "../GUIConfig";
+import { Color } from "../../../math/Color";
+import { PoolNode } from "../../../core/pool/ObjectPool";
+import { GUIQuadAttrEnum } from "./GUIDefine";
+/**
+ * 图形界面最小单位
+ * @group GPU GUI
+ */
+export declare class GUIQuad {
+    x: number;
+    y: number;
+    z: number;
+    width: number;
+    height: number;
+    private _globalX;
+    private _globalY;
+    private _globalWidth;
+    private _globalHeight;
+    private _visible;
+    private _offsetX;
+    private _offsetY;
+    protected _sprite: GUISprite;
+    private _color;
+    private _imageType;
+    dirtyAttributes: GUIQuadAttrEnum;
+    cacheTextureId: number;
+    private static textPool;
+    static get quadPool(): PoolNode<GUIQuad>;
+    static recycleQuad(quad: GUIQuad): void;
+    static spawnQuad(): GUIQuad;
+    get imageType(): ImageType;
+    set imageType(value: ImageType);
+    get color(): Color;
+    set color(value: Color);
+    get visible(): boolean;
+    set visible(value: boolean);
+    get sprite(): GUISprite;
+    set sprite(value: GUISprite);
+    get left(): number;
+    get right(): number;
+    get top(): number;
+    get bottom(): number;
+    setSize(width: number, height: number): void;
+    setXY(x: number, y: number): void;
+    setAttrChange(attr: GUIQuadAttrEnum): void;
+    applyTransform(transform: UITransform): this;
+    private getQuadMatrix;
+    writeToGeometry(guiGeometry: GUIGeometry, transform: UITransform): this;
+}