@rings-webgpu/core 1.0.0 → 1.0.2

package/dist/src/gfx/graphics/webGpu/shader/RenderShaderPass.js

@@ -0,0 +1,888 @@
+import { ShaderLib } from "../../../../assets/shader/ShaderLib";
+import { VertexAttributeName } from "../../../../core/geometry/VertexAttributeName";
+import { GPUContext } from "../../../renderJob/GPUContext";
+import { BlendFactor, BlendMode } from "../../../../materials/BlendMode";
+import { IESProfiles } from "../../../../components/lights/IESProfiles";
+import { Engine3D } from "../../../../Engine3D";
+import { GlobalBindGroupLayout } from "../core/bindGroups/GlobalBindGroupLayout";
+import { webGPUContext } from "../Context3D";
+import { ShaderConverter } from "./converter/ShaderConverter";
+import { ShaderPassBase } from "./ShaderPassBase";
+import { ShaderStage } from "./ShaderStage";
+import { Preprocessor } from "./util/Preprocessor";
+import { ShaderReflection } from "./value/ShaderReflectionInfo";
+import { ShaderState } from "./value/ShaderState";
+import { GPUBufferType } from "../core/buffer/GPUBufferType";
+import { MaterialDataUniformGPUBuffer } from "../core/buffer/MaterialDataUniformGPUBuffer";
+import { ShaderUtil } from "./util/ShaderUtil";
+import { Reference } from "../../../../util/Reference";
+import { CSM } from "../../../../core/csm/CSM";
+import { GPUCompareFunction, GPUCullMode } from "../WebGPUConst";
+import { PassType } from "../../../renderJob/passRenderer/state/PassType";
+import { PipelinePool } from "../PipelinePool";
+export class RenderShaderPass extends ShaderPassBase {
+    constructor(vs, fs) {
+        super();
+        this.passType = PassType.COLOR;
+        this.useRz = false;
+        this._textureGroup = -1;
+        this._textureChange = false;
+        this.vsName = vs.toLowerCase();
+        this.fsName = fs.toLowerCase();
+        if (!(this.vsName in ShaderLib)) {
+            console.error(`Shader Not Register, Please Register Shader!`, this.vsName);
+        }
+        if (!(this.fsName in ShaderLib)) {
+            console.error(`Shader Not Register, Please Register Shader!`, this.fsName);
+        }
+        if (ShaderLib[this.vsName]) {
+            this._sourceVS = ShaderLib[this.vsName];
+        }
+        if (ShaderLib[this.fsName]) {
+            this._sourceFS = ShaderLib[this.fsName];
+        }
+        this.textures = {};
+        this.bindGroups = [];
+        this.shaderState = new ShaderState();
+        this.materialDataUniformBuffer = new MaterialDataUniformGPUBuffer();
+        this.materialDataUniformBuffer.visibility = GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT;
+        this._bufferDic.set(`global`, this.materialDataUniformBuffer);
+        this._bufferDic.set(`materialUniform`, this.materialDataUniformBuffer);
+    }
+    /**
+     * Blend mode
+     */
+    get renderOrder() {
+        return this.shaderState.renderOrder;
+    }
+    set renderOrder(value) {
+        if (this.shaderState.renderOrder != value) {
+            this._valueChange = true;
+        }
+        this.shaderState.renderOrder = value;
+    }
+    /**
+        * Cull mode
+        */
+    get doubleSide() {
+        return this.shaderState.cullMode == GPUCullMode.none;
+    }
+    set doubleSide(value) {
+        let b = value ? GPUCullMode.none : this.cullMode;
+        if (this.shaderState.cullMode != b) {
+            this._valueChange = true;
+        }
+        this.shaderState.cullMode = b;
+    }
+    /**
+     * depthWriteEnabled mode
+     */
+    get depthWriteEnabled() {
+        return this.shaderState.depthWriteEnabled;
+    }
+    set depthWriteEnabled(value) {
+        if (this.shaderState.depthWriteEnabled != value) {
+            this._valueChange = true;
+        }
+        this.shaderState.depthWriteEnabled = value;
+    }
+    /**
+     * get render face cull mode
+     */
+    get cullMode() {
+        return this.shaderState.cullMode;
+    }
+    /**
+     * set render face cull mode
+     */
+    set cullMode(value) {
+        if (this.shaderState.cullMode != value) {
+            this._valueChange = true;
+        }
+        this.shaderState.cullMode = value;
+    }
+    /**
+     * get front face mode
+     * @GPUFrontFace
+     */
+    get frontFace() {
+        return this.shaderState.frontFace;
+    }
+    /**
+     * set front face mode
+     * @GPUFrontFace value
+     */
+    set frontFace(value) {
+        if (this.shaderState.frontFace != value) {
+            this._valueChange = true;
+        }
+        this.shaderState.frontFace = value;
+    }
+    /**
+     * Depth bias
+     */
+    get depthBias() {
+        return this.shaderState.depthBias;
+    }
+    set depthBias(value) {
+        if (this.shaderState.depthBias != value) {
+            this._valueChange = true;
+        }
+        this.shaderState.depthBias = value;
+    }
+    /**
+     * Primitive topology
+     */
+    get topology() {
+        return this.shaderState.topology;
+    }
+    set topology(value) {
+        if (this.shaderState.topology != value) {
+            this._valueChange = true;
+        }
+        this.shaderState.topology = value;
+    }
+    /**
+     * Blend mode
+     */
+    get blendMode() {
+        return this.shaderState.blendMode;
+    }
+    set blendMode(value) {
+        if (this.shaderState.blendMode != value) {
+            this._valueChange = true;
+            if (value != BlendMode.NORMAL && value != BlendMode.NONE) {
+                this.renderOrder = 3000;
+            }
+        }
+        this.shaderState.blendMode = value;
+    }
+    /**
+     * Depth compare function
+     */
+    get depthCompare() {
+        return this.shaderState.depthCompare;
+    }
+    set depthCompare(value) {
+        if (this.shaderState.depthCompare != value) {
+            this._valueChange = true;
+        }
+        this.shaderState.depthCompare = value;
+    }
+    /**
+     * Sets the entry point names for the RenderShader vertex phase and fragment phase
+     * @param vsEntryPoint
+     * @param fsEntryPoint
+     */
+    setShaderEntry(vsEntryPoint = '', fsEntryPoint = '') {
+        this.vsEntryPoint = vsEntryPoint;
+        this.fsEntryPoint = fsEntryPoint;
+    }
+    /**
+     *
+     * @param String name
+     * @param UniformValue value
+     */
+    setUniform(name, value) {
+        super.setUniform(name, value);
+        this.materialDataUniformBuffer.onChange();
+    }
+    /**
+     * Set the texture used in the Render Shader code
+     * @param name Name in the shader code
+     * @param texture Texture object
+     */
+    setTexture(name, texture) {
+        if (texture && this.textures[name] != texture) {
+            if (this.textures[name]) {
+                this.textures[name].unBindStateChange(this);
+            }
+            this._textureChange = true;
+            this.textures[name] = texture;
+            if (name == "envMap") {
+                this.envMap = texture;
+            }
+            else if (name == "prefilterMap") {
+                this.prefilterMap = texture;
+            }
+            else if (name == "reflectionMap") {
+                this.reflectionMap = texture;
+            }
+            texture.bindStateChange(() => {
+                this._textureChange = true;
+            }, this);
+        }
+    }
+    get baseColor() {
+        return this.getUniform(`baseColor`);
+    }
+    set baseColor(value) {
+        this.setUniform(`baseColor`, value);
+    }
+    /**
+     * Get the texture used in the Render Shader code
+     * @param name Name in the shader code
+     * @returns Texture object
+     */
+    getTexture(name) {
+        return this.textures[name];
+    }
+    /**
+     * Create a rendering pipeline
+     * @param geometry
+     * @param renderPassState
+     */
+    genRenderPipeline(geometry, renderPassState) {
+        let layouts = this.createGroupLayouts();
+        this.createPipeline(geometry, renderPassState, layouts);
+    }
+    /**
+     * Recompile the shader and create the rendering pipeline
+     * @param geometry
+     * @param rendererPassState
+     */
+    reBuild(geometry, rendererPassState) {
+        this.compileShader(ShaderStage.vertex, this._destVS, rendererPassState);
+        this.compileShader(ShaderStage.fragment, this._destFS, rendererPassState);
+        this.genRenderPipeline(geometry, rendererPassState);
+        // this.apply(geometry,rendererPassState);
+    }
+    /**
+     * Apply render shader state value
+     * @param geometry
+     * @param materialPass
+     * @param rendererPassState
+     * @param noticeFun
+     */
+    apply(geometry, rendererPassState, noticeFun) {
+        this.materialDataUniformBuffer.apply();
+        if (this._textureChange && this._textureGroup != -1) {
+            this._textureChange = false;
+            this.genGroups(this._textureGroup, this.shaderReflection.groups, true);
+        }
+        if (this._valueChange) {
+            if (this._shaderChange) {
+                this.preCompile(geometry);
+                this._shaderChange = false;
+            }
+            this.shaderVariant = ShaderReflection.genRenderShaderVariant(this);
+            this.reBuild(geometry, rendererPassState);
+            this._valueChange = false;
+            // this.genRenderPipeline(geometry, rendererPassState);
+            if (noticeFun) {
+                noticeFun();
+            }
+        }
+    }
+    /**
+     * Precompile the shader code
+     * @param geometry
+     */
+    preCompile(geometry) {
+        this.preDefine(geometry);
+        this.preCompileShader(ShaderStage.vertex, this._sourceVS.concat());
+        this.preCompileShader(ShaderStage.fragment, this._sourceFS.concat());
+        this.genReflection();
+    }
+    /**
+     * Apply defines syntax values
+     * @param shader
+     * @param renderPassState
+     * @returns
+     */
+    applyPostDefine(shader, renderPassState) {
+        //*********************************/
+        //******************/
+        if (renderPassState.renderTargetTextures.length > 1) {
+            this.defineValue[`USE_WORLDPOS`] = true;
+            this.defineValue[`USEGBUFFER`] = true;
+        }
+        else {
+            this.defineValue[`USE_WORLDPOS`] = false;
+            this.defineValue[`USEGBUFFER`] = false;
+        }
+        if (Engine3D.setting.render.useCompressGBuffer) {
+            this.defineValue[`USE_COMPRESSGBUFFER`] = true;
+        }
+        else {
+            this.defineValue[`USE_COMPRESSGBUFFER`] = false;
+        }
+        //*********************************/
+        //*********************************/
+        return Preprocessor.parse(shader, this.defineValue);
+    }
+    /**
+     * Set GPUBindGroup to the specified index slot
+     * @param groupIndex
+     * @param group
+     */
+    setBindGroup(groupIndex, group) {
+        this.bindGroups[groupIndex] = group;
+    }
+    checkBuffer(bufferName, buffer) {
+        return;
+    }
+    preCompileShader(stage, code, format) {
+        let shader = code;
+        if (shader.indexOf(`version `) != -1) {
+            var wgsl = ShaderConverter.convertGLSL(shader);
+            shader = wgsl.sourceCode;
+        }
+        for (const key in this.constValues) {
+            if (Object.prototype.hasOwnProperty.call(this.constValues, key)) {
+                const value = this.constValues[key];
+                shader = shader.replaceAll(`&${key}`, value.toString());
+            }
+        }
+        switch (stage) {
+            case ShaderStage.vertex:
+                this._destVS = shader;
+                break;
+            case ShaderStage.fragment:
+                this._destFS = shader;
+                break;
+        }
+    }
+    compileShader(stage, code, renderPassState) {
+        let shader = code;
+        shader = this.applyPostDefine(shader, renderPassState);
+        let key = code;
+        for (let k in this.defineValue) {
+            key += `${k}=${this.defineValue[k]},`;
+        }
+        let shaderModule = ShaderUtil.renderShaderModulePool.get(key);
+        if (!shaderModule) {
+            shader = this.applyPostDefine(shader, renderPassState);
+            shaderModule = webGPUContext.device.createShaderModule({
+                label: stage == ShaderStage.vertex ? this.vsName : this.fsName,
+                code: shader,
+            });
+            shaderModule.getCompilationInfo().then((e) => {
+                if (e.messages.length > 0) {
+                    console.log(shader);
+                    console.log(e);
+                }
+            });
+            ShaderUtil.renderShaderModulePool.set(key, shaderModule);
+        }
+        switch (stage) {
+            case ShaderStage.vertex:
+                this._vsShaderModule = shaderModule;
+                this._destVS = shader;
+                break;
+            case ShaderStage.fragment:
+                this._fsShaderModule = shaderModule;
+                this._destFS = shader;
+                break;
+        }
+        // this._sourceVS = "" ;
+        // this._sourceFS = "" ;
+    }
+    getGroupLayout(index, infos) {
+        let entries = [];
+        for (let i = 0; i < infos.length; i++) {
+            const info = infos[i];
+            if (!info) {
+                continue;
+            }
+            if (info.varType == `uniform`) {
+                if (!this._bufferDic.has(info.varName)) {
+                    console.error(`not set ${info.varName} buffer`);
+                }
+                let visibility = this._bufferDic.get(info.varName).visibility;
+                let entry = {
+                    binding: info.binding,
+                    visibility: visibility,
+                    buffer: {
+                        type: 'uniform',
+                    },
+                };
+                entries.push(entry);
+            }
+            else if (info.varType == `storage-read`) {
+                if (!this._bufferDic.has(info.varName)) {
+                    console.error(`not set ${info.varName} buffer`);
+                }
+                let visibility = this._bufferDic.get(info.varName).visibility;
+                let entry = {
+                    binding: info.binding,
+                    visibility: visibility,
+                    buffer: {
+                        type: 'read-only-storage',
+                    },
+                };
+                entries.push(entry);
+            }
+            else if (info.varType == `var`) {
+                switch (info.dataType) {
+                    case `sampler`:
+                        {
+                            let textureName = info.varName.replace(`Sampler`, ``);
+                            let texture = this.textures[textureName] ? this.textures[textureName] : Engine3D.res.redTexture;
+                            let entry = {
+                                binding: info.binding,
+                                visibility: texture.visibility,
+                                sampler: texture.samplerBindingLayout,
+                            };
+                            entries.push(entry);
+                            this._textureGroup = index;
+                        }
+                        break;
+                    case `sampler_comparison`:
+                        {
+                            let textureName = info.varName.replace(`Sampler`, ``);
+                            let texture = this.textures[textureName] ? this.textures[textureName] : Engine3D.res.redTexture;
+                            let entry = {
+                                binding: info.binding,
+                                visibility: texture.visibility,
+                                sampler: texture.sampler_comparisonBindingLayout
+                            };
+                            entries.push(entry);
+                            this._textureGroup = index;
+                        }
+                        break;
+                    case `texture_2d<f32>`:
+                    case `texture_2d_array<f32>`:
+                    case `texture_cube<f32>`:
+                    case `texture_depth_2d`:
+                    case `texture_depth_2d_array`:
+                    case `texture_depth_cube`:
+                    case `texture_depth_cube_array`:
+                        {
+                            let texture = this.textures[info.varName] ? this.textures[info.varName] : Engine3D.res.redTexture;
+                            let entry = {
+                                binding: info.binding,
+                                visibility: texture.visibility,
+                                texture: texture.textureBindingLayout,
+                            };
+                            entries.push(entry);
+                            this._textureGroup = index;
+                            Reference.getInstance().attached(texture, this);
+                        }
+                        break;
+                    case `texture_external`:
+                        {
+                            let texture = this.textures[info.varName] ? this.textures[info.varName] : Engine3D.res.redTexture;
+                            let entry = {
+                                binding: info.binding,
+                                visibility: texture.visibility,
+                                externalTexture: {}
+                            };
+                            entries.push(entry);
+                            this._textureGroup = index;
+                            Reference.getInstance().attached(texture, this);
+                        }
+                        break;
+                    default:
+                        {
+                            let texture = this.textures[info.varName] ? this.textures[info.varName] : Engine3D.res.redTexture;
+                            let entry = {
+                                binding: info.binding,
+                                visibility: texture.visibility,
+                                texture: texture.textureBindingLayout,
+                            };
+                            entries.push(entry);
+                            this._textureGroup = index;
+                            Reference.getInstance().attached(texture, this);
+                        }
+                        break;
+                }
+            }
+            else {
+                debugger;
+                console.error("bind group can't empty");
+            }
+        }
+        return entries;
+    }
+    genGroups(groupIndex, infos, force = false) {
+        if (!this.bindGroups[groupIndex] || force) {
+            const shaderRefs = infos[groupIndex];
+            let entries = [];
+            for (let j = 0; j < shaderRefs.length; j++) {
+                const refs = shaderRefs[j];
+                if (!refs)
+                    continue;
+                if (refs.varType == `uniform`) {
+                    let buffer = this._bufferDic.get(refs.varName);
+                    if (buffer) {
+                        if (buffer.bufferType == GPUBufferType.MaterialDataUniformGPUBuffer) {
+                            let uniforms = [];
+                            for (let i = 0; i < refs.dataFields.length; i++) {
+                                const field = refs.dataFields[i];
+                                if (!this.uniforms[field.name]) {
+                                    console.error(`shader-${this.vsName}:${this.fsName} ${field.name}is empty`);
+                                }
+                                uniforms.push(this.uniforms[field.name]);
+                            }
+                            this.materialDataUniformBuffer.initDataUniform(uniforms);
+                        }
+                        let entry = {
+                            binding: refs.binding,
+                            resource: {
+                                buffer: buffer.buffer,
+                                offset: 0, //buffer.memory.shareFloat32Array.byteOffset,
+                                size: buffer.memory.shareDataBuffer.byteLength,
+                            },
+                        };
+                        entries.push(entry);
+                        this.checkBuffer(refs.varName, buffer);
+                    }
+                    else {
+                        console.error(`shader${this.vsName}-${this.fsName}`, `buffer ${refs.varName} is missing!`);
+                    }
+                }
+                else if (refs.varType == `storage-read`) {
+                    let buffer = this._bufferDic.get(refs.varName);
+                    if (buffer) {
+                        let entry = {
+                            binding: refs.binding,
+                            resource: {
+                                buffer: buffer.buffer,
+                                offset: 0, //buffer.memory.shareFloat32Array.byteOffset,
+                                size: buffer.memory.shareDataBuffer.byteLength,
+                            },
+                        };
+                        entries.push(entry);
+                        this.checkBuffer(refs.varName, buffer);
+                    }
+                    else {
+                        console.error(`buffer ${refs.varName} is missing!`);
+                    }
+                }
+                else if (refs.varType == `var`) {
+                    if (refs.dataType == `sampler`) {
+                        let textureName = refs.varName.replace(`Sampler`, ``);
+                        let texture = this.textures[textureName];
+                        if (!texture) {
+                            texture = Engine3D.res.blackTexture;
+                            this.setTexture(textureName, texture);
+                        }
+                        if (texture) {
+                            let entry = {
+                                binding: refs.binding,
+                                resource: texture.gpuSampler
+                            };
+                            entries.push(entry);
+                        }
+                        else {
+                            console.error(`shader${this.vsName}-${this.fsName}`, `texture ${refs.varName} is missing! `);
+                        }
+                    }
+                    else if (refs.dataType == `sampler_comparison`) {
+                        let textureName = refs.varName.replace(`Sampler`, ``);
+                        let texture = this.textures[textureName];
+                        if (texture) {
+                            let entry = {
+                                binding: refs.binding,
+                                resource: texture.gpuSampler_comparison
+                            };
+                            entries.push(entry);
+                        }
+                        else {
+                            console.error(`shader${this.vsName}-${this.fsName}`, `texture ${refs.varName} is missing! `);
+                        }
+                    }
+                    else {
+                        let texture = this.textures[refs.varName];
+                        if (!texture) {
+                            texture = Engine3D.res.whiteTexture;
+                            this.setTexture(refs.varName, texture);
+                        }
+                        if (texture) {
+                            let entry = {
+                                binding: refs.binding,
+                                resource: texture.getGPUView(),
+                            };
+                            entries.push(entry);
+                        }
+                        else {
+                            console.error(`shader${this.vsName}-${this.fsName}`, `texture ${refs.varName} is missing! `);
+                        }
+                    }
+                }
+            }
+            let gpubindGroup = webGPUContext.device.createBindGroup({
+                layout: this.bindGroupLayouts[groupIndex],
+                entries: entries
+            });
+            this.bindGroups[groupIndex] = gpubindGroup;
+        }
+    }
+    createPipeline(geometry, renderPassState, layouts) {
+        let bufferMesh = geometry;
+        let shaderState = this.shaderState;
+        //create color state
+        let targets = [];
+        for (const tex of renderPassState.renderTargetTextures) {
+            targets.push({
+                format: tex.format,
+            });
+        }
+        //set color state
+        for (let i = 0; i < targets.length; i++) {
+            const rtTexState = targets[i];
+            if (shaderState.writeMasks && shaderState.writeMasks.length > 0) {
+                rtTexState.writeMask = shaderState.writeMasks[i];
+            }
+        }
+        if (renderPassState.outColor != -1) {
+            let target = targets[renderPassState.outColor];
+            if (shaderState.blendMode != BlendMode.NONE) {
+                target.blend = BlendFactor.getBlend(shaderState.blendMode);
+            }
+            else {
+                delete target[`blend`];
+            }
+        }
+        let renderPipelineDescriptor = {
+            label: this.vsName + '|' + this.fsName,
+            layout: layouts,
+            primitive: {
+                topology: shaderState.topology,
+                cullMode: shaderState.cullMode,
+                frontFace: shaderState.frontFace,
+            },
+            vertex: undefined,
+        };
+        if (this.vsEntryPoint != ``) {
+            renderPipelineDescriptor[`vertex`] = {
+                module: this._vsShaderModule,
+                entryPoint: this.vsEntryPoint,
+                buffers: bufferMesh.vertexBuffer.vertexBufferLayouts,
+            };
+        }
+        if (this.fsEntryPoint != '') {
+            renderPipelineDescriptor[`fragment`] = {
+                module: this._fsShaderModule,
+                entryPoint: this.fsEntryPoint,
+                targets: targets
+            };
+        }
+        if (shaderState.multisample > 0) {
+            renderPipelineDescriptor[`multisample`] = {
+                count: shaderState.multisample
+            };
+        }
+        if (renderPassState.zPreTexture || renderPassState.depthTexture) {
+            let blendEnable = shaderState.blendMode != BlendMode.NONE;
+            if (Engine3D.setting.render.zPrePass && renderPassState.zPreTexture && shaderState.useZ) {
+                renderPipelineDescriptor[`depthStencil`] = {
+                    depthWriteEnabled: false,
+                    depthCompare: GPUCompareFunction.less,
+                    format: renderPassState.zPreTexture.format,
+                };
+            }
+            else {
+                renderPipelineDescriptor[`depthStencil`] = {
+                    depthWriteEnabled: shaderState.depthWriteEnabled,
+                    depthCompare: shaderState.depthCompare,
+                    format: renderPassState.depthTexture.format,
+                };
+            }
+        }
+        let pipeline = PipelinePool.getSharePipeline(this.shaderVariant);
+        if (pipeline) {
+            this.pipeline = pipeline;
+        }
+        else {
+            this.pipeline = GPUContext.createPipeline(renderPipelineDescriptor);
+            PipelinePool.setSharePipeline(this.shaderVariant, this.pipeline);
+        }
+    }
+    createGroupLayouts() {
+        this._groupsShaderReflectionVarInfos = [];
+        let shaderReflection = this.shaderReflection;
+        this.bindGroupLayouts = [GlobalBindGroupLayout.getGlobalDataBindGroupLayout()];
+        // Binding Group 1 is Global , skip
+        for (let i = 1; i < shaderReflection.groups.length; i++) {
+            let shaderRefs = shaderReflection.groups[i];
+            if (shaderRefs) {
+                let entries = this.getGroupLayout(i, shaderRefs);
+                this._groupsShaderReflectionVarInfos[i] = shaderRefs;
+                let layout = webGPUContext.device.createBindGroupLayout({
+                    entries,
+                    label: `vs${this.vsName} fs${this.fsName} ${shaderRefs.length}`
+                });
+                this.bindGroupLayouts[i] = layout;
+            }
+            else {
+                console.error("can't set empty group!", i);
+            }
+        }
+        let layouts = webGPUContext.device.createPipelineLayout({
+            bindGroupLayouts: this.bindGroupLayouts,
+        });
+        // Binding Group 1 is Global
+        if (this._groupsShaderReflectionVarInfos[0]) {
+            // this.genGroups(0, this.groupsShaderReflectionVarInfos);
+        }
+        if (this._groupsShaderReflectionVarInfos[1]) {
+            this.genGroups(1, this._groupsShaderReflectionVarInfos);
+        }
+        if (this._groupsShaderReflectionVarInfos[2]) {
+            this.genGroups(2, this._groupsShaderReflectionVarInfos);
+        }
+        if (this._groupsShaderReflectionVarInfos[3]) {
+            this.genGroups(3, this._groupsShaderReflectionVarInfos);
+        }
+        return layouts;
+    }
+    preDefine(geometry) {
+        // this.vertexAttributes = "" ;
+        // check geometry vertex attributes
+        let useSecondUV = geometry.hasAttribute(VertexAttributeName.TEXCOORD_1);
+        let isSkeleton = geometry.hasAttribute(VertexAttributeName.joints0);
+        let hasMorphTarget = geometry.hasAttribute(VertexAttributeName.a_morphPositions_0);
+        let useTangent = geometry.hasAttribute(VertexAttributeName.TANGENT);
+        let useVertexColor = geometry.hasAttribute(VertexAttributeName.color);
+        let useGI = this.shaderState.acceptGI;
+        let useLight = this.shaderState.useLight;
+        if (useSecondUV) {
+            this.defineValue[`USE_SECONDUV`] = true;
+        }
+        if (isSkeleton && hasMorphTarget) {
+            this.defineValue[`USE_METAHUMAN`] = true;
+        }
+        else {
+            this.defineValue[`USE_SKELETON`] = isSkeleton;
+            this.defineValue[`USE_MORPHTARGETS`] = hasMorphTarget;
+        }
+        if (!('USE_TANGENT' in this.defineValue)) {
+            this.defineValue[`USE_TANGENT`] = useTangent;
+        }
+        this.defineValue[`USE_GI`] = useGI;
+        // this.defineValue[`USE_CASTSHADOW`] = this.shaderState.castShadow;
+        this.defineValue[`USE_SHADOWMAPING`] = this.shaderState.acceptShadow;
+        this.defineValue[`USE_LIGHT`] = useLight;
+        this.defineValue[`USE_VERTXCOLOR`] = useVertexColor;
+        if (Engine3D.setting.pick.mode == `pixel`) {
+            this.defineValue[`USE_WORLDPOS`] = true;
+        }
+        if (Engine3D.setting.gi.enable) {
+            this.defineValue[`USEGI`] = true;
+        }
+        else {
+            this.defineValue[`USEGI`] = false;
+        }
+        if (Engine3D.setting.render.debug) {
+            this.defineValue[`USE_DEBUG`] = true;
+            this.defineValue[`DEBUG_CLUSTER`] = true;
+        }
+        if (this.shaderState.useLight) {
+            this.defineValue[`USE_LIGHT`] = true;
+        }
+        else {
+            this.defineValue[`USE_LIGHT`] = false;
+        }
+        if (Engine3D.setting.render.useLogDepth) {
+            this.defineValue[`USE_LOGDEPTH`] = true;
+            this.shaderState.useFragDepth = true;
+        }
+        else {
+            this.defineValue[`USE_LOGDEPTH`] = false;
+        }
+        if (this.shaderState.useFragDepth) {
+            this.defineValue[`USE_OUTDEPTH`] = true;
+        }
+        else {
+            this.defineValue[`USE_OUTDEPTH`] = false;
+        }
+        this.defineValue[`USE_PCF_SHADOW`] = Engine3D.setting.shadow.type == `PCF`;
+        this.defineValue[`USE_HARD_SHADOW`] = Engine3D.setting.shadow.type == `HARD`;
+        this.defineValue[`USE_SOFT_SHADOW`] = Engine3D.setting.shadow.type == `SOFT`;
+        this.defineValue[`USE_CSM`] = CSM.Cascades > 1;
+        this.defineValue[`USE_IES_PROFILE`] = IESProfiles.use;
+    }
+    genReflection() {
+        this.shaderVariant = ShaderReflection.genRenderShaderVariant(this);
+        let reflection = ShaderReflection.poolGetReflection(this.shaderVariant);
+        if (!reflection) {
+            //TODO: key check shader compile info
+            let vsPreShader = Preprocessor.parse(this._destVS, this.defineValue);
+            vsPreShader = Preprocessor.parse(vsPreShader, this.defineValue);
+            ShaderReflection.getShaderReflection2(vsPreShader, this);
+            let fsPreShader = Preprocessor.parse(this._destFS, this.defineValue);
+            fsPreShader = Preprocessor.parse(fsPreShader, this.defineValue);
+            ShaderReflection.getShaderReflection2(fsPreShader, this);
+            ShaderReflection.final(this);
+        }
+        else {
+            this.shaderReflection = reflection;
+        }
+        this.shaderState.splitTexture = this.shaderReflection.useSplit;
+    }
+    /**
+     * Destroy and release render shader related resources
+     */
+    destroy(force) {
+        for (const key in this.textures) {
+            if (Object.prototype.hasOwnProperty.call(this.textures, key)) {
+                const texture = this.textures[key];
+                Reference.getInstance().detached(texture, this);
+                if (force && !Reference.getInstance().hasReference(texture)) {
+                    texture.destroy(force);
+                }
+                else {
+                    texture.destroy(false);
+                    let table = Reference.getInstance().getReference(texture);
+                    if (table) {
+                        let list = [];
+                        table.forEach((v, k) => {
+                            if (`name` in v) {
+                                list.push(v[`name`]);
+                            }
+                            else {
+                                list.push(`NaN`);
+                            }
+                        });
+                    }
+                }
+            }
+        }
+        this.bindGroups.length = 0;
+        this.shaderState = null;
+        this.textures = null;
+        this.pipeline = null;
+        this.bindGroupLayouts = null;
+        this._sourceVS = null;
+        this._sourceFS = null;
+        this._destVS = null;
+        this._destFS = null;
+        this._vsShaderModule = null;
+        this._fsShaderModule = null;
+        this.materialDataUniformBuffer.destroy(force);
+        ;
+        this.materialDataUniformBuffer = null;
+    }
+    /**
+     * Destroy a RenderShader object
+     * @param instanceID instance ID of the RenderShader
+     */
+    static destroyShader(instanceID) {
+        if (ShaderUtil.renderShader.has(instanceID)) {
+            let shader = ShaderUtil.renderShader.get(instanceID);
+            shader.destroy();
+            ShaderUtil.renderShader.delete(instanceID);
+        }
+    }
+    /**
+     * Get the RenderShader object by specifying the RenderShader instance ID
+     * @param instanceID instance ID of the RenderShader
+     * @returns RenderShader object
+     */
+    static getShader(instanceID) {
+        return ShaderUtil.renderShader.get(instanceID);
+    }
+    /**
+     * Create a RenderShader with vertex shaders and fragment shaders
+     * @param vs Vertex shader name
+     * @param fs Fragment shader name
+     * @returns Returns the instance ID of the RenderShader
+     */
+    static createShader(vs, fs) {
+        let shader = new RenderShaderPass(vs, fs);
+        ShaderUtil.renderShader.set(shader.instanceID, shader);
+        return shader.instanceID;
+    }
+}