@rings-webgpu/core 1.0.0 → 1.0.2

package/dist/src/gfx/renderJob/passRenderer/shadow/ShadowMapPassRenderer.js

@@ -0,0 +1,224 @@
+import { Engine3D } from "../../../../Engine3D";
+import { Vector3 } from "../../../../math/Vector3";
+import { Depth2DTextureArray } from "../../../../textures/Depth2DTextureArray";
+import { Time } from "../../../../util/Time";
+import { GPUTextureFormat } from "../../../graphics/webGpu/WebGPUConst";
+import { WebGPUDescriptorCreator } from "../../../graphics/webGpu/descriptor/WebGPUDescriptorCreator";
+import { GPUContext } from "../../GPUContext";
+import { EntityCollect } from "../../collect/EntityCollect";
+import { ShadowLightsCollect } from "../../collect/ShadowLightsCollect";
+import { RTFrame } from "../../frame/RTFrame";
+import { OcclusionSystem } from "../../occlusion/OcclusionSystem";
+import { PassType } from "../state/PassType";
+import { RendererBase } from "../RendererBase";
+import { Reference } from "../../../../util/Reference";
+import { CSM } from "../../../../core/csm/CSM";
+import { VirtualTexture } from "../../../../textures/VirtualTexture";
+import { GlobalBindGroup } from "../../../graphics/webGpu/core/bindGroups/GlobalBindGroup";
+export class ShadowMapPassRenderer extends RendererBase {
+    constructor() {
+        super();
+        this._forceUpdate = false;
+        this._shadowPos = new Vector3();
+        this._shadowCameraTarget = new Vector3();
+        this.setShadowMap(Engine3D.setting.shadow.shadowSize, CSM.Cascades);
+        this.passType = PassType.SHADOW;
+    }
+    setShadowMap(size, cascades) {
+        this.rendererPassStates = [];
+        this.depth2DArrayTexture = new Depth2DTextureArray(size, size, GPUTextureFormat.depth32float, 8);
+        Reference.getInstance().attached(this.depth2DArrayTexture, this);
+        for (let i = 0; i < 8; i++) {
+            let rtFrame = new RTFrame([], []);
+            const tex = new VirtualTexture(size, size, GPUTextureFormat.depth32float, false);
+            tex.name = `shadowDepthTexture_${i}`;
+            rtFrame.depthTexture = tex;
+            rtFrame.label = "shadowRender";
+            rtFrame.customSize = true;
+            rtFrame.depthCleanValue = 1;
+            let rendererPassState = WebGPUDescriptorCreator.createRendererPassState(rtFrame);
+            this.rendererPassStates[i] = rendererPassState;
+        }
+    }
+    render(view, occlusionSystem) {
+        let shadowSetting = Engine3D.setting.shadow;
+        if (!shadowSetting.enable)
+            return;
+        let camera = view.camera;
+        let scene = view.scene;
+        this.shadowPassCount = 0;
+        if (!shadowSetting.needUpdate)
+            return;
+        if (!(Time.frame % shadowSetting.updateFrameRate == 0))
+            return;
+        let shadowLightList = ShadowLightsCollect.getDirectShadowLightWhichScene(scene);
+        let shadowSize = shadowSetting.shadowSize;
+        const cascades = CSM.Cascades;
+        for (let light of shadowLightList) {
+            const dirLight = light;
+            let shadowIndex = dirLight.shadowIndex;
+            this.rendererPassState = this.rendererPassStates[shadowIndex];
+            shadowSize = this.rendererPassState.depthTexture.width;
+            let viewRenderList = EntityCollect.instance.getRenderShaderCollect(view);
+            for (const renderList of viewRenderList) {
+                let nodeMap = renderList[1];
+                for (const iterator of nodeMap) {
+                    let node = iterator[1];
+                    if (!node.isDestroyed && node.preInit(this._rendererType)) {
+                        node.nodeUpdate(view, this._rendererType, this.rendererPassState, null);
+                        break;
+                    }
+                }
+            }
+            if ((dirLight.castShadow && dirLight.needUpdateShadow) ||
+                this._forceUpdate ||
+                (dirLight.castShadow && shadowSetting.autoUpdate)) {
+                dirLight.needUpdateShadow = false;
+                if (camera.enableCSM && shadowIndex == 0) {
+                    for (let csmIndex = 0; csmIndex < cascades; csmIndex++) {
+                        this.rendererPassState = this.rendererPassStates[csmIndex];
+                        let csmChild = camera.csm.children[csmIndex];
+                        let extents = camera.getCSMShadowWorldExtents(csmIndex);
+                        this.poseShadowCamera(camera, dirLight.direction, csmChild.shadowCamera, extents, csmChild.bound.center);
+                        this.renderShadow(view, csmChild.shadowCamera, occlusionSystem, this.rendererPassState);
+                        this.copyDepthTexture(this.rendererPassState.depthTexture, this.depth2DArrayTexture, csmIndex, shadowSize);
+                    }
+                }
+                else {
+                    if (camera.enableCSM) {
+                        shadowIndex += cascades - 1;
+                    }
+                    let extents = camera.getShadowWorldExtents();
+                    this.rendererPassState = this.rendererPassStates[shadowIndex];
+                    this.poseShadowCamera(camera, dirLight.direction, dirLight.shadowCamera, extents, camera.lookTarget);
+                    this.renderShadow(view, dirLight.shadowCamera, occlusionSystem, this.rendererPassState);
+                    this.copyDepthTexture(this.rendererPassState.depthTexture, this.depth2DArrayTexture, shadowIndex, shadowSize);
+                }
+            }
+        }
+        this._forceUpdate = false;
+    }
+    copyDepthTexture(src, dst, dstIndex, shadowSize) {
+        let qCommand = GPUContext.beginCommandEncoder();
+        qCommand.copyTextureToTexture({
+            texture: src.getGPUTexture(),
+            mipLevel: 0,
+            origin: { x: 0, y: 0, z: 0 },
+        }, {
+            texture: dst.getGPUTexture(),
+            mipLevel: 0,
+            origin: { x: 0, y: 0, z: dstIndex },
+        }, {
+            width: shadowSize,
+            height: shadowSize,
+            depthOrArrayLayers: 1,
+        });
+        GPUContext.endCommandEncoder(qCommand);
+    }
+    poseShadowCamera(viewCamera, direction, shadowCamera, extents, lookAt) {
+        this._shadowPos.copy(direction).normalize(viewCamera.far);
+        lookAt.add(this._shadowPos, this._shadowCameraTarget);
+        lookAt.subtract(this._shadowPos, this._shadowPos);
+        shadowCamera.transform.lookAt(this._shadowPos, this._shadowCameraTarget);
+        shadowCamera.orthoOffCenter(-extents, extents, -extents, extents, viewCamera.near, viewCamera.far * 2);
+    }
+    compute() { }
+    renderShadow(view, shadowCamera, occlusionSystem, state) {
+        let collectInfo = EntityCollect.instance.getRenderNodes(view.scene, shadowCamera);
+        let command = GPUContext.beginCommandEncoder();
+        let encoder = GPUContext.beginRenderPass(command, state);
+        shadowCamera.transform.updateWorldMatrix();
+        if (OcclusionSystem.enable) {
+            occlusionSystem.update(shadowCamera, view.scene);
+            occlusionSystem.collect(collectInfo, shadowCamera);
+        }
+        GlobalBindGroup.updateCameraGroup(shadowCamera);
+        GPUContext.bindCamera(encoder, shadowCamera);
+        let op_bundleList = this.renderShadowBundleOp(view, shadowCamera, state);
+        let tr_bundleList = this.renderShadowBundleTr(view, shadowCamera, state);
+        if (op_bundleList.length > 0) {
+            encoder.executeBundles(op_bundleList);
+        }
+        this.drawShadowRenderNodes(view, shadowCamera, encoder, collectInfo.opaqueList);
+        if (tr_bundleList.length > 0) {
+            encoder.executeBundles(tr_bundleList);
+        }
+        this.drawShadowRenderNodes(view, shadowCamera, encoder, collectInfo.transparentList);
+        GPUContext.endPass(encoder);
+        GPUContext.endCommandEncoder(command);
+    }
+    renderShadowBundleOp(view, shadowCamera, state) {
+        let entityBatchCollect = EntityCollect.instance.getOpRenderGroup(view.scene);
+        if (entityBatchCollect) {
+            let bundlerList = [];
+            entityBatchCollect.renderGroup.forEach((v) => {
+                if (v.bundleMap.has(this._rendererType)) {
+                    bundlerList.push(v.bundleMap.get(this._rendererType));
+                }
+                else {
+                    let renderBundleEncoder = GPUContext.recordBundleEncoder(state.renderBundleEncoderDescriptor);
+                    this.recordShadowRenderBundleNode(view, shadowCamera, renderBundleEncoder, v.renderNodes);
+                    let newBundle = renderBundleEncoder.finish();
+                    v.bundleMap.set(this._rendererType, newBundle);
+                    bundlerList.push(newBundle);
+                }
+            });
+            return bundlerList;
+        }
+        return [];
+    }
+    renderShadowBundleTr(view, shadowCamera, state) {
+        let entityBatchCollect = EntityCollect.instance.getTrRenderGroup(view.scene);
+        if (entityBatchCollect) {
+            let bundlerList = [];
+            entityBatchCollect.renderGroup.forEach((v) => {
+                if (v.bundleMap.has(this._rendererType)) {
+                    bundlerList.push(v.bundleMap.get(this._rendererType));
+                }
+                else {
+                    let renderBundleEncoder = GPUContext.recordBundleEncoder(state.renderBundleEncoderDescriptor);
+                    this.recordShadowRenderBundleNode(view, shadowCamera, renderBundleEncoder, v.renderNodes);
+                    let newBundle = renderBundleEncoder.finish();
+                    v.bundleMap.set(this._rendererType, newBundle);
+                    bundlerList.push(newBundle);
+                }
+            });
+            return bundlerList;
+        }
+        return [];
+    }
+    recordShadowRenderBundleNode(view, shadowCamera, encoder, nodes, clusterLightingBuffer) {
+        GlobalBindGroup.updateCameraGroup(shadowCamera);
+        GPUContext.bindCamera(encoder, shadowCamera);
+        if (nodes) {
+            GPUContext.bindGeometryBuffer(encoder, nodes[0].geometry);
+            for (let i = 0; i < nodes.length; ++i) {
+                let renderNode = nodes[i];
+                if (!renderNode.transform.enable)
+                    continue;
+                renderNode.recordRenderPass2(view, this._rendererType, this.rendererPassState, clusterLightingBuffer, encoder);
+            }
+        }
+    }
+    drawShadowRenderNodes(view, shadowCamera, encoder, nodes, clusterLightingBuffer) {
+        GlobalBindGroup.updateCameraGroup(shadowCamera);
+        GPUContext.bindCamera(encoder, shadowCamera);
+        if (nodes) {
+            for (let i = Engine3D.setting.render.drawOpMin; i < Math.min(nodes.length, Engine3D.setting.render.drawOpMax); ++i) {
+                let renderNode = nodes[i];
+                if (!renderNode.transform.enable)
+                    continue;
+                if (!renderNode.enable)
+                    continue;
+                if (!renderNode.castShadow)
+                    continue;
+                if (renderNode.isDestroyed)
+                    continue;
+                if (!renderNode.preInit(this._rendererType)) {
+                    renderNode.nodeUpdate(view, this._rendererType, this.rendererPassState, clusterLightingBuffer);
+                }
+                renderNode.renderPass2(view, this._rendererType, this.rendererPassState, clusterLightingBuffer, encoder);
+            }
+        }
+    }
+}

package/dist/src/gfx/renderJob/passRenderer/state/PassType.d.ts

@@ -0,0 +1,13 @@
+export declare enum PassType {
+    COLOR = 1,
+    REFLECTION = 2,
+    POSITION = 4,
+    GRAPHIC = 8,
+    GI = 16,
+    Cluster = 32,
+    SHADOW = 64,
+    POINT_SHADOW = 128,
+    POST = 256,
+    DEPTH = 512,
+    UI = 1024
+}

package/dist/src/gfx/renderJob/passRenderer/state/PassType.js

@@ -0,0 +1,14 @@
+export var PassType;
+(function (PassType) {
+    PassType[PassType["COLOR"] = 1] = "COLOR";
+    PassType[PassType["REFLECTION"] = 2] = "REFLECTION";
+    PassType[PassType["POSITION"] = 4] = "POSITION";
+    PassType[PassType["GRAPHIC"] = 8] = "GRAPHIC";
+    PassType[PassType["GI"] = 16] = "GI";
+    PassType[PassType["Cluster"] = 32] = "Cluster";
+    PassType[PassType["SHADOW"] = 64] = "SHADOW";
+    PassType[PassType["POINT_SHADOW"] = 128] = "POINT_SHADOW";
+    PassType[PassType["POST"] = 256] = "POST";
+    PassType[PassType["DEPTH"] = 512] = "DEPTH";
+    PassType[PassType["UI"] = 1024] = "UI";
+})(PassType || (PassType = {}));

package/dist/src/gfx/renderJob/passRenderer/state/RendererMask.d.ts

@@ -0,0 +1,18 @@
+export declare enum RendererMask {
+    Default = 1,
+    IgnoreDepthPass = 2,
+    Sky = 6,
+    Particle = 10,
+    SkinnedMesh = 16,
+    MorphTarget = 32,
+    Terrain = 64,
+    UI = 128,
+    Reflection = 256,
+    ReflectionDebug = 512,
+    Graphic3D = 1024
+}
+export declare class RendererMaskUtil {
+    static addMask(src: RendererMask, tag: RendererMask): RendererMask;
+    static removeMask(src: RendererMask, tag: RendererMask): RendererMask;
+    static hasMask(m1: RendererMask, m2: RendererMask): boolean;
+}

package/dist/src/gfx/renderJob/passRenderer/state/RendererMask.js

@@ -0,0 +1,27 @@
+export var RendererMask;
+(function (RendererMask) {
+    RendererMask[RendererMask["Default"] = 1] = "Default";
+    RendererMask[RendererMask["IgnoreDepthPass"] = 2] = "IgnoreDepthPass";
+    RendererMask[RendererMask["Sky"] = 6] = "Sky";
+    RendererMask[RendererMask["Particle"] = 10] = "Particle";
+    RendererMask[RendererMask["SkinnedMesh"] = 16] = "SkinnedMesh";
+    RendererMask[RendererMask["MorphTarget"] = 32] = "MorphTarget";
+    RendererMask[RendererMask["Terrain"] = 64] = "Terrain";
+    RendererMask[RendererMask["UI"] = 128] = "UI";
+    RendererMask[RendererMask["Reflection"] = 256] = "Reflection";
+    RendererMask[RendererMask["ReflectionDebug"] = 512] = "ReflectionDebug";
+    RendererMask[RendererMask["Graphic3D"] = 1024] = "Graphic3D";
+})(RendererMask || (RendererMask = {}));
+export class RendererMaskUtil {
+    static addMask(src, tag) {
+        let value = src | tag;
+        return value;
+    }
+    static removeMask(src, tag) {
+        let value = src & ~tag;
+        return value;
+    }
+    static hasMask(m1, m2) {
+        return (m1 & m2) == m2;
+    }
+}

package/dist/src/gfx/renderJob/passRenderer/state/RendererPassState.d.ts

@@ -0,0 +1,27 @@
+import { Camera3D } from "../../../../core/Camera3D";
+import { RenderTexture } from "../../../../textures/RenderTexture";
+import { Texture } from "../../../graphics/webGpu/core/texture/Texture";
+import { RTDescriptor } from "../../../graphics/webGpu/descriptor/RTDescriptor";
+import { RTFrame } from "../../frame/RTFrame";
+export declare class RendererPassState {
+    label: string;
+    customSize: boolean;
+    zPreTexture: RenderTexture;
+    depthTexture: RenderTexture;
+    renderTargetTextures: GPUColorTargetState[];
+    outColor: number;
+    renderTargets: Texture[];
+    rtTextureDescriptors: RTDescriptor[];
+    irradianceBuffer: Texture[];
+    multisample: number;
+    multiTexture: GPUTexture;
+    depthViewIndex: number;
+    depthCleanValue: number;
+    isOutTarget: boolean;
+    camera3D: Camera3D;
+    rtFrame: RTFrame;
+    renderPassDescriptor: GPURenderPassDescriptor;
+    renderBundleEncoderDescriptor: GPURenderBundleEncoderDescriptor;
+    depthLoadOp: GPULoadOp;
+    getLastRenderTexture(): Texture;
+}

package/dist/src/gfx/renderJob/passRenderer/state/RendererPassState.js

@@ -0,0 +1,24 @@
+import { Engine3D } from "../../../../Engine3D";
+export class RendererPassState {
+    constructor() {
+        this.label = "";
+        this.customSize = false;
+        this.zPreTexture = null;
+        this.depthTexture = null;
+        this.outColor = -1;
+        this.multisample = 0;
+        this.depthViewIndex = 0;
+        this.depthCleanValue = 0;
+        this.isOutTarget = true;
+    }
+    getLastRenderTexture() {
+        if (this.renderTargets) {
+            return this.renderTargets.length > 0
+                ? this.renderTargets[0]
+                : Engine3D.res.redTexture;
+        }
+        else {
+            return Engine3D.res.redTexture;
+        }
+    }
+}

package/dist/src/gfx/renderJob/post/BloomPost.d.ts

@@ -0,0 +1,45 @@
+import { UniformGPUBuffer } from "../../graphics/webGpu/core/buffer/UniformGPUBuffer";
+import { ComputeShader } from "../../graphics/webGpu/shader/ComputeShader";
+import { RendererPassState } from "../passRenderer/state/RendererPassState";
+import { PostBase } from "./PostBase";
+import { View3D } from "../../../core/View3D";
+import { RTFrame } from "../frame/RTFrame";
+import { VirtualTexture } from "../../../textures/VirtualTexture";
+export declare class BloomPost extends PostBase {
+    RT_BloomUp: VirtualTexture[];
+    RT_BloomDown: VirtualTexture[];
+    RT_threshold: VirtualTexture;
+    rendererPassState: RendererPassState;
+    thresholdCompute: ComputeShader;
+    downSampleComputes: ComputeShader[];
+    upSampleComputes: ComputeShader[];
+    postCompute: ComputeShader;
+    bloomSetting: UniformGPUBuffer;
+    rtFrame: RTFrame;
+    constructor();
+    onAttach(view: View3D): void;
+    onDetach(view: View3D): void;
+    private createGUI;
+    private removeGUI;
+    get downSampleBlurSize(): number;
+    set downSampleBlurSize(value: number);
+    get downSampleBlurSigma(): number;
+    set downSampleBlurSigma(value: number);
+    get upSampleBlurSize(): number;
+    set upSampleBlurSize(value: number);
+    get upSampleBlurSigma(): number;
+    set upSampleBlurSigma(value: number);
+    get luminanceThreshole(): number;
+    set luminanceThreshole(value: number);
+    get bloomIntensity(): number;
+    set bloomIntensity(value: number);
+    get hdr(): number;
+    set hdr(value: number);
+    private createThreshouldCompute;
+    private createDownSampleComputes;
+    private createUpSampleComputes;
+    private createPostCompute;
+    private createResource;
+    render(view: View3D, command: GPUCommandEncoder): void;
+    onResize(): void;
+}

package/dist/src/gfx/renderJob/post/BloomPost.js

@@ -0,0 +1,245 @@
+import { UniformGPUBuffer } from "../../graphics/webGpu/core/buffer/UniformGPUBuffer";
+import { WebGPUDescriptorCreator } from "../../graphics/webGpu/descriptor/WebGPUDescriptorCreator";
+import { ComputeShader } from "../../graphics/webGpu/shader/ComputeShader";
+import { GPUTextureFormat } from "../../graphics/webGpu/WebGPUConst";
+import { webGPUContext } from "../../graphics/webGpu/Context3D";
+import { GPUContext } from "../GPUContext";
+import { PostBase } from "./PostBase";
+import { Engine3D } from "../../../Engine3D";
+import { RTDescriptor } from "../../graphics/webGpu/descriptor/RTDescriptor";
+import { RTFrame } from "../frame/RTFrame";
+import { downSample, post, threshold, upSample, } from "../../../assets/shader/compute/BloomEffect_cs";
+import { VirtualTexture } from "../../../textures/VirtualTexture";
+export class BloomPost extends PostBase {
+    constructor() {
+        super();
+    }
+    onAttach(view) {
+        Engine3D.setting.render.postProcessing.bloom.enable = true;
+        this.createGUI();
+    }
+    onDetach(view) {
+        Engine3D.setting.render.postProcessing.bloom.enable = false;
+        this.removeGUI();
+    }
+    createGUI() { }
+    removeGUI() { }
+    get downSampleBlurSize() {
+        return Engine3D.setting.render.postProcessing.bloom.downSampleBlurSize;
+    }
+    set downSampleBlurSize(value) {
+        Engine3D.setting.render.postProcessing.bloom.downSampleBlurSize = value;
+    }
+    get downSampleBlurSigma() {
+        return Engine3D.setting.render.postProcessing.bloom.downSampleBlurSigma;
+    }
+    set downSampleBlurSigma(value) {
+        Engine3D.setting.render.postProcessing.bloom.downSampleBlurSigma = value;
+    }
+    get upSampleBlurSize() {
+        return Engine3D.setting.render.postProcessing.bloom.upSampleBlurSize;
+    }
+    set upSampleBlurSize(value) {
+        Engine3D.setting.render.postProcessing.bloom.upSampleBlurSize = value;
+    }
+    get upSampleBlurSigma() {
+        return Engine3D.setting.render.postProcessing.bloom.upSampleBlurSigma;
+    }
+    set upSampleBlurSigma(value) {
+        Engine3D.setting.render.postProcessing.bloom.upSampleBlurSigma = value;
+    }
+    get luminanceThreshole() {
+        return Engine3D.setting.render.postProcessing.bloom.luminanceThreshole;
+    }
+    set luminanceThreshole(value) {
+        Engine3D.setting.render.postProcessing.bloom.luminanceThreshole = value;
+    }
+    get bloomIntensity() {
+        return Engine3D.setting.render.postProcessing.bloom.bloomIntensity;
+    }
+    set bloomIntensity(value) {
+        Engine3D.setting.render.postProcessing.bloom.bloomIntensity = value;
+    }
+    get hdr() {
+        return Engine3D.setting.render.postProcessing.bloom.hdr;
+    }
+    set hdr(value) {
+        Engine3D.setting.render.postProcessing.bloom.hdr = value;
+    }
+    createThreshouldCompute() {
+        this.thresholdCompute = new ComputeShader(threshold);
+        this.autoSetColorTexture("inTex", this.thresholdCompute);
+        this.thresholdCompute.setStorageTexture(`outTex`, this.RT_threshold);
+        this.thresholdCompute.setUniformBuffer("bloomCfg", this.bloomSetting);
+        this.thresholdCompute.workerSizeX = Math.ceil(this.RT_threshold.width / 8);
+        this.thresholdCompute.workerSizeY = Math.ceil(this.RT_threshold.height / 8);
+        this.thresholdCompute.workerSizeZ = 1;
+    }
+    createDownSampleComputes() {
+        let setting = Engine3D.setting.render.postProcessing.bloom;
+        const N = setting.downSampleStep;
+        this.downSampleComputes = [];
+        for (let i = 0; i < N; i++) {
+            let compute = new ComputeShader(downSample);
+            let dstTexture = this.RT_BloomDown[i];
+            let srcTexture = i == 0 ? this.RT_threshold : this.RT_BloomDown[i - 1];
+            compute.setSamplerTexture(`inTex`, srcTexture);
+            compute.setStorageTexture(`outTex`, dstTexture);
+            compute.setUniformBuffer("bloomCfg", this.bloomSetting);
+            compute.workerSizeX = Math.ceil(dstTexture.width / 8);
+            compute.workerSizeY = Math.ceil(dstTexture.height / 8);
+            compute.workerSizeZ = 1;
+            this.downSampleComputes.push(compute);
+        }
+    }
+    createUpSampleComputes() {
+        let setting = Engine3D.setting.render.postProcessing.bloom;
+        const N = setting.downSampleStep;
+        this.upSampleComputes = [];
+        {
+            let compute = new ComputeShader(upSample);
+            let dstTexture = this.RT_BloomUp[0];
+            let srcTexture = this.RT_BloomDown[N - 2];
+            compute.setSamplerTexture(`_MainTex`, srcTexture);
+            compute.setSamplerTexture(`_PrevMip`, this.RT_BloomDown[N - 1]);
+            compute.setStorageTexture(`outTex`, dstTexture);
+            compute.setUniformBuffer("bloomCfg", this.bloomSetting);
+            compute.workerSizeX = Math.ceil(dstTexture.width / 8);
+            compute.workerSizeY = Math.ceil(dstTexture.height / 8);
+            compute.workerSizeZ = 1;
+            this.upSampleComputes.push(compute);
+        }
+        for (let i = 1; i < N - 1; i++) {
+            let compute = new ComputeShader(upSample);
+            let dstTexture = this.RT_BloomUp[i];
+            let srcTexture = this.RT_BloomDown[N - 2 - i];
+            compute.setSamplerTexture(`_MainTex`, srcTexture);
+            compute.setSamplerTexture(`_PrevMip`, this.RT_BloomUp[i - 1]);
+            compute.setStorageTexture(`outTex`, dstTexture);
+            compute.setUniformBuffer("bloomCfg", this.bloomSetting);
+            compute.workerSizeX = Math.ceil(dstTexture.width / 8);
+            compute.workerSizeY = Math.ceil(dstTexture.height / 8);
+            compute.workerSizeZ = 1;
+            this.upSampleComputes.push(compute);
+        }
+    }
+    createPostCompute() {
+        let setting = Engine3D.setting.render.postProcessing.bloom;
+        const N = setting.downSampleStep;
+        this.postCompute = new ComputeShader(post);
+        this.autoSetColorTexture("_MainTex", this.postCompute);
+        this.postCompute.setSamplerTexture(`_BloomTex`, this.RT_BloomUp[N - 2]);
+        this.postCompute.setStorageTexture(`outTex`, this.RT_threshold);
+        this.postCompute.setUniformBuffer("bloomCfg", this.bloomSetting);
+        this.postCompute.workerSizeX = Math.ceil(this.RT_threshold.width / 8);
+        this.postCompute.workerSizeY = Math.ceil(this.RT_threshold.height / 8);
+        this.postCompute.workerSizeZ = 1;
+    }
+    createResource() {
+        let setting = Engine3D.setting.render.postProcessing.bloom;
+        this.bloomSetting = new UniformGPUBuffer(4 * 2); //vector4 * 2
+        let [screenWidth, screenHeight] = webGPUContext.presentationSize;
+        let usage = GPUTextureUsage.STORAGE_BINDING |
+            GPUTextureUsage.COPY_DST |
+            GPUTextureUsage.COPY_SRC |
+            GPUTextureUsage.TEXTURE_BINDING;
+        this.RT_threshold = new VirtualTexture(screenWidth, screenHeight, GPUTextureFormat.rgba16float, false, usage);
+        const N = setting.downSampleStep;
+        {
+            this.RT_BloomDown = [];
+            let w = Math.ceil(screenWidth / 4);
+            let h = Math.ceil(screenHeight / 4);
+            for (let i = 0; i < N; i++) {
+                this.RT_BloomDown[i] = new VirtualTexture(w, h, GPUTextureFormat.rgba16float, false, usage);
+                w = Math.ceil(w / 2);
+                h = Math.ceil(h / 2);
+            }
+        }
+        {
+            this.RT_BloomUp = [];
+            for (let i = 0; i < N - 1; i++) {
+                let w = this.RT_BloomDown[N - 2 - i].width;
+                let h = this.RT_BloomDown[N - 2 - i].height;
+                this.RT_BloomUp[i] = new VirtualTexture(w, h, GPUTextureFormat.rgba16float, false, usage);
+            }
+        }
+        let bloomDesc = new RTDescriptor();
+        bloomDesc.loadOp = `load`;
+        this.rtFrame = new RTFrame([this.RT_threshold], [bloomDesc]);
+    }
+    render(view, command) {
+        if (!this.thresholdCompute) {
+            this.createResource();
+            this.createThreshouldCompute();
+            this.createDownSampleComputes();
+            this.createUpSampleComputes();
+            this.createPostCompute();
+            this.rendererPassState = WebGPUDescriptorCreator.createRendererPassState(this.rtFrame, null);
+            this.rendererPassState.label = "Bloom";
+        }
+        let cfg = Engine3D.setting.render.postProcessing.bloom;
+        this.bloomSetting.setFloat("downSampleStep", cfg.downSampleStep);
+        this.bloomSetting.setFloat("downSampleBlurSize", cfg.downSampleBlurSize);
+        this.bloomSetting.setFloat("downSampleBlurSigma", cfg.downSampleBlurSigma);
+        this.bloomSetting.setFloat("upSampleBlurSize", cfg.upSampleBlurSize);
+        this.bloomSetting.setFloat("upSampleBlurSigma", cfg.upSampleBlurSigma);
+        this.bloomSetting.setFloat("luminanceThreshole", cfg.luminanceThreshole);
+        this.bloomSetting.setFloat("bloomIntensity", cfg.bloomIntensity);
+        this.bloomSetting.setFloat("hdr", cfg.hdr);
+        this.bloomSetting.apply();
+        GPUContext.computeCommand(command, [
+            this.thresholdCompute,
+            ...this.downSampleComputes,
+            ...this.upSampleComputes,
+            this.postCompute,
+        ]);
+        GPUContext.lastRenderPassState = this.rendererPassState;
+    }
+    onResize() {
+        let cfg = Engine3D.setting.render.postProcessing.bloom;
+        let [screenWidth, screenHeight] = webGPUContext.presentationSize;
+        this.RT_threshold.resize(screenWidth, screenHeight);
+        const N = cfg.downSampleStep;
+        let w = Math.ceil(screenWidth / 4);
+        let h = Math.ceil(screenHeight / 4);
+        for (let i = 0; i < N; i++) {
+            this.RT_BloomDown[i].resize(w, h);
+            w = Math.ceil(w / 2);
+            h = Math.ceil(h / 2);
+        }
+        for (let i = 0; i < N - 1; i++) {
+            let w = this.RT_BloomDown[N - 2 - i].width;
+            let h = this.RT_BloomDown[N - 2 - i].height;
+            this.RT_BloomUp[i].resize(w, h);
+        }
+        this.thresholdCompute.workerSizeX = Math.ceil(this.RT_threshold.width / 8);
+        this.thresholdCompute.workerSizeY = Math.ceil(this.RT_threshold.height / 8);
+        this.thresholdCompute.workerSizeZ = 1;
+        for (let i = 0; i < N; i++) {
+            let compute = this.downSampleComputes[i];
+            let dstTexture = this.RT_BloomDown[i];
+            compute.workerSizeX = Math.ceil(dstTexture.width / 8);
+            compute.workerSizeY = Math.ceil(dstTexture.height / 8);
+            compute.workerSizeZ = 1;
+        }
+        {
+            let dstTexture = this.RT_BloomUp[0];
+            let compute = this.upSampleComputes[0];
+            compute.workerSizeX = Math.ceil(dstTexture.width / 8);
+            compute.workerSizeY = Math.ceil(dstTexture.height / 8);
+            compute.workerSizeZ = 1;
+        }
+        {
+            for (let i = 1; i < N - 1; i++) {
+                let dstTexture = this.RT_BloomUp[i];
+                let compute = this.upSampleComputes[i];
+                compute.workerSizeX = Math.ceil(dstTexture.width / 8);
+                compute.workerSizeY = Math.ceil(dstTexture.height / 8);
+                compute.workerSizeZ = 1;
+            }
+        }
+        this.postCompute.workerSizeX = Math.ceil(this.RT_threshold.width / 8);
+        this.postCompute.workerSizeY = Math.ceil(this.RT_threshold.height / 8);
+        this.postCompute.workerSizeZ = 1;
+    }
+}