Add bc4-r-unorm and astc-12x12-unorm brain images

sample/volumeRenderingTexture3D/main.ts

@@ -7,21 +7,51 @@ const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 
 const gui = new GUI();
 
+const brainImages = {
+  r8unorm: {
+    bytesPerBlock: 1,
+    blockLength: 1,
+    dataPath:
+      '../../assets/img/volume/t1_icbm_normal_1mm_pn0_rf0_180x216x180_uint8_1x1.bin-gz',
+  },
+  'bc4-r-unorm': {
+    bytesPerBlock: 8,
+    blockLength: 4,
+    dataPath:
+      '../../assets/img/volume/t1_icbm_normal_1mm_pn0_rf0_180x216x180_bc4_4x4.bin-gz',
+  },
+};
+
 // GUI parameters
-const params: { rotateCamera: boolean; near: number; far: number } = {
+const params: {
+  rotateCamera: boolean;
+  near: number;
+  far: number;
+  textureFormat: GPUTextureFormat;
+} = {
   rotateCamera: true,
   near: 2.0,
   far: 7.0,
+  textureFormat: 'r8unorm',
 };
 
 gui.add(params, 'rotateCamera', true);
 gui.add(params, 'near', 2.0, 7.0);
 gui.add(params, 'far', 2.0, 7.0);
+gui.add(params, 'textureFormat', Object.keys(brainImages)).onChange(() => {
+  createVolumeTexture(params.textureFormat);
+});
 
 const adapter = await navigator.gpu?.requestAdapter({
   featureLevel: 'compatibility',
 });
-const device = await adapter?.requestDevice();
+const hasBCSliced3D = adapter?.features.has('texture-compression-bc-sliced-3d');
+const device = await adapter?.requestDevice({
+  requiredFeatures: hasBCSliced3D
+    ? ['texture-compression-bc', 'texture-compression-bc-sliced-3d']
+    : [],
+});
+
 quitIfWebGPUNotAvailable(adapter, device);
 const context = canvas.getContext('webgpu') as GPUCanvasContext;
 
@@ -77,20 +107,17 @@ const uniformBuffer = device.createBuffer({
   usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
 });
 
-// Fetch the image and upload it into a GPUTexture.
 let volumeTexture: GPUTexture;
-{
+
+// Fetch the image and upload it into a GPUTexture.
+async function createVolumeTexture(format: GPUTextureFormat) {
+  const { blockLength, bytesPerBlock, dataPath } = brainImages[format];
   const width = 180;
   const height = 216;
   const depth = 180;
-  const format: GPUTextureFormat = 'r8unorm';
-  const blockLength = 1;
-  const bytesPerBlock = 1;
   const blocksWide = Math.ceil(width / blockLength);
   const blocksHigh = Math.ceil(height / blockLength);
   const bytesPerRow = blocksWide * bytesPerBlock;
-  const dataPath =
-    '../../assets/img/volume/t1_icbm_normal_1mm_pn0_rf0_180x216x180_uint8_1x1.bin-gz';
 
   // Fetch the compressed data
   const response = await fetch(dataPath);
@@ -123,6 +150,8 @@ let volumeTexture: GPUTexture;
   );
 }
 
+await createVolumeTexture(params.textureFormat);
+
 // Create a sampler with linear filtering for smooth interpolation.
 const sampler = device.createSampler({
   magFilter: 'linear',
@@ -131,7 +160,7 @@ const sampler = device.createSampler({
   maxAnisotropy: 16,
 });
 
-const uniformBindGroup = device.createBindGroup({
+const bindGroupDescriptor: GPUBindGroupDescriptor = {
   layout: pipeline.getBindGroupLayout(0),
   entries: [
     {
@@ -146,10 +175,10 @@ const uniformBindGroup = device.createBindGroup({
     },
     {
       binding: 2,
-      resource: volumeTexture.createView(),
+      resource: undefined, // Assigned later
     },
   ],
-});
+};
 
 const renderPassDescriptor: GPURenderPassDescriptor = {
   colorAttachments: [
@@ -205,6 +234,9 @@ function frame() {
     .getCurrentTexture()
     .createView();
 
+  bindGroupDescriptor.entries[2].resource = volumeTexture.createView();
+  const uniformBindGroup = device.createBindGroup(bindGroupDescriptor);
+
   const commandEncoder = device.createCommandEncoder();
   const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
   passEncoder.setPipeline(pipeline);