examples/volume3DNavigatorTimeCurve.html

<html>
<head>
  <title>volume 3D Navigator</title>

  <script src="https://threejs.org/build/three.min.js"></script>
  <script src='https://threejs.org/examples/js/libs/dat.gui.min.js'></script>
  <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

  <script src="../dist/pixpipe.js"></script>
  <script src="js/shadersTimeCurve.js"></script>
  <script src="js/CanvasSpliner.js"></script>
  <script src="js/PlaneShifter.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
  <!--<link rel="stylesheet" href="css/style.css">-->

  <style>
  body {
    margin:0;
    font-family: "Lucida Console", monospace;
    font-size: 15px;
    line-height: 18px;
    overflow: hidden;
  }

  key {
    color: #333;
    background: #e8e8e8;
    padding: 3px 7px 3px 7px;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    border-color: #a0a0a0;
    border-bottom-width: 3px;
  }

  #info{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 10px;
    font-family: inherit;
  }

  #footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 15px;
    font-family: inherit;
    pointer-events: none;
  }

  #fileInfo{
    pointer-events: none;
    color: #b64eff;
  }

  #fileInput{
    font-family: inherit;
  }

  .logoCorner{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    margin: 5px;
    border-radius: 4px;
    border-radius: 4px;
  }
  .logoCorner:hover{
    filter: invert(100%);
  }

  #curveContainer {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 320px;
    height: 320px;
  }

  #curveContainer canvas {
    margin: 10px;
  }

  </style>
</head>
<body>


  <div id="info">
    <div id="fileOpener">
  		Open a structural volume file (NIfTI, Minc2, Pixbin)
  		<input type="file" id="fileInput">
      <br>
  	</div>
    <span id="fileInfo"></span>
  </div>

  <div id="curveContainer" style="display: none"></div>


  <a href="http://www.pixpipe.io/" target="_blank">
    <img class="logoCorner" src="/images/org_logo_512.png"/>
  </a>

  <div id="footer">
    <p>Press key <key>T</key> while grabbing a plane to translate it along its normal vector</p>
    <p>Press key <key>R</key> while grabbing a plane to spin it around its center</p>
  </div>

  <script>

    var fileInput = document.getElementById('fileInput');

    // The filter to read image from URL
    var file2Buff = new pixpipe.FileToArrayBufferReader();
    var gui = new dat.GUI();
    var guiParam = {};
    var spaceLength = {};
    var renderer = null
    var scene = null
    var camera = null
    var container = null
    var shaderMat = null;
    var boxHelper = null;
    var screenContainer = null;
    var screenReady = false;
    var sliceMatrixSize = {};
    var textures = [];
    var curve = null;
    var curveMoveCounter = 0;
    var curveMoveCounterFrequency = 3; // refresh the shader curve every 3 mousemove on the CanvasSpliner
    var controls = null;
    var planeShifter = null;
    // initialize the 3D environment
    function initEnv3D(){
      console.log("initEnv3D...");

      // init renderer
      renderer = new THREE.WebGLRenderer( { antialias: false } );
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.setClearColor( 0xEEEEEE, 1 );
      document.body.appendChild( renderer.domElement );

      // THREE environment
      scene = new THREE.Scene();
      //var axisHelper = new THREE.AxisHelper( 10 );
      //scene.add( axisHelper );

      camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
      camera.position.z = 30;
      camera.far = 5000;
      controls = new THREE.OrbitControls( camera, renderer.domElement );

      container = new THREE.Object3D();
      scene.add( container );

      initGui();
      initBox();
      initScreen();
      render();
    }


    // called max 60 times per sec
    function render() {
      requestAnimationFrame( render );
      renderer.render( scene, camera );
    };


    // the GUI widget on the top right
    function initGui(){

      // time series
      if(spaceLength.t > 1){
        guiParam.tPos = 0;
        gui.add(guiParam, 'tPos', 0, spaceLength.t)
        .step(1)
        .onChange(function(val){
          shaderMat.uniforms.timeIndex.value = val;
        })
      }

      guiParam.xPos = Math.floor(spaceLength.x / 2);

      guiParam.yPos = Math.floor(spaceLength.y / 2);

      guiParam.zPos = Math.floor(spaceLength.z / 2);

      guiParam.showPlane1 = true;
      gui.add(guiParam, 'showPlane1').name('Show plane A')
      .onChange(function(val){
        screenContainer.children[0].visible = val;
      })

      guiParam.showPlane2 = true;
      gui.add(guiParam, 'showPlane2').name('Show plane S')
      .onChange(function(val){
        screenContainer.children[1].visible = val;
      })

      guiParam.showPlane3 = true;
      gui.add(guiParam, 'showPlane3').name('Show plane C')
      .onChange(function(val){
        screenContainer.children[2].visible = val;
      })


      guiParam.centerPosition = function(){
        centerPosition();
      }
      gui.add(guiParam, 'centerPosition').name('Center position');

      guiParam.resetRotation = function(){
        screenContainer.rotation.x = 0;
        screenContainer.rotation.y = 0;
        screenContainer.rotation.z = 0;
      }
      gui.add(guiParam, 'resetRotation').name('Reset rotation');

      guiParam.alpha = 0.95;
      gui.add(guiParam, 'alpha', 0, 1)
      .step(0.01)
      .onChange(function(val){
        shaderMat.uniforms.forcedAlpha.value = val;
      })


      guiParam.triliInterpol = true;
      gui.add(guiParam, 'triliInterpol').name('Interpolate')
      .onChange(function(val){
        shaderMat.uniforms.trilinearInterpol.value = val;
      })

      guiParam.enableCurve = true;
      gui.add(guiParam, 'enableCurve').name('Curve contrast')
      .onChange(function(val){
        shaderMat.uniforms.enableCurve.value = val;
        updateCurveTexture();
      })

    }

    function centerPosition(){
      screenContainer.position.x = 0;
      screenContainer.position.y = 0;
      screenContainer.position.z = 0;
    }

    /**
    * Initialize the red wireframe bounding box
    */
    function initBox(xspaceLength, yspaceLength, zspaceLength){

      var boxMaterial = new THREE.MeshBasicMaterial();
      var boxGeom = new THREE.CubeGeometry(
        spaceLength.x,
        spaceLength.y,
        spaceLength.z
      );
      var boxMesh = new THREE.Mesh( boxGeom, boxMaterial )
      boxHelper = new THREE.EdgesHelper( boxMesh, 0xff9999 );
      container.add( boxHelper );
      // adjust the camera to the box
      camera.position.z =  - spaceLength.z;
      camera.lookAt(new THREE.Vector3(0,0,0));
    }


    // screens are the planes on which are projected the images.
    // Here, we create a their custom materials and all
    function initScreen(){
      screenContainer = new THREE.Object3D();

      shaderMat = new THREE.ShaderMaterial( {
        uniforms: {
          // the textures
          nbOfTextureUsed: {
            type: "i",
            value: textures.length
          },
          // the number of slice per row
          nbSlicePerRow: {
            type: "f",
            value: sliceMatrixSize.x
          },
          // the number of slice per column
          nbSlicePerCol: {
            type: "f",
            value: sliceMatrixSize.y
          },
          // the number of slice in total
          nbSliceTotal: {
            type: "f",
            value: spaceLength.z  // because along zspace
          },
          // xspace length
          xspaceLength: {
            type: "f",
            value: spaceLength.x
          },
          // yspace length
          yspaceLength: {
            type: "f",
            value: spaceLength.y
          },
          // zspace length
          zspaceLength: {
            type: "f",
            value: spaceLength.z
          },
          timespaceLength: {  // the number of time samples if it's a timeseries
            type: "i",
            value: spaceLength.t
          },
          timeIndex: { //
            type: "i",
            value: 0
          },
          forcedAlpha: {
            type: "f",
            value: guiParam.alpha
          },
          textures: {
            type: "t",
            value:  textures
          },
          trilinearInterpol: {
            type: 'b',
            value: guiParam.triliInterpol
          },
          curveTexture: {
            type: "t",
            value: null
          },
          enableCurve: {
            type: 'b',
            value: guiParam.enableCurve
          }
        }
        ,
        vertexShader: shaders.vertex,
        fragmentShader: shaders.fragmentMultipleInterpolation,
        side: THREE.DoubleSide,
        transparent: true
      });

      var largestSide = Math.sqrt(spaceLength.x*spaceLength.x + spaceLength.y*spaceLength.y + spaceLength.z*spaceLength.z) * 2;

      var zPlaneGeometry = new THREE.PlaneBufferGeometry( largestSide, largestSide, 1 );
      var zPlaneMesh = new THREE.Mesh( zPlaneGeometry, shaderMat );
      screenContainer.add( zPlaneMesh );

      var xPlaneGeometry = new THREE.PlaneBufferGeometry( largestSide, largestSide, 1 );
      var xPlaneMesh = new THREE.Mesh( xPlaneGeometry, shaderMat );
      xPlaneMesh.rotation.y = Math.PI / 2;
      screenContainer.add( xPlaneMesh );

      var zPlaneGeometry = new THREE.PlaneBufferGeometry( largestSide, largestSide, 1 );
      var zPlaneMesh = new THREE.Mesh( zPlaneGeometry, shaderMat );
      zPlaneMesh.rotation.x = Math.PI / 2;
      screenContainer.add( zPlaneMesh );

      //centerPosition();

      container.add( screenContainer );
      //scene.add( screenContainer );

      screenReady = true;
      initCurve();

      planeShifter = new PlaneShifter( screenContainer , camera, controls );
      planeShifter.setBoundingBox( new THREE.Box3(
        new THREE.Vector3(-spaceLength.x/2, -spaceLength.y/2, -spaceLength.z/2),  // min
        new THREE.Vector3(spaceLength.x/2, spaceLength.y/2, spaceLength.z/2)      // max
      ))

    }


    // to refresh the aspect ratio when the windows is resized
    window.addEventListener( 'resize', function () {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize( window.innerWidth, window.innerHeight );
    }, false );


    // the image is loaded...
    // here, filter = url2ImgFilter
    file2Buff.on("ready", function(){
      var filenames = this.getMetadata("filenames");

      var volBuff = this.getOutput();

      var genericDecoder = new pixpipe.Image3DGenericDecoder();
      //var genericDecoder = new pixpipe.Minc2Decoder();
      genericDecoder.addInput( volBuff );
      genericDecoder.update();

      // if nothing was decoded, we exit
      if(!genericDecoder.getNumberOfOutputs()){
        document.getElementById('fileInfo').innerHTML = "Error. This file can not be decoded :(";
        return;
      }

      var mniVolume = genericDecoder.getOutput();

      if(mniVolume){
        console.log(mniVolume);

        var mosaicFilter = new pixpipe.Image3DToMosaicFilter();
        //mosaicFilter.setMetadata("maxWidth", 16000);
        //mosaicFilter.setMetadata("maxHeight", 16000);

        // genericDecoder ouputs a pixpipe.MniVolume, which iherit pixpipe.Image3D
        // making it compatible with pixpipe.Image3DToMosaicFilter
        mosaicFilter.addInput( mniVolume );

        // which axis do we want the picture of?
        var space = "z";
        mosaicFilter.setMetadata( "axis", space);

        // if time series, take it all
        mosaicFilter.setMetadata("time", -1);

        // run the filter
        mosaicFilter.update();

        if( !mosaicFilter.getNumberOfOutputs()){
          console.log("No output for mosaicFilter.");
          document.getElementById('fileInfo').innerHTML = "Error.";
          return;
        }else{
          // TODO
          var sliceSize = mniVolume.getSliceSize( space );
          var nbSlices = mniVolume.getNumberOfSlices( space );
          document.getElementById('fileInfo').textContent = filenames[0] + " is composed of "
            + nbSlices + " slices of size "
            + sliceSize.w + "x" + sliceSize.h + "px";
        }

        // display the output in multiple canvas if needed
        for(var nbOut=0; nbOut<mosaicFilter.getNumberOfOutputs(); nbOut++){
          var outputMosaic = mosaicFilter.getOutput(nbOut);
          console.log( outputMosaic );
          outputMosaic.setMetadata("min", mniVolume.getMinValue());
          outputMosaic.setMetadata("max", mniVolume.getMaxValue()*1.001);

          var data = outputMosaic.getDataAsUInt8Array();
          //var data = outputMosaic.getData();

          var texture = new THREE.DataTexture(
            data,
            outputMosaic.getWidth(),
            outputMosaic.getHeight(),
            THREE.LuminanceFormat,
            THREE.UnsignedByteType //THREE.FloatType
          );

          texture.needsUpdate = true;

          textures.push(texture);
        }

        sliceMatrixSize.x = mosaicFilter.getMetadata("gridWidth");
        sliceMatrixSize.y = mosaicFilter.getMetadata("gridHeight");

        spaceLength.x = mniVolume.getNumberOfSlices("x");
        spaceLength.y = mniVolume.getNumberOfSlices("y");
        spaceLength.z = mniVolume.getNumberOfSlices("z");
        spaceLength.t = mniVolume.getTimeLength();

        // since the volume is loaded, we can create the 3D env
        initEnv3D();
      }else{
        console.warn("Non-existant output for genericDecoder.");
      }
    });


    // event listener of the file input
    fileInput.addEventListener('change', function(e) {
      var files = e.target.files;
      var filenames = {};

      for(var i=0; i<files.length; i++){
        // set the input, an HTML5 File object and a category (ID)
        file2Buff.addInput(files[i], i);
        filenames[i] = files[i].name ;
      }

      file2Buff.setMetadata("filenames", filenames);

      document.getElementById("fileOpener").style.display = "none";
      document.getElementById('fileInfo').textContent = "Decoding volume file file and building 3D texture...";
      // Perform the reading + conversion ibto ArrayBuffer
      file2Buff.update();
		});


    // update the shader based on the curve
    function updateCurveTexture( curveObj ){
      if(! screenReady )
        return;

      var interpolatedY = curve.getYSeriesInterpolated();

      var curveTexture = new THREE.DataTexture(
        interpolatedY,
        interpolatedY.length,
        1,
        THREE.LuminanceFormat,
        THREE.FloatType
      );

      curveTexture.needsUpdate = true;
      shaderMat.uniforms.curveTexture.value = curveTexture;
    }


    // init the curve widget
    function initCurve(){
      curve = new pixpipeUI.CanvasSpliner("curveContainer", 300, 300, "monotonic");
      curve.setBackgroundColor("rgba(255, 255, 255, 0.75)");
      curve.setTextColor("rgba(0, 0, 0, 0.5)");

      curve.add({x:0, y:0, /*xLocked: true,*/ safe: true});
      curve.add({x:1, y:1, /*xLocked: true,*/ safe: true});

      curve.on("movePoint", function(){
        curveMoveCounter ++;
        if(curveMoveCounter % curveMoveCounterFrequency == 0 )
          updateCurveTexture();
      });

      curve.on("releasePoint", updateCurveTexture);
      curve.on("pointAdded", updateCurveTexture);
      curve.on("pointRemoved", updateCurveTexture);

      updateCurveTexture();

      document.getElementById("curveContainer").style.display = "inherit";
    }

  </script>

</body>
</html>