31:T500,function createZSliceImage(ctx, data, width, height, sliceIndex) { // Create image buffer with the same width and height as the dataset. // The image data has 4 channels (red, green, blue, alpha). const image = ctx.createImageData(width, height); // Loop through all pixels in the image and set the color based on the data. for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { // Compute the data index in the 3D volume. // The first part is the offset to the current volume slice (width * height * sliceIndex). // The second part is the offset inside the slice to the current voxel (width * y + x). const dataIndex = (width * height * sliceIndex) + (width * y + x); // Get the data value. const value = data[dataIndex]; // Compute the index of the pixel in the image data, considering the 4 color channels. const imageIndex = (width * y + x) * 4; // Set the pixel color. image.data[imageIndex] = value; // Red image.data[imageIndex + 1] = value; // Green image.data[imageIndex + 2] = value; // Blue image.data[imageIndex + 3] = 255; // Alpha } } // Asynchronously create a bitmap from the image data (returns a promise). return createImageBitmap(image); }32:[{"id":"46cfe2bacb56a17226973e8ed4e55d28ce43b8951962b7ccab85d2e77b30926e09ce6eba0531a1c659b02036ba513acac04bf5e1f0348f54f9fe8d7c1f7abdb4","href":"https://static.observableusercontent.com/files/46cfe2bacb56a17226973e8ed4e55d28ce43b8951962b7ccab85d2e77b30926e09ce6eba0531a1c659b02036ba513acac04bf5e1f0348f54f9fe8d7c1f7abdb4","name":"engine_256x256x128_uint8.zip","type":"application/zip","lastModified":1680163846798.588,"size":3035589},{"id":"665f95b53cbb24a26266344c9dfb081cb0f226713a3976976b21c8283dd3f6a22a5992730905cc3c50b8f3a32aaf7436f475ecafb1c353c4300011d54de06d6f","href":"https://static.observableusercontent.com/files/665f95b53cbb24a26266344c9dfb081cb0f226713a3976976b21c8283dd3f6a22a5992730905cc3c50b8f3a32aaf7436f475ecafb1c353c4300011d54de06d6f","name":"x_slice_example_svg@2.svg","type":"image/svg+xml","lastModified":1680608692623.979,"size":13243},{"id":"986bf0183e6e85ace6596f97b906d680eb6c0fdfce146e02a3b054aecabad5c5232ef09ee4c0577912ef3d7fc75b23ae85cf649b828893398cef35407f80fbfb","href":"https://static.observableusercontent.com/files/986bf0183e6e85ace6596f97b906d680eb6c0fdfce146e02a3b054aecabad5c5232ef09ee4c0577912ef3d7fc75b23ae85cf649b828893398cef35407f80fbfb","name":"y_slice_example_svg@1.svg","type":"image/svg+xml","lastModified":1680608803038.283,"size":13546},{"id":"7aa8e2ddf434408ff35e066873d37bde6434a4634f02402c19b4f1bb43990b62a7c60426cb4bb84e3c7575efa43e666d50c991801213a7062c747c677805420e","href":"https://static.observableusercontent.com/files/7aa8e2ddf434408ff35e066873d37bde6434a4634f02402c19b4f1bb43990b62a7c60426cb4bb84e3c7575efa43e666d50c991801213a7062c747c677805420e","name":"z_slice_example_svg@2.svg","type":"image/svg+xml","lastModified":1680608963119.939,"size":11020}] 2f:{"title":"Visualization of 2D slices through a 3D volume dataset (exercise)","cells":[{"id":0,"value":"# Visualization of 2D slices through a 3D volume dataset (exercise)","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"A step-by-step demonstration of creating a visualization of two-dimensional volume slices in the Z-plane using the [2D rendering context of the Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D). The complete implementation with solutions to the exercises can be found in [this notebook](https://observablehq.com/@mroehlig/visualization-of-2d-slices-through-a-3d-volume-dataset-solution).","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"viewof zSliceIndex = Inputs.range([0, dataDescription.zExtent - 1], {value: dataDescription.zExtent / 2, step: 1, label: \"z-slice index\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"plotSlice(500, 500, dataDescription, dataValues, createZSliceImage, zSliceIndex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"The 3 steps to create the above visualization (+ exercises step) are detailed below:\n1. [Retrieving a dataset](https://observablehq.com/@mroehlig/visualization-of-2d-slices-through-a-3d-volume-dataset#cell-278)\n2. [Creating a slice image](https://observablehq.com/@mroehlig/visualization-of-2d-slices-through-a-3d-volume-dataset#cell-328)\n3. [Drawing the slice image](https://observablehq.com/@mroehlig/visualization-of-2d-slices-through-a-3d-volume-dataset#cell-390)\n4. [Exercises](https://observablehq.com/@mroehlig/visualization-of-2d-slices-through-a-3d-volume-dataset#cell-477)","pinned":false,"hidden":false,"mode":"md"},{"id":278,"value":"## Retrieving the dataset","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"Example datasets can be obtained from Pavol Klacansky's [Open Scientific Visualization Datasets Repository](https://klacansky.com/open-scivis-datasets/). We select the *Engine* dataset containing a CT scan of two cylinders of an engine block. The following cell lists the corresponding metadata.","pinned":false,"hidden":false,"mode":"md"},{"id":280,"value":"dataDescription = ({\n name: \"Engine\",\n acknowledgement: \"volvis.org and General Electric\",\n description: \"CT scan of two cylinders of an engine block\",\n link: \"https://klacansky.com/open-scivis-datasets/\",\n dataType: \"uint8\",\n endian: \"little\",\n scale: [1, 1, 1],\n xExtent: 256,\n yExtent: 256,\n zExtent: 128\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"The dataset is attached to this notebook with an [Observable FileAttachment](https://observablehq.com/@observablehq/file-attachments) (see the sidebar on the right). We need to retrieve the attachment, decompress it, get the actual file, and turn the file buffer into an [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) to match the data type specified in the dataset's metadata. The result is a 1-dimensional array of 8-bit unsigned integer values. It represents the loaded 3D volume with the x-, y-, and z-extents specified in the metadata.","pinned":false,"hidden":false,"mode":"md"},{"id":283,"value":"dataValues = {\n const zip = await FileAttachment(\"engine_256x256x128_uint8.zip\").zip(); // Retrieve attachment and decompress it.\n const file = zip.file(\"engine_256x256x128_uint8.raw\"); // Get the actual data file in the decompressed archive.\n const buffer = await file.arrayBuffer(); // Get the byte buffer of the file.\n const byteArray = new Uint8Array(buffer); // Create an uint8-array-view from the file buffer.\n \n return byteArray; // Return the data as an uint8 array.\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":328,"value":"## Creating the slice image","pinned":false,"hidden":false,"mode":"md"},{"id":349,"value":"After retrieving the data, we can create a 2D image for a selected slice of the 3D volume. For simplicity, we first consider only slices in the z-plane. This allows us to think of the 3D volume as a stack of 2D images, with each 2D image representing a slice.","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"FileAttachment(\"z_slice_example_svg@2.svg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"To create the slice image, we first [create an ImageData object](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createImageData) with the x-extent and y-extent of our volume data. Then, we calculate the offset into our volume for the selected slice. Next, we loop through the pixels of our slice image and set the pixel colors based on the corresponding data values in the volume. Finally, we [create an ImageBitmap with the function *createImageBitmap*](https://developer.mozilla.org/en-US/docs/Web/API/createImageBitmap) from the image data, so that it can be drawn on the canvas.","pinned":false,"hidden":false,"mode":"md"},{"id":138,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"## Drawing the slice image","pinned":false,"hidden":false,"mode":"md"},{"id":409,"value":"We can now create a plot function that renders our visualization of 2D volume slices. To do this, we first create a canvas object and [2D rendering context](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) using Observable's wrapper function *DOM.context2d()*. The width and the height of the canvas can be chosen freely. Next, we create the image bitmap for the currently selected slice using our function *createZSliceImage()* and draw it by calling the [*drawImage()*](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage) function of the rendering context. When drawing, we must consider the aspect ratio of the volume to avoid stretching the slice image on the canvas. Optionally, we can add a text label on the canvas to indicate which slice image is currently selected.","pinned":false,"hidden":false,"mode":"md"},{"id":720,"value":"async function* plotSlice(width, height, description, values, imageFn, sliceIndex) {\n // Create the canvas and 2D rendering context.\n const ctx = DOM.context2d(width, height);\n\n // Create and draw the slice image. The returned bitmap image can be used\n // to draw the slice image scaled to the dimensions of the canvas. The data\n // aspect ratio has to be taken into account to prevent stretching of the\n // slice image.\n const image = await imageFn(ctx, values, description.xExtent, description.yExtent, sliceIndex);\n const dataAspect = description.yExtent / description.xExtent;\n ctx.drawImage(image, 0, 0, width, width * dataAspect);\n \n // Draw the info label (current image number and overall number of images).\n const info = \"Image \" + (sliceIndex + 1) + \"/\" + (description.zExtent);\n ctx.font = \"16px sans-serif\";\n drawSliceInfo(ctx, info);\n\n // Return the canvas element.\n yield ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":843,"value":"To display our visualization, we just need to call our plot function. The final result is shown below and at the [top of the notebook](https://observablehq.com/@mroehlig/visualization-of-2d-slices-through-a-3d-volume-dataset#cell-451). Well done! 👍🎉","pinned":false,"hidden":false,"mode":"md"},{"id":726,"value":"plotSlice(500, 500, dataDescription, dataValues, createZSliceImage, zSliceIndex)","pinned":true,"hidden":false,"mode":"ojs"},{"id":477,"value":"## Exercises","pinned":false,"hidden":false,"mode":"md"},{"id":609,"value":"The following exercises provide some ideas on how to extend the visualization. Try them out or come up with your own extension! The solutions to the exercises can be found in [this notebook](https://observablehq.com/@mroehlig/visualization-of-2d-slices-through-a-3d-volume-dataset-solution).","pinned":false,"hidden":false,"mode":"md"},{"id":504,"value":"### 1. Try another dataset","pinned":false,"hidden":false,"mode":"md"},{"id":577,"value":"More example datasets can be found in Pavol Klacansky's [Open Scientific Visualization Datasets Repository](https://klacansky.com/open-scivis-datasets/). Pay attention to their size, as volume datasets can be quite large. A new dataset can then be attached to this notebook in the *Files* sidebar and loaded via a [FileAttachment](https://observablehq.com/@observablehq/file-attachments) as described above. Alternatively, you can also import datasets from other notebooks on Observable. For example, use the following import statement to retrieve a CT scan of a human head.","pinned":false,"hidden":false,"mode":"md"},{"id":579,"value":"import {dataDescription as headDataDescription, dataValues as headDataValues} from \"@mroehlig/3d-volume-rendering-with-webgl-three-js\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":601,"value":"After importing the new dataset, you have access to the metadata and the buffer with the volume data.","pinned":false,"hidden":false,"mode":"md"},{"id":587,"value":"headDataDescription","pinned":true,"hidden":false,"mode":"ojs"},{"id":859,"value":"headDataValues // Use the imported data to create and visualize a slice image...","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"### 2. Add user interface controls to customize the data coloring","pinned":false,"hidden":false,"mode":"md"},{"id":605,"value":"Try adding more UI components to customize the visualization of the volume data. For example, you can use the value of the checkbox below to decide whether the coloring should be inverted or not. This also requires adjusting the code in the *createZSliceImage()* function at the point where the red, green and blue values of the pixel color in the slice image are set.","pinned":false,"hidden":false,"mode":"md"},{"id":607,"value":"viewof invertColor = Inputs.toggle({label: \"Invert color\", value: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"You can also use a different color palette for encoding the data. For example, have a look at the continuous color palettes of [ColorBrewer](https://colorbrewer2.org/), how they are [available in D3.js](https://observablehq.com/@d3/color-schemes), and how to [interpolate between colors](https://observablehq.com/@d3/working-with-color#continuous). The interpolated colors can then be used to adapt the the *createZSliceImage()* function and customize the appearance of the data.","pinned":false,"hidden":false,"mode":"md"},{"id":619,"value":"colorScale = {\n // Get a ColorBrewer color palette with the maximum available number of colors using D3.\n const palette = d3.schemeRdPu[d3.schemeRdPu.length - 1];\n // Create a color scale from the palette using D3. The scale function can then be used\n // to retrieve interpolated color values for input values between 0 and 1.\n return d3.scaleLinear()\n .domain(Array.from({length: palette.length}, (_, i) => i / (palette.length - 1)))\n .range(palette);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":878,"value":"As an example, the *colorScale()* function is here used to draw a smoothly interpolated color gradient.","pinned":false,"hidden":false,"mode":"md"},{"id":880,"value":"drawGradient(colorScale)","pinned":true,"hidden":false,"mode":"ojs"},{"id":882,"value":"To obtain the individual red, green, and blue values of an interpolated color from our color scale (returns CSS strings), we can use D3's color module [*d3.color*](https://github.com/d3/d3-color/blob/v1.2.3/README.md#color).","pinned":false,"hidden":false,"mode":"md"},{"id":885,"value":"interpolatedColor = d3.color(colorScale(0.5))","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"### 3. Create and visualize slice images in x- and/or y-direction","pinned":false,"hidden":false,"mode":"md"},{"id":677,"value":"So far, we have only considered slices through the volume in the z-direction. However, it can be interesting to examine a volume from other directions as well. Try developing new code to create and visualize slice images in the x-direction and/or y-direction. The sketches below give an idea of how the slices are formed.","pinned":false,"hidden":false,"mode":"md"},{"id":516,"value":" \n \n \n \n \n

${await FileAttachment(\"x_slice_example_svg@2.svg\").image()}

${await FileAttachment(\"y_slice_example_svg@1.svg\").image()}

","pinned":false,"hidden":false,"mode":"html"},{"id":682,"value":" You can also try to combine and link different slice images, so that multiple directions can be explored at once. Have a look at the following interactive example from [this notebook](https://observablehq.com/@mroehlig/interactive-volume-visualization-of-2d-slices-in-x-y-and-z-plane).","pinned":false,"hidden":false,"mode":"md"},{"id":684,"value":"import {sliceViewer} from \"@mroehlig/interactive-volume-visualization-of-2d-slices-in-x-y-and-z-plane\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":697,"value":"Drag the cursor in each view to explore the volume.","pinned":false,"hidden":false,"mode":"md"},{"id":689,"value":"sliceViewer","pinned":true,"hidden":false,"mode":"ojs"},{"id":381,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":407,"value":"Helper function to draw text labels on the canvas.","pinned":false,"hidden":false,"mode":"md"},{"id":266,"value":"function drawSliceInfo(ctx, info) { \n // Draw the info string with white color in the upper left corner.\n ctx.fillStyle = \"white\";\n ctx.fillText(info, 5, 24);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":473,"value":"Helper function to duplicate a canvas object. In this notebook it is used to display the final result also at the top of the notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":468,"value":"function* duplicateCanvas(canvas) {\n // Create a new canvas and 2D rendering context with the same dimensions as the input canvas.\n const ctx = DOM.context2d(canvas.clientWidth, canvas.clientHeight);\n // Draw the content of the input canvas onto the new canvas.\n ctx.drawImage(canvas, 0, 0, canvas.clientWidth, canvas.clientHeight);\n // Return the new canvas.\n yield ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"Helper function to draw a color gradient based on the given color interpolation function.","pinned":false,"hidden":false,"mode":"md"},{"id":636,"value":"function* drawGradient(colors, n = 256) {\n // Create a new canvas with it's width set to the number of colors and it's height to one.\n const ctx = DOM.context2d(n, 1, 1);\n // Adjust the styling of the canvas to it is displayed larger.\n ctx.canvas.style.width = \"100%\";\n ctx.canvas.style.height = \"40px\";\n ctx.canvas.style.imageRendering = \"pixelated\";\n // Fill the canvas's pixels based on the given color function.\n for (let i = 0; i < n; ++i) {\n // For each color draw a colored rectangle in the size of a pixel.\n ctx.fillStyle = colors(i / (n - 1));\n ctx.fillRect(i, 0, 1, 1);\n }\n\n // Return the canvas.\n yield ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}