Merge branch 'ANSI'

Author: zz85

README.md

@@ -1,18 +1,29 @@
-# Three.js in the Terminal aka Three.js Terminal Renderer
+# Terminal Renderer for Three.js
 
 This is an example of how you can run three.js in your terminal.
 Sysadmins can now run three.js in remote ssh sessions!
 
 ![threejs-term](https://cloud.githubusercontent.com/assets/314997/19834595/b96b3e84-9ea0-11e6-950b-5b3103969a9b.gif)
 
 ### Install and Running
-Without Git Clonning. Otherwise look at Development section.
+
+If you prefer to run it by git cloning enviornment, look at the development section.
 
 ```
 $ npm install -g threejs-term # install and link binary
 $ threejs-term # runs the demo
 ```
 
+### Using demo
+
+Keys
+`m` - Toggle Ascii Mode
+`q`, `Ctrl-C`, `Esc` - Quits app.
+`Ctrl-F12` - Developer's console
+`a` - Camera Rotate Mode
+`s` - Camera Scale Mode
+`d` - Camera Position Mode 
+
 ### Troubleshooting
 If npm install fails to compile Canvas bindings to Cario, make sure your system have the [necessary libraries](https://github.com/Automattic/node-canvas).
 For mac homebrew users, you can simply run `brew install cario`.
@@ -23,6 +34,7 @@ For mac homebrew users, you can simply run `brew install cario`.
 - Screen resize detection aka "Responsive Design"!
 - Support mouse events
 - Emulate keypress
+- Toggle different ASCII rendering modes
 
 ### Internals
 This is built with some awesome libraries.

TerminalRenderer.js

@@ -5,12 +5,12 @@ require('three/examples/js/renderers/Projector');
 // require('three/examples/js/renderers/SoftwareRenderer');
 require('three/examples/js/renderers/CanvasRenderer');
 
-
 // TODO use a proxy class?
 // TODO support WebGLRenderer via headless-gl or node-webgl?
 
-class TerminalRenderer {
+const ansi = require('./ansi');
 
+class TerminalRenderer {
     constructor(screen) {
         this.screen = screen;
         // Set up fake canvas
@@ -21,13 +21,17 @@ class TerminalRenderer {
             canvas: canvas, // pass in fake canvas
         };
 
+        this.ctx = canvas.getContext('2d');
+
         // renderer = new THREE.SoftwareRenderer(params); // TODO pass in raw arrays and render that instead
         const renderer = new THREE.CanvasRenderer(params);
         this.canvas = canvas;
         this.renderer = renderer;
     }
 
     setSize(w, h) {
+        this.width = w;
+        this.height = h;
         this.renderer.setSize(w, h);
     }
 
@@ -37,17 +41,22 @@ class TerminalRenderer {
 
     render(scene, camera) {
         this.renderer.render(scene, camera);
-        this.screen.setImage(this.canvas.toBuffer());
+        // this.screen.setImage(this.canvas.toBuffer()); // only for AnsiImage widget // seems to be faster but less configurable
+        // console.error(`Size ${this.width},${this.height} ${this.screen.width},${this.screen.height} `);
+        this.image = this.ctx.getImageData(0, 0, this.width, this.height);
+        const c = ansi.convert(this.image, this.screen.width, this.screen.height)
+        this.screen.setContent(c);
+    }
+
+    setAnsiOptions(o) {
+        ansi.setOptions(o);
     }
 
     saveRenderToFile(file) {
         // Write canvas to file
         const out = fs.createWriteStream(file);
         return canvas.pngStream().pipe(out);
     }
-
-
-
 }
 
 THREE.TerminalRenderer = TerminalRenderer;

ansi.js

@@ -0,0 +1,116 @@
+// Adopted from blessed/vendor/tng.js
+
+const colors = require('blessed/lib/colors');
+
+let options = {
+    plain_formatting: true, // overrides bg and ascii_formatting
+    bg_formatting: true, // colors background
+    ascii_formatting: true, // use ascii for forground
+
+    bga: 1, // background alpha blending
+    fga: 0.5, // forground alpha blending,
+    dchars: ''
+};
+
+// 3 Modules
+// ANSI only - No colors
+// BG COLORS only - No ascii
+// ASCII + BG COLORS + FG Colors
+// ASCII + FG Colors
+
+
+// Taken from libcaca:
+options.dchars = '????8@8@#8@8##8#MKXWwz$&%x><\\/xo;+=|^-:i\'.`,  `.        '.split('').reverse().join('')
+
+// options.dchars = ' .,:;=|iI+hHOE#`$'
+
+// darker bolder character set from https://github.com/saw/Canvas-ASCII-Art/
+// options.dchars = ' .\'`^",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$'
+// options.dchars = ' .:-=+*#%@';
+// options.dchars = '●☭☮☯♔♛♙♞';
+// options.dchars = '█▓▒░ '
+
+options.dchars = options.dchars.split('').reverse().join('');
+
+function pixelToSGR(pixel, ch) {
+    var a = pixel.a / 255
+        , bga = options.bga
+        , fga = options.fga
+        , bg
+        , fg;
+
+    bg = colors.match(
+        pixel.r * a * bga | 0,
+        pixel.g * a * bga | 0,
+        pixel.b * a * bga | 0);
+
+    if (options.ascii_formatting && ch) {
+        fg = colors.match(
+        pixel.r * a * fga | 0,
+        pixel.g * a * fga | 0,
+        pixel.b * a * fga | 0);
+        if (a === 0 || !options.bg_formatting) {
+            return '\x1b[38;5;' + fg + 'm' + ch + '\x1b[m';
+        }
+        return '\x1b[38;5;' + fg + 'm\x1b[48;5;' + bg + 'm' + ch + '\x1b[m';
+    }
+
+    if (a === 0) return ' ';
+
+    return '\x1b[48;5;' + bg + 'm \x1b[m';
+}
+
+function luminance(pixel) {
+    var a = pixel.a / 255
+        , r = pixel.r * a
+        , g = pixel.g * a
+        , b = pixel.b * a
+        , l = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+
+    return l / 255;
+};
+
+function getOutch(pixel) {
+    var lumi = luminance(pixel)
+    , dchars = options.dchars
+    , outch = dchars[lumi * (dchars.length - 1) | 0];
+
+    return outch;
+}
+
+function convert(image, targetWidth, targetHeight) {
+    const { width, height, data } = image;
+    let out = [];
+    let ty, tx, i, pixel, outch;
+    for (let y = 0; y < targetHeight; y++) {
+        ty = y / targetHeight * height | 0;
+        for (let x = 0; x < targetWidth; x++) {
+            tx = x / targetWidth * width | 0;
+            i = ty * width + tx;
+
+            pixel = {
+                r: data[i * 4 + 0],
+                g: data[i * 4 + 1],
+                b: data[i * 4 + 2],
+                a: data[i * 4 + 0]
+            };
+
+            outch = getOutch(pixel);
+            if (options.plain_formatting) {
+                out.push(outch);
+            }
+            else {
+                out.push(pixelToSGR(pixel, outch));
+            }
+        }
+        out.push('\n');
+    }
+    return out.join('');
+}
+
+module.exports = {
+    convert: convert,
+    setOptions(o) {
+        Object.assign(options, o);
+    },
+};

play.js

@@ -17,13 +17,12 @@ const { FPSCounter, MemCounter } = require('./counters');
  * 29 Oct 2016
  *
  * TODOs
- *  - optimize ascii conversion by pulling from canvas data (without png conversion)
  *  - backbuffer screen updates based on network latency?
  *  - try rendering to terminal using drawille / braille characters
  *  - make this runs with more examples! (preferably by automating most stuff)
  *  - add docopts to configure parameters (scale, renderers)
  *  - support webgl and software renderers
- *  - add key controls to adjust parameters inside the terminal
+ *  - add key controls to adjust parameters inside the terminal (scaling, screenshot, stats, ascii characters)
  *  - try ttystudio
  *  - profit? :D
  *
@@ -41,17 +40,18 @@ const { FPSCounter, MemCounter } = require('./counters');
  *    - Dom Polyfilling
  *    - TerminalRenderer
  *  - add nice fps graphs
+ *  - optimize ascii conversion by pulling from canvas data (without png conversion)
  *
  * Also see,
  *  https://threejs.org/examples/canvas_ascii_effect.html
  *  https://github.com/mrdoob/three.js/issues/7085
  *  https://github.com/mrdoob/three.js/issues/2182
  */
 
-let y_scale = 2;
-let rendering_scale = 0.15;
-width = 640 * rendering_scale;
-height = 480 * rendering_scale;
+let y_scale = 1.23; // pixel ratio of a single terminal character height / width
+let pixel_sampling = 1; // mulitplier of target pixels to actual canvas render size
+width = 100;
+height = y_scale * 50;
 
 // Create a screen object.
 const screen = blessed.screen({
@@ -73,7 +73,7 @@ const screen = blessed.screen({
 screen.title = 'Three.js Terminal';
 
 // placeholder for renderering
-const canvas = blessed.image({
+const canvas = blessed.box({ // box image
 	parent: screen,
 	top: 0,
 	left: 0,
@@ -133,6 +133,32 @@ screen.key(['escape', 'q', 'C-c'], function(ch, key) {
 	return process.exit(0);
 });
 
+mode = 0;
+
+screen.key(['m'], function(ch, key) {
+	mode = ++mode % 4;
+	let options = {};
+	switch (mode) {
+		case 0:
+			options.plain_formatting = true;
+			break;
+		case 1:
+			options.plain_formatting = false;
+			options.bg_formatting = true;
+			options.ascii_formatting = false;
+			break;
+		case 2:
+			options.bg_formatting = true;
+			options.ascii_formatting = true;
+			break;
+		case 3:
+			options.bg_formatting = false;
+			options.ascii_formatting = true;
+			break;
+	}
+	renderer.setAnsiOptions(options);
+});
+
 // Focus our element.
 canvas.focus();
 box.on('click', clearlog);
@@ -150,24 +176,28 @@ function init() {
 	controls.panSpeed *= 4;
 
 	renderer = new THREE.TerminalRenderer(canvas);
-	renderer.setClearColor( 0xf0f0f0 );
+	// renderer.setClearColor( 0xf0f0f0 );
+	renderer.setClearColor( 0xffffff );
 
 	function onResize(res) {
 		if (!res) {
-			resize(screen.width, screen.height * y_scale);
+			setSize(screen.width, screen.height * y_scale);
 			return;
 		}
-		log(`Resized ${screen.program.columns}, ${screen.program.rows}`);
+		screen.debug(`Resized ${screen.program.columns}, ${screen.program.rows}`);
 		const fontWidth = res.width / screen.width;
 		const fontHeight = res.height / screen.height;
 		y_scale = fontHeight / fontWidth;
-		log(`Estimated font size ${fontWidth.toFixed(3)}x${fontHeight.toFixed(3)}, ratio ${y_scale.toFixed(3)}`);
+		screen.debug(`Estimated font size ${fontWidth.toFixed(3)}x${fontHeight.toFixed(3)}, ratio ${y_scale.toFixed(3)}`);
+
+		const actual_screen_ratio = res.height / res.width;
 
-		width = res.width * rendering_scale | 0;
-		height = res.height * rendering_scale | 0;
-		log(`Rendering using ${width}x${height}px`);
+		// target pixels to render
+		width = screen.width;
+		height = screen.width * actual_screen_ratio;
+		screen.debug(`Rendering using ${width}x${height}px`);
 
-		resize(width, height);
+		setSize(width, height);
 	}
 
 	window.addEventListener('resize', onResize);
@@ -182,6 +212,8 @@ function render() {
 	sphere.rotation.x = start * 0.0003;
 	sphere.rotation.z = start * 0.0002;
 
+	scene.rotation.y += 0.005;
+
 	controls.update();
 
 	// Render
@@ -234,14 +266,14 @@ setInterval( () => {
 	);
 }, 1000);
 
-function resize(w, h) {
+function setSize(w, h) {
+	width = w * pixel_sampling | 0;
+	height = h * pixel_sampling | 0;
 	// screen.debug('resizing', w, h, screen.width, screen.height);
 	controls.handleResize();
-	width = w;
-	height = h;
-	camera.aspect = w / h;
+	camera.aspect = width / height;
 	camera.updateProjectionMatrix();
-	renderer.setSize(w, h);
+	renderer.setSize(width, height);
 }
 
 function saveCanvas() {

scene.js

@@ -1,3 +1,5 @@
+require('three/examples/js/geometries/TeapotBufferGeometry')
+
 const scene = new THREE.Scene();
 const light1 = new THREE.PointLight( 0xffffff );
 light1.position.set( 500, 500, 500 );
@@ -15,4 +17,7 @@ plane.position.y = - 200;
 plane.rotation.x = - Math.PI / 2;
 scene.add( plane );
 
+teapot = require('./teapot');
+// scene.add( teapot );
+
 module.exports = { scene };