Volume quality slider

package.json

@@ -19,7 +19,7 @@
  "doc:publish": "kw-doc -c ./documentation/config.js -mp"
  },
  "dependencies": {
- "@kitware/vtk.js": "^26.8.0",
+ "@kitware/vtk.js": "^27.1.2",
  "@vue/composition-api": "1.6.3",
  "@vueuse/core": "^8.5.0",
  "@vueuse/shared": "^9.2.0",

src/components/VolumeProperties.vue

@@ -9,7 +9,6 @@ const TARGET_VIEW_ID = '3D';
 const LIGHTING_MODELS = {
  standard: 'Standard',
  hybrid: 'Hybrid',
- lao: 'Ambient Occlusion',
 };
 
 export default defineComponent({
@@ -54,28 +53,26 @@ export default defineComponent({
  () => !!cvrParams.value?.useVolumetricScatteringBlending
  );
 
- const lightingModel = ref(2); // LAO is default
- const selectLightingMode = (buttonIdx: number) => {
- if (buttonIdx === 0) {
- setCVRParam('useVolumetricScatteringBlending', false);
- setCVRParam('useLocalAmbientOcclusion', false);
- } else if (buttonIdx === 1) {
- setCVRParam('useVolumetricScatteringBlending', true);
- setCVRParam('useLocalAmbientOcclusion', false);
- } else if (buttonIdx === 2) {
- setCVRParam('useVolumetricScatteringBlending', false);
- setCVRParam('useLocalAmbientOcclusion', true);
- }
+ const lightingModel = ref<keyof typeof LIGHTING_MODELS>('hybrid');
+ const selectLightingMode = (buttonTxt: string) => {
+ setCVRParam('useVolumetricScatteringBlending', buttonTxt === 'hybrid');
  };
 
+ const volumeQualityLabels = ['Good', 'Better', 'Ultra', 'Beta'];
+ const showQualityWarning = false;
+ const disableQualityWarning = false;
+
  return {
+ LIGHTING_MODELS,
  cvrParams,
+ disableQualityWarning,
  laoEnabled,
- vsbEnabled,
- setCVRParam,
- LIGHTING_MODELS,
- selectLightingMode,
  lightingModel,
+ selectLightingMode,
+ setCVRParam,
+ showQualityWarning,
+ volumeQualityLabels,
+ vsbEnabled,
  };
  },
 });
@@ -87,6 +84,51 @@ export default defineComponent({
  <div ref="pwfEditorRef" />
  </div>
  <div v-if="!!cvrParams">
+ <v-slider
+ ticks="always"
+ tick-size="4"
+ :tick-labels="volumeQualityLabels"
+ min="1"
+ max="4"
+ step="1"
+ :value="cvrParams.volumeQuality"
+ @change="
+ {
+ showQualityWarning = !disableQualityWarning && $event > 2;
+ setCVRParam('volumeQuality', $event);
+ }
+ "
+ />
+ <v-alert
+ v-model="showQualityWarning"
+ border="top"
+ border-color
+ dark
+ color="secondary"
+ type="warning"
+ elevation="2"
+ close-text="Close Warning"
+ transition="slide-y-transition"
+ dense
+ dismissible
+ prominent
+ @click="showQualityWarning = false"
+ >
+ <b>"Ultra"</b> and <b>"Beta"</b> modes are unstable on some systems.
+ <v-spacer></v-spacer>
+ <v-btn
+ dense
+ small
+ block
+ @click="
+ disableQualityWarning = true;
+ showQualityWarning = false;
+ "
+ >
+ Dont Show Again
+ </v-btn>
+ </v-alert>
+ <v-divider class="my-8" />
  <v-slider
  label="Ambient"
  min="0"
@@ -101,7 +143,7 @@ export default defineComponent({
  <v-slider
  label="Diffuse"
  min="0"
- max="2"
+ max="1"
  step="0.1"
  dense
  hide-details
@@ -124,12 +166,27 @@ export default defineComponent({
  @change="selectLightingMode"
  mandatory
  >
- <v-btn v-for="model in Object.values(LIGHTING_MODELS)" :key="model">
+ <v-btn
+ v-for="model in Object.keys(LIGHTING_MODELS)"
+ :key="model"
+ :value="model"
+ block
+ >
  {{ model }}
  </v-btn>
  </v-btn-toggle>
  </v-row>
 
+ <v-switch
+ label="Local Ambient Occlusion"
+ dense
+ hide-details
+ :input-value="cvrParams.useLocalAmbientOcclusion"
+ @change="setCVRParam('useLocalAmbientOcclusion', !!$event)"
+ />
+
+ <v-spacer class="my-2" />
+
  <v-slider
  label="Scatter Blending"
  min="0"
@@ -142,30 +199,6 @@ export default defineComponent({
  :value="cvrParams.volumetricScatteringBlending"
  @change="setCVRParam('volumetricScatteringBlending', $event)"
  />
- <v-slider
- label="LAO Kernel Size"
- min="2"
- max="10"
- step="1"
- dense
- hide-details
- thumb-label
- v-if="laoEnabled"
- :value="cvrParams.laoKernelSize"
- @change="setCVRParam('laoKernelSize', $event)"
- />
- <v-slider
- label="LAO Kernel Radius"
- :min="cvrParams.laoKernelSize * 2"
- :max="cvrParams.laoKernelSize * 2 + 10"
- step="1"
- dense
- hide-details
- thumb-label
- v-if="laoEnabled"
- :value="cvrParams.laoKernelRadius"
- @change="setCVRParam('laoKernelRadius', $event)"
- />
  </div>
  </div>
 </template>

src/components/VtkThreeView.vue

@@ -326,34 +326,40 @@ export default defineComponent({
  light.setPositional(false);
  }
 
- const dims = image.getDimensions();
- const spacing = image.getSpacing();
- const spatialDiagonal = vec3.length(
- vec3.fromValues(
- dims[0] * spacing[0],
- dims[1] * spacing[1],
- dims[2] * spacing[2]
- )
+ property.setScalarOpacityUnitDistance(
+ 0,
+ (0.5 * getDiagonalLength(image.getBounds())) /
+ Math.max(...image.getDimensions())
  );
+ if (animating) {
+ mapper.setSampleDistance(0.75);
+ mapper.setMaximumSamplesPerRay(1000);
+ mapper.setGlobalIlluminationReach(0);
+ } else {
+ const dims = image.getDimensions();
+ const spacing = image.getSpacing();
+ const spatialDiagonal = vec3.length(
+ vec3.fromValues(
+ dims[0] * spacing[0],
+ dims[1] * spacing[1],
+ dims[2] * spacing[2]
+ )
+ );
 
- // Ensure that the maximum samples per ray are not exceeded.
- let sampleDistance = mapper.getSampleDistance();
- if (
- spatialDiagonal / sampleDistance >
- mapper.getMaximumSamplesPerRay()
- ) {
- sampleDistance =
- spatialDiagonal / (mapper.getMaximumSamplesPerRay() - 1);
+ // Use the average spacing for sampling by default
+ let sampleDistance = spacing.reduce((a, b) => a + b) / 3.0;
+ // Adjust the volume sampling by the quality slider value
+ sampleDistance /= 0.5 * (params.volumeQuality * params.volumeQuality);
+ const samplesPerRay = spatialDiagonal / sampleDistance + 1;
+ mapper.setMaximumSamplesPerRay(samplesPerRay);
+ mapper.setSampleDistance(sampleDistance);
+ // Adjust the global illumination reach by volume quality slider
+ mapper.setGlobalIlluminationReach(
+ enabled ? 0.25 * params.volumeQuality : 0
+ );
  }
- mapper.setSampleDistance(animating ? 0.75 : sampleDistance);
- mapper.setGlobalIlluminationReach(enabled ? 0.5 : 0);
 
  property.setShade(true);
- property.setScalarOpacityUnitDistance(
- 0,
- getDiagonalLength(image.getBounds()) /
- Math.max(...image.getDimensions())
- );
  property.setUseGradientOpacity(0, !enabled);
  property.setGradientOpacityMinimumValue(0, 0.0);
  const dataRange = image.getPointData().getScalars().getRange();

src/io/state-file/schema.ts

@@ -169,6 +169,7 @@ const ColoringConfig: z.ZodType<ColoringConfig> = z.object({
 const CVRConfig: z.ZodType<CVRConfig> = z.object({
  enabled: z.boolean(),
  lightFollowsCamera: z.boolean(),
+ volumeQuality: z.number(),
  useVolumetricScatteringBlending: z.boolean(),
  volumetricScatteringBlending: z.number(),
  useLocalAmbientOcclusion: z.boolean(),

src/store/view-configs/volume-coloring.ts

@@ -53,11 +53,12 @@ export const defaultVolumeColorConfig = (): VolumeColorConfig => ({
  cvr: {
  enabled: true,
  lightFollowsCamera: true,
- useVolumetricScatteringBlending: false,
+ volumeQuality: 2,
+ useVolumetricScatteringBlending: true,
  volumetricScatteringBlending: 0.5,
  useLocalAmbientOcclusion: true,
- laoKernelRadius: 6,
- laoKernelSize: 3,
+ laoKernelRadius: 5,
+ laoKernelSize: 15,
  ambient: DEFAULT_AMBIENT,
  diffuse: DEFAULT_DIFFUSE,
  specular: DEFAULT_SPECULAR,
@@ -115,12 +116,6 @@ export const setupVolumeColorConfig = () => {
  const updateVolumeCVRParameters = createUpdateFunc('cvr', (cvrConfig) => {
  return {
  ...cvrConfig,
- // 2X kernel size minimizes flickering lighting
- // Limit kernel radius to [2*size, 2*size+10]
- laoKernelRadius: Math.max(
- 2 * cvrConfig.laoKernelSize,
- Math.min(2 * cvrConfig.laoKernelSize + 10, cvrConfig.laoKernelRadius)
- ),
  };
  });
 

src/types/views.ts

@@ -52,6 +52,7 @@ export interface CVRConfig {
  enabled: boolean;
 
  lightFollowsCamera: boolean;
+ volumeQuality: number;
 
  useVolumetricScatteringBlending: boolean;
  volumetricScatteringBlending: number;