2b:null 2c:["$","title",null,{"children":"WebGL Volume Rendering | Sumant Pattanaik | Observable"}] 31:T4cf,sliceMaterial = { const material = new THREE.RawShaderMaterial({ uniforms: { vTex: { value: volTexture }, axisCoordinate: { value: axisCoord }, axis: { value: parseInt(axis) }, coloringEnabled: { value: +pseudoColoring } }, 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; precision highp sampler2D; in vec3 entryPoint; out vec4 fragColor; uniform sampler3D vTex; uniform int axis; uniform int coloringEnabled; uniform float axisCoordinate; ` +pseudoColorCode+ ` 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; vec3 colorSample = vec3(intensity); if (coloringEnabled==1) colorSample = color(intensity); fragColor = vec4(colorSample, 1.0); }` }); return material; }32:Ta49,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]]) }, isoView: { value: parseInt(isoView) }, coloringEnabled: { value: +pseudoColoring } }, 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 vec3 axisCoordinateMin, axisCoordinateMax; uniform int isoView; uniform int coloringEnabled; ` + shadeCode + outOfBoundCode + pseudoColorCode + ` void main() { vec3 currentPosition = entryPoint; vec3 dir = normalize(entryPoint - cameraPosition); float deltaIncrement = 1./float(MAX_SAMPLE_STEPS); vec3 deltaDirection = dir*deltaIncrement; vec3 c = vec3(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 )){ float intensity = texture(vTex, samplePosition).r; if (isoView == 0){ c = (coloringEnabled==1)?color(intensity):vec3(intensity); break; }else{ if (intensity >= isoValue){ // compute color at this location float s = shade(samplePosition, -dir); c = (coloringEnabled==1)?(color(intensity)*s):vec3(s); break; } } } currentPosition += deltaDirection; if (outOfBound(currentPosition)) break; } fragColor = vec4(c, 1.); }` }); return material; }33: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(); }`; }34:T8f7,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); if (colorSample.a > 0.0) { 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, 1.0); }` } ); }35:T510,scatterPlotScene = { const scene = new THREE.Scene(); const wireframe = new THREE.WireframeGeometry(new THREE.BoxGeometry(1, 1, 1)); const line = new THREE.LineSegments( wireframe, new THREE.LineBasicMaterial({ color: 0x000000 }) ); scene.add(line); // Points const geometry = new THREE.BufferGeometry(); const nFactor = 2; const N = 64 / 2; const vertices = new Float32Array(N * N * N * 3); // Fill in vertices const intensities = new Float32Array(N * N * N); // fill in Intensities for (var i = 0, n = 0; i < N; i++) for (var j = 0; j < N; j++) for (var k = 0; k < N; k++, n++) { vertices[n * 3 + 0] = (k + 0.5) / N - 0.5; vertices[n * 3 + 1] = (j + 0.5) / N - 0.5; vertices[n * 3 + 2] = (i + 0.5) / N - 0.5; intensities[n] = buckyBallSmall[n * nFactor]; } geometry.addAttribute("position", new THREE.BufferAttribute(vertices, 3)); geometry.addAttribute("intensity", new THREE.BufferAttribute(intensities, 1)); //const material = scatterPlotMaterial; //material.blending = THREE.MultiplyBlending; //material.transparent = true; const pointCloud = new THREE.Points(geometry, scatterPlotMaterial); scene.add(pointCloud); scatterPlotRenderer.render(scene, scatterPlotCamera); return scene; }36: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)) } } }37: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; }38:[{"id":"29e90f8aa8a39efa20089e076e32f8595cbe5b5fa99026d7b569ef55220a25483840fe75006ee16fc225194864e8d34c21bebc0ecd20bf690d50ee6726725bf9","href":"https://static.observableusercontent.com/files/29e90f8aa8a39efa20089e076e32f8595cbe5b5fa99026d7b569ef55220a25483840fe75006ee16fc225194864e8d34c21bebc0ecd20bf690d50ee6726725bf9","name":"C60Large.vol","type":"application/octet-stream","lastModified":1591834304569.854,"size":2097180},{"id":"8abfd50ac31391160d52c07340fcb054002f43a9a144a1df8d8a529435eb86876192e8fa355fc0af8f9193552ad2014685354803f47c3fe27546490022c83b5d","href":"https://static.observableusercontent.com/files/8abfd50ac31391160d52c07340fcb054002f43a9a144a1df8d8a529435eb86876192e8fa355fc0af8f9193552ad2014685354803f47c3fe27546490022c83b5d","name":"C60.vol","type":"application/octet-stream","lastModified":1591887303148.258,"size":262172},{"id":"e2ad0b406752b9bfa3a93220b4e6a1ee0d1f30e826aa1915a17c74cbe5d313754ad6505b86943ccc318f46bdead2cd126d8e1c85729d55d0de9e31f55859b262","href":"https://static.observableusercontent.com/files/e2ad0b406752b9bfa3a93220b4e6a1ee0d1f30e826aa1915a17c74cbe5d313754ad6505b86943ccc318f46bdead2cd126d8e1c85729d55d0de9e31f55859b262","name":"mummy.nii","type":"application/octet-stream","lastModified":1591396785186.92,"size":11981152},{"id":"877dc9881f4b96a45b48515e28687c873ad1c93b115de68994ff653f6f345d287b511d27efa61bafe777a2e4651aebbe521cba8fbb3f83e3a88c04ee9ae346b6","href":"https://static.observableusercontent.com/files/877dc9881f4b96a45b48515e28687c873ad1c93b115de68994ff653f6f345d287b511d27efa61bafe777a2e4651aebbe521cba8fbb3f83e3a88c04ee9ae346b6","name":"sampleTFF.dat","type":"application/octet-stream","lastModified":1619193837654.995,"size":1024},{"id":"ade8add60165041fd39e6f7a232f376d75ba15c13f5b3c98d2f4838d1cde980978ac58cd84b9604e718daabc7c5f6d53de245b0b33c7c8d9d4f1eef93f84041e","href":"https://static.observableusercontent.com/files/ade8add60165041fd39e6f7a232f376d75ba15c13f5b3c98d2f4838d1cde980978ac58cd84b9604e718daabc7c5f6d53de245b0b33c7c8d9d4f1eef93f84041e","name":"nifti-reader.js","type":"application/javascript","lastModified":1681429821714.647,"size":210376},{"id":"dee6283b9972079c3f5d6282a7cae70212081858e8848186071cd95c01f323c9d110dbe1b25c8842212c85abcd8f95396bd6bd1cdf95d9256bffbd76450c995e","href":"https://static.observableusercontent.com/files/dee6283b9972079c3f5d6282a7cae70212081858e8848186071cd95c01f323c9d110dbe1b25c8842212c85abcd8f95396bd6bd1cdf95d9256bffbd76450c995e","name":"inferno@1.png","type":"image/png","lastModified":1700785651860.359,"size":416}] 2f:{"id":"b0710f42da71b7c9","slug":"webgl-volume-rendering","title":"WebGL Volume Rendering","thumbnail":"d7e55f9848cc04242756078ed72cbb8c3af79ee1abaaeb091a245a5208ad67d9","access_level":"public","create_time":"$D2020-06-05T17:56:16.809Z","update_time":"$D2025-11-26T12:05:03.353Z","view_time":null,"first_public_time":"$D2020-10-24T19:34:27.794Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":"starter_2024"},"version":1455,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null}],"members":[{"type":"individual","id":"a51e58c27848cfd7","login":"spattana","name":"Sumant Pattanaik","avatar_url":"https://avatars-next.observableusercontent.com/5c3b1a0caf2ce230772f04126acb360531061440f39e4326260bd62e4a5e16f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":8,"collection":{"id":"baff35547a2323b5","slug":"cap-5738","title":"Data Visualization Using D3 and Ploty.js","owner":{"id":"91415db2a19585e8","login":"spattana","name":"Sumant Pattanaik"}},"type":"notebook","body":{"title":"WebGL Volume Rendering","cells":[{"id":0,"value":"md`# WebGL Volume Rendering`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":968,"value":"viewof volumeChoice = radio({\n title: 'Volume Option',\n description: '',\n options: [\n { label: 'bucky ball', value: 'buckyBall' },\n { label: 'headMRI', value: 'headMRI' },\n { label: 'headMRI-2', value: 'rawVolume' }\n ],\n value: 'buckyBall'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":972,"value":"volume = volumeChoice === \"buckyBall\"\n ? buckyBallVolume\n : volumeChoice === \"headMRI\"\n ? niiVolume\n : rawVolume","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1329,"value":"volume1 = buckyBallVolume","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"viewof sliceNum = slider({\n min: 0, \n max: volume.nSlices, \n step: 1, \n value: Math.floor(volume.nSlices/2), \n title: \"A Medical Volume composed from a stack of 2D MRI Images\", \n description: `Image number from zero through ${volume.nSlices}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"myCanvas = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":962,"value":"ctx = myCanvas.getContext('2d')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":716,"value":"extractSlice = function(){\n // Assumes : nii Datatype UINT8) \n // offset to specified slice\n const sliceSize = volume.width * volume.height;\n const sliceOffset = sliceSize * sliceNum;\n\n // draw pixels\n for (let row = 0; row < volume.height; row++) {\n const rowOffset = row * volume.width;\n const canvasrowOffset = (volume.height - 1 - row) * volume.width;\n for (let col = 0; col < volume.width; col++) {\n const offset = sliceOffset + rowOffset + col;\n const value = volume.data[offset];\n canvasImageData.data[(canvasrowOffset + col) * 4] = value & 0xFF;\n canvasImageData.data[(canvasrowOffset + col) * 4 + 1] = value & 0xFF;\n canvasImageData.data[(canvasrowOffset + col) * 4 + 2] = value & 0xFF;\n canvasImageData.data[(canvasrowOffset + col) * 4 + 3] = 0xFF;\n }\n }\n\n ctx.putImageData(canvasImageData, 0, 0);\n return \"Slice Viewer Code\"\n}(sliceNum)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":397,"value":"viewof axisCoord = slider({\n min: 0, \n max: 1, \n step: 0.01, \n value: 0.5, \n title: \"Slice View\", \n description: `Axial slice from zero through 1`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":629,"value":"viewof axis = radio({\n title: 'Axis',\n description: 'Choose the Axis along which 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","author":"$undefined","summary":"$undefined"},{"id":1355,"value":"viewof pseudoColoring = Inputs.toggle({ label: \"Enable Color\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":676,"value":"sliceSceneObj = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), sliceMaterial);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":650,"value":"slicerenderer = createRenderer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":622,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":735,"value":"md`Isosurface Rendering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":803,"value":"viewof isoValue = slider({\n min: 0.05,\n max: 1,\n step: 0.01,\n value: 0.5,\n title: \"IsoSurface Rendering\",\n description: `Choose intensity value for the iso-surface.`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1144,"value":"viewof isoView = radio({\n title: 'View Type',\n description: 'Choose the View type.',\n options: [\n { label: 'slice', value: '0' },\n { label: 'iso', value: '1' }\n ],\n value: '1'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":820,"value":"isorenderer = createRenderer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":845,"value":"isoSceneObj = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), isoMaterial);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":849,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":833,"value":"isoscene = {\n const scene = new THREE.Scene();\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","author":"$undefined","summary":"$undefined"},{"id":831,"value":"isocamera = createVolCamera()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":771,"value":"viewof tf_flag = radio({\n title: 'Direct Volume Rendering with Transfer Function',\n description: 'Choose the Transfer Function option',\n options: [\n { label: 'with B/W', value: '0' },\n { label: 'with Color', value: '1' }\n ],\n value: '1'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":911,"value":"viewof shadeFlag = radio({\n title: '',\n description: 'Shade Flag.',\n options: [\n { label: 'No shade', value: '0' },\n { label: 'Shade', value: '1'}\n ],\n value: '0'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":494,"value":"{\n volrenderer.render(volscene, volcamera);\n yield volrenderer.domElement;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":481,"value":" //function createRenderer()\nvolrenderer = createRenderer()\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":615,"value":"MAX_SAMPLE_STEPS = Math.max(volume.width,volume.height,volume.nSlices)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":168,"value":"canvasImageData = ctx.createImageData(volume.width,volume.height);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1222,"value":"transferFunctionData = DefaultTransferFunction //anotherTransferFunction //DefaultTransferFunction //","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1219,"value":"DefaultTransferFunction","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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(\"inferno@1.png\").image(), 0, 0); //\"palette.png\"\n const rgba = ctx.getImageData(0, 0, 256, 1).data;\n const xy = [\n [57, 0.009095662434895834],\n [112, 0.0054498291015625],\n [127, 0.49362686157226565],\n [151, 0.7136268615722656],\n [220, 0.55],\n [255, 0]\n ];\n let prevx = 0,\n prevy = 0;\n xy.forEach((d) => {\n let x = d[0],\n y = d[1];\n let deltay = (y - prevy) / (x - prevx);\n for (; prevx < x; prevx++, prevy += deltay) {\n rgba[prevx * 4 + 3] = Math.round(prevy * 255);\n }\n });\n\n return rgba;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1201,"value":"anotherTransferFunction = new Uint8ClampedArray(\n await (await FileAttachment(\"sampleTFF.dat\").blob()).arrayBuffer()\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":581,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":578,"value":"volcamera = createVolCamera()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1441,"value":"pseudoColorCode = `\nvec3 color(float f)\n{\n float g=f*6.;\n return vec3(\n max(0.,(3.-abs(g-4.)-abs(g-5.))/2.),\n\t max(0.,(4.-abs(g-2.)-abs(g-4.))/2.),\n\t max(0.,(3.-abs(g-1.)-abs(g-2.))/2.)\n );\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1334,"value":"Width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":484,"value":"Width = Math.max(niiVolume.width,niiVolume.height,niiVolume.nSlices)*2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"Height = Width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":178,"value":"niiVolume = readNII(await FileAttachment(\"mummy.nii\").arrayBuffer())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1016,"value":"md`3D Point Plot`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1032,"value":"{ \n scatterPlotRenderer.render(scatterPlotScene, scatterPlotCamera);\n yield scatterPlotRenderer.domElement\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1023,"value":"scatterPlotRenderer = createRenderer()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1038,"value":"scatterPlotController = {\n const controls = new THREE.OrbitControls(scatterPlotCamera, scatterPlotRenderer.domElement);\n invalidation.then(() => controls.dispose());\n controls.enablePan = false;\n\n controls.addEventListener(\"change\", () => scatterPlotRenderer.render(scatterPlotScene, scatterPlotCamera));\n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1035,"value":"scatterPlotCamera=createVolCamera()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1029,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1056,"value":"scatterPlotMaterial = {\n return new THREE.RawShaderMaterial({\n vertexShader: `#version 300 es\nin vec3 position;\nin float intensity;\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}\n`,\n fragmentShader: `#version 300 es\nprecision highp float;\nout vec4 fragColor;\n\nvoid main() {\n float r = 0.0, delta = 0.0, alpha = 1.0;\n vec2 cxy = 2.0 * gl_PointCoord - 1.0;\n r = dot(cxy, cxy);\n if (r > 1.0) {\n discard;\n }\n fragColor = vec4(vec3(0,1,0),alpha);\n}`\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":935,"value":"buckyBallVolume = {\n return {\n type: 2,\n width: 128,\n height: 128,\n nSlices: 128,\n data: buckyBall,\n gradient: computeGradient(buckyBall, [128,128,128])\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":931,"value":" buckyBall = {\n const data = await FileAttachment(\"C60Large.vol\").arrayBuffer();\n //Source: https://web.cs.ucdavis.edu/~okreylos/PhDStudies/Spring2000/ECS277/DataSets.html\n return new Uint8Array(data.slice(28));\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1450,"value":"{\n const data = await FileAttachment(\"C60Large.vol\").arrayBuffer();\n return new Uint8Array(data);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":986,"value":"buckyBallSmall = {\n const data = await FileAttachment(\"C60.vol\").arrayBuffer();\n //Source: https://web.cs.ucdavis.edu/~okreylos/PhDStudies/Spring2000/ECS277/DataSets.html\n return new Uint8Array(data.slice(28));\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1338,"value":"requireScript(await FileAttachment(\"nifti-reader.js\").url())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":944,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"nifti = requireScript(await FileAttachment(\"nifti-reader.js\").url()) //https://github.com/rii-mango/NIFTI-Reader-JS v0.6.3\n//(\"https://raw.githubusercontent.com/rii-mango/NIFTI-Reader-JS/master/release/current/nifti-reader.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"import {requireScript} from \"@bumbeishvili/fetcher\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1162,"value":"import {rangeSlider} from \"@mootari/range-slider\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":627,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"