Editor: Added renderer selector.

WebGLRenderer needs some internal refactoring.

editor/index.html

@@ -82,6 +82,8 @@
 		<script src="../examples/js/exporters/GeometryExporter.js"></script>
 		<script src="../examples/js/exporters/SceneExporter.js"></script>
 		<script src="../examples/js/exporters/OBJExporter.js"></script>
+		<script src="../examples/js/renderers/SoftwareRenderer.js"></script>
+		<script src="../examples/js/renderers/SVGRenderer.js"></script>
 
 		<script src="../examples/js/loaders/SceneLoader2.js"></script>
 		<script src="../examples/js/exporters/SceneExporter2.js"></script>
@@ -123,6 +125,7 @@
 
 				// notifications
 
+				rendererChanged: new SIGNALS.Signal(),
 				sceneAdded: new SIGNALS.Signal(),
 				sceneChanged: new SIGNALS.Signal(),
 				objectAdded: new SIGNALS.Signal(),

editor/js/ui/Sidebar.Renderer.js

 Sidebar.Renderer = function ( signals ) {
 
+	var rendererClasses = {
+
+		'CanvasRenderer': THREE.CanvasRenderer,
+		'SoftwareRenderer': THREE.SoftwareRenderer,
+		'SVGRenderer': THREE.SVGRenderer,
+		'WebGLRenderer': THREE.WebGLRenderer
+
+	};
+
 	var container = new UI.Panel();
 	container.setPadding( '10px' );
 	container.setBorderTop( '1px solid #ccc' );
@@ -7,6 +16,23 @@ Sidebar.Renderer = function ( signals ) {
 	container.add( new UI.Text().setValue( 'RENDERER' ).setColor( '#666' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
+	// class
+
+	var rendererClassRow = new UI.Panel();
+	var rendererClass = new UI.Select( 'absolute' ).setOptions( {
+
+		'WebGLRenderer': 'WebGLRenderer',
+		'CanvasRenderer': 'CanvasRenderer',
+		'SoftwareRenderer': 'SoftwareRenderer',
+		'SVGRenderer': 'SVGRenderer',
+
+	} ).setLeft( '100px' ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( updateRenderer );
+
+	rendererClassRow.add( new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
+	rendererClassRow.add( rendererClass );
+
+	container.add( rendererClassRow );
+
 	// clear color
 
 	var clearColorRow = new UI.Panel();
@@ -17,6 +43,20 @@ Sidebar.Renderer = function ( signals ) {
 
 	container.add( clearColorRow );
 
+	//
+
+	function updateRenderer() {
+
+		var renderer = new rendererClasses[ rendererClass.getValue() ]( {
+				antialias: true,
+				alpha: false,
+				clearColor: clearColor.getHexValue(),
+				clearAlpha: 1
+		} );
+		signals.rendererChanged.dispatch( renderer );
+
+	}
+
 	function updateClearColor() {
 
 		signals.clearColorChanged.dispatch( clearColor.getHexValue() );

editor/js/ui/Viewport.js

@@ -346,6 +346,21 @@ var Viewport = function ( signals ) {
 
 	// signals
 
+	signals.rendererChanged.add( function ( object ) {
+
+		container.dom.removeChild( renderer.domElement );
+
+		renderer = object;
+		renderer.autoClear = false;
+		renderer.autoUpdateScene = false;
+		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
+
+		container.dom.appendChild( renderer.domElement );
+
+		render();
+
+	} );
+
 	signals.objectAdded.add( function ( object ) {
 
 		object.traverse( handleAddition );