AMI - Lesson 06

Volume rendering. author(s): Nicolas Rannou (github)

by nicolasrannou

HTML

<div id="my-gui-container"></div>

<div id="my-lut-container">
  <div>Transfer function<div id="my-tf" class="my-tf"></div></div>
</div>

<div id="r3d"></div>


<!-- Tools -->
<script src="https://use.edgefonts.net/source-code-pro.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/dataarts/dat.gui/master/build/dat.gui.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.min.js"></script>

<!-- THREEJS -->
<script type="text/javascript" src="https://s3.amazonaws.com/zspace-webgl/js/three.js"></script>
<script type="text/javascript" src="https://s3.amazonaws.com/zspace-webgl/js/third-party/gl-matrix-min.js"></script>
<script type="text/javascript" src="https://s3.amazonaws.com/zspace-webgl/js/zspace/zSpace.js"></script>
<script type="text/javascript" src="https://s3.amazonaws.com/zspace-webgl/js/zspace/ZSpaceEffect.js"></script>

<!-- AMI CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.14/ami.min.js"></script>
        
      

<!-- ANALYTICS -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-39303022-3', 'auto');
  var page = '/ami/lessons/06';
  ga('send', 'pageview', page);

</script>

CSS

body{
  font-family: source-code-pro, sans-serif;
  color:#F9F9F9;
  background-color: #212121
}

#r3d {
  background-color: #212121;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow:hidden;
}

#my-gui-container {
  position: fixed;
  top: 30px;
  right: 20px;
  z-index:1;
}

#my-lut-container {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
  color: #F9F9F9;
  text-align: center;
}

#my-lut-container > div > .my-tf {
  position: relative;
}

#my-lut-min {
  margin-right: 10px;
}

#my-lut-max {
  margin-left: 10px;
}

#my-lut-container > div {
  margin-bottom: 10px;
}

#my-lut-container > div > .my-tf > :first-child {
  background: repeating-linear-gradient(-45deg, #353535, #353535 5px, black 5px, black 10px);
}

#my-lut-container > div > .my-tf > :nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

/* globals Stats, dat, AMI*/

var LoadersVolume = AMI.default.Loaders.Volume;
var ControlsTrackball = AMI.default.Controls.Trackball;
var HelpersLut = AMI.default.Helpers.Lut;
var HelpersVR = AMI.default.Helpers.VolumeRendering;

// standard global letiables
var controls;
var threeD;
var renderer;
var stats;
var camera;
var scene;
var vrHelper;
var lut;
var effect;
var ready = false;

var myStack = {
  lut: 'random',
  opacity: 'random',
  steps: 256,
  alphaCorrection: 0.5,
  interpolation: 1,
};

/**
 * Handle mouse down event
 */
function onMouseDown() {
  if (vrHelper && vrHelper.uniforms) {
    vrHelper.uniforms.uSteps.value = Math.floor(myStack.steps / 2);
    vrHelper.interpolation = 0;
  }
}

/**
 * Handle mouse up event
 */
function onMouseUp() {
  if (vrHelper && vrHelper.uniforms) {
    vrHelper.uniforms.uSteps.value = myStack.steps;
    vrHelper.interpolation = myStack.interpolation;
  }
}

/**
 * Handle window resize event
 */
function onWindowResize() {
  // update the camera
  camera.aspect = threeD.offsetWidth / threeD.offsetHeight;
  camera.updateProjectionMatrix();

    // notify the renderer of the size change
  renderer.setSize(threeD.offsetWidth, threeD.offsetHeight);
}

/**
 * Build GUI
 */
function buildGUI() {
  var gui = new dat.GUI({
      autoPlace: false,
    });

  var customContainer = document.getElementById('my-gui-container');
  customContainer.appendChild(gui.domElement);

  var stackFolder = gui.addFolder('Settings');
  var lutUpdate = stackFolder.add(myStack, 'lut', lut.lutsAvailable());
  lutUpdate.onChange(function(value) {
      lut.lut = value;
      vrHelper.uniforms.uTextureLUT.value.dispose();
      vrHelper.uniforms.uTextureLUT.value = lut.texture;
    });
  // init LUT
  lut.lut = myStack.lut;
  vrHelper.uniforms.uTextureLUT.value.dispose();
  vrHelper.uniforms.uTextureLUT.value = lut.texture;

  var opacityUpdate = stackFolder.add(
    myStack, 'opacity', lut.lutsAvailable('opacity'));
 ...