Skip to content

Commit 875514e

Browse files
TheJeranTheJeran
authored
Merge pull request #610 from EarthyScience/jp/remove-shader-bounds
remove shader bounds
2 parents 1338e7f + 5d39493 commit 875514e

11 files changed

Lines changed: 25 additions & 221 deletions

File tree

‎src/components/plots/DataCube.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,11 @@ export const DataCube = ({ volTexture }: DataCubeProps ) => {
4242
const aspectRatio = shape.y/shape.x
4343
const timeRatio = shape.z/shape.x;
4444
const {lonBounds, latBounds} = useCoordBounds()
45-
4645
const shaderMaterial = useMemo(()=>new THREE.ShaderMaterial({
4746
glslVersion: THREE.GLSL3,
4847
uniforms: {
4948
modelViewMatrixInverse: { value: new THREE.Matrix4() }, // Used for Orthographic RayMarcher
50-
map: { value: volTexture },
49+
map: { value: Array.from({ length: 14 }, (_, idx) => volTexture?.[idx])},
5150
maskTexture: { value: maskTexture },
5251
maskValue: {value: maskValue },
5352
textureDepths: {value: new THREE.Vector3(textureArrayDepths[2], textureArrayDepths[1], textureArrayDepths[0])},

‎src/components/plots/FlatBlocks.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,9 +99,9 @@ const FlatBlocks = ({textures} : {textures: THREE.Data3DTexture[] | THREE.DataTe
9999
},
100100
vertexShader: GetVert("flatBlocksVert", isFlat),
101101
fragmentShader: sphereBlocksFrag,
102-
blending: THREE.NormalBlending,
103-
side:THREE.DoubleSide,
102+
blending: THREE.NoBlending,
104103
depthWrite:true,
104+
depthTest:true,
105105
})
106106
return shader
107107
},[width, height, isFlat])

‎src/components/plots/FlatMap.tsx‎

Lines changed: 5 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,17 @@ interface InfoSettersProps{
2121
coords: React.RefObject<number[]>;
2222
}
2323

24-
function Rescale(value: number, scales: {minVal: number, maxVal: number}){
25-
const range = scales.maxVal-scales.minVal
26-
return value * range + scales.minVal
27-
}
28-
29-
const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE.Data3DTexture[], infoSetters : InfoSettersProps}) => {
24+
const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture[] | THREE.Data3DTexture[], infoSetters : InfoSettersProps}) => {
3025
const {setLoc, setShowInfo, val, coords} = infoSetters;
3126
const {flipY, colormap, valueScales, dimArrays, dimNames, dimUnits,
32-
isFlat, dataShape, textureArrayDepths, strides, timeSeries,
27+
isFlat, dataShape, textureArrayDepths, strides,
3328
setPlotDim,updateDimCoords, updateTimeSeries} = useGlobalStore(useShallow(state => ({
3429
flipY: state.flipY, colormap: state.colormap,
3530
valueScales: state.valueScales, dimArrays: state.dimArrays,
3631
dimNames:state.dimNames, dimUnits: state.dimUnits,
3732
isFlat: state.isFlat, dataShape: state.dataShape,
3833
textureArrayDepths: state.textureArrayDepths,
39-
strides: state.strides, timeSeries: state.timeSeries,
34+
strides: state.strides,
4035
setPlotDim:state.setPlotDim,
4136
updateDimCoords:state.updateDimCoords,
4237
updateTimeSeries: state.updateTimeSeries
@@ -128,33 +123,6 @@ const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE
128123

129124

130125
// ----- TIMESERIES ----- //
131-
const [boundsObj, setBoundsObj] = useState<Record<string, THREE.Vector4>>({})
132-
const [bounds, setBounds] = useState<THREE.Vector4[]>(new Array(10).fill(new THREE.Vector4(-1 , -1, -1, -1)))
133-
const [height, width] = [dataShape[dataShape.length-2], dataShape[dataShape.length-1]]
134-
135-
useEffect(()=>{ //This goes through the list of highlighted squares and removes those that aren't included in the timeseries object.
136-
let boundIDs = Object.keys(boundsObj)
137-
const tsIDs = Object.keys(timeSeries)
138-
boundIDs = boundIDs.filter((val) => tsIDs.includes(val))
139-
const pointValues = boundIDs.map(id => boundsObj[id]);
140-
const paddedArray = [
141-
...pointValues,
142-
...Array(Math.max(0, 10 - pointValues.length)).fill(new THREE.Vector4(-1 , -1, -1, -1))
143-
];
144-
setBounds(paddedArray)
145-
},[boundsObj, timeSeries])
146-
147-
function addBounds(uv : THREE.Vector2, tsID: string){ //This adds the bounds in UV space of a selected square on the sphere.
148-
const widthID = Math.floor(uv.x*(width))+.5;
149-
const heightID = Math.ceil(uv.y*height)-.5 ;
150-
const delX = 1/width;
151-
const delY = 1/height;
152-
const xBounds = [widthID/width-delX/2,widthID/width+delX/2]
153-
const yBounds = [heightID/height-delY/2,heightID/height+delY/2]
154-
const bounds = new THREE.Vector4(...xBounds, ...yBounds)
155-
const newBoundObj = {[tsID] : bounds}
156-
setBoundsObj(prev=>{ return {...newBoundObj, ...prev}})
157-
}
158126
function HandleTimeSeries(event: THREE.Intersection){
159127
const uv = event.uv;
160128
const normal = new THREE.Vector3(0,0,1)
@@ -191,7 +159,6 @@ const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE
191159
}
192160
}
193161
updateDimCoords({[tsID] : dimObj})
194-
addBounds(uv, tsID);
195162
}
196163
}
197164
// ----- SHADER MATERIAL ----- //
@@ -200,9 +167,7 @@ const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE
200167
uniforms:{
201168
cScale: {value: cScale},
202169
cOffset: {value: cOffset},
203-
selectTS: {value: selectTS},
204-
selectBounds: {value: bounds},
205-
map : {value: textures},
170+
map : {value: Array.from({ length: 14 }, (_, idx) => textures?.[idx])},
206171
maskTexture: {value: maskTexture},
207172
maskValue: {value: maskValue},
208173
latBounds: {value: new THREE.Vector2(deg2rad(latBounds[0]), deg2rad(latBounds[1]))},
@@ -222,19 +187,16 @@ const FlatMap = ({textures, infoSetters} : {textures : THREE.DataTexture | THREE
222187
if(shaderMaterial){
223188
const uniforms = shaderMaterial.uniforms
224189
uniforms.cOffset.value = cOffset;
225-
uniforms.map.value = textures;
226190
uniforms.cmap. value = colormap;
227191
uniforms.animateProg.value =animProg;
228192
uniforms.nanColor.value = new THREE.Color(nanColor);
229193
uniforms.nanAlpha.value = 1 - nanTransparency;
230194
uniforms.cScale.value = cScale;
231195
uniforms.latBounds.value = new THREE.Vector2(deg2rad(latBounds[0]), deg2rad(latBounds[1]))
232196
uniforms.lonBounds.value = new THREE.Vector2(deg2rad(lonBounds[0]), deg2rad(lonBounds[1]))
233-
uniforms.selectBounds.value = bounds;
234-
uniforms.selectTS.value = selectTS;
235197
uniforms.maskValue.value = maskValue
236198
}
237-
},[cScale, cOffset, textures, colormap, animProg, nanColor, nanTransparency, bounds, selectTS, latBounds, lonBounds, maskValue])
199+
},[cScale, cOffset, colormap, animProg, nanColor, nanTransparency, latBounds, lonBounds, maskValue])
238200

239201
return (
240202
<>

‎src/components/plots/Plot.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,7 +244,7 @@ const Plot = () => {
244244
}
245245
<Orbiter isFlat={plotType == "flat"} />
246246
{plotType == "flat" && show && <>
247-
{displaceSurface && <FlatMap textures={textures as THREE.DataTexture | THREE.Data3DTexture[]} infoSetters={infoSetters} /> }
247+
{displaceSurface && <FlatMap textures={textures as THREE.DataTexture[] | THREE.Data3DTexture[]} infoSetters={infoSetters} /> }
248248
{!displaceSurface && <FlatBlocks textures={textures} />}
249249
</>
250250
}

‎src/components/plots/PointCloud.tsx‎

Lines changed: 7 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import * as THREE from 'three'
2-
import { useEffect, useMemo, useState, useRef } from 'react'
2+
import { useEffect, useMemo } from 'react'
33
import { pointFrag, pointVert } from '@/components/textures/shaders'
4-
import { useAnalysisStore } from '@/GlobalStates/AnalysisStore';
54
import { useGlobalStore } from '@/GlobalStates/GlobalStore';
65
import { usePlotStore } from '@/GlobalStates/PlotStore';
76
import { useShallow } from 'zustand/shallow';
8-
import { parseUVCoords, getUnitAxis, GetTimeSeries, GetCurrentArray, deg2rad } from '@/utils/HelperFuncs';
9-
import { evaluate_cmap } from 'js-colormaps-es';
7+
import { deg2rad } from '@/utils/HelperFuncs';
108
import { useCoordBounds } from '@/hooks/useCoordBounds';
119
import { UVCube } from './UVCube';
1210

@@ -40,14 +38,13 @@ const MappingCube = () =>{
4038

4139
export const PointCloud = ({textures} : {textures:PCProps} )=>{
4240
const { colormap } = textures;
43-
const {timeSeries, flipY, dataShape, textureData} = useGlobalStore(useShallow(state=>({
44-
timeSeries: state.timeSeries,
41+
const { flipY, dataShape, textureData} = useGlobalStore(useShallow(state=>({
4542
flipY: state.flipY,
4643
dataShape: state.dataShape,
4744
textureData: state.textureData
4845
})))
4946
const {scalePoints, scaleIntensity, pointSize, cScale, cOffset, valueRange, animProg,
50-
selectTS, timeScale, xRange, yRange, zRange, fillValue,
47+
timeScale, xRange, yRange, zRange, fillValue,
5148
maskTexture, maskValue } = usePlotStore(useShallow(state => ({
5249
scalePoints: state.scalePoints,
5350
scaleIntensity: state.scaleIntensity,
@@ -56,7 +53,6 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
5653
cOffset:state.cOffset,
5754
valueRange: state.valueRange,
5855
animProg: state.animProg,
59-
selectTS: state.selectTS,
6056
timeScale: state.timeScale,
6157
xRange: state.xRange,
6258
yRange: state.yRange,
@@ -65,24 +61,6 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
6561
maskTexture: state.maskTexture,
6662
maskValue: state.maskValue,
6763
})))
68-
69-
const [pointsObj, setPointsObj] = useState<Record<string, number>>({})
70-
const [pointIDs, setPointIDs] = useState<number[]>(new Array(10).fill(-1))
71-
const [stride, setStride] = useState<number>(1)
72-
const [dimWidth, setDimWidth] = useState<number>(0);
73-
74-
useEffect(()=>{ //This goes through the list of highlighted columns and removes those that aren't included in the timeseries object.
75-
let pointIDs = Object.keys(pointsObj)
76-
const tsIDs = Object.keys(timeSeries)
77-
pointIDs = pointIDs.filter((val) => tsIDs.includes(val))
78-
const pointValues = pointIDs.map(id => pointsObj[id]);
79-
const paddedArray = [
80-
...pointValues,
81-
...Array(Math.max(0, 10 - pointValues.length)).fill(-1)
82-
];
83-
setPointIDs(paddedArray)
84-
85-
},[timeSeries, pointsObj])
8664

8765
//Extract data and shape from Data3DTexture
8866
const { data, width, height, depth } = useMemo(() => {
@@ -94,7 +72,6 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
9472
depth: depth,
9573
};
9674
}, [textureData, dataShape]);
97-
9875
// Create buffer geometry
9976
const geometry = useMemo(() => {
10077
const geom = new THREE.BufferGeometry();
@@ -119,10 +96,6 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
11996
valueRange: {value: new THREE.Vector2(valueRange[0], valueRange[1])},
12097
scalePoints:{value: scalePoints},
12198
scaleIntensity: {value: scaleIntensity},
122-
startIDs: {value : pointIDs},
123-
stride: {value : stride},
124-
showTransect: { value: selectTS},
125-
dimWidth: {value: dimWidth},
12699
timeScale: {value: timeScale},
127100
animateProg: {value: animProg},
128101
shape: {value: new THREE.Vector3(depth, height, width)},
@@ -134,12 +107,10 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
134107
fragmentShader:pointFrag,
135108
depthWrite: true,
136109
depthTest: true,
137-
transparent: false,
138-
blending:THREE.NormalBlending,
139-
side:THREE.DoubleSide,
110+
blending:THREE.NoBlending,
140111
})
141112
),[]);
142-
113+
143114
useEffect(() => {
144115
if (shaderMaterial) {
145116
const uniforms = shaderMaterial.uniforms;
@@ -150,12 +121,8 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
150121
uniforms.valueRange.value.set(valueRange[0], valueRange[1]);
151122
uniforms.scalePoints.value = scalePoints;
152123
uniforms.scaleIntensity.value = scaleIntensity;
153-
uniforms.startIDs.value = pointIDs;
154-
uniforms.stride.value = stride;
155124
uniforms.latBounds.value = new THREE.Vector2(deg2rad(latBounds[0]), deg2rad(latBounds[1]))
156125
uniforms.lonBounds.value = new THREE.Vector2(deg2rad(lonBounds[0]), deg2rad(lonBounds[1]))
157-
uniforms.showTransect.value = selectTS;
158-
uniforms.dimWidth.value = dimWidth;
159126
uniforms.timeScale.value = timeScale;
160127
uniforms.animateProg.value = animProg;
161128
uniforms.flatBounds.value.set(
@@ -168,8 +135,7 @@ export const PointCloud = ({textures} : {textures:PCProps} )=>{
168135
uniforms.fillValue.value = fillValue?? NaN
169136
uniforms.maskValue.value = maskValue
170137
}
171-
}, [pointSize, colormap, cOffset, cScale, valueRange, scalePoints, scaleIntensity, pointIDs, stride, selectTS, animProg, timeScale, xRange, yRange, fillValue, zRange, maskValue, lonBounds, latBounds]);
172-
138+
}, [pointSize, colormap, cOffset, cScale, valueRange, scalePoints, scaleIntensity, animProg, timeScale, xRange, yRange, fillValue, zRange, maskValue, lonBounds, latBounds]);
173139
return (
174140
<>
175141
<mesh scale={[1,flipY ? -1:1, 1]} >

‎src/components/plots/Sphere.tsx‎

Lines changed: 3 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,6 @@ import { evaluate_cmap } from 'js-colormaps-es';
99
import { useCoordBounds } from '@/hooks/useCoordBounds'
1010
import { GetFrag, GetVert } from '../textures';
1111

12-
function XYZtoUV(xyz : THREE.Vector3, width: number, height : number){
13-
const lon = Math.atan2(xyz.z,xyz.x)
14-
const lat = Math.asin(xyz.y);
15-
let u = (lon + Math.PI) / (2 * Math.PI);
16-
u = 1 - u;
17-
let v = (lat + Math.PI / 2) / Math.PI;
18-
u = Math.round(u*width-.5)/width
19-
v = Math.round(v*height-.5)/height
20-
return new THREE.Vector2(u,v)
21-
}
22-
2312
function XYZtoRemap(xyz : THREE.Vector3, latBounds: number[], lonBounds : number[]){
2413
const lon = Math.atan2(xyz.z,xyz.x)
2514
const lat = Math.asin(xyz.y);
@@ -39,14 +28,13 @@ export const Sphere = ({textures} : {textures: THREE.Data3DTexture[] | THREE.Dat
3928
analysisArray: state.analysisArray
4029
})))
4130
const {colormap, isFlat, dimArrays, dimNames, dimUnits, valueScales,
42-
timeSeries, dataShape, strides, flipY, textureArrayDepths} = useGlobalStore(useShallow(state=>({
31+
dataShape, strides, flipY, textureArrayDepths} = useGlobalStore(useShallow(state=>({
4332
colormap: state.colormap,
4433
isFlat: state.isFlat,
4534
dimArrays:state.dimArrays,
4635
dimNames:state.dimNames,
4736
dimUnits:state.dimUnits,
4837
valueScales: state.valueScales,
49-
timeSeries: state.timeSeries,
5038
dataShape: state.dataShape,
5139
strides: state.strides,
5240
flipY: state.flipY,
@@ -78,47 +66,18 @@ export const Sphere = ({textures} : {textures: THREE.Data3DTexture[] | THREE.Dat
7866
dimArrays[1].slice(ySlice[0], ySlice[1] ? ySlice[1] : undefined),
7967
dimArrays.length > 2 ? dimArrays[2].slice(xSlice[0], xSlice[1] ? xSlice[1] : undefined) : [],
8068
]
81-
const [boundsObj, setBoundsObj] = useState<Record<string, THREE.Vector4>>({})
82-
const [bounds, setBounds] = useState<THREE.Vector4[]>(new Array(10).fill(new THREE.Vector4(-1 , -1, -1, -1)))
83-
const [height, width] = useMemo(()=>isFlat ? dataShape : [dataShape[1], dataShape[2]], [dataShape])
84-
useEffect(()=>{ //This goes through the list of highlighted squares and removes those that aren't included in the timeseries object.
85-
let boundIDs = Object.keys(boundsObj)
86-
const tsIDs = Object.keys(timeSeries)
87-
boundIDs = boundIDs.filter((val) => tsIDs.includes(val))
88-
const pointValues = boundIDs.map(id => boundsObj[id]);
89-
const paddedArray = [
90-
...pointValues,
91-
...Array(Math.max(0, 10 - pointValues.length)).fill(new THREE.Vector4(-1 , -1, -1, -1))
92-
];
93-
setBounds(paddedArray)
94-
},[boundsObj, timeSeries])
95-
96-
function addBounds(uv : THREE.Vector2, tsID: string){ //This adds the bounds in UV space of a selected square on the sphere.
97-
const widthID = Math.floor(uv.x*(width))+.5;
98-
const heightID = Math.ceil(uv.y*height)-.5 ;
99-
const delX = 1/width;
100-
const delY = 1/height;
101-
const xBounds = [widthID/width-delX/2,widthID/width+delX/2]
102-
const yBounds = [heightID/height-delY/2,heightID/height+delY/2]
103-
const bounds = new THREE.Vector4(...xBounds, ...yBounds)
104-
const newBoundObj = {[tsID] : bounds}
105-
setBoundsObj(prev=>{ return {...newBoundObj, ...prev}})
106-
}
10769

10870
const {lonBounds, latBounds} = useCoordBounds()
10971

110-
11172
const geometry = useMemo(() => new THREE.IcosahedronGeometry(1, sphereResolution), [sphereResolution]);
11273
const shaderMaterial = useMemo(()=>{
11374
const shader = new THREE.ShaderMaterial({
11475
glslVersion: THREE.GLSL3,
11576
uniforms: {
116-
map: { value: textures },
77+
map: { value: Array.from({ length: 14 }, (_, idx) => textures?.[idx]) },
11778
maskTexture: { value: maskTexture},
11879
maskValue: { value: maskValue },
11980
textureDepths: {value: new THREE.Vector3(textureArrayDepths[2], textureArrayDepths[1], textureArrayDepths[0])},
120-
selectTS: {value: selectTS},
121-
selectBounds: {value: bounds},
12281
cmap:{value: colormap},
12382
cOffset:{value: cOffset},
12483
cScale: {value: cScale},
@@ -149,9 +108,6 @@ export const Sphere = ({textures} : {textures: THREE.Data3DTexture[] | THREE.Dat
149108

150109
const updateMaterial = (material: THREE.ShaderMaterial) =>{
151110
const uniforms = material.uniforms;
152-
uniforms.map.value = textures
153-
uniforms.selectTS.value = selectTS
154-
uniforms.selectBounds.value = bounds
155111
uniforms.cmap.value = colormap
156112
uniforms.maskValue.value = maskValue
157113
uniforms.cOffset.value = cOffset
@@ -173,7 +129,7 @@ export const Sphere = ({textures} : {textures: THREE.Data3DTexture[] | THREE.Dat
173129
if (backMaterial){
174130
updateMaterial(backMaterial)
175131
}
176-
},[textures, animProg, colormap, cOffset, cScale, animate, bounds, selectTS, lonBounds, latBounds, nanColor, nanTransparency, sphereDisplacement, fillValue, maskValue, valueScales])
132+
},[animProg, colormap, cOffset, cScale, animate, lonBounds, latBounds, nanColor, nanTransparency, sphereDisplacement, fillValue, maskValue, valueScales])
177133

178134

179135
function HandleTimeSeries(event: THREE.Intersection){
@@ -214,7 +170,6 @@ export const Sphere = ({textures} : {textures: THREE.Data3DTexture[] | THREE.Dat
214170
}
215171
}
216172
updateDimCoords({[tsID] : dimObj})
217-
addBounds(uv, tsID);
218173
}
219174

220175
return (

‎src/components/plots/SphereBlocks.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,9 @@ const SphereBlocks = ({textures} : {textures: THREE.Data3DTexture[] | THREE.Data
9696
},
9797
vertexShader: GetVert("sphereBlocksVert", isFlat),
9898
fragmentShader: sphereBlocksFrag,
99-
blending: THREE.NormalBlending,
100-
side:THREE.DoubleSide,
99+
blending:THREE.NoBlending,
101100
depthWrite:true,
101+
depthTest:true,
102102
})
103103
return shader
104104
},[count, isFlat])

0 commit comments

Comments
 (0)