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;