AMI - Lesson 06

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

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>


<script type="text/javascript" src="https://use.edgefonts.net/source-code-pro.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/dataarts/dat.gui/build/dat.gui.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/mrdoob/stats.js/build/stats.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>

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

<!-- google 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*/

// standard global letiables
var controls;
var threeD;
var renderer;
var stats;
var camera;
var scene;
var vrHelper;
var lut;
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'));
    opacityUpdate.onChange(function(value) {
        lut.lutO = value;
        vrHelper.uniforms.uTextureLUT.value.dispose();
        vrHelper.uniforms.uTextureLUT.value =...