Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

merge dev

Lewy Blue 6 years ago
parent
1c66840124 344ff23af6
commit
6769fd8e73
4 changed files with 132 additions and 131 deletions
Unified View Show Diff Stats
  1. 48 8
      examples/js/loaders/XLoader.js
  2. 44 98
      examples/webgl_loader_texture_exr.html
  3. 30 19
      examples/webgl_tonemapping.html
  4. 10 6
      src/cameras/ArrayCamera.js

+ 48 - 8
examples/js/loaders/XLoader.js
View File 

@@ -216,7 +216,6 @@
 
 			this.manager = manager !== undefined ? manager : new THREE.DefaultLoadingManager();
 
 			this.manager = manager !== undefined ? manager : new THREE.DefaultLoadingManager();
 
 			this.texloader = new THREE.TextureLoader( this.manager );
 
 			this.texloader = new THREE.TextureLoader( this.manager );
 
 			this.url = "";
 
 			this.url = "";
 
-			this.baseDir = "";
 
 			this._putMatLength = 0;
 
 			this._putMatLength = 0;
 
 			this._nowMat = null;
 
 			this._nowMat = null;
 
 			this._nowFrameName = "";
 
 			this._nowFrameName = "";
 
@@ -238,6 +237,9 @@
 
 		}
 
 		}
 
 
 
 		createClass( XLoader, [ {
 
 		createClass( XLoader, [ {
 
+			key: 'crossOrigin',
 
+			value: 'anonymous'
 
+		}, {
 
 			key: '_setArgOption',
 
 			key: '_setArgOption',
 
 			value: function _setArgOption( _arg ) {
 
 			value: function _setArgOption( _arg ) {
 
 
 
@@ -277,6 +279,7 @@
 
 
 
 				this._setArgOption( _arg );
 
 				this._setArgOption( _arg );
 
 				var loader = new THREE.FileLoader( this.manager );
 
 				var loader = new THREE.FileLoader( this.manager );
 
+				loader.setPath( this.path );
 
 				loader.setResponseType( 'arraybuffer' );
 
 				loader.setResponseType( 'arraybuffer' );
 
 				loader.load( this.url, function ( response ) {
 
 				loader.load( this.url, function ( response ) {
 
 
 
@@ -284,6 +287,30 @@
 
 
 
 				}, onProgress, onError );
 
 				}, onProgress, onError );
 
 
 
+			}
 
+		}, {
 
+			key: 'setCrossOrigin',
 
+			value: function setCrossOrigin( value ) {
 
+
 
+				this.crossOrigin = value;
 
+				return this;
 
+
 
+			}
 
+		}, {
 
+			key: 'setPath',
 
+			value: function setPath( value ) {
 
+
 
+				this.path = value;
 
+				return this;
 
+
 
+			}
 
+		}, {
 
+			key: 'setResourcePath',
 
+			value: function setResourcePath( value ) {
 
+
 
+				this.resourcePath = value;
 
+				return this;
 
+
 
 			}
 
 			}
 
 		}, {
 
 		}, {
 
 			key: 'fromResponsedData',
 
 			key: 'fromResponsedData',
 
@@ -470,11 +497,24 @@
 
 			key: '_parseASCII',
 
 			key: '_parseASCII',
 
 			value: function _parseASCII() {
 
 			value: function _parseASCII() {
 
 
 
-				if ( this.url.lastIndexOf( "/" ) > 0 ) {
 
+				var path;
 
+
 
+				if ( this.resourcePath !== undefined ) {
 
+
 
+					path = this.resourcePath;
 
+
 
+				} else if ( this.path !== undefined ) {
 
 
 
-					this.baseDir = this.url.substr( 0, this.url.lastIndexOf( "/" ) + 1 );
 
+					path = this.path;
 
+
 
+				} else {
 
+
 
+					path = THREE.LoaderUtils.extractUrlBase( this.url );
 
 
 
 				}
 
 				}
 
+
 
+				this.texloader.setPath( path ).setCrossOrigin( this.crossOrigin );
 
+
 
 				var endRead = 16;
 
 				var endRead = 16;
 
 				this.Hierarchies.children = [];
 
 				this.Hierarchies.children = [];
 
 				this._hierarchieParse( this.Hierarchies, endRead );
 
 				this._hierarchieParse( this.Hierarchies, endRead );
 
@@ -1180,21 +1220,21 @@
 
 						switch ( localObject.type ) {
 
 						switch ( localObject.type ) {
 
 
 
 							case "TextureFilename":
 
 							case "TextureFilename":
 
-								_nowMat.map = this.texloader.load( this.baseDir + fileName );
 
+								_nowMat.map = this.texloader.load( fileName );
 
 								break;
 
 								break;
 
 							case "BumpMapFilename":
 
 							case "BumpMapFilename":
 
-								_nowMat.bumpMap = this.texloader.load( this.baseDir + fileName );
 
+								_nowMat.bumpMap = this.texloader.load( fileName );
 
 								_nowMat.bumpScale = 0.05;
 
 								_nowMat.bumpScale = 0.05;
 
 								break;
 
 								break;
 
 							case "NormalMapFilename":
 
 							case "NormalMapFilename":
 
-								_nowMat.normalMap = this.texloader.load( this.baseDir + fileName );
 
+								_nowMat.normalMap = this.texloader.load( fileName );
 
 								_nowMat.normalScale = new THREE.Vector2( 2, 2 );
 
 								_nowMat.normalScale = new THREE.Vector2( 2, 2 );
 
 								break;
 
 								break;
 
 							case "EmissiveMapFilename":
 
 							case "EmissiveMapFilename":
 
-								_nowMat.emissiveMap = this.texloader.load( this.baseDir + fileName );
 
+								_nowMat.emissiveMap = this.texloader.load( fileName );
 
 								break;
 
 								break;
 
 							case "LightMapFilename":
 
 							case "LightMapFilename":
 
-								_nowMat.lightMap = this.texloader.load( this.baseDir + fileName );
 
+								_nowMat.lightMap = this.texloader.load( fileName );
 
 								break;
 
 								break;
 
 
 
 						}
 
 						}

+ 44 - 98
examples/webgl_loader_texture_exr.html
View File 

@@ -31,7 +31,6 @@
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
-		<div id="container"></div>
 
 		<div id="info">
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl EXR texture loader example
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl EXR texture loader example
 
 		</div>
 
 		</div>
 
@@ -42,154 +41,101 @@
 
 		<script src="js/libs/dat.gui.min.js"></script>
 
 		<script src="js/libs/dat.gui.min.js"></script>
 
 
 
 		<script src="js/WebGL.js"></script>
 
 		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<!-- HDR fragment shader -->
 
-
 
-		<script id="fs-hdr" type="x-shader/x-fragment">
 
-
 
-			uniform sampler2D   tDiffuse;
 
-			uniform float       exposure;
 
-			uniform float       brightMax;
 
-
 
-			varying vec2  vUv;
 
-
 
-			void main()	{
 
-
 
-				vec4 color = texture2D( tDiffuse, vUv );
 
-
 
-				// Perform tone-mapping
 
-				float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);
 
-				float YD = exposure * (exposure / brightMax + 1.0) / (exposure + 1.0);
 
-				color *= YD;
 
-
 
-				gl_FragColor = vec4( color.xyz, 1.0 );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-		<!-- HDR vertex shader -->
 
-
 
-		<script id="vs-hdr" type="x-shader/x-vertex">
 
-
 
-			varying vec2 vUv;
 
-
 
-			void main()	{
 
-
 
-				vUv  = uv;
 
-				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
 
 
 		<script>
 
 		<script>
 
 
 
-			var params = {
 
-				exposure: 1.0,
 
-			};
 
-
 
 			if ( WEBGL.isWebGLAvailable() === false ) {
 
 			if ( WEBGL.isWebGLAvailable() === false ) {
 
 
 
 				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
 				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
 
 
 			}
 
 			}
 
 
 
-			var container, stats;
 
+			var params = {
 
+				exposure: 1.0
 
+			};
 
 
 
-			var camera, scene, renderer;
 
-			var materialHDR, quad;
 
+			var renderer, scene, camera;
 
 
 
 			init();
 
 			init();
 
 
 
 			function init() {
 
 			function init() {
 
 
 
-				container = document.getElementById( 'container' );
 
+				renderer = new THREE.WebGLRenderer();
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				document.body.appendChild( renderer.domElement );
 
+
 
+				renderer.toneMapping = THREE.ReinhardToneMapping;
 
+				renderer.toneMappingExposure = params.exposure;
 
 
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.z = 900;
 
+				renderer.gammaOutput = true;
 
 
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
 
 
-				var loader = new THREE.EXRLoader();
 
+				var aspect = window.innerWidth / window.innerHeight;
 
 
 
-				loader.load( "textures/piz_compressed.exr", function ( texture, textureData ) {
 
+				camera = new THREE.OrthographicCamera( - aspect, aspect, 1, - 1, 0, 1 );
 
 
 
-					console.log( textureData.header ); // exr header
 
+				new THREE.EXRLoader().load( 'textures/piz_compressed.exr', function ( texture, textureData ) {
 
 
 
-					texture.minFilter = THREE.NearestFilter;
 
-					texture.magFilter = THREE.NearestFilter;
 
+					//console.log( textureData );
 
+					//console.log( texture );
 
 
 
-					materialHDR = new THREE.ShaderMaterial( {
 
+					texture.generateMipmaps = true;
 
 
 
-						uniforms: {
 
-							tDiffuse: { value: texture },
 
-							exposure: { value: 1.0 },
 
-							brightMax: { value: 18.0 }
 
-						},
 
-						vertexShader: getText( 'vs-hdr' ),
 
-						fragmentShader: getText( 'fs-hdr' )
 
+					// these setting are currently set correctly by default
 
+					//texture.encoding = THREE.LinearEncoding;
 
+					//texture.minFilter = THREE.LinearMipMapLinearFilter;
 
+					//texture.magFilter = THREE.LinearFilter;
 
+					//texture.flipY = true;
 
 
 
-					} );
 
+					var material = new THREE.MeshBasicMaterial( { map: texture } );
 
 
 
-					quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( textureData.width, textureData.height ), materialHDR );
 
-					quad.position.z = - 100;
 
-					scene.add( quad );
 
-					animate();
 
+					var quad = new THREE.PlaneBufferGeometry( textureData.width / textureData.height, 1 );
 
 
 
-				} );
 
+					var mesh = new THREE.Mesh( quad, material );
 
 
 
-				renderer = new THREE.WebGLRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				renderer.gammaOutput = true;
 
-				container.appendChild( renderer.domElement );
 
+					scene.add( mesh );
 
 
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
+					render();
 
 
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
+				} );
 
+
 
+				//
 
 
 
 				var gui = new dat.GUI();
 
 				var gui = new dat.GUI();
 
 
 
-				gui.add( params, 'exposure', 0.1, 5 );
 
+				gui.add( params, 'exposure', 0, 2 ).onChange( render );
 
 				gui.open();
 
 				gui.open();
 
 
 
-			}
 
-
 
+				//
 
 
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
 
 			}
 
 			}
 
 
 
-			function getText( id ) {
 
+			function onWindowResize() {
 
 
 
-				return document.getElementById( id ).textContent;
 
+				var aspect = window.innerWidth / window.innerHeight;
 
 
 
-			}
 
+				var frustumHeight = camera.top - camera.bottom;
 
 
 
-			//
 
+				camera.left = - frustumHeight * aspect / 2;
 
+				camera.right = frustumHeight * aspect / 2;
 
 
 
-			function animate() {
 
+				camera.updateProjectionMatrix();
 
 
 
-				requestAnimationFrame( animate );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				render();
 
 				render();
 
-				stats.update();
 
 
 
 			}
 
 			}
 
 
 
+			//
 
+
 
 			function render() {
 
 			function render() {
 
 
 
-				materialHDR.uniforms.exposure.value = params.exposure;
 
+				renderer.toneMappingExposure = params.exposure;
 
 
 
 				renderer.render( scene, camera );
 
 				renderer.render( scene, camera );

+ 30 - 19
examples/webgl_tonemapping.html
View File 

@@ -76,7 +76,11 @@
 
 				Cineon: THREE.CineonToneMapping
 
 				Cineon: THREE.CineonToneMapping
 
 			};
 
 			};
 
 
 
+<<<<<<< HEAD
 
 			var camera, scene, renderer, group;
 
 			var camera, scene, renderer, group;
 
+=======
 
+			var camera, scene, renderer, controls, mesh;
 
+>>>>>>> dev
 
 			var composer;
 
 			var composer;
 
 			var standardMaterial, floorMaterial;
 
 			var standardMaterial, floorMaterial;
 
 
 
@@ -105,28 +109,46 @@
 
 				} );
 
 				} );
 
 
 
 				var textureLoader = new THREE.TextureLoader();
 
 				var textureLoader = new THREE.TextureLoader();
 
+<<<<<<< HEAD
 
 				textureLoader.load( "textures/brick_diffuse.jpg", function ( map ) {
 
 				textureLoader.load( "textures/brick_diffuse.jpg", function ( map ) {
 
 
 
+=======
 
+
 
+				textureLoader.load( "textures/brick_diffuse.jpg", function( map ) {
 
+>>>>>>> dev
 
 					map.wrapS = THREE.RepeatWrapping;
 
 					map.wrapS = THREE.RepeatWrapping;
 
 					map.wrapT = THREE.RepeatWrapping;
 
 					map.wrapT = THREE.RepeatWrapping;
 
+					map.encoding = THREE.sRGBEncoding;
 
 					map.anisotropy = 4;
 
 					map.anisotropy = 4;
 
 					map.repeat.set( 9, 0.5 );
 
 					map.repeat.set( 9, 0.5 );
 
 					standardMaterial.map = map;
 
 					standardMaterial.map = map;
 
 					standardMaterial.needsUpdate = true;
 
 					standardMaterial.needsUpdate = true;
 
+<<<<<<< HEAD
 
 
 
 	} );
 
 	} );
 
 				textureLoader.load( "textures/brick_bump.jpg", function ( map ) {
 
 				textureLoader.load( "textures/brick_bump.jpg", function ( map ) {
 
 
 
+=======
 
+				} );
 
+
 
+				textureLoader.load( "textures/brick_bump.jpg", function( map ) {
 
+>>>>>>> dev
 
 					map.wrapS = THREE.RepeatWrapping;
 
 					map.wrapS = THREE.RepeatWrapping;
 
 					map.wrapT = THREE.RepeatWrapping;
 
 					map.wrapT = THREE.RepeatWrapping;
 
 					map.anisotropy = 4;
 
 					map.anisotropy = 4;
 
 					map.repeat.set( 9, 0.5 );
 
 					map.repeat.set( 9, 0.5 );
 
 					standardMaterial.bumpMap = map;
 
 					standardMaterial.bumpMap = map;
 
 					standardMaterial.needsUpdate = true;
 
 					standardMaterial.needsUpdate = true;
 
+<<<<<<< HEAD
 
 
 
 	} );
 
 	} );
 
 				textureLoader.load( "textures/brick_roughness.jpg", function ( map ) {
 
 				textureLoader.load( "textures/brick_roughness.jpg", function ( map ) {
 
 
 
+=======
 
+				} );
 
+
 
+				textureLoader.load( "textures/brick_roughness.jpg", function( map ) {
 
+>>>>>>> dev
 
 					map.wrapS = THREE.RepeatWrapping;
 
 					map.wrapS = THREE.RepeatWrapping;
 
 					map.wrapT = THREE.RepeatWrapping;
 
 					map.wrapT = THREE.RepeatWrapping;
 
 					map.anisotropy = 4;
 
 					map.anisotropy = 4;
 
@@ -136,14 +158,11 @@
 
 
 
 	} );
 
 	} );
 
 
 
-				group = new THREE.Group();
 
-				scene.add( group );
 
-
 
 				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
 
 				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
 
-				var mesh = new THREE.Mesh( geometry, standardMaterial );
 
+				mesh = new THREE.Mesh( geometry, standardMaterial );
 
 				mesh.castShadow = true;
 
 				mesh.castShadow = true;
 
 				mesh.receiveShadow = true;
 
 				mesh.receiveShadow = true;
 
-				group.add( mesh );
 
+				scene.add( mesh );
 
 
 
 				floorMaterial = new THREE.MeshStandardMaterial( {
 
 				floorMaterial = new THREE.MeshStandardMaterial( {
 
 					map: null,
 
 					map: null,
 
@@ -155,11 +174,11 @@
 
 				} );
 
 				} );
 
 
 
 				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
 
 				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
 
-				var mesh = new THREE.Mesh( geometry, floorMaterial );
 
-				mesh.position.y = 50;
 
-				mesh.rotation.x = - Math.PI * 0.5;
 
-				mesh.receiveShadow = true;
 
-				scene.add( mesh );
 
+				var floor = new THREE.Mesh( geometry, floorMaterial );
 
+				floor.position.y = 50;
 
+				floor.rotation.x = - Math.PI * 0.5;
 
+				floor.receiveShadow = true;
 
+				scene.add( floor );
 
 
 
 				// Materials
 
 				// Materials
 
 				var hdrpath = "textures/cube/pisaHDR/";
 
 				var hdrpath = "textures/cube/pisaHDR/";
 
@@ -205,7 +224,6 @@
 
 				renderer.shadowMap.enabled = true;
 
 				renderer.shadowMap.enabled = true;
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
-				renderer.gammaInput = true;
 
 				renderer.gammaOutput = true;
 
 				renderer.gammaOutput = true;
 
 
 
 				composer = new THREE.EffectComposer( renderer );
 
 				composer = new THREE.EffectComposer( renderer );
 
@@ -278,14 +296,7 @@
 
 				renderer.toneMappingExposure = params.exposure;
 
 				renderer.toneMappingExposure = params.exposure;
 
 				renderer.toneMappingWhitePoint = params.whitePoint;
 
 				renderer.toneMappingWhitePoint = params.whitePoint;
 
 
 
-				camera.lookAt( scene.position );
 
-
 
-				for ( var i = 0, l = group.children.length; i < l; i ++ ) {
 
-
 
-					var object = group.children[ i ];
 
-					object.rotation.y += 0.005;
 
-
 
-				}
 
+				mesh.rotation.y += 0.005;
 
 
 
 				if ( params.renderMode === "Composer" ) {
 
 				if ( params.renderMode === "Composer" ) {

+ 10 - 6
src/cameras/ArrayCamera.js
View File 

@@ -25,10 +25,12 @@ ArrayCamera.prototype = Object.assign( Object.create( PerspectiveCamera.prototyp
 
 	 * And that near and far planes are identical for both cameras.
 
 	 * And that near and far planes are identical for both cameras.
 
 	 */
 
 	 */
 
 	setProjectionFromUnion: function () {
 
 	setProjectionFromUnion: function () {
 
+
 
 		var cameraLPos = new Vector3();
 
 		var cameraLPos = new Vector3();
 
 		var cameraRPos = new Vector3();
 
 		var cameraRPos = new Vector3();
 
 
 
 		return function () {
 
 		return function () {
 
+
 
 			cameraLPos.setFromMatrixPosition( this.cameras[ 0 ].matrixWorld );
 
 			cameraLPos.setFromMatrixPosition( this.cameras[ 0 ].matrixWorld );
 
 			cameraRPos.setFromMatrixPosition( this.cameras[ 1 ].matrixWorld );
 
 			cameraRPos.setFromMatrixPosition( this.cameras[ 1 ].matrixWorld );
 
 
 
@@ -54,15 +56,15 @@ ArrayCamera.prototype = Object.assign( Object.create( PerspectiveCamera.prototyp
 
 
 
 			// Calculate the new camera's position offset from the
 
 			// Calculate the new camera's position offset from the
 
 			// left camera.
 
 			// left camera.
 
-			var zOffset = ipd / (leftFovL + rightFovR);
 
+			var zOffset = ipd / ( leftFovL + rightFovR );
 
 			var xOffset = zOffset * leftFovL;
 
 			var xOffset = zOffset * leftFovL;
 
 
 
 			// TODO: Better way to apply this offset?
 
 			// TODO: Better way to apply this offset?
 
 			this.cameras[ 0 ].matrixWorld.decompose( this.position, this.quaternion, this.scale );
 
 			this.cameras[ 0 ].matrixWorld.decompose( this.position, this.quaternion, this.scale );
 
-			this.translateX(xOffset);
 
-			this.translateZ(-zOffset);
 
+			this.translateX( xOffset );
 
+			this.translateZ( - zOffset );
 
 			this.matrixWorld.compose( this.position, this.quaternion, this.scale );
 
 			this.matrixWorld.compose( this.position, this.quaternion, this.scale );
 
-			this.matrixWorldInverse.getInverse(this.matrixWorld);
 
+			this.matrixWorldInverse.getInverse( this.matrixWorld );
 
 
 
 			// Find the union of the frustum values of the cameras and scale
 
 			// Find the union of the frustum values of the cameras and scale
 
 			// the values so that the near plane's position does not change in world space,
 
 			// the values so that the near plane's position does not change in world space,
 
@@ -70,12 +72,14 @@ ArrayCamera.prototype = Object.assign( Object.create( PerspectiveCamera.prototyp
 
 			var near2 = near + zOffset;
 
 			var near2 = near + zOffset;
 
 			var far2 = far + zOffset;
 
 			var far2 = far + zOffset;
 
 			var left = leftL - xOffset;
 
 			var left = leftL - xOffset;
 
-			var right = rightR + (ipd - xOffset)
 
+			var right = rightR + ( ipd - xOffset );
 
 			var top = Math.max( topL, topR );
 
 			var top = Math.max( topL, topR );
 
 			var bottom = Math.min( bottomL, bottomR );
 
 			var bottom = Math.min( bottomL, bottomR );
 
 
 
 			this.projectionMatrix.makePerspective( left, right, top, bottom, near2, far2 );
 
 			this.projectionMatrix.makePerspective( left, right, top, bottom, near2, far2 );
 
-		}
 
+
 
+		};
 
+
 
 	}(),
 
 	}(),
 
 
 
 } );
 
 } );