diff --git a/demo/src/App.js b/demo/src/App.js index ef264c707..0aba63409 100644 --- a/demo/src/App.js +++ b/demo/src/App.js @@ -39,10 +39,10 @@ export default class App extends PureComponent { this.resize = this.resize.bind(this) this.state = { sliderValues:{ - channel_0: 10000, - channel_1: 10000, - channel_2: 10000, - channel_3: 10000 + channel_0: [0, 20000], + channel_1: [0, 20000], + channel_2: [0, 20000], + channel_3: [0, 20000] }, colorValues:{ channel_0: [255, 0, 0], diff --git a/package-lock.json b/package-lock.json index 11a699c01..31126d00d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@hubmap/vitessce-image-viewer", - "version": "0.0.1", + "version": "0.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/layers/microscopy-viewer-layer/microscopy-viewer-layer.js b/src/layers/microscopy-viewer-layer/microscopy-viewer-layer.js index 7df3e80e8..bf6e82772 100644 --- a/src/layers/microscopy-viewer-layer/microscopy-viewer-layer.js +++ b/src/layers/microscopy-viewer-layer/microscopy-viewer-layer.js @@ -49,12 +49,14 @@ export class MicroscopyViewerLayer extends BaseTileLayer { }) var diff = 6 - orderedSliderValues.length for (var i = 0; i < diff; i++) { - orderedSliderValues.push(65535); + orderedSliderValues.push([0,65535]); } var diff = 6 - orderedColorValues.length for (var j = 0; j < diff; j++) { orderedColorValues.push([0,0,0]); } + // flatten for use on shaders + var flatSliderValues = [].concat.apply([], orderedSliderValues) orderedColorValues = orderedColorValues.map(color => color.map(ch => ch / 255)) const getZarr = ({ x, y, z }) => { return loadZarr({ @@ -66,7 +68,7 @@ export class MicroscopyViewerLayer extends BaseTileLayer { : props.getTileData const overrideValuesProps = Object.assign( {}, props, { - sliderValues: orderedSliderValues, + sliderValues: flatSliderValues, colorValues: orderedColorValues, minZoom, getTileData, diff --git a/src/layers/xr-layer/xr-layer-fragment.js b/src/layers/xr-layer/xr-layer-fragment.js index 37d33dd01..4ab3991cf 100644 --- a/src/layers/xr-layer/xr-layer-fragment.js +++ b/src/layers/xr-layer/xr-layer-fragment.js @@ -14,7 +14,7 @@ uniform usampler2D channel4; uniform usampler2D channel5; // range -uniform float sliderValues[6]; +uniform vec2 sliderValues[6]; // color uniform vec3 colorValue0; @@ -61,19 +61,18 @@ vec3 rgb2hsv(vec3 rgb) { } void main() { - float channel0Color = float(texture(channel0, vTexCoord).r) / sliderValues[0]; - float channel1Color = float(texture(channel1, vTexCoord).r) / sliderValues[1]; - float channel2Color = float(texture(channel2, vTexCoord).r) / sliderValues[2]; - float channel3Color = float(texture(channel3, vTexCoord).r) / sliderValues[3]; - float channel4Color = float(texture(channel4, vTexCoord).r) / sliderValues[4]; - float channel5Color = float(texture(channel5, vTexCoord).r) / sliderValues[5]; + float channel0Color = (float(texture(channel0, vTexCoord).r) - sliderValues[0][0]) / sliderValues[0][1]; + float channel1Color = (float(texture(channel1, vTexCoord).r) - sliderValues[1][0]) / sliderValues[1][1]; + float channel2Color = (float(texture(channel2, vTexCoord).r) - sliderValues[2][0]) / sliderValues[2][1]; + float channel3Color = (float(texture(channel3, vTexCoord).r) - sliderValues[3][0]) / sliderValues[3][1]; + float channel4Color = (float(texture(channel4, vTexCoord).r) - sliderValues[4][0]) / sliderValues[4][1]; + float channel5Color = (float(texture(channel5, vTexCoord).r) - sliderValues[5][0]) / sliderValues[5][1]; vec3 rgbCombo = vec3(0.0); vec3 hsvCombo = vec3(0.0); float channelArray[6] = float[6](channel0Color, channel1Color, channel2Color, channel3Color, channel4Color, channel5Color); vec3 colorValues[6] = vec3[6](colorValue0, colorValue1, colorValue2, colorValue3, colorValue4, colorValue5); - for(int i = 0; i < 6; i++) { hsvCombo = rgb2hsv(vec3(colorValues[i])); hsvCombo = vec3(hsvCombo.xy, channelArray[i]); @@ -81,6 +80,5 @@ void main() { } color = vec4(rgbCombo, 1.0); - } `;