BARKS IN THE WIND: Figurine

Some time ago I was experimenting with iPhone's LIDAR/TrueDepth technology, which got me this figurine scan. It's been sitting on my desktop, I figured why not try and figure out how to post it to blog. Here it is in all it's janky glory,

figurine.glb¹

and now the pipeline, the original application I used produces a wavefront obj with texture, which I then massaged in blender to zoom and position appropriately, so I don't have to do it in the renderer. From blender I exported it to a 22mb glb file, which was then optimized by gltf-transform down to a draco compressed 1mb file².

The actual renderer uses threejs, and a simple single file script³, which I build using esbuild⁴, the fastests and easiest way I've found to package webshit after a cursory look.

1. it's likely the renderer requires some recent versions of everything, so if all you see is a link, don't worry about it [↩]

2. npm install @gltf-transform/cli
   ./node_modules/.bin/gltf-transform optimize export.glb figurine.glb
   

   [↩]

3. import { Vector3, Scene, Light, AmbientLight, Material, PerspectiveCamera, WebGLRenderer, Color } from 'three';
   import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
   import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
   import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
   
   function glbRenderer(ele) {
           let url=ele.href;
           let width=800,height=400;
           let model;
   
           function mainloop() {
                   requestAnimationFrame(mainloop);
                   control.update();
                   renderer.render(scene,camera);
           }
   
           function start(gltf) {
                   scene.add(gltf.scene);
                   model=gltf.scene.children[0];
                   ele.parentNode.replaceChild(renderer.domElement,ele);
                   mainloop();
           }
   
           const scene = new Scene();
           //scene.background=new Color(0x000000);
   
           const camera=new PerspectiveCamera(20, width/height,1,1000);
           camera.position.set(0,3,5);
           camera.lookAt(0,0,0);
   
           const light=new AmbientLight(0x404040,40);
           scene.add(light);
   
           const renderer = new WebGLRenderer({antialis:true});
           renderer.setPixelRatio(window.devicePixelRatio);
           renderer.setSize(width,height);
           renderer.setClearColor(0x000000,0.0);
   
           const control=new OrbitControls(camera,renderer.domElement);
           control.autoRotate=true;
           control.autoRotateSpeed=1.0;
   
           const loader=new GLTFLoader();
           const draco=new DRACOLoader();
           draco.setDecoderPath('/threejs/');
           loader.setDRACOLoader(draco);
           loader.load(url, start);
   }
   
   window.addEventListener('load', function(){
           const ele=document.querySelector('a[href*=".glb"]');
           if(!ele)return;
           glbRenderer(ele);
   });
   

   [↩]

4. npm install esbuild
   npm install threejs
   ./node_modules/.bin/esbuild foo.js --bundle --minify --outfile=glb.js
   

   [↩]