Canvas and WebGL Line Width Compared

by Theo Armour

HTML

<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/controls/TrackballControls.js"></script>

JavaScript

var lines, rendererCanvas, rendererWebGL, scene, camera, controlsC, controlsW;

	init();
	animate();

	function init() {
	    var geometry, material;

	    document.body.style.cssText = ' font: 600 12pt monospace; margin: 0; overflow: hidden; ';

	    var info = document.body.appendChild(document.createElement('div'));
	    info.style.cssText = 'left: 0; margin: auto; position: absolute; right:0; width: 800px; ';

	    info.innerHTML = info.txt =
	        '<h1 style=margin:0; >Canvas and WebGL Line Width Compared</h1>' +
	        'Line Width <input id=inpWidth type=range min=1 max=20 step=1 value=5 ></input> ~ ' +
	        'Use pointing device to pan, zoom and rotate';

	    inpWidth.title = "Slide to widen lines. Do you notice any differences between the two panels?";
	    inpWidth.onchange = function () {
	        drawIt(inpWidth.value);
	    };

	    rendererCanvas = new THREE.CanvasRenderer();
	    rendererCanvas.setClearColor(0xffffff);
	    rendererCanvas.setSize(0.45 * window.innerWidth, window.innerHeight - 100);
	    document.body.appendChild(rendererCanvas.domElement);
	    rendererCanvas.domElement.style.cssText = 'border: 1px solid #000000; left: 2%; position: absolute; top: 80px; width: 45%;';

	    rendererWebGL = new THREE.WebGLRenderer({
	        alpha: 1,
	        antialias: true,
	        clearColor: 0xffffff
	    });
	    rendererWebGL.setSize(0.45 * window.innerWidth, window.innerHeight - 100);
	    document.body.appendChild(rendererWebGL.domElement);
	    rendererWebGL.domElement.style.cssText = 'border: 1px solid #000000; right: 2%; position: absolute; top: 80px; width: 45%;';

	    scene = new THREE.Scene();

	    camera = new THREE.PerspectiveCamera(40, 0.4 * window.innerWidth / (window.innerHeight - 100), 1, 1000);
	    camera.position.set(8, 8, 8);
	    controlsC = new THREE.TrackballControls(camera, rendererCanvas.domElement);
	    controlsW = new THREE.TrackballControls(camera, rendererWebGL.domElement);

	    drawIt(5);

	   ...