Skip to content

Commit 40a9382

Browse files
TheJeranTheJeran
committed
Added comments and slight cleaning
1 parent 0525a7d commit 40a9382

File tree

3 files changed

+120
-104
lines changed

3 files changed

+120
-104
lines changed

‎src/components/CanvasGeometry.tsx‎

Lines changed: 50 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export function CanvasGeometry() {
4646
},
4747
})
4848

49-
const [texture, setTexture] = useState<THREE.DataTexture | THREE.Data3DTexture | null>(null)
49+
const [texture, setTexture] = useState<THREE.DataTexture | THREE.Data3DTexture | null>(null) //Main Texture
5050
const [shape, setShape] = useState<THREE.Vector3 | THREE.Vector3>(new THREE.Vector3(2, 2, 2))
5151
const [timeSeriesLocs,setTimeSeriesLocs] = useState<TimeSeriesLocs>({uv:new THREE.Vector2(.5,.5), normal:new THREE.Vector3(0,0,1)})
5252
const [valueScales,setValueScales] = useState({maxVal:1,minVal:-1})
@@ -57,7 +57,6 @@ export function CanvasGeometry() {
5757
setColormap(GetColorMapTexture(colormap,cmap));
5858
},[cmap, colormap])
5959

60-
6160
useEffect(() => {
6261
if (variable != "Default") {
6362
//Need to add a check somewhere here to swap to 2D or 3D based on shape. Probably export two variables from GetArray
@@ -74,7 +73,6 @@ export function CanvasGeometry() {
7473
console.error("Invalid texture type returned from ArrayToTexture");
7574
setTexture(null);
7675
}
77-
// norrow down type before using it!
7876
if (
7977
typeof scaling === 'object' &&
8078
'maxVal' in scaling &&
@@ -98,53 +96,61 @@ export function CanvasGeometry() {
9896

9997
return (
10098
<>
101-
10299
<div className='canvas'>
103100
<Canvas shadows
104101
frameloop="demand"
105102
>
106-
107-
<Center top position={[-1, 0, 1]}/>
108-
{plotter == "volume" && <>
109-
<DataCube volTexture={texture} shape={shape} colormap={colormap}/>
110-
<mesh onClick={() => setShowTimeSeries(true)}>
111-
<UVCube shape={shape} setTimeSeriesLocs={setTimeSeriesLocs}/>
112-
</mesh>
113-
114-
</>}
115-
{plotter == "point-cloud" && <PointCloud textures={{texture,colormap}} />}
116-
117-
<OrbitControls minPolarAngle={0} maxPolarAngle={Math.PI / 2} enablePan={false}/>
118-
<Environment preset="city" />
119-
{showTimeSeries && <>
103+
<Center top position={[-1, 0, 1]}/>
104+
105+
{/* Volume Plots */}
106+
{plotter == "volume" && <>
107+
<DataCube volTexture={texture} shape={shape} colormap={colormap}/>
108+
<mesh onClick={() => setShowTimeSeries(true)}>
109+
<UVCube shape={shape} setTimeSeriesLocs={setTimeSeriesLocs}/>
110+
</mesh>
120111

121-
<TimeSeries timeSeriesLocs={timeSeriesLocs} DSInfo={{variable:variable, storePath:storeURL}} scaling={{...valueScales,colormap}}/>
122-
<Html
123-
fullscreen
124-
style={{
125-
pointerEvents: 'none', // Prevents capturing mouse events
126-
}}
112+
</>}
113+
114+
{/* Point Clouds Plots */}
115+
{plotter == "point-cloud" && <PointCloud textures={{texture,colormap}} />}
116+
117+
118+
{/* Time Series Plots */}
119+
{showTimeSeries && <>
120+
121+
<TimeSeries timeSeriesLocs={timeSeriesLocs} DSInfo={{variable:variable, storePath:storeURL}} scaling={{...valueScales,colormap}}/>
122+
<Html
123+
fullscreen
124+
style={{
125+
pointerEvents: 'none', // Prevents capturing mouse events
126+
}}
127+
>
128+
{/* Stand in button to remove time-series stuff */}
129+
<button style={{
130+
position: 'absolute',
131+
bottom: '100px',
132+
right: '100px',
133+
padding: '8px 16px',
134+
backgroundColor: '#3498db',
135+
color: 'white',
136+
border: 'none',
137+
borderRadius: '4px',
138+
cursor: 'pointer',
139+
pointerEvents: 'auto'
140+
141+
}}
142+
onClick={()=>setShowTimeSeries(false)}
127143
>
128-
<button style={{
129-
position: 'absolute',
130-
bottom: '100px',
131-
right: '100px',
132-
padding: '8px 16px',
133-
backgroundColor: '#3498db',
134-
color: 'white',
135-
border: 'none',
136-
borderRadius: '4px',
137-
cursor: 'pointer',
138-
pointerEvents: 'auto'
139-
140-
}}
141-
onClick={()=>setShowTimeSeries(false)}
142-
>
143-
Hide Time Series
144-
</button>
145-
</Html>
146-
147-
</>}
144+
Hide Time Series
145+
</button>
146+
</Html>
147+
</>}
148+
149+
150+
151+
<OrbitControls minPolarAngle={0} maxPolarAngle={Math.PI / 2} enablePan={false}/>
152+
<Environment preset="city" />
153+
148154
</Canvas>
149155
</div>
150156
<Leva theme={lightTheme} />

‎src/components/PlotObjects.tsx‎

Lines changed: 33 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ interface DataCubeProps {
1717
volTexture: THREE.Data3DTexture | THREE.DataTexture | null,
1818
shape : THREE.Vector3,
1919
colormap: THREE.DataTexture
20-
2120
}
2221

2322
interface PCProps {
@@ -27,8 +26,6 @@ interface PCProps {
2726

2827
export const DataCube = ({ volTexture, shape, colormap }: DataCubeProps ) => {
2928
const meshRef = useRef<THREE.Mesh>(null);
30-
// const materialRef = useRef<THREE.ShaderMaterial | null>(null);
31-
// const { invalidate } = useThree();
3229
const { threshold, steps, flip, xMax,xMin,yMax,yMin,zMax,zMin } = useControls({
3330
threshold: {
3431
value: 0, // Default value
@@ -94,25 +91,25 @@ export const DataCube = ({ volTexture, shape, colormap }: DataCubeProps ) => {
9491

9592
// We need to check if moving this outside of useMemo means it's creating a ton of materials. This was how it was done in THREE Journey when I was doing that, so I know it's not stricly speaking wrong
9693
const shaderMaterial = new THREE.ShaderMaterial({
97-
glslVersion: THREE.GLSL3,
98-
uniforms: {
99-
map: { value: volTexture },
100-
cmap:{value: colormap},
101-
cameraPos: { value: new THREE.Vector3() },
102-
threshold: {value: threshold},
103-
scale: {value: shape},
104-
flatBounds:{value: new THREE.Vector4(xMin,xMax,yMin,yMax)},
105-
vertBounds:{value: new THREE.Vector2(zMin,zMax)},
106-
steps: { value: steps },
107-
flip: {value: flip }
108-
},
109-
vertexShader,
110-
fragmentShader,
111-
transparent: true,
112-
blending: THREE.NormalBlending,
113-
depthWrite: false,
114-
side: THREE.BackSide,
115-
});
94+
glslVersion: THREE.GLSL3,
95+
uniforms: {
96+
map: { value: volTexture },
97+
cmap:{value: colormap},
98+
cameraPos: { value: new THREE.Vector3() },
99+
threshold: {value: threshold},
100+
scale: {value: shape},
101+
flatBounds:{value: new THREE.Vector4(xMin,xMax,yMin,yMax)},
102+
vertBounds:{value: new THREE.Vector2(zMin,zMax)},
103+
steps: { value: steps },
104+
flip: {value: flip }
105+
},
106+
vertexShader,
107+
fragmentShader,
108+
transparent: true,
109+
blending: THREE.NormalBlending,
110+
depthWrite: false,
111+
side: THREE.BackSide,
112+
});
116113

117114
// Use geometry once, avoid recreating -- Using a sphere to avoid the weird angles you get with cube
118115
const geometry = useMemo(() => new THREE.IcosahedronGeometry(4, 8), []);
@@ -142,8 +139,6 @@ export const UVCube = ({shape,setTimeSeriesLocs} : {shape:THREE.Vector3, setTime
142139
normal
143140
})
144141
}
145-
146-
147142
return (
148143
<mesh scale={shape} onClick={TimeSeriesLocs}>
149144
<boxGeometry args={[1, 1, 1]} />
@@ -168,7 +163,7 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
168163
}
169164
}
170165
)
171-
// Extract data and shape from Data3DTexture
166+
//Extract data and shape from Data3DTexture
172167
const { data, width, height, depth } = useMemo(() => {
173168
if (!(texture instanceof THREE.Data3DTexture)) {
174169
console.warn('Provided texture is not a Data3DTexture');
@@ -188,15 +183,15 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
188183
const aspectRatio = width/height
189184
let depthRatio = depth/height;
190185
depthRatio = depthRatio > 10 ? 10: depthRatio;
191-
// Generate grid points based on texture shape
186+
//Generate grid points based on texture shape
192187
for (let z = 0; z < depth; z++) {
193188
for (let y = 0; y < height; y++) {
194189
for (let x = 0; x < width; x++) {
195190
const index = x + y * width + z * width * height;
196191
const value = (data as number[])[index] || 0;
197192
// Skip zero or invalid values if needed
198193
if (value > 0) {
199-
// Normalize coordinates to [-0.5, 0.5] range
194+
// Normalize coordinates acceptable range
200195
const px = ((x / (width - 1)) - 0.5) * aspectRatio;
201196
const py = (y / (height - 1)) - 0.5;
202197
const pz = ((z / (depth - 1)) - 0.5) * depthRatio;
@@ -221,17 +216,17 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
221216

222217

223218
const shaderMaterial = new THREE.ShaderMaterial({
224-
glslVersion: THREE.GLSL3,
225-
uniforms: {
226-
pointSize: {value: pointScale},
227-
cmap: {value: colormap},
228-
scalePoints:{value: scalePoints}
229-
},
230-
vertexShader:pointVert,
231-
fragmentShader:pointFrag,
232-
blending: THREE.NoBlending,
233-
depthWrite: true,
234-
});
219+
glslVersion: THREE.GLSL3,
220+
uniforms: {
221+
pointSize: {value: pointScale},
222+
cmap: {value: colormap},
223+
scalePoints:{value: scalePoints}
224+
},
225+
vertexShader:pointVert,
226+
fragmentShader:pointFrag,
227+
blending: THREE.NoBlending,
228+
depthWrite: true,
229+
});
235230

236231
return (
237232
<points geometry={geometry} material={shaderMaterial} />

0 commit comments

Comments
 (0)