261 lines
10 KiB
TypeScript
261 lines
10 KiB
TypeScript
import { DepthOfField, Bloom, EffectComposer, N8AO, Outline } from "@react-three/postprocessing";
|
|
import { useThree } from "@react-three/fiber";
|
|
import { BlendFunction } from "postprocessing";
|
|
import {
|
|
useDeletableFloorItem,
|
|
useSelectedWallItem,
|
|
useSelectedFloorItem,
|
|
} from "../../../store/builder/store";
|
|
import * as CONSTANTS from "../../../types/world/worldConstants";
|
|
import { useDeletableEventSphere, useSelectedEventSphere, useSelectedPoints } from "../../../store/simulation/useSimulationStore";
|
|
import { useEffect } from "react";
|
|
import { useBuilderStore } from "../../../store/builder/useBuilderStore";
|
|
|
|
export default function PostProcessing() {
|
|
const { scene } = useThree();
|
|
const { selectedPoints } = useSelectedPoints();
|
|
const { deletableFloorItem } = useDeletableFloorItem();
|
|
const { selectedWallItem } = useSelectedWallItem();
|
|
const { selectedFloorItem } = useSelectedFloorItem();
|
|
const { selectedEventSphere } = useSelectedEventSphere();
|
|
const { deletableEventSphere } = useDeletableEventSphere();
|
|
const { selectedAisle, selectedWall, selectedDecal, selectedFloor, selectedWallAsset, deletableWallAsset } = 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])
|
|
|
|
useEffect(() => {
|
|
// console.log('deletableWallAsset: ', deletableWallAsset);
|
|
}, [deletableWallAsset])
|
|
|
|
useEffect(() => {
|
|
// console.log('deletableEventSphere: ', deletableEventSphere);
|
|
}, [deletableEventSphere])
|
|
|
|
useEffect(() => {
|
|
// console.log('selectedPoints: ', selectedPoints);
|
|
}, [selectedPoints])
|
|
|
|
return (
|
|
<EffectComposer autoClear={false}>
|
|
<N8AO
|
|
color="black"
|
|
aoRadius={20}
|
|
intensity={7}
|
|
distanceFalloff={4}
|
|
aoSamples={32}
|
|
denoiseRadius={6}
|
|
denoiseSamples={16}
|
|
/>
|
|
{/* <DepthOfField
|
|
focusDistance={0}
|
|
focalLength={0.15}
|
|
bokehScale={2}
|
|
/> */}
|
|
{/* <Bloom
|
|
intensity={0.1}
|
|
luminanceThreshold={0.9}
|
|
luminanceSmoothing={0.025}
|
|
mipmapBlur={false}
|
|
/> */}
|
|
{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}
|
|
/>
|
|
)}
|
|
{deletableWallAsset && (
|
|
<Outline
|
|
selection={flattenChildren(deletableWallAsset.children)}
|
|
selectionLayer={10}
|
|
width={2000}
|
|
blendFunction={BlendFunction.ALPHA}
|
|
edgeStrength={5}
|
|
resolutionScale={2}
|
|
pulseSpeed={0}
|
|
visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
|
|
hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
|
|
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}
|
|
/>
|
|
)}
|
|
{deletableEventSphere && (
|
|
<Outline
|
|
selection={[deletableEventSphere]}
|
|
selectionLayer={10}
|
|
width={1000}
|
|
blendFunction={BlendFunction.ALPHA}
|
|
edgeStrength={10}
|
|
resolutionScale={2}
|
|
pulseSpeed={0}
|
|
visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
|
|
hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
|
|
blur={true}
|
|
xRay={true}
|
|
/>
|
|
)}
|
|
</EffectComposer>
|
|
);
|
|
}
|