refactor: streamline BakedHeatMap component by removing unused imports and redundant code
This commit is contained in:
@@ -3,7 +3,7 @@ import { useEffect, useMemo, useRef, useCallback } from "react";
|
|||||||
import { useThree } from "@react-three/fiber";
|
import { useThree } from "@react-three/fiber";
|
||||||
import { useHeatMapStore } from "../../../store/simulation/useHeatMapStore";
|
import { useHeatMapStore } from "../../../store/simulation/useHeatMapStore";
|
||||||
import * as CONSTANTS from "../../../types/world/worldConstants";
|
import * as CONSTANTS from "../../../types/world/worldConstants";
|
||||||
import { Html } from "@react-three/drei";
|
|
||||||
|
|
||||||
const RADIUS = 0.0025;
|
const RADIUS = 0.0025;
|
||||||
const OPACITY = 0.8;
|
const OPACITY = 0.8;
|
||||||
@@ -28,16 +28,10 @@ const BakedHeatMap = () => {
|
|||||||
data[index] = (p.points.x + width / 2) / width;
|
data[index] = (p.points.x + width / 2) / width;
|
||||||
data[index + 1] = (p.points.y + height / 2) / height;
|
data[index + 1] = (p.points.y + height / 2) / height;
|
||||||
data[index + 2] = 0.3;
|
data[index + 2] = 0.3;
|
||||||
data[index + 3] = 0.0;
|
data[index + 3] = 0.0;
|
||||||
});
|
});
|
||||||
|
|
||||||
const texture = new THREE.DataTexture(
|
const texture = new THREE.DataTexture(data, filteredPoints.length, 1, THREE.RGBAFormat, THREE.FloatType);
|
||||||
data,
|
|
||||||
filteredPoints.length,
|
|
||||||
1,
|
|
||||||
THREE.RGBAFormat,
|
|
||||||
THREE.FloatType
|
|
||||||
);
|
|
||||||
texture.needsUpdate = true;
|
texture.needsUpdate = true;
|
||||||
return texture;
|
return texture;
|
||||||
},
|
},
|
||||||
@@ -52,7 +46,6 @@ const BakedHeatMap = () => {
|
|||||||
u_growthRate: { value: GROWTH_RATE },
|
u_growthRate: { value: GROWTH_RATE },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const renderHeatmapToImage = useCallback(
|
const renderHeatmapToImage = useCallback(
|
||||||
(type: string) => {
|
(type: string) => {
|
||||||
if (!meshRef.current) return null;
|
if (!meshRef.current) return null;
|
||||||
@@ -66,18 +59,10 @@ const BakedHeatMap = () => {
|
|||||||
uniformsRef.current.u_points.value = pointTexture;
|
uniformsRef.current.u_points.value = pointTexture;
|
||||||
uniformsRef.current.u_count.value = filteredPoints.length;
|
uniformsRef.current.u_count.value = filteredPoints.length;
|
||||||
|
|
||||||
const exportCamera = new THREE.OrthographicCamera(
|
const exportCamera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 0.1, 10);
|
||||||
width / -2,
|
|
||||||
width / 2,
|
|
||||||
height / 2,
|
|
||||||
height / -2,
|
|
||||||
0.1,
|
|
||||||
10
|
|
||||||
);
|
|
||||||
exportCamera.position.set(0, 1, 0);
|
exportCamera.position.set(0, 1, 0);
|
||||||
exportCamera.lookAt(0, 0, 0);
|
exportCamera.lookAt(0, 0, 0);
|
||||||
|
|
||||||
|
|
||||||
const renderTarget = new THREE.WebGLRenderTarget(1024, 1024, {
|
const renderTarget = new THREE.WebGLRenderTarget(1024, 1024, {
|
||||||
format: THREE.RGBAFormat,
|
format: THREE.RGBAFormat,
|
||||||
type: THREE.UnsignedByteType,
|
type: THREE.UnsignedByteType,
|
||||||
@@ -90,7 +75,6 @@ const BakedHeatMap = () => {
|
|||||||
gl.render(tempScene, exportCamera);
|
gl.render(tempScene, exportCamera);
|
||||||
gl.setRenderTarget(null);
|
gl.setRenderTarget(null);
|
||||||
|
|
||||||
|
|
||||||
const pixels = new Uint8Array(1024 * 1024 * 4);
|
const pixels = new Uint8Array(1024 * 1024 * 4);
|
||||||
gl.readRenderTargetPixels(renderTarget, 0, 0, 1024, 1024, pixels);
|
gl.readRenderTargetPixels(renderTarget, 0, 0, 1024, 1024, pixels);
|
||||||
|
|
||||||
@@ -111,7 +95,6 @@ const BakedHeatMap = () => {
|
|||||||
[gl, width, height, bakedPoints, createPointTexture]
|
[gl, width, height, bakedPoints, createPointTexture]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
const downloadImage = (base64: string, filename: string) => {
|
const downloadImage = (base64: string, filename: string) => {
|
||||||
const link = document.createElement("a");
|
const link = document.createElement("a");
|
||||||
link.href = base64;
|
link.href = base64;
|
||||||
@@ -136,7 +119,6 @@ const BakedHeatMap = () => {
|
|||||||
return result;
|
return result;
|
||||||
}, [renderHeatmapToImage]);
|
}, [renderHeatmapToImage]);
|
||||||
|
|
||||||
|
|
||||||
const pointTexture = useMemo(() => createPointTexture(bakedPoints), [bakedPoints, createPointTexture]);
|
const pointTexture = useMemo(() => createPointTexture(bakedPoints), [bakedPoints, createPointTexture]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -146,7 +128,6 @@ const BakedHeatMap = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
||||||
<mesh ref={meshRef} rotation={[Math.PI / 2, 0, 0]} position={[0, 0.025, 0]}>
|
<mesh ref={meshRef} rotation={[Math.PI / 2, 0, 0]} position={[0, 0.025, 0]}>
|
||||||
<planeGeometry args={[width, height]} />
|
<planeGeometry args={[width, height]} />
|
||||||
<shaderMaterial
|
<shaderMaterial
|
||||||
@@ -208,25 +189,6 @@ const BakedHeatMap = () => {
|
|||||||
`}
|
`}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
|
|
||||||
<Html>
|
|
||||||
<button
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
top: "10px",
|
|
||||||
left: "10px",
|
|
||||||
padding: "8px 12px",
|
|
||||||
background: "#333",
|
|
||||||
color: "white",
|
|
||||||
border: "none",
|
|
||||||
cursor: "pointer",
|
|
||||||
zIndex: 10,
|
|
||||||
}}
|
|
||||||
onClick={exportHeatmapAsPNG}
|
|
||||||
>
|
|
||||||
Export Heatmap
|
|
||||||
</button>
|
|
||||||
</Html>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user