Upd.

examples/trako.js

@@ -0,0 +1,78 @@
+// load example fiber (very small and fast)
+// we need it as a NVMesh template
+nvmesh = await niivue.addMeshFromUrl({'url':'https://niivue.github.io/niivue/images/colby.trk'})
+
+TKOFILE = 'https://bostongfx.github.io/TRAKO/DATA/example.tko';
+
+
+script = document.createElement("script");
+script.type = "text/javascript";
+script.src = "https://boostlet.org/dist/boostlet.min.js";
+script.onload = run;
+document.head.appendChild(script);
+eval(script);
+
+//
+// THIS ONLY WORKS WITH NIIVUE RIGHT NOW
+//
+function run() {
+
+  // detect visualization framework
+  Boostlet.init();
+
+  // using the XTK TRAKO FILE READER
+  libs = ["https://bostongfx.github.io/TRAKO/WEB/js/xtk.js",
+          "https://bostongfx.github.io/TRAKO/WEB/js/draco/draco_decoder.js",
+          "https://bostongfx.github.io/TRAKO/WEB/js/xtkTrakoReader.js"]
+  loaded = 0;
+
+
+  for (var l in libs) {
+
+    Boostlet.load_script(libs[l], lib_load_callback);
+
+  }
+
+}
+
+
+function lib_load_callback() {
+
+  loaded++;
+
+  if (loaded == libs.length) {
+
+    console.log('all libs loaded');
+
+    // we can now use the XTK TKO reader
+    xtkTrakoReader.read(TKOFILE, function(fibers) {
+
+      // now we have an X.fibers object with all points
+      nvmesh.pts = fibers.points.da;
+
+      number_of_fibs = fibers.points.da.length / 3 / 2;
+
+      offsets = [];
+      for (var i = 0; i < number_of_fibs; i += 2) {
+
+        offsets.push(i);
+
+      }
+
+      nvmesh.offsetPt0 = new Uint32Array(offsets);
+
+      nvmesh.fiberLength = 0.001;
+      nvmesh.fiberLengths = null;
+
+      // this sets up our NVMesh for the TRAKO data
+      nvmesh.updateFibers(niivue.gl);
+
+      // and repaints everything!
+      niivue.updateGLVolume()
+
+    });
+
+  }
+
+}
+

index.html

@@ -230,7 +230,7 @@
     window.onload = function() {
 
 
-        var examples = ['sobel.js', 'segmentanything.js', 'imageCaptioning.js', 'plotly.js'];
+        var examples = ['sobel.js', 'segmentanything.js', 'imageCaptioning.js', 'plotly.js', 'trako.js'];
 
         var baseurl = 'https://raw.githubusercontent.com/mpsych/boostlet/main/examples/';
         // var baseurl = 'https://raw.githubusercontent.com/shrutivarade/boostlet/main/examples/';
@@ -285,9 +285,17 @@
       <div class="buttons">
         <div><a href='' id='sobel.js'><button class="button">Sobel Filter</button></a><br><div style='margin:2px'><a href='' id='sobel.js-code' target='_blank'><img src='gfx/badge.svg'></a></div></div>
         <div><a href='' id='segmentanything.js'><button id='segmentanything.js' class="button">Segment Anything</button></a><br><div style='margin:2px'><a href='' id='segmentanything.js-code' target='_blank'><img src='gfx/badge.svg'></a></div></div>
+
         <div><a href='' id='plotly.js'><button id='plotly.js' class="button">Plotly Histogram</button></a><br><div style='margin:2px'><a href='' id='plotly.js-code' target='_blank'><img src='gfx/badge.svg'></a></div></div>
+
          <div><a href='' id='imageCaptioning.js'><button id='imageCaptioning.js' class="button">Image Captioning </button></a><br><div style='margin:2px'><a href='' id='imageCaptioning.js-code' target='_blank'><img src='gfx/badge.svg'></a></div></div>
 
+
+      </div>
+      <div class="buttons">
+
+               <div><a href='' id='trako.js'><button id='trako.js' class="button">Trako (NiiVue only!)</button></a><br><div style='margin:2px'><a href='' id='trako.js-code' target='_blank'><img src='gfx/badge.svg'></a></div></div>
+
       </div>
       <img src='gfx/2.png' class='imgtext'>
       <div class="websites">