WebGLLowLevelRenderer-Test.js

WebGLLowLevelRenderer-Test.js

var gl;
function initGL(canvas) {
	try {
		gl = WebGLDebugUtils.makeDebugContext( canvas.getContext("webgl"), undefined,
		 function(functionName, arguments) {
		 	console.log( "  [webgl] " + functionName.toString() + "( ", arguments, " )" );
		 } );
		gl.viewportWidth = canvas.width;
		gl.viewportHeight = canvas.height;
	}
	catch (e) {
	}
	if (!gl) {
		throw new Error( "Could not initialise WebGL context" );
	}
};


var vertexShaderSource =
	"attribute vec3 position;" +
	"attribute vec3 normal;" +

	"uniform mat4 modelViewMatrix;" +
	"uniform mat4 projectionMatrix;" +
	"uniform mat3 normalMatrix;" +

	"varying vec3 vNormal;" +


	"void main(void) {" +

	"   vNormal = normalize( normalMatrix * normal );" +
	"	gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);" +

	"}";

var fragmentShaderSource = 
	"precision mediump float;" +

	"varying vec3 vNormal;" + 

    "void main(void) {" +

    "	gl_FragColor = vec4( 0.5 * normalize( vNormal ), 1.0);" +

    "}";

// shaderType is either: gl.FRAGMENT_SHADER or gl.VERTEX_SHADER
function createShader( shaderSource, shaderType ) {

    var shader = gl.createShader( shaderType );

    gl.shaderSource( shader, shaderSource );
    gl.compileShader( shader );

    if ( ! gl.getShaderParameter( shader, gl.COMPILE_STATUS ) ) {
        throw new Error( "Can not compile shader: " + gl.getShaderInfoLog(shader) );
    }

    return shader;

}

function createBasicProgram() {
	
	var vertexShader = createShader( vertexShaderSource, gl.VERTEX_SHADER );	
	var fragmentShader = createShader( fragmentShaderSource, gl.FRAGMENT_SHADER );

	var glProgram = gl.createProgram();
	gl.attachShader(glProgram, vertexShader);
	gl.attachShader(glProgram, fragmentShader);
	
	gl.linkProgram(glProgram);
	if ( ! gl.getProgramParameter( glProgram, gl.LINK_STATUS ) ) {
         throw new Error( "Can not link program." );
	}

	return new THREE.Program( glProgram,
		THREE.LibraryUtils.resolveDescriptors( THREE.UniformLibrary, [ 'modelViewMatrix', 'projectionMatrix', 'normalMatrix' ] ),
		THREE.LibraryUtils.resolveDescriptors( THREE.AttributeLibrary, [ 'position', 'normal' ] ),
		true );
}

function webGLInit() {
	var canvas = document.getElementById("gl-canvas-1");
	initGL(canvas);
	
}

function webGLRender() {

	THREE.LibraryUtils.initSharedLibraries( gl );

	var camera = new THREE.PerspectiveCamera( 60, 1, 0.1, 10000 );
	camera.position.z = 10;

	var scene = new THREE.Scene();

	var light = new THREE.DirectionalLight( 0xffffff );
	light.position.set( 0, 0, 1 );

	scene.add( light );

	var geometry  = new THREE.IcosahedronGeometry( 10, 1 );
	var material = new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } );
	var mesh = new THREE.Mesh( geometry, material );
	mesh.position.set( 0, 0, -20 );

	scene.add( mesh );
				
	camera.lookAt( scene.position );

	var program = createBasicProgram();

	gl.clearColor(0.4, 0.0, 0.0, 1.0);
	gl.enable(gl.DEPTH_TEST);
	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

	var sceneUpdater = new THREE.SceneUpdater();
	sceneUpdater.update( scene, camera );

    var cameraUniformValues = getRenderData( camera ).uniformValues;
	var lightUniformValues = getRenderData( scene ).uniformValues;
	var batchItems = [];
	THREE.SceneTraversalInOrder( scene, function( node ) {

		if( node instanceof THREE.Mesh ) {

			var renderData = getRenderData( node );

			var batchItem = new THREE.BatchItem();
			batchItem.primitiveType = gl.TRIANGLES;
			batchItem.program = program;
			batchItem.localUniformValues = renderData.uniformValues;
			batchItem.attributeValues = renderData.attributeValues;

			batchItems.push( batchItem );				

		}

	});

	var renderer = new THREE.SimpleRenderer();
	renderer.render( batchItems, cameraUniformValues );

}