Dwinzo_Demo/app/src/modules/scene/postProcessing/postProcessing.tsx

import { EffectComposer, N8AO, Outline } from "@react-three/postprocessing";
import { BlendFunction } from "postprocessing";
import {
    useDeletableFloorItem,
    useSelectedWallItem,
    useSelectedFloorItem,
} from "../../../store/builder/store";
import * as CONSTANTS from "../../../types/world/worldConstants";
import { useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
import { useEffect } from "react";
import { useBuilderStore } from "../../../store/builder/useBuilderStore";

export default function PostProcessing() {
    const { deletableFloorItem } = useDeletableFloorItem();
    const { selectedWallItem } = useSelectedWallItem();
    const { selectedFloorItem } = useSelectedFloorItem();
    const { selectedEventSphere } = useSelectedEventSphere();
    const { selectedAisle, selectedWall, selectedDecal, selectedFloor, selectedWallAsset } = useBuilderStore();

    function flattenChildren(children: any[]) {
        const allChildren: any[] = [];
        children.forEach((child) => {
            allChildren.push(child);
            if (child.children && child.children.length > 0) {
                allChildren.push(...flattenChildren(child.children));
            }
        });
        return allChildren;
    }

    useEffect(() => {
        // console.log('selectedFloorItem: ', selectedFloorItem);
    }, [selectedFloorItem])

    useEffect(() => {
        // console.log('selectedFloorItem: ', deletableFloorItem);
    }, [deletableFloorItem])

    useEffect(() => {
        // console.log('selectedAisle: ', selectedAisle);
    }, [selectedAisle])

    useEffect(() => {
        // console.log('selectedWall: ', selectedWall);
    }, [selectedWall])

    useEffect(() => {
        // console.log('selectedFloor: ', selectedFloor);
    }, [selectedFloor])

    useEffect(() => {
        // console.log('selectedWallAsset: ', selectedWallAsset);
    }, [selectedWallAsset])

    return (
        <EffectComposer autoClear={false}>
            <N8AO
                color="black"
                aoRadius={20}
                intensity={7}
                distanceFalloff={4}
                aoSamples={32}
                denoiseRadius={6}
                denoiseSamples={16}
            />
            {selectedWallAsset && (
                <Outline
                    selection={flattenChildren(selectedWallAsset.children)}
                    selectionLayer={10}
                    width={2000}
                    blendFunction={BlendFunction.ALPHA}
                    edgeStrength={5}
                    resolutionScale={2}
                    pulseSpeed={0}
                    visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                    blur={true}
                    xRay={true}
                />
            )}
            {selectedAisle && (
                <Outline
                    selection={flattenChildren(selectedAisle.children)}
                    selectionLayer={10}
                    width={2000}
                    blendFunction={BlendFunction.ALPHA}
                    edgeStrength={5}
                    resolutionScale={2}
                    pulseSpeed={0}
                    visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                    blur={true}
                    xRay={false}
                />
            )}
            {selectedWall && (
                <Outline
                    selection={selectedWall}
                    selectionLayer={10}
                    width={2000}
                    blendFunction={BlendFunction.ALPHA}
                    edgeStrength={5}
                    resolutionScale={2}
                    pulseSpeed={0}
                    visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                    blur={true}
                    xRay={true}
                />
            )}
            {selectedFloor && (
                <Outline
                    selection={selectedFloor}
                    selectionLayer={10}
                    width={2000}
                    blendFunction={BlendFunction.ALPHA}
                    edgeStrength={5}
                    resolutionScale={2}
                    pulseSpeed={0}
                    visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                    blur={true}
                    xRay={true}
                />
            )}
            {selectedDecal && (
                <Outline
                    selection={selectedDecal}
                    selectionLayer={10}
                    width={2000}
                    blendFunction={BlendFunction.ALPHA}
                    edgeStrength={5}
                    resolutionScale={2}
                    pulseSpeed={0}
                    visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                    blur={true}
                    xRay={true}
                />
            )}
            {deletableFloorItem && (
                <Outline
                    selection={flattenChildren(deletableFloorItem.children)}
                    selectionLayer={10}
                    width={3000}
                    blendFunction={BlendFunction.ALPHA}
                    edgeStrength={5}
                    resolutionScale={2}
                    pulseSpeed={0}
                    visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
                    blur={true}
                    xRay={true}
                />
            )}
            {selectedWallItem && (
                <Outline
                    selection={flattenChildren(selectedWallItem.children)}
                    selectionLayer={10}
                    width={3000}
                    blendFunction={BlendFunction.ALPHA}
                    edgeStrength={5}
                    resolutionScale={2}
                    pulseSpeed={0}
                    visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                    blur={true}
                    xRay={true}
                />
            )}
            {selectedFloorItem && (
                <Outline
                    selection={flattenChildren(selectedFloorItem.children)}
                    selectionLayer={10}
                    width={3000}
                    blendFunction={BlendFunction.ALPHA}
                    edgeStrength={5}
                    resolutionScale={2}
                    pulseSpeed={0}
                    visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                    blur={true}
                    xRay={true}
                />
            )}
            {selectedEventSphere && (
                <Outline
                    selection={[selectedEventSphere]}
                    selectionLayer={10}
                    width={1000}
                    blendFunction={BlendFunction.ALPHA}
                    edgeStrength={10}
                    resolutionScale={2}
                    pulseSpeed={0}
                    visibleEdgeColor={0x6f42c1}
                    hiddenEdgeColor={0x6f42c1}
                    blur={true}
                    xRay={true}
                />
            )}
        </EffectComposer>
    );
}