Merge branch 'dev' of git://github.com/mrdoob/three.js into dev_math_prng

editor/js/libs/ui.three.js

@@ -55,80 +55,71 @@ function UITexture( mapping ) {
 
 	function loadFile( file ) {
 
-		if ( file.type.match( 'image.*' ) ) {
+		var extension = file.name.split( '.' ).pop().toLowerCase()
+		var reader = new FileReader();
 
-			var reader = new FileReader();
+		if ( extension === 'hdr' ) {
 
-			if ( file.type === 'image/targa' ) {
-
-				reader.addEventListener( 'load', function ( event ) {
-
-					var canvas = new TGALoader().parse( event.target.result );
+			reader.addEventListener( 'load', function ( event ) {
 
-					var texture = new THREE.CanvasTexture( canvas, mapping );
-					texture.sourceFile = file.name;
+				// assuming RGBE/Radiance HDR iamge format
 
-					scope.setValue( texture );
+				var loader = new RGBELoader().setDataType( THREE.UnsignedByteType );
+				loader.load( event.target.result, function ( hdrTexture ) {
 
-					if ( scope.onChangeCallback ) scope.onChangeCallback( texture );
+					hdrTexture.sourceFile = file.name;
+					hdrTexture.isHDRTexture = true;
 
-				}, false );
+					scope.setValue( hdrTexture );
 
-				reader.readAsArrayBuffer( file );
+					if ( scope.onChangeCallback ) scope.onChangeCallback( hdrTexture );
 
-			} else {
+				} );
 
-				reader.addEventListener( 'load', function ( event ) {
+			} );
 
-					var image = document.createElement( 'img' );
-					image.addEventListener( 'load', function () {
+			reader.readAsDataURL( file );
 
-						var texture = new THREE.Texture( this, mapping );
-						texture.sourceFile = file.name;
-						texture.format = file.type === 'image/jpeg' ? THREE.RGBFormat : THREE.RGBAFormat;
-						texture.needsUpdate = true;
+		} else if ( extension === 'tga' ) {
 
-						scope.setValue( texture );
+			reader.addEventListener( 'load', function ( event ) {
 
-						if ( scope.onChangeCallback ) scope.onChangeCallback( texture );
+				var canvas = new TGALoader().parse( event.target.result );
 
-					}, false );
+				var texture = new THREE.CanvasTexture( canvas, mapping );
+				texture.sourceFile = file.name;
 
-					image.src = event.target.result;
+				scope.setValue( texture );
 
-				}, false );
+				if ( scope.onChangeCallback ) scope.onChangeCallback( texture );
 
-				reader.readAsDataURL( file );
+			}, false );
 
-			}
+			reader.readAsArrayBuffer( file );
 
-		} else {
+		} else if ( file.type.match( 'image.*' ) ) {
 
-			var reader = new FileReader();
 			reader.addEventListener( 'load', function ( event ) {
 
-				if ( file.name.split( '.' ).pop() === 'hdr' ) {
-
-					// assuming RGBE/Radiance HDR iamge format
-
-					var loader = new RGBELoader().setDataType( THREE.UnsignedByteType );
-					loader.load( event.target.result, function ( hdrTexture ) {
+				var image = document.createElement( 'img' );
+				image.addEventListener( 'load', function () {
 
-						hdrTexture.sourceFile = file.name;
-						hdrTexture.isHDRTexture = true;
+					var texture = new THREE.Texture( this, mapping );
+					texture.sourceFile = file.name;
+					texture.format = file.type === 'image/jpeg' ? THREE.RGBFormat : THREE.RGBAFormat;
+					texture.needsUpdate = true;
 
-						scope.setValue( hdrTexture );
+					scope.setValue( texture );
 
-						if ( scope.onChangeCallback ) scope.onChangeCallback( hdrTexture );
+					if ( scope.onChangeCallback ) scope.onChangeCallback( texture );
 
-					} );
+				}, false );
 
-				}
+				image.src = event.target.result;
 
-			} );
+			}, false );
 
 			reader.readAsDataURL( file );
-
 		}
 
 		form.reset();
@@ -157,6 +148,14 @@ UITexture.prototype.setValue = function ( texture ) {
 	var canvas = this.dom.children[ 0 ];
 	var context = canvas.getContext( '2d' );
 
+	// Seems like context can be null if the canvas is not visible
+	if ( context ) {
+
+		// Always clear the context before set new texture, because new texture may has transparency
+		context.clearRect( 0, 0, canvas.width, canvas.height );
+
+	}
+
 	if ( texture !== null ) {
 
 		var image = texture.image;
@@ -180,7 +179,6 @@ UITexture.prototype.setValue = function ( texture ) {
 		} else {
 
 			canvas.title = texture.sourceFile + ' (error)';
-			context.clearRect( 0, 0, canvas.width, canvas.height );
 
 		}
 
@@ -188,14 +186,6 @@ UITexture.prototype.setValue = function ( texture ) {
 
 		canvas.title = 'empty';
 
-		if ( context !== null ) {
-
-			// Seems like context can be null if the canvas is not visible
-
-			context.clearRect( 0, 0, canvas.width, canvas.height );
-
-		}
-
 	}
 
 	this.texture = texture;

src/renderers/WebGLRenderer.js

@@ -303,7 +303,7 @@ function WebGLRenderer( parameters ) {
 		morphtargets = new WebGLMorphtargets( _gl );
 		programCache = new WebGLPrograms( _this, extensions, capabilities, bindingStates );
 		materials = new WebGLMaterials( properties );
-		renderLists = new WebGLRenderLists();
+		renderLists = new WebGLRenderLists( properties );
 		renderStates = new WebGLRenderStates();
 
 		background = new WebGLBackground( _this, state, objects, _premultipliedAlpha );
@@ -652,8 +652,6 @@ function WebGLRenderer( parameters ) {
 
 		const programInfo = properties.get( material ).program;
 
-		material.program = undefined;
-
 		if ( programInfo !== undefined ) {
 
 			programCache.releaseProgram( programInfo );
@@ -1359,7 +1357,6 @@ function WebGLRenderer( parameters ) {
 			materialProperties.program = program;
 			materialProperties.uniforms = parameters.uniforms;
 			materialProperties.outputEncoding = parameters.outputEncoding;
-			material.program = program;
 
 		}
 

src/renderers/webgl/WebGLRenderLists.d.ts

@@ -5,6 +5,7 @@ import { Group } from './../../objects/Group';
 import { Scene } from './../../scenes/Scene';
 import { Camera } from './../../cameras/Camera';
 import { BufferGeometry } from '../../core/BufferGeometry';
+import { WebGLProperties } from './WebGLProperties';
 
 export interface RenderTarget {} // not defined in the code, used in LightShadow and WebGRenderer classes
 
@@ -22,6 +23,8 @@ export interface RenderItem {
 
 export class WebGLRenderList {
 
+	constructor( properties: WebGLProperties );
+
 	opaque: Array<RenderItem>;
 	transparent: Array<RenderItem>;
 	init(): void;
@@ -48,6 +51,8 @@ export class WebGLRenderList {
 
 export class WebGLRenderLists {
 
+	constructor( properties: WebGLProperties );
+
 	dispose(): void;
 	get( scene: Scene, camera: Camera ): WebGLRenderList;
 

src/renderers/webgl/WebGLRenderLists.js

@@ -55,7 +55,7 @@ function reversePainterSortStable( a, b ) {
 }
 
 
-function WebGLRenderList() {
+function WebGLRenderList( properties ) {
 
 	const renderItems = [];
 	let renderItemsIndex = 0;
@@ -77,6 +77,7 @@ function WebGLRenderList() {
 	function getNextRenderItem( object, geometry, material, groupOrder, z, group ) {
 
 		let renderItem = renderItems[ renderItemsIndex ];
+		const materialProperties = properties.get( material );
 
 		if ( renderItem === undefined ) {
 
@@ -85,7 +86,7 @@ function WebGLRenderList() {
 				object: object,
 				geometry: geometry,
 				material: material,
-				program: material.program || defaultProgram,
+				program: materialProperties.program || defaultProgram,
 				groupOrder: groupOrder,
 				renderOrder: object.renderOrder,
 				z: z,
@@ -100,7 +101,7 @@ function WebGLRenderList() {
 			renderItem.object = object;
 			renderItem.geometry = geometry;
 			renderItem.material = material;
-			renderItem.program = material.program || defaultProgram;
+			renderItem.program = materialProperties.program || defaultProgram;
 			renderItem.groupOrder = groupOrder;
 			renderItem.renderOrder = object.renderOrder;
 			renderItem.z = z;
@@ -173,7 +174,7 @@ function WebGLRenderList() {
 
 }
 
-function WebGLRenderLists() {
+function WebGLRenderLists( properties ) {
 
 	let lists = new WeakMap();
 
@@ -194,7 +195,7 @@ function WebGLRenderLists() {
 
 		if ( cameras === undefined ) {
 
-			list = new WebGLRenderList();
+			list = new WebGLRenderList( properties );
 			lists.set( scene, new WeakMap() );
 			lists.get( scene ).set( camera, list );
 
@@ -205,7 +206,7 @@ function WebGLRenderLists() {
 			list = cameras.get( camera );
 			if ( list === undefined ) {
 
-				list = new WebGLRenderList();
+				list = new WebGLRenderList( properties );
 				cameras.set( camera, list );
 
 			}

test/unit/src/renderers/webgl/WebGLRenderLists.tests.js

@@ -4,6 +4,7 @@
 /* global QUnit */
 
 import { WebGLRenderLists, WebGLRenderList } from '../../../../../src/renderers/webgl/WebGLRenderLists';
+import { WebGLProperties } from '../../../../../src/renderers/webgl/WebGLProperties';
 import { Camera } from '../../../../../src/cameras/Camera';
 import { Scene } from '../../../../../src/scenes/Scene';
 
@@ -16,7 +17,9 @@ export default QUnit.module( 'Renderers', () => {
 			// PUBLIC STUFF
 			QUnit.test( "get", ( assert ) => {
 
-				var renderLists = new WebGLRenderLists();
+				var properties = new WebGLProperties();
+
+				var renderLists = new WebGLRenderLists( properties );
 				var sceneA = new Scene();
 				var sceneB = new Scene();
 				var cameraA = new Camera();
@@ -26,8 +29,8 @@ export default QUnit.module( 'Renderers', () => {
 				var listAB = renderLists.get( sceneA, cameraB );
 				var listBA = renderLists.get( sceneB, cameraA );
 
-				assert.propEqual( listAA, new WebGLRenderList(), "listAA is type of WebGLRenderList." );
-				assert.propEqual( listAB, new WebGLRenderList(), "listAB is type of WebGLRenderList." );
+				assert.propEqual( listAA, new WebGLRenderList( properties ), "listAA is type of WebGLRenderList." );
+				assert.propEqual( listAB, new WebGLRenderList( properties ), "listAB is type of WebGLRenderList." );
 				assert.ok( listAA !== listAB, "Render lists for camera A and B with same scene are different." );
 				assert.ok( listAA !== listBA, "Render lists for scene A and B with same camera are different." );
 				assert.ok( listAA === renderLists.get( sceneA, cameraA ), "The same list is returned when called with the same scene, camera." );
@@ -36,13 +39,14 @@ export default QUnit.module( 'Renderers', () => {
 
 			QUnit.test( "dispose", ( assert ) => {
 
-				var renderLists = new WebGLRenderLists();
+				var properties = new WebGLProperties();
+				var renderLists = new WebGLRenderLists( properties );
 				var scene = new Scene();
 				var camera = new Camera();
 
 				var list1 = renderLists.get( scene, camera );
 
-				scene.dispose()
+				scene.dispose();
 
 				var list2 = renderLists.get( scene, camera );
 
@@ -57,7 +61,8 @@ export default QUnit.module( 'Renderers', () => {
 
 			QUnit.test( 'init', ( assert ) => {
 
-				var list = new WebGLRenderList();
+				var properties = new WebGLProperties();
+				var list = new WebGLRenderList( properties );
 
 				assert.ok( list.transparent.length === 0, 'Transparent list defaults to length 0.' );
 				assert.ok( list.opaque.length === 0, 'Opaque list defaults to length 0.' );
@@ -77,23 +82,38 @@ export default QUnit.module( 'Renderers', () => {
 
 			QUnit.test( 'push', ( assert ) => {
 
-				var list = new WebGLRenderList();
+				var properties = new WebGLProperties();
+
+				var list = new WebGLRenderList( properties );
 				var objA = { id: 'A', renderOrder: 0 };
-				var matA = { transparent: true, program: { id: 1 } };
+				var matA = { transparent: true };
+				var proA = { id: 1 };
 				var geoA = {};
 
 				var objB = { id: 'B', renderOrder: 0 };
-				var matB = { transparent: true, program: { id: 2 } };
+				var matB = { transparent: true };
+				var proB = { id: 2 };
 				var geoB = {};
 
 				var objC = { id: 'C', renderOrder: 0 };
-				var matC = { transparent: false, program: { id: 3 } };
+				var matC = { transparent: false };
+				var proC = { id: 3 };
 				var geoC = {};
 
 				var objD = { id: 'D', renderOrder: 0 };
-				var matD = { transparent: false, program: { id: 4 } };
+				var matD = { transparent: false };
+				var proD = { id: 4 };
 				var geoD = {};
 
+				var materialProperties = properties.get( matA );
+				materialProperties.program = proA;
+				materialProperties = properties.get( matB );
+				materialProperties.program = proB;
+				materialProperties = properties.get( matC );
+				materialProperties.program = proC;
+				materialProperties = properties.get( matD );
+				materialProperties.program = proD;
+
 				list.push( objA, geoA, matA, 0, 0.5, {} );
 				assert.ok( list.transparent.length === 1, 'Transparent list is length 1 after adding transparent item.' );
 				assert.ok( list.opaque.length === 0, 'Opaque list list is length 0 after adding transparent item.' );
@@ -104,7 +124,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objA,
 						geometry: geoA,
 						material: matA,
-						program: matA.program,
+						program: proA,
 						groupOrder: 0,
 						renderOrder: 0,
 						z: 0.5,
@@ -123,7 +143,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objB,
 						geometry: geoB,
 						material: matB,
-						program: matB.program,
+						program: proB,
 						groupOrder: 1,
 						renderOrder: 0,
 						z: 1.5,
@@ -142,7 +162,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objC,
 						geometry: geoC,
 						material: matC,
-						program: matC.program,
+						program: proC,
 						groupOrder: 2,
 						renderOrder: 0,
 						z: 2.5,
@@ -161,7 +181,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objD,
 						geometry: geoD,
 						material: matD,
-						program: matD.program,
+						program: proD,
 						groupOrder: 3,
 						renderOrder: 0,
 						z: 3.5,
@@ -174,23 +194,37 @@ export default QUnit.module( 'Renderers', () => {
 
 			QUnit.test( 'unshift', ( assert ) => {
 
-				var list = new WebGLRenderList();
+				var properties = new WebGLProperties();
+				var list = new WebGLRenderList( properties );
 				var objA = { id: 'A', renderOrder: 0 };
-				var matA = { transparent: true, program: { id: 1 } };
+				var matA = { transparent: true };
+				var proA = { id: 1 };
 				var geoA = {};
 
 				var objB = { id: 'B', renderOrder: 0 };
-				var matB = { transparent: true, program: { id: 2 } };
+				var matB = { transparent: true };
+				var proB = { id: 2 };
 				var geoB = {};
 
 				var objC = { id: 'C', renderOrder: 0 };
-				var matC = { transparent: false, program: { id: 3 } };
+				var matC = { transparent: false };
+				var proC = { id: 3 };
 				var geoC = {};
 
 				var objD = { id: 'D', renderOrder: 0 };
-				var matD = { transparent: false, program: { id: 4 } };
+				var matD = { transparent: false };
+				var proD = { id: 4 };
 				var geoD = {};
 
+				var materialProperties = properties.get( matA );
+				materialProperties.program = proA;
+				materialProperties = properties.get( matB );
+				materialProperties.program = proB;
+				materialProperties = properties.get( matC );
+				materialProperties.program = proC;
+				materialProperties = properties.get( matD );
+				materialProperties.program = proD;
+
 				list.unshift( objA, geoA, matA, 0, 0.5, {} );
 				assert.ok( list.transparent.length === 1, 'Transparent list is length 1 after adding transparent item.' );
 				assert.ok( list.opaque.length === 0, 'Opaque list list is length 0 after adding transparent item.' );
@@ -201,7 +235,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objA,
 						geometry: geoA,
 						material: matA,
-						program: matA.program,
+						program: proA,
 						groupOrder: 0,
 						renderOrder: 0,
 						z: 0.5,
@@ -220,7 +254,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objB,
 						geometry: geoB,
 						material: matB,
-						program: matB.program,
+						program: proB,
 						groupOrder: 1,
 						renderOrder: 0,
 						z: 1.5,
@@ -239,7 +273,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objC,
 						geometry: geoC,
 						material: matC,
-						program: matC.program,
+						program: proC,
 						groupOrder: 2,
 						renderOrder: 0,
 						z: 2.5,
@@ -258,7 +292,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objD,
 						geometry: geoD,
 						material: matD,
-						program: matD.program,
+						program: proD,
 						groupOrder: 3,
 						renderOrder: 0,
 						z: 3.5,
@@ -271,7 +305,8 @@ export default QUnit.module( 'Renderers', () => {
 
 			QUnit.test( 'sort', ( assert ) => {
 
-				var list = new WebGLRenderList();
+				var properties = new WebGLProperties();
+				var list = new WebGLRenderList( properties );
 				var items = [ { id: 4 }, { id: 5 }, { id: 2 }, { id: 3 } ];
 
 				items.forEach( item => {
@@ -299,7 +334,7 @@ export default QUnit.module( 'Renderers', () => {
 
 			// QUnit.test( 'finish', ( assert ) => {
 
-			// 	var list = new WebGLRenderList();
+			// 	var list = new WebGLRenderList( properties );
 			// 	var obj = { id: 'A', renderOrder: 0 };
 			// 	var mat = { transparent: false, program: { id: 0 } };
 			// 	var geom = {};