AMI - Lesson 04

Labelmap. author(s): Nicolas Rannou (github)

HTML

<div id="my-gui-container">
</div>
<div id="my-lut-container">
  <div>CT<div id="my-lut-canvases-l0" class="my-lut-canvases"></div></div>
  <div>Segmentation<div id="my-lut-canvases-l1" class="my-lut-canvases"></div></div>
</div>
<div id="container"></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://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>


<!-- AMI CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ami.js//0.0.17/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/04';
  ga('send', 'pageview', page);

</script>

CSS

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

#container {
  background-color: #000;
  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-lut-canvases {
  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-lut-canvases > :first-child {
  background: repeating-linear-gradient(-45deg, #353535, #353535 5px, black 5px, black 10px);
}

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

JavaScript

/* globals Stats, dat, AMI*/

var LoadersVolume = AMI.default.Loaders.Volume;
var CamerasOrthographic = AMI.default.Cameras.Orthographic;
var ControlsOrthographic = AMI.default.Controls.TrackballOrtho;
var HelpersLut = AMI.default.Helpers.Lut;
var HelpersStack = AMI.default.Helpers.Stack;

// Shaders
// Data
var ShadersDataUniforms = AMI.default.Shaders.DataUniform;
var ShadersDataFragment = AMI.default.Shaders.DataFragment;
var ShadersDataVertex = AMI.default.Shaders.DataVertex;
// Layer
var ShadersLayerUniforms = AMI.default.Shaders.LayerUniform;
var ShadersLayerFragment = AMI.default.Shaders.LayerFragment;
var ShadersLayerVertex = AMI.default.Shaders.LayerVertex;

// standard global variables
var controls;
var renderer;
var camera;
var statsyay;
var threeD;
//
var sceneLayer0TextureTarget;
var sceneLayer1TextureTarget;
//
var sceneLayer0;
//
var lutLayer0;
var sceneLayer1;
var meshLayer1;
var uniformsLayer1;
var materialLayer1;
var lutLayer1;
var sceneLayerMix;
var meshLayerMix;
var uniformsLayerMix;
var materialLayerMix;

var layerMix = {
  opacity1: 1.0,
};

var javierLut = [[0.00390625, 0.3125, 0.328125, 0.3671875],
                        [0.0078125, 0.5390625, 0.3125, 0.3125],
                        [0.01171875, 0.1015625, 0.6171875, 0.0703125],
                        [0.015625, 0.515625, 0.5625, 0.84375],
                        [0.01953125, 0.59375, 0.7890625, 0.4296875],
                        [0.0234375, 0.1796875, 0.9609375, 0.5625],
                        [0.02734375, 0.5078125, 0.15625, 0.703125],
                        [0.03125, 0.1796875, 0.265625, 0.7265625],
                        [0.03515625, 0.625, 0.8671875, 0.296875],
                        [0.0390625, 0.828125, 0.171875, 0.875],
                        [0.04296875, 0.53125, 0.140625, 0.34375],
                        [0.046875, 0.4609375, 0.4140625, 0.2734375],
                        [0.05078125, 0.3203125, 0.171875, 0.0],
                        [0.0546875, 0.1171875, 0.2265625,...