2f:T401,sliceMaterial={ const material = new THREE.RawShaderMaterial( { uniforms: { vTex: { value: volTexture }, axisCoordinate: { value: axisCoord }, axis: { value: parseInt(axis) } }, vertexShader: `#version 300 es in vec3 position; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; out vec3 entryPoint; void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); entryPoint = (position + 0.5); }`, fragmentShader: `#version 300 es precision highp float; precision highp sampler3D; in vec3 entryPoint; out vec4 fragColor; uniform sampler3D vTex; uniform int axis; uniform float axisCoordinate; void main() { vec3 newCoord = vec3(entryPoint.xy,axisCoordinate); if (axis == 1) newCoord = newCoord.zxy; else if (axis == 2) newCoord = newCoord.xzy; float intensity = texture(vTex,vec3(newCoord)).r; fragColor = vec4(vec3(intensity), 1.0); }` } ); return material; }30:Tc08,isoMaterial = { const material = new THREE.RawShaderMaterial( { uniforms: { vTex: { value: volTexture }, nTex: { value: volGradTexture }, MAX_SAMPLE_STEPS:{ value: MAX_SAMPLE_STEPS }, isoValue: { value: isoValue }, axisCoordinateMin: { value: new Float32Array([xRange[0], yRange[0], zRange[9]]) }, axisCoordinateMax: { value: new Float32Array([xRange[1], yRange[1], zRange[1]]) }, /* axisCoordinate: { value: cutAxisCoord }, axis: { value: parseInt(cutAxis) }, */ isoView: { value: parseInt(isoView) } }, vertexShader: `#version 300 es in vec3 position; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; out vec3 entryPoint; void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); entryPoint = position; }`, fragmentShader: `#version 300 es precision highp float; precision highp sampler3D; in vec3 entryPoint; out vec4 fragColor; uniform sampler3D vTex; uniform float isoValue; uniform vec3 cameraPosition; uniform int MAX_SAMPLE_STEPS; uniform int axis; //uniform float axisCoordinate; //uniform vec3 axisCoordinate; uniform vec3 axisCoordinateMin, axisCoordinateMax; uniform int isoView; ` +shadeCode+outOfBoundCode+ ` void main() { vec3 currentPosition = entryPoint; vec3 dir = normalize(entryPoint - cameraPosition); float deltaIncrement = 1./float(MAX_SAMPLE_STEPS); vec3 deltaDirection = dir*deltaIncrement; //float prevIntensity = 0.; float color = 0.; for(int i = 0; i < MAX_SAMPLE_STEPS*2; i++) { // For a cube of length 1 Distance traveled can be as high as sqrt(3) // So use larger steps but exit when the ray is outside the bound. vec3 samplePosition = currentPosition+0.5; if (!( samplePosition.x > axisCoordinateMax.x || samplePosition.y > axisCoordinateMax.y || samplePosition.z > axisCoordinateMax.z || samplePosition.x < axisCoordinateMin.x || samplePosition.y < axisCoordinateMin.y || samplePosition.z < axisCoordinateMin.z //samplePosition.x > axisCoordinate.x || samplePosition.y > axisCoordinate.y || samplePosition.z > axisCoordinate.z //(axis == 1 && samplePosition.x > axisCoordinate) || //(axis == 2 && samplePosition.y > axisCoordinate) || //(axis == 3 && samplePosition.z > axisCoordinate) )){ float intensity = texture(vTex, samplePosition).r; if (isoView == 0){ color = intensity; break; }else{ if (intensity >= isoValue){ // compute color at this location color = shade(samplePosition, -dir); break; } } // TODO: find the interpolated position where the value is may be the same as isoValue //prevIntensity = intensity; } //else color = 1.0; currentPosition += deltaDirection; if (outOfBound(currentPosition)) break; } fragColor = vec4(vec3(color), 1.); }` } ); return material; }31:Taf6,fragment_shader_src_Front_to_back_raycast = function(){ return `#version 300 es precision highp float; uniform int uIsShadingEnabled; uniform vec3 uCameraEye; uniform vec3 uCameraAt; uniform vec3 uVolumeSz2D; uniform vec3 uIJSDim; uniform vec3 uRASDim; uniform int uCurrentPalette; uniform int uTransferFunctionType; uniform sampler3D uVolumeSampler; uniform sampler3D uGradientSampler; uniform sampler2D uBackfaceTexture; uniform sampler2D uPalette; uniform sampler2D uTransferFunction; const int MAX_STEPS = 400; in vec3 normalizedCoord; in vec4 projectedCoord; out vec4 fragColor; vec4 frontToBackRayCast() { int currentPalette = uCurrentPalette; vec4 src = vec4(0.0); vec4 dst = vec4(0.0); vec3 rayStart = normalizedCoord.xyz; vec3 rayEnd = texture2D(uBackfaceTexture, ((projectedCoord.xy/projectedCoord.w)+1.)/2.0).xyz; /*if (rayDirection.z == 0.0) return (dst);*/ vec3 currentPos = rayStart * uRASDim; rayEnd *= uRASDim; vec3 rayDirection = normalize(rayEnd - currentPos); vec3 RAStoIJSRatio = uIJSDim / uRASDim; float stepSz = max(uRASDim.x, max(uRASDim.y, uRASDim.z)) / float(MAX_STEPS); vec3 stepSzScaledRayDirection = rayDirection * stepSz; float rayLen = length(rayEnd - currentPos); float len = rayLen; float accAlpha = 0.0; if (rayLen <= stepSz) return (dst); vec3 cameraAt = uCameraAt; vec3 cameraEye = uCameraEye; for (int idx=0;idx= MAX_STEPS) break; float value = 0.0; vec3 ijs = currentPos * RAStoIJSRatio; if ((currentPos.x < (uRASDim.x-1.0)) && (currentPos.y < (uRASDim.y-1.0)) && (currentPos.z < (uRASDim.z-1.0))){ value = texture(uVolumeSampler, ijs).r; vec4 gradVoxel = texture(uGradientSampler, ijs); vec3 grad = gradVoxel.rgb; float gradMag = gradVoxel.a; src = texture2D(uPalette, vec2(value, 1.0)); src.a = texture2D(uTransferFunction, vec2(value, 1.0)).a; if (uIsShadingEnabled > 0) { grad = (grad * 2.) - 1.; vec3 L = normalize(cameraEye - cameraAt).grb; vec3 N = normalize(grad); vec3 viewDirection = normalize(cameraEye - currentPos).grb; src.rgb *= (clamp(abs(dot(N,L)),0.,1.)+ pow(clamp(abs(dot(N,normalize(L+viewDirection))),0.,1.),30.0)); } src.rgb *= src.a; accAlpha += (1.0 - pow((1.0 - src.a), stepSz)); dst += ((1.0 - dst.a) * src); } currentPos += stepSzScaledRayDirection; if ((accAlpha >= 0.95) || ((len-=stepSz) < stepSz)) { break; } } return (dst); } void main(void) { fragColor = frontToBackRayCast(); }`; }32:T938,volMaterial = { return new THREE.RawShaderMaterial( { uniforms: { vTex: { value: volTexture }, nTex: { value: volGradTexture }, shadeEnabled: { value: parseInt(shadeFlag) }, tf_flag: { value: parseInt(tf_flag) }, transferFuncTex: { value: transferFunctionTexture }, windowSize:{ value: new Float32Array([Width, Height]) }, MAX_SAMPLE_STEPS:{ value: MAX_SAMPLE_STEPS } }, vertexShader: `#version 300 es in vec3 position; out vec3 entryPoint; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); entryPoint = position; } `, fragmentShader: `#version 300 es precision highp float; precision lowp sampler3D; in vec3 entryPoint; out vec4 fragColor; uniform sampler2D tBack; uniform sampler2D transferFuncTex; uniform sampler3D vTex; uniform int MAX_SAMPLE_STEPS; uniform vec2 ScreenSize; uniform vec3 cameraPosition; uniform int tf_flag; uniform int shadeEnabled; ` +shadeCode+outOfBoundCode+ ` void main() { vec3 dir = normalize(entryPoint - cameraPosition); float deltaIncrement = 1./float(MAX_SAMPLE_STEPS); vec3 deltaDirection = dir*deltaIncrement; vec3 currentPosition = entryPoint; vec4 accumulatedColor = vec4(0.0); for(int i = 0; i < MAX_SAMPLE_STEPS*2; i++) { vec3 sampledPosition = currentPosition+0.5; float intensity = texture(vTex, sampledPosition).r; vec4 colorSample = texture(transferFuncTex, vec2(intensity, 0.5)); if (tf_flag == 0) colorSample.rgb = vec3((intensity + 0.7) / 1.7); if (colorSample.a > ${tfRange[0]} && colorSample.a < ${tfRange[1]}) { // HERE vec3 color = ((shadeEnabled>0)?shade(sampledPosition,-dir):1.)*colorSample.rgb; accumulatedColor.rgb += (1.0 - accumulatedColor.a) * color * colorSample.a; accumulatedColor.a += colorSample.a * (1.-accumulatedColor.a); } currentPosition += deltaDirection; if (outOfBound(currentPosition)) break; else if (accumulatedColor.a >= 0.99) break; // Opaque } if (accumulatedColor.a <= 0.005) { discard; } //accumulatedColor = accumulatedColor + vec4(0.5) * (1.0 - accumulatedColor.a); fragColor = vec4(accumulatedColor.rgb, 0.8); }` } ); }33:T6a5,readNII = function(data){ // parse nifti if (nifti.isCompressed(data)) { data = nifti.decompress(data); } if (nifti.isNIFTI(data)) { const niftiHeader = nifti.readHeader(data); const niftiImage = nifti.readImage(niftiHeader, data); // convert raw data to typed array based on nifti datatype const niftiDataType = niftiHeader.datatypeCode; let typedData= new Uint8Array(niftiImage); // if (niftiHeader.datatypeCode === nifti.NIFTI1.TYPE_UINT8) if (niftiHeader.datatypeCode !== nifti.NIFTI1.TYPE_UINT8) { if (niftiHeader.datatypeCode === nifti.NIFTI1.TYPE_INT16) { typedData = new Int16Array(niftiImage); } else if (niftiHeader.datatypeCode === nifti.NIFTI1.TYPE_INT32) { typedData = new Int32Array(niftiImage); } else if (niftiHeader.datatypeCode === nifti.NIFTI1.TYPE_FLOAT32) { typedData = new Float32Array(niftiImage); } else if (niftiHeader.datatypeCode === nifti.NIFTI1.TYPE_FLOAT64) { typedData = new Float64Array(niftiImage); } else if (niftiHeader.datatypeCode === nifti.NIFTI1.TYPE_INT8) { typedData = new Int8Array(niftiImage); } else if (niftiHeader.datatypeCode === nifti.NIFTI1.TYPE_UINT16) { typedData = new Uint16Array(niftiImage); } else if (niftiHeader.datatypeCode === nifti.NIFTI1.TYPE_UINT32) { typedData = new Uint32Array(niftiImage); } } return { type: niftiHeader.datatypeCode, width: niftiHeader.dims[1], height: niftiHeader.dims[2], nSlices: niftiHeader.dims[3], header: niftiHeader, data: typedData, gradient: computeGradient(typedData,niftiHeader.dims.slice(1,4)) } } }34:T840,function computeGradient(data, dim) { /* compute central difference gradient * gx = (volumeImage(x-1,y,z) - volumeImage(x+1,y,z)) / 2 * gy = (volumeImage(x,y-1,z) - volumeImage(x,y+1,z)) / 2 * gz = (volumeImage(x,y,z-1) - volumeImage(x,y,z+1)) / 2 * */ const width = dim[0], height = dim[1], depth = dim[2]; const gradData = new Uint8Array(width * height * depth * 3); const sliceSize = width * height; //let totN = [0,0,0]; for (let slice = 0; slice < depth; slice++) { const sliceOffset = slice * sliceSize; const sliceP1 = slice == depth - 1 ? slice : slice + 1; const sliceP1Offset = sliceP1 * sliceSize; const sliceM1 = slice == 0 ? 0 : slice - 1; const sliceM1Offset = sliceM1 * sliceSize; for (let row = 0; row < height; row++) { const rowOffset = row * width; const rowP1 = row == height - 1 ? row : row + 1; const rowP1Offset = rowP1 * width; const rowM1 = row == 0 ? 0 : row - 1; const rowM1Offset = rowM1 * width; for (let col = 0; col < width; col++) { const colP1 = col == width - 1 ? col : col + 1; const colM1 = col == 0 ? 0 : col - 1; const xDiff = data[sliceOffset + rowOffset + colP1] - data[sliceOffset + rowOffset + colM1]; const yDiff = data[sliceOffset + rowP1Offset + col] - data[sliceOffset + rowM1Offset + col]; const zDiff = data[sliceP1Offset + rowOffset + col] - data[sliceM1Offset + rowOffset + col]; const magnitude = Math.sqrt( xDiff * xDiff + yDiff * yDiff + zDiff * zDiff ); if (magnitude > 0.0001) { const colOffset = sliceOffset + rowOffset + col; gradData[colOffset * 3 + 0] = Math.round( (255 * (xDiff / magnitude + 1)) / 2 ); gradData[colOffset * 3 + 1] = Math.round( (255 * (yDiff / magnitude + 1)) / 2 ); gradData[colOffset * 3 + 2] = Math.round( (255 * (zDiff / magnitude + 1)) / 2 ); } } } } return gradData; }35:[{"id":"b6bf1305e9869a227af8558cc775c6afa2a33de6bed13665a7c5de038c46c22baf9dfe91bbeb9d1032da61418cc28f3631f10b0bfd991b7242b17155b05d6a4d","href":"https://static.observableusercontent.com/files/b6bf1305e9869a227af8558cc775c6afa2a33de6bed13665a7c5de038c46c22baf9dfe91bbeb9d1032da61418cc28f3631f10b0bfd991b7242b17155b05d6a4d","name":"palette.png","type":"image/png","lastModified":1731325488408.291,"size":1274},{"id":"877dc9881f4b96a45b48515e28687c873ad1c93b115de68994ff653f6f345d287b511d27efa61bafe777a2e4651aebbe521cba8fbb3f83e3a88c04ee9ae346b6","href":"https://static.observableusercontent.com/files/877dc9881f4b96a45b48515e28687c873ad1c93b115de68994ff653f6f345d287b511d27efa61bafe777a2e4651aebbe521cba8fbb3f83e3a88c04ee9ae346b6","name":"sampleTFF.dat","type":"application/octet-stream","lastModified":1731325488408.291,"size":1024},{"id":"e2ad0b406752b9bfa3a93220b4e6a1ee0d1f30e826aa1915a17c74cbe5d313754ad6505b86943ccc318f46bdead2cd126d8e1c85729d55d0de9e31f55859b262","href":"https://static.observableusercontent.com/files/e2ad0b406752b9bfa3a93220b4e6a1ee0d1f30e826aa1915a17c74cbe5d313754ad6505b86943ccc318f46bdead2cd126d8e1c85729d55d0de9e31f55859b262","name":"mummy.nii","type":"application/octet-stream","lastModified":1731325488408.291,"size":11981152},{"id":"ade8add60165041fd39e6f7a232f376d75ba15c13f5b3c98d2f4838d1cde980978ac58cd84b9604e718daabc7c5f6d53de245b0b33c7c8d9d4f1eef93f84041e","href":"https://static.observableusercontent.com/files/ade8add60165041fd39e6f7a232f376d75ba15c13f5b3c98d2f4838d1cde980978ac58cd84b9604e718daabc7c5f6d53de245b0b33c7c8d9d4f1eef93f84041e","name":"nifti-reader.js","type":"application/javascript","lastModified":1731325488408.291,"size":210376}] 2d:{"title":"Visualization Exercises - Practical Notebook 9","cells":[{"id":0,"value":"# Visualization Exercises - Practical Notebook 9","pinned":false,"hidden":false,"mode":"md"},{"id":1483,"value":"In this notebook, we look at a volumetric data set of a mummy.","pinned":false,"hidden":false,"mode":"md"},{"id":1488,"value":"We first look at the data set in 2D slices. \nBelow, you can select the axis along which you want to move through the volume and the slice that should be displayed.","pinned":false,"hidden":false,"mode":"md"},{"id":629,"value":"viewof axis = radio({\n title: 'Axis',\n description: 'Choose the Axis along which the volume will be sliced.',\n options: [\n { label: 'X', value: '1' },\n { label: 'Y', value: '2' },\n { label: 'Z', value: '3' },\n ],\n value: '3'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"viewof axisCoord = slider({\n min: 0, \n max: 1, \n step: 0.01, \n value: 0.5, \n title: \"Slice\", \n //description: `Axial slice from zero through 1`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"{\n //while (1)\n {\n sliceSceneObj.material.uniforms.axis.value = parseInt(axis);\n sliceSceneObj.material.uniforms.axisCoordinate.value = axisCoord;\n slicerenderer.render(slicescene, slicecamera);\n yield slicerenderer.domElement\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1528,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":735,"value":"## Direct volume rendering","pinned":false,"hidden":false,"mode":"md"},{"id":1513,"value":"Seeing 2D slices of the volumetric data is nice, but now we want to visualize the data in 3D. To do so, we have different options. \n\nFirst, we look at direct volume rendering. Below, you can see a rotatable 3D view of the mummy's head. In these kinds of visualization, the _transfer function_ determines which parts of the data set are displayed, based on the densities of the corresponding voxels. \nYou may move the slider below to adjust which intensity values are displayed.","pinned":false,"hidden":false,"mode":"md"},{"id":1571,"value":"viewof tfRange = rangeSlider({\n min: 0.01,\n max: 0.99,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [0, 1],\n // Custom slider CSS, replaces all styles.\n //theme: themes[theme],\n // Overrides the range color. Support for range colors is up to the theme.\n format: '.0',\n title: 'Visible intensity values',\n description: '',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"{\n volrenderer.render(volscene, volcamera);\n yield volrenderer.domElement;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":1534,"value":"## Indirect volume rendering using isosurfaces","pinned":false,"hidden":false,"mode":"md"},{"id":1539,"value":"In the previous view, no real surfaces can be perceived. This can be achieved by deriving an isosurface representation from the volumetric data. \nTo do so, you can use algorithms like marching cubes. \nIn the rotatable view below, you can move the slider to determine based on which intensity values the isosurface should be generated. What is the issue with the representation when you want to look at specific regions like the brain?","pinned":false,"hidden":false,"mode":"md"},{"id":803,"value":"viewof isoValue = slider({\n min: 0.005,\n max: 1,\n step: 0.01,\n value: 0.5,\n title: \"Isosurface intensity value\",\n //description: `.`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"{\n isoSceneObj.material.uniforms.isoValue.value = isoValue;\n isorenderer.render(isoscene, isocamera);\n yield isorenderer.domElement;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1522,"value":"Slicing can help us to look inside of the volume at regions that would otherwise be occluded. To do so, you may use the sliders below.","pinned":false,"hidden":false,"mode":"md"},{"id":1167,"value":"viewof xRange = rangeSlider({\n min: 0,\n max: 1,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [0, 1],\n // Custom slider CSS, replaces all styles.\n //theme: themes[theme],\n // Overrides the range color. Support for range colors is up to the theme.\n format: '.0',\n title: 'X-Range',\n description: '',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"viewof yRange = rangeSlider({\n min: 0,\n max: 1,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [0, 1],\n // Custom slider CSS, replaces all styles.\n //theme: themes[theme],\n // Overrides the range color. Support for range colors is up to the theme.\n format: '.0',\n title: 'Y-Range',\n description: '',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"viewof zRange = rangeSlider({\n min: 0,\n max: 1,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [0, 1],\n // Custom slider CSS, replaces all styles.\n //theme: themes[theme],\n // Overrides the range color. Support for range colors is up to the theme.\n format: '.0',\n title: 'Z-Range',\n description: '',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1562,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":1564,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1566,"value":"The code for this notebook was adapted from: https://observablehq.com/@spattana/webgl-volume-rendering","pinned":false,"hidden":false,"mode":"md"},{"id":1399,"value":"volume","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"volume = niiVolume","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"slicescene = {\n const scene = new THREE.Scene();\n \n scene.add( sliceSceneObj );\n \n slicerenderer.render(scene, slicecamera);\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"sliceSceneObj = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), sliceMaterial);","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"slicecamera = {\n var camera = new THREE.OrthographicCamera( 1 / - 2, 1 / 2, 1 / 2, 1 / - 2, -1, 1 );\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"slicerenderer = createRenderer()","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"isorenderer = createRenderer()","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"isoSceneObj = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), isoMaterial);","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"isoscene = {\n const scene = new THREE.Scene();\n/*\n const wireframe = new THREE.WireframeGeometry( new THREE.BoxGeometry( 1, 1, 1 ) );\n\n const line = new THREE.LineSegments( wireframe , new THREE.LineBasicMaterial( {\n color: 0xff00ff,\n } ));\n\n scene.add( line );\n scene.add(isoSceneObj);\n */\n const cube = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), isoMaterial);\n scene.add( cube );\n\n isorenderer.render(scene, isocamera);\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"isocamera = createVolCamera()","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"isoController = {\n const controls = new THREE.OrbitControls(isocamera, isorenderer.domElement);\n invalidation.then(() => controls.dispose());\n controls.enablePan = false;\n\n controls.addEventListener(\"change\", () => isorenderer.render(isoscene, isocamera));\n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"tf_flag = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1493,"value":"isoView = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1358,"value":"tf_flag","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"shadeFlag = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":" //function createRenderer()\nvolrenderer = createRenderer()\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"MAX_SAMPLE_STEPS = Math.max(volume.width,volume.height,volume.nSlices)","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"volscene = {\n const scene = new THREE.Scene();\n\n const cube = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), volMaterial);\n scene.add( cube );\n \n volrenderer.render(scene, volcamera);\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"function code(volTexture){ \n\n function createFirstPassMaterial(){\n const material = new THREE.RawShaderMaterial( {\n vertexShader: `#version 300 es\nin vec3 position;\n\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\n\nout vec3 exitPoint;\n\nvoid main() {\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n exitPoint = position + 0.5; \n}`,\n fragmentShader: `#version 300 es\nprecision highp float;\nprecision highp float;\nprecision highp sampler3D;\n\nin vec3 exitPoint;\nout vec4 fragColor;\n\nvoid main() {\n fragColor = vec4(exitPoint.xyz, 1.0);\n}`\n } );\n material.side = THREE.BackSide;\n return material;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"fragment_shader_Src_Front_Face_Cull = function(){\n return `#version 300 es\n precision highp float;\n in vec3 normalizedCoord;\n in vec4 projectedCoord;\n out vec4 fragColor; \n void main(void)\n {\n fragColor = vec4(normalizedCoord, 1.0);\n }`;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1222,"value":"transferFunctionData = anotherTransferFunction //DefaultTransferFunction //","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"transferFunctionTexture = new THREE.DataTexture(\n transferFunctionData,\n 255,\n 1,\n THREE.RGBAFormat\n) //new THREE.CanvasTexture(TransferFunction)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"DefaultTransferFunction","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"DefaultTransferFunction={\n //const canvas = html`

`\n const ctx = DOM.context2d(255, 50);\n //var ctx = canvas.getContext(\"2d\");\n ctx.drawImage(await FileAttachment(\"palette.png\").image(),0,0)\n const rgba = ctx.getImageData(0,0,256,1).data;\n const xy = [[57, 0.009095662434895834],[112, 0.0054498291015625],[127, 0.49362686157226565],[151,0.7136268615722656],[220,0.55], [255,0.]];\n let prevx = 0, prevy = 0;\n xy.forEach(d=>{\n let x = d[0], y = d[1]; \n let deltay = (y-prevy)/(x-prevx);\n for (; prevx < x; prevx++, prevy+=deltay){rgba[prevx*4+3] = Math.round(prevy*255);}\n });\n \n return rgba;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"anotherTransferFunction = new Uint8ClampedArray(\n await (await FileAttachment(\"sampleTFF.dat\").blob()).arrayBuffer()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"volcamera = createVolCamera()","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"volController = {\n const controls = new THREE.OrbitControls(volcamera, volrenderer.domElement);\n invalidation.then(() => controls.dispose());\n controls.enablePan = false;\n\n controls.addEventListener(\"change\", () => volrenderer.render(volscene, volcamera));\n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"volTexture = {\n if (niiVolume.type != nifti.NIFTI1.TYPE_UINT8) \n return \"TODO: non UINT8 data is not supported at this time.\";\n const texture = new THREE.DataTexture3D( volume.data, volume.width, volume.height, volume.nSlices)\n texture.format = THREE.RedFormat;\n texture.type = THREE.UnsignedByteType;// Default\n texture.minFilter = texture.magFilter = THREE.LinearFilter;\n //texture.wrapR = THREE.MirroredRepeatWrapping;\n return texture;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1125,"value":"outOfBoundCode =`\nbool outOfBound(vec3 posn){\n return (posn.x < -0.5 || posn.x > 0.5 \n || posn.y < -0.5 || posn.y > 0.5 \n || posn.z < -0.5 || posn.z > 0.5\n )? true : false;\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"shadeCode = `uniform sampler3D nTex;\nfloat shade(vec3 position, vec3 V){\n vec3 N = 2.*texture(nTex, position).rgb-1.;\n // Assume light at Camera and parallel\n vec3 L = normalize(cameraPosition);\n float NdotL = clamp(-dot(N,L),0.,1.);\n float NdotH = NdotL;\n return 0.5*(NdotL + pow(NdotH,10.));\n}`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"volGradTexture = {\n if (niiVolume.type != nifti.NIFTI1.TYPE_UINT8) \n return \"TODO: non UINT8 data is not supported at this time.\";\n const texture = new THREE.DataTexture3D( volume.gradient, volume.width, volume.height, volume.nSlices)\n texture.format = THREE.RGBFormat;\n texture.type = THREE.UnsignedByteType;// Default\n texture.minFilter = texture.magFilter = THREE.LinearFilter;\n return texture;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"createRenderer = function(){\n const canvas = DOM.canvas(Width,Height);\n const context = canvas.getContext('webgl2');\n const renderer = new THREE.WebGLRenderer({canvas: canvas, context: context, antialias: true});\n invalidation.then(() => renderer.dispose());\n renderer.setPixelRatio( window.devicePixelRatio );\n renderer.setSize( Width, Height );\n return renderer;\t\t\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"Width","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"createVolCamera = function(){\n const camera = new THREE.PerspectiveCamera( 12, Width/Height, 1, 10 );\n camera.position.y = 6;\n camera.up.set(0,0,1);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"Width = Math.max(niiVolume.width,niiVolume.height,niiVolume.nSlices)*2","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"Height = Width","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"printNiftiDataType = {\n let type = \"unknown\";\n switch(niiVolume.type){\n case nifti.NIFTI1.TYPE_UINT8: type = \"UINT8\"; break;\n case nifti.NIFTI1.TYPE_INT16: type = \"INT16\"; break;\n case nifti.NIFTI1.TYPE_FLOAT32: type = \"FLOAT32\"; break;\n case nifti.NIFTI1.TYPE_FLOAT64: type = \"FLOAT64\"; break;\n case nifti.NIFTI1.TYPE_INT8: type = \"INT8\"; break;\n case nifti.NIFTI1.TYPE_UINT16: type = \"UINT16\"; break;\n case nifti.NIFTI1.TYPE_UINT32: type = \"UINT32\"; break;\n }\n return \"Volume Data type: \"+type;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"niiVolume = readNII(await FileAttachment(\"mummy.nii\").arrayBuffer())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"rawVolume = {\n const data = new Uint8ClampedArray(\n await (await fetch(\n \"https://raw.githubusercontent.com/ulricheck/ModernGL-Volume-Raycasting-Example/master/data/head256.raw\"\n )).arrayBuffer()\n );\n return {\n width: 256,\n height: 256,\n nSlices: 225,\n data: data,\n gradient: computeGradient(data, [256, 256, 225])\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"scatterPlotMaterial= { \n return new THREE.RawShaderMaterial( {\n vertexShader: `#version 300 es\nin vec3 position;\nin float intensity;\n\nout float uIntensity;\n\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\n\nvoid main() {\n //gl_PointSize = 1.;\n\t\tvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\n gl_Position = projectionMatrix * mvPosition;\n\t\tgl_PointSize = (intensity*8.) * ( (1./32.) / -mvPosition.z );\n uIntensity = intensity;\n}\n`,\n fragmentShader: `#version 300 es\nprecision highp float;\nin float uIntensity;\n\nout vec4 fragColor;\n\nvoid main() {\n fragColor = vec4(vec3(0.,0.,0.), 1.);\n}`\n } );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1338,"value":"requireScript(await FileAttachment(\"nifti-reader.js\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"nifti = requireScript(await FileAttachment(\"nifti-reader.js\").url())\n//(\"https://raw.githubusercontent.com/rii-mango/NIFTI-Reader-JS/master/release/current/nifti-reader.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"import {requireScript} from \"@bumbeishvili/fetcher\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1162,"value":"import {rangeSlider} from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"THREE = {\n const THREE = (window.THREE =\n await require(\"three@0.130.0/build/three.min.js\"));\n await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(\n () => {}\n );\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}