Show texts properly in SVG mode of AlexNet

AlexNet.html

@@ -352,14 +352,9 @@ <h4>Architecture:</h4>
 $('#rendererType input:radio').change(function() {
     rendererType = this.value;
     if (rendererType == 'svg') {
-        showDims = false;
-        $("#showDims").prop('disabled', true).prop('checked', false);
-        $("#showConvDims").prop('disabled', true).prop('checked', false);
         $("#download").removeClass('disabled');
     }
     else if (rendererType == 'webgl') {
-        $("#showDims").prop('disabled', false);
-        $("#showConvDims").prop('disabled', false);
         $("#download").addClass('disabled');
     }
     $(this).blur();

AlexNet.js

@@ -89,8 +89,12 @@ function AlexNet() {
 
     function animate() {
         requestAnimationFrame( animate );
+        let camera_world_pos = camera.localToWorld(camera.position.clone());
+        sprites.children.forEach(sprite => {
+            sprite.lookAt(camera_world_pos);
+        });
         renderer.render(scene, camera);
-    };
+    }
 
     restartRenderer();
 
@@ -178,30 +182,20 @@ function AlexNet() {
             if (showDims) {
 
                 // Dims
-                sprite = makeTextSprite(layer['depth'].toString());
-                sprite.position.copy( layer_object.position ).sub( new THREE.Vector3( wf(layer)/2 + 2, hf(layer)/2 + 2, 0 ) );
-                sprites.add( sprite );
+                sprite = makeTextSprite(rendererType === 'svg', layer['depth'].toString(), layer_object.position, new THREE.Vector3( wf(layer)/2 + 2, hf(layer)/2 + 2, 0 ));
 
-                sprite = makeTextSprite(layer['width'].toString());
-                sprite.position.copy( layer_object.position ).sub( new THREE.Vector3( wf(layer)/2 + 3, 0, depthFn(layer['depth'])/2 + 3 ) );
-                sprites.add( sprite );
+                sprite = makeTextSprite(rendererType === 'svg', layer['width'].toString(), layer_object.position, new THREE.Vector3( wf(layer)/2 + 3, 0, depthFn(layer['depth'])/2 + 3 ));
 
-                sprite = makeTextSprite(layer['height'].toString());
-                sprite.position.copy( layer_object.position ).sub( new THREE.Vector3( 0, -hf(layer)/2 - 3, depthFn(layer['depth'])/2 + 3 ) );
-                sprites.add( sprite );
+                sprite = makeTextSprite(rendererType === 'svg', layer['height'].toString(), layer_object.position, new THREE.Vector3( 0, -hf(layer)/2 - 3, depthFn(layer['depth'])/2 + 3 ));
 
             }
 
             if (showConvDims && index < architecture.length - 1) {
 
                 // Conv Dims
-                sprite = makeTextSprite(layer['filterHeight'].toString());
-                sprite.position.copy( conv_object.position ).sub( new THREE.Vector3( convFn(layer['filterWidth'])/2, -3, depthFn(layer['depth'])/2 ) );
-                sprites.add( sprite );
+                sprite = makeTextSprite(rendererType === 'svg', layer['filterHeight'].toString(), conv_object.position, new THREE.Vector3( convFn(layer['filterWidth'])/2, -3, depthFn(layer['depth'])/2 ));
 
-                sprite = makeTextSprite(layer['filterWidth'].toString());
-                sprite.position.copy( conv_object.position ).sub( new THREE.Vector3( -1, convFn(layer['filterHeight'])/2, depthFn(layer['depth'])/2 ) );
-                sprites.add( sprite );
+                sprite = makeTextSprite(rendererType === 'svg', layer['filterWidth'].toString(), conv_object.position, new THREE.Vector3( -1, convFn(layer['filterHeight'])/2, depthFn(layer['depth'])/2 ));
 
             }
 
@@ -231,9 +225,7 @@ function AlexNet() {
             if (showDims) {
 
                 // Dims
-                sprite = makeTextSprite(layer.toString());
-                sprite.position.copy( layer_object.position ).sub( new THREE.Vector3( 3, depthFn(layer)/2 + 3, 3 ) );
-                sprites.add( sprite );
+                sprite = makeTextSprite(rendererType === 'svg', layer.toString(), layer_object.position, new THREE.Vector3( 3, depthFn(layer)/2 + 3, 3 ));
 
             }
 
@@ -260,32 +252,55 @@ function AlexNet() {
     }
 
 
-    function makeTextSprite(message, opts) {
-        var parameters = opts || {};
-        var fontface = parameters.fontface || 'Helvetica';
-        var fontsize = parameters.fontsize || 120;
-        var canvas = document.createElement('canvas');
-        var context = canvas.getContext('2d');
-        context.font = fontsize + "px " + fontface;
-
-        // get size data (height depends only on font size)
-        var metrics = context.measureText(message);
-        var textWidth = metrics.width;
-
-        // text color
-        context.fillStyle = 'rgba(0, 0, 0, 1.0)';
-        context.fillText(message, 0, fontsize);
-
-        // canvas contents will be used for a texture
-        var texture = new THREE.Texture(canvas)
-        texture.minFilter = THREE.LinearFilter;
-        texture.needsUpdate = true;
-
-        var spriteMaterial = new THREE.SpriteMaterial({ map: texture });
-        var sprite = new THREE.Sprite( spriteMaterial );
-        sprite.scale.set( 10, 5, 1.0 );
-        sprite.center.set( 0,1 );
-        return sprite;
+    function makeTextSprite(should_make_geometry, message, copy_pos, sub_pos, opts) {
+        if (should_make_geometry) {
+            const loader = new THREE.FontLoader();
+            loader.load('fonts/helvetiker_regular.typeface.json', function (font) {
+                let geometry = new THREE.TextGeometry(message, {
+                    font: font,
+                    size: 3,
+                    height: 0.01,
+                });
+
+                let material = new THREE.MeshBasicMaterial({ color: 0x000000 });
+                let sprite = new THREE.Mesh(geometry, material);
+                sprite.matrixAutoUpdate = true;
+                sprite.up.set(0, 1, 0);
+                sprite.scale.set(1, 1, 0.1);
+
+                sprites.add(sprite);
+                sprite.position.copy(copy_pos).sub(sub_pos);                
+            });
+
+        } else {
+            var parameters = opts || {};
+            var fontface = parameters.fontface || 'Helvetica';
+            var fontsize = parameters.fontsize || 120;
+            var canvas = document.createElement('canvas');
+            var context = canvas.getContext('2d');
+            context.font = fontsize + "px " + fontface;
+
+            // get size data (height depends only on font size)
+            var metrics = context.measureText(message);
+            var textWidth = metrics.width;
+
+            // text color
+            context.fillStyle = 'rgba(0, 0, 0, 1.0)';
+            context.fillText(message, 0, fontsize);
+
+            // canvas contents will be used for a texture
+            var texture = new THREE.Texture(canvas)
+            texture.minFilter = THREE.LinearFilter;
+            texture.needsUpdate = true;
+
+            var spriteMaterial = new THREE.SpriteMaterial({ map: texture });
+            var sprite = new THREE.Sprite( spriteMaterial );
+            sprite.scale.set( 10, 5, 1.0 );
+            sprite.center.set( 0,1 );
+
+            sprite.position.copy(copy_pos).sub(sub_pos);
+            sprites.add(sprite);
+        }
     }
 
     function style({color1_=color1,

OrbitControls.js

@@ -136,7 +136,7 @@ THREE.OrbitControls = function ( object, domElement ) {
 		return function update() {
 
 			var position = scope.object.position;
-
+			
 			offset.copy( position ).sub( scope.target );
 
 			// rotate offset to "y-axis-is-up" space

fonts/LICENSE

@@ -0,0 +1,13 @@
+Copyright � 2004 by MAGENTA Ltd. All Rights Reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of the fonts accompanying this license ("Fonts") and associated documentation files (the "Font Software"), to reproduce and distribute the Font Software, including without limitation the rights to use, copy, merge, publish, distribute, and/or sell copies of the Font Software, and to permit persons to whom the Font Software is furnished to do so, subject to the following conditions:
+
+The above copyright and this permission notice shall be included in all copies of one or more of the Font Software typefaces.
+
+The Font Software may be modified, altered, or added to, and in particular the designs of glyphs or characters in the Fonts may be modified and additional glyphs or characters may be added to the Fonts, only if the fonts are renamed to names not containing the word "MgOpen", or if the modifications are accepted for inclusion in the Font Software itself by the each appointed Administrator.
+
+This License becomes null and void to the extent applicable to Fonts or Font Software that has been modified and is distributed under the "MgOpen" name.
+
+The Font Software may be sold as part of a larger software package but no copy of one or more of the Font Software typefaces may be sold by itself.
+
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL MAGENTA OR PERSONS OR BODIES IN CHARGE OF ADMINISTRATION AND MAINTENANCE OF THE FONT SOFTWARE BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. 

fonts/README

@@ -0,0 +1,2 @@
+Use Facetype.js to generate typeface.json fonts.
+http://gero3.github.io/facetype.js/