three.js/examples/js/renderers/WebGLRenderer3.js

/**
 * @author mrdoob / http://mrdoob.com/
 *
 * parameters = {
 *   canvas: canvas,
 *   contextAttributes: {
 *     alpha: true,
 *     depth: true,
 *     stencil: false,
 *     antialias: true,
 *     premultipliedAlpha: true,
 *     preserveDrawingBuffer: false
 *   }
 * }
 *
 */

THREE.WebGLRenderer3 = function ( parameters ) {

	console.log( 'THREE.WebGLRenderer3', THREE.REVISION );

	parameters = parameters || {};

	var canvas = parameters.canvas !== undefined ? parameters.canvas : document.createElement( 'canvas' );

	var devicePixelRatio = parameters.devicePixelRatio !== undefined
				? parameters.devicePixelRatio
				: window.devicePixelRatio !== undefined
					? window.devicePixelRatio
					: 1;

	var gl;

	try {

		var attributes = parameters.contextAttributes || {}

		gl = canvas.getContext( 'webgl', attributes ) || canvas.getContext( 'experimental-webgl', attributes );

	} catch ( exception ) {

		console.error( exception );

	}

	var precision = 'highp';
	var extensions = {};

	if ( gl !== null ) {

		extensions.element_index_uint = gl.getExtension( 'OES_element_index_uint' );
		extensions.texture_float = gl.getExtension( 'OES_texture_float' );
		extensions.standard_derivatives = gl.getExtension( 'OES_standard_derivatives' );
		extensions.texture_filter_anisotropic = gl.getExtension( 'EXT_texture_filter_anisotropic' ) || gl.getExtension( 'MOZ_EXT_texture_filter_anisotropic' ) || gl.getExtension( 'WEBKIT_EXT_texture_filter_anisotropic' );
		extensions.compressed_texture_s3tc = gl.getExtension( 'WEBGL_compressed_texture_s3tc' ) || gl.getExtension( 'MOZ_WEBGL_compressed_texture_s3tc' ) || gl.getExtension( 'WEBKIT_WEBGL_compressed_texture_s3tc' );

		gl.clearColor( 0, 0, 0, 1 );
		gl.clearDepth( 1 );
		gl.clearStencil( 0 );

		gl.enable( gl.DEPTH_TEST );
		gl.depthFunc( gl.LEQUAL );

		gl.enable( gl.CULL_FACE );
		gl.frontFace( gl.CCW );
		gl.cullFace( gl.BACK );

		gl.enable( gl.BLEND );
		gl.blendEquation( gl.FUNC_ADD );
		gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );

		gl.clearColor( 0, 0, 0, 1 );

	}

	var clearColor = new THREE.Color( 0x000000 );
	var clearAlpha = 1;

	//

	var frustum = new THREE.Frustum();
	var normalMatrix = new THREE.Matrix3();
	var modelViewMatrix = new THREE.Matrix4();
	var modelViewProjectionMatrix = new THREE.Matrix4();

	// buffers

	var buffers = {};

	var getBuffer = function ( geometry ) {

		if ( buffers[ geometry.id ] !== undefined ) {

			return buffers[ geometry.id ];

		}

		var vertices = geometry.vertices;
		var faces = geometry.faces;

		//

		var positions = [];
		var addPosition = function ( position ) {

			positions.push( position.x, position.y, position.z );

		}

		var normals = [];
		var addNormal = function ( normal ) {

			normals.push( normal.x, normal.y, normal.z );

		}

		for ( var i = 0, l = faces.length; i < l; i ++ ) {

			var face = faces[ i ];
			var vertexNormals = face.vertexNormals.length > 0;

			addPosition( vertices[ face.a ] );
			addPosition( vertices[ face.b ] );
			addPosition( vertices[ face.c ] );

			if ( vertexNormals === true ) {

				addNormal( face.vertexNormals[ 0 ] );
				addNormal( face.vertexNormals[ 1 ] );
				addNormal( face.vertexNormals[ 2 ] );

			} else {

				addNormal( face.normal );
				addNormal( face.normal );
				addNormal( face.normal );

			}

			if ( face instanceof THREE.Face4 ) {

				addPosition( vertices[ face.a ] );
				addPosition( vertices[ face.c ] );
				addPosition( vertices[ face.d ] );

				if ( vertexNormals === true ) {

					addNormal( face.vertexNormals[ 0 ] );
					addNormal( face.vertexNormals[ 2 ] );
					addNormal( face.vertexNormals[ 3 ] );

				} else {

					addNormal( face.normal );
					addNormal( face.normal );
					addNormal( face.normal );

				}

			}

		}

		var buffer = {
			positions: gl.createBuffer(),
			normals: gl.createBuffer(),
			count: positions.length / 3
		};

		gl.bindBuffer( gl.ARRAY_BUFFER, buffer.positions );
		gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( positions ), gl.STATIC_DRAW );

		gl.bindBuffer( gl.ARRAY_BUFFER, buffer.normals );
		gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( normals ), gl.STATIC_DRAW );

		buffers[ geometry.id ] = buffer;

		return buffer;

	};

	// programs

	var programs = {};
	var programsCache = {};

	var getProgram = function ( material ) {

		if ( programs[ material.id ] !== undefined ) {

			return programs[ material.id ];

		}

		var vertexShader = [
			'precision ' + precision + ' float;',
			'attribute vec3 position;',
			'attribute vec3 normal;',
			'uniform mat4 modelViewMatrix;',
			'uniform mat3 normalMatrix;',
			'uniform mat4 projectionMatrix;',
			''
		].join( '\n' );

		var fragmentShader = [
			'precision ' + precision + ' float;',
			''
		].join( '\n' );

		if ( material instanceof THREE.ShaderMaterial ) {

			vertexShader += material.vertexShader;
			fragmentShader += material.fragmentShader;

		} else {

			vertexShader += [
				'void main() {',
				'	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
				'}'
			].join( '\n' );

			fragmentShader += [
				'void main() {',
				'	gl_FragColor = vec4(1,0,0,1);',
				'}'
			].join( '\n' );

		}

		var program;
		var code = vertexShader + fragmentShader;

		if ( programsCache[ code ] !== undefined ) {

			program = programsCache[ code ];
			programs[ material.id ] = program;

		} else {

			program = gl.createProgram();

			gl.attachShader( program, createShader( gl.VERTEX_SHADER, vertexShader ) );
			gl.attachShader( program, createShader( gl.FRAGMENT_SHADER, fragmentShader ) );
			gl.linkProgram( program );

			if ( gl.getProgramParameter( program, gl.LINK_STATUS ) === true ) {

				programsCache[ code ] = program;
				programs[ material.id ] = program;

			} else {

				console.error( 'VALIDATE_STATUS: ' + gl.getProgramParameter( program, gl.VALIDATE_STATUS ) );
				console.error( 'GL_ERROR: ' + gl.getError() );

				// fallback

				program = getProgram( new THREE.MeshBasicMaterial() );
				programs[ material.id ] = program;

			}

		}

		return program;

	};

	var createShader = function ( type, string ) {

		var shader = gl.createShader( type );

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

		if ( gl.getShaderParameter( shader, gl.COMPILE_STATUS ) === true ) {

			// console.log( string );

		} else {

			console.error( gl.getShaderInfoLog( shader ), string );
			return null;

		}

		return shader;

	};

	this.domElement = canvas;
	this.extensions = extensions;

	this.setClearColor = function ( color, alpha ) {

		clearColor.set( color );
		clearAlpha = alpha !== undefined ? alpha : 1;

		gl.clearColor( clearColor.r, clearColor.g, clearColor.b, clearAlpha );

	};

	this.setSize = function ( width, height, updateStyle ) {

		canvas.width = width;
		canvas.height = height;

		if ( devicePixelRatio !== 1 && updateStyle !== false ) {

			canvas.style.width = width + 'px';
			canvas.style.height = height + 'px';

		}

		gl.viewport( 0, 0, canvas.width, canvas.height );

	};

	this.clear = function ( color, depth, stencil ) {

		var bits = 0;

		if ( color === undefined || color ) bits |= gl.COLOR_BUFFER_BIT;
		if ( depth === undefined || depth ) bits |= gl.DEPTH_BUFFER_BIT;
		if ( stencil === undefined || stencil ) bits |= gl.STENCIL_BUFFER_BIT;

		gl.clear( bits );

	};

	var currentBuffer, currentMaterial, currentProgram;
	var locations = {};

	var renderObject = function ( object, camera ) {

		if ( object.visible === false ) return;

		if ( object instanceof THREE.Mesh && frustum.intersectsObject( object ) === true ) {

			var buffer = getBuffer( object.geometry );

			var material = object.material;

			if ( material !== currentMaterial ) {

				var program = getProgram( object.material );

				if ( program !== currentProgram ) {

					gl.useProgram( program );

					locations.modelViewMatrix = gl.getUniformLocation( program, 'modelViewMatrix' );
					locations.normalMatrix = gl.getUniformLocation( program, 'normalMatrix' );
					locations.projectionMatrix = gl.getUniformLocation( program, 'projectionMatrix' );

					locations.position = gl.getAttribLocation( program, 'position' );
					locations.normal = gl.getAttribLocation( program, 'normal' );

					gl.uniformMatrix4fv( locations.projectionMatrix, false, camera.projectionMatrix.elements );

					currentProgram = program;

				}

				if ( material instanceof THREE.ShaderMaterial ) {

					var uniforms = material.uniforms;

					for ( var uniform in uniforms ) {

						var location = gl.getUniformLocation( program, uniform );

						var type = uniforms[ uniform ].type;
						var value = uniforms[ uniform ].value;

						if ( type === "i" ) { // single integer

							gl.uniform1i( location, value );

						} else if ( type === "f" ) { // single float

							gl.uniform1f( location, value );

						} else if ( type === "v2" ) { // single THREE.Vector2

							gl.uniform2f( location, value.x, value.y );

						} else if ( type === "v3" ) { // single THREE.Vector3

							gl.uniform3f( location, value.x, value.y, value.z );

						} else if ( type === "v4" ) { // single THREE.Vector4

							gl.uniform4f( location, value.x, value.y, value.z, value.w );

						} else if ( type === "c" ) { // single THREE.Color

							gl.uniform3f( location, value.r, value.g, value.b );

						}

					}

				}

				currentMaterial = material;

			}

			if ( buffer !== currentBuffer ) {

				gl.bindBuffer( gl.ARRAY_BUFFER, buffer.positions );
				gl.enableVertexAttribArray( locations.position );
				gl.vertexAttribPointer( locations.position, 3, gl.FLOAT, false, 0, 0 );

				if ( locations.normal >= 0 ) {

					gl.bindBuffer( gl.ARRAY_BUFFER, buffer.normals );
					gl.enableVertexAttribArray( locations.normal );
					gl.vertexAttribPointer( locations.normal, 3, gl.FLOAT, false, 0, 0 );

				}

				currentBuffer = buffer;

			}

			modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
			normalMatrix.getNormalMatrix( modelViewMatrix );

			gl.uniformMatrix4fv( locations.modelViewMatrix, false, modelViewMatrix.elements );
			gl.uniformMatrix3fv( locations.normalMatrix, false, normalMatrix.elements );

			gl.drawArrays( gl.TRIANGLES, 0, buffer.count );

		}

		for ( var i = 0, l = object.children.length; i < l; i ++ ) {

			renderObject( object.children[ i ], camera );

		}

	};

	this.render = function ( scene, camera ) {

		if ( this.autoClear === true ) this.clear();

		scene.updateMatrixWorld();

		if ( camera.parent === undefined ) camera.updateMatrixWorld();

		camera.matrixWorldInverse.getInverse( camera.matrixWorld );

		modelViewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
		frustum.setFromMatrix( modelViewProjectionMatrix );

		currentBuffer = undefined;
		currentMaterial = undefined;
		currentProgram = undefined;

		renderObject( scene, camera );

	};

};