position debug facility.

for noticing when things go off-screen.

js/pixl/public/trixl.html

@@ -9,6 +9,12 @@
			top: 0;
			left: 0;
		}
		#debug {
			position: absolute;
			bottom: 0;
			right: 0;
		}
	</style>
</head>
@@ -18,6 +24,7 @@
		temporal leap to a minimally brighter future where browsers can
		investigate the third dimension.
	</canvas>
	<span id="debug"></span>
	<script type="gl/vertex-shader">
		attribute vec3 pos;
		varying vec3 world_pos;
@@ -223,6 +230,20 @@
		trixl.window = {w: window.innerWidth, h: window.innerHeight};
		trixl.stage.width = trixl.window.w;
		trixl.stage.height = trixl.window.h;
		trixl.debug = document.querySelector("#debug");
		trixl.debug_pos = function(pos) {
			var coord_html = function(coord) {
				var s = (coord.toString() + "    ").slice(0, 6);
				if (coord < -1.0 || coord > 1.0) {
					return '<span style="color: red">' + s + '</span>';
				} else {
					return '<span>' + s + '</span>';
				}
				return s;
			}
			trixl.debug.innerHTML = coord_html(pos[0]) + ", " + coord_html(pos[1]) + ", " + coord_html(pos[2]);
		}
		var gl = trixl.gl = trixl.stage.getContext("webgl");
		//gl.enable(gl.CULL_FACE);
		gl.enable(gl.DEPTH_TEST);