dataDescription = ({
name: "Head",
acknowledgement: "Divine Augustine",
licence: "The Code Project Open License",
description: "CT scan of a human head",
link: "https://www.codeproject.com/Articles/352270/Getting-Started-with-Volume-Rendering-using-OpenGL",
dataType: "uint8",
scale: [-1, -1, 1 / 1.65],
xExtent: 256,
yExtent: 256,
zExtent: 109
})
dataValues = {
const zip = await FileAttachment("head_256x256x109.zip").zip(); // Retrieve attachment and decompress it.
const file = zip.file(zip.filenames[0]); // Get the actual data file (file at index 0) in the decompressed archive.
const buffer = await file.arrayBuffer(); // Get the byte buffer of the file.
const byteArray = new Uint8Array(buffer); // Create an uint8-array-view from the file buffer.
return byteArray; // Return the data as an uint8 array.
}
volumeTexture = {
const texture = new THREE.Data3DTexture(
dataValues, // The data values stored in the pixels of the texture.
dataDescription.xExtent, // Width of texture.
dataDescription.yExtent, // Height of texture.
dataDescription.zExtent // Depth of texture.
);
texture.format = THREE.RedFormat; // Our texture has only one channel (red).
texture.type = THREE.UnsignedByteType; // The data type is 8 bit unsighed integer.
texture.minFilter = THREE.LinearFilter; // Linear filter for minification.
texture.magFilter = THREE.LinearFilter; // Linear filter for maximization.
// Repeat edge values when sampling outside of texture boundaries.
texture.wrapS = THREE.ClampToEdgeWrapping;
texture.wrapT = THREE.ClampToEdgeWrapping;
texture.wrapR = THREE.ClampToEdgeWrapping;
// Mark texture for update so that the changes take effect.
texture.needsUpdate = true;
// Free texture memory when a notebook cell is invalidated.
invalidation.then(() => texture.dispose());
return texture;
}
colorTexture = {
// Create a color scale based on the selected palette using chroma-js.
const scale = chroma.scale(renderProps.palette);
// Create an array to hold the color values.
const count = 256; // Number of colors in texture.
const colorData = new Uint8Array(count * 4); // 4 = 4 color channels.
// Loop through all pixels and assign color values.
for (let i = 0; i < count; ++i) {
let value = i / (count - 1.0); // Index value between 0 and 1
let color = scale(value).rgb(); // Index value to color conversion
const stride = i * 4; // Array index
colorData[stride] = color[0]; // Red
colorData[stride + 1] = color[1]; // Green
colorData[stride + 2] = color[2]; // Blue
colorData[stride + 3] = 255; // Alpha
}
// Create texture from color data with width = color count and height = 1.
const texture = new THREE.DataTexture(colorData, count, 1);
// Specify the texture format to match the stored data.
texture.format = THREE.RGBAFormat;
texture.type = THREE.UnsignedByteType;
texture.minFilter = THREE.LinearFilter; // Linear interpolation of colors.
texture.magFilter = THREE.LinearFilter; // Linear interpolation of colors.
texture.wrapS = THREE.ClampToEdgeWrapping;
texture.wrapT = THREE.ClampToEdgeWrapping;
texture.needsUpdate = true;
// Free texture memory when a notebook cell is invalidated.
invalidation.then(() => texture.dispose());
return texture;
}
scene = {
// Create a scene object.
const scene = new THREE.Scene();
// Set the background color of the visualization.
scene.background = new THREE.Color(0xffffff);
return scene;
}
box = {
// Create a unit box geometry to describe the extent of our volume.
const geometry = new THREE.BoxGeometry(1, 1, 1);
// Create a mesh from the geometric description.
const box = new THREE.Mesh(geometry);
// Scale the mesh to reflect the aspect ratio of the volume.
box.scale.set(dataDescription.scale[0], dataDescription.scale[1], dataDescription.scale[2]);
// Optionally, add an outline to the box.
const line = new THREE.LineSegments(
new THREE.EdgesGeometry(geometry),
new THREE.LineBasicMaterial({ color: 0x999999 })
);
box.add(line);
return box;
}
material = {
// Create the box material and assign parameters.
const material = new THREE.RawShaderMaterial({
glslVersion: THREE.GLSL3, // Shader language version.
uniforms: {
dataTexture: { value: volumeTexture }, // Volume data texture.
colorTexture: { value: colorTexture }, // Color palette texture.
cameraPosition: { value: new THREE.Vector3() }, // Current camera position.
samplingRate: { value: renderProps.samplingRate }, // Sampling rate of the volume.
threshold: { value: renderProps.threshold }, // Threshold for adjusting volume rendering.
alphaScale: { value: renderProps.alphaScale }, // Alpha scale of volume rendering.
invertColor: { value: renderProps.invertColor } // Invert color palette.
},
vertexShader: vertexShader.innerText, // Vertex shader code.
fragmentShader: fragmentShader.innerText, // Fragment shader code.
side: THREE.BackSide, // Render only back-facing triangles of box geometry.
transparent: true, // Use alpha channel / alpha blending when rendering.
});
// Free material memory when a notebook cell is invalidated.
invalidation.then(() => material.dispose());
return material;
}
box.material = material
scene.add(box)
width = 800
height = 600
camera = {
// Camera parameters.
const fov = 45; // Field of view.
const aspect = width / height; // Aspect ratio of viewport.
const near = 0.1; // Distance to near clip plane.
const far = 1000; // Distance to far clip plane.
// Create the camera and set its position and orientation.
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, -2); // Move to units back from origin in negative z direction.
camera.lookAt(new THREE.Vector3(0, 0, 0)); // Orient camera to origin.
return camera;
}
renderer = {
// Create the renderer and set its output image size.
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height); // Set size of visualization.
renderer.setPixelRatio(devicePixelRatio); // Handle high resolution displays.
// Optionally, add a border arround the visualization.
renderer.domElement.style.border = "1px solid black";
// Add mouse / touch control for zooming, panning and rotating the camera.
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// Add an event listener to the controls to redisplay the visualization on user input.
controls.addEventListener("change", () => renderer.render(scene, camera));
// Free memory when a notebook cell is invalidated.
invalidation.then(() => (controls.dispose(), renderer.dispose()));
return renderer;
}
{
// Infinite render loop.
while (true) {
// If the material exists, set the current camera position in the shader uniforms.
if (material) {
box.material.uniforms.cameraPosition.value.copy(camera.position);
}
// Rotate the box based on the selected parameters in the user interface.
renderProps.rotations.forEach(e => {
box.rotation[e] += renderProps.speed;
});
// Re-render the scene with the camera.
renderer.render(scene, camera);
yield null;
}
}
compositions = [{ name: "Maximum intensity", code: maximumIntensity.innerText },
{ name: "Threshold / isovalue", code: thresholding.innerText },
{ name: "Emission absorption", code: emissionAbsorption.innerText } ]
THREE = {
const THREE = window.THREE = await require("three@0.150.1"); // Three.js
await require("three@0.132.2/examples/js/controls/OrbitControls.js").catch(() => {}); // OrbitControls
return THREE;
}
import {glsl} from "@lsei/advanced-syntax-highlighting"
import {chroma} from "@gka/chroma-js"
colorbrewer = require('colorbrewer')
colorPalettes = [...colorbrewer.schemeGroups.singlehue, ...colorbrewer.schemeGroups.sequential]
function* duplicateCanvas(canvas, width, height) {
width = width || canvas.clientWidth;
height = height || canvas.clientHeight;
// Create a new canvas and 2D rendering context with the same dimensions as the input canvas.
const ctx = DOM.context2d(width, height);
// Draw the content of the input canvas onto the new canvas.
ctx.drawImage(canvas, 0, 0, width, height);
// Return the new canvas.
yield ctx.canvas;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.