6 years ago · f2ddfc7fc5
--- a/examples/files.js
+++ b/examples/files.js
@@ -154,6 +154,7 @@ var files = {
 
															 		"webgl_materials_cubemap_balls_refraction",
														
 
															 		"webgl_materials_cubemap_dynamic",
														
 
															 		"webgl_materials_cubemap_refraction",
														
 
															+		"webgl_materials_cubemap_mipmaps",
														
 
															 		"webgl_materials_curvature",
														
 
															 		"webgl_materials_displacementmap",
														
 
															 		"webgl_materials_envmaps",
														
--- a/examples/textures/cube/angus/cube_m00_c00.jpg
+++ b/examples/textures/cube/angus/cube_m00_c00.jpg
--- a/examples/textures/cube/angus/cube_m00_c01.jpg
+++ b/examples/textures/cube/angus/cube_m00_c01.jpg
--- a/examples/textures/cube/angus/cube_m00_c02.jpg
+++ b/examples/textures/cube/angus/cube_m00_c02.jpg
--- a/examples/textures/cube/angus/cube_m00_c03.jpg
+++ b/examples/textures/cube/angus/cube_m00_c03.jpg
--- a/examples/textures/cube/angus/cube_m00_c04.jpg
+++ b/examples/textures/cube/angus/cube_m00_c04.jpg
--- a/examples/textures/cube/angus/cube_m00_c05.jpg
+++ b/examples/textures/cube/angus/cube_m00_c05.jpg
--- a/examples/textures/cube/angus/cube_m01_c00.jpg
+++ b/examples/textures/cube/angus/cube_m01_c00.jpg
--- a/examples/textures/cube/angus/cube_m01_c01.jpg
+++ b/examples/textures/cube/angus/cube_m01_c01.jpg
--- a/examples/textures/cube/angus/cube_m01_c02.jpg
+++ b/examples/textures/cube/angus/cube_m01_c02.jpg
--- a/examples/textures/cube/angus/cube_m01_c03.jpg
+++ b/examples/textures/cube/angus/cube_m01_c03.jpg
--- a/examples/textures/cube/angus/cube_m01_c04.jpg
+++ b/examples/textures/cube/angus/cube_m01_c04.jpg
--- a/examples/textures/cube/angus/cube_m01_c05.jpg
+++ b/examples/textures/cube/angus/cube_m01_c05.jpg
--- a/examples/textures/cube/angus/cube_m02_c00.jpg
+++ b/examples/textures/cube/angus/cube_m02_c00.jpg
--- a/examples/textures/cube/angus/cube_m02_c01.jpg
+++ b/examples/textures/cube/angus/cube_m02_c01.jpg
--- a/examples/textures/cube/angus/cube_m02_c02.jpg
+++ b/examples/textures/cube/angus/cube_m02_c02.jpg
--- a/examples/textures/cube/angus/cube_m02_c03.jpg
+++ b/examples/textures/cube/angus/cube_m02_c03.jpg
--- a/examples/textures/cube/angus/cube_m02_c04.jpg
+++ b/examples/textures/cube/angus/cube_m02_c04.jpg
--- a/examples/textures/cube/angus/cube_m02_c05.jpg
+++ b/examples/textures/cube/angus/cube_m02_c05.jpg
--- a/examples/textures/cube/angus/cube_m03_c00.jpg
+++ b/examples/textures/cube/angus/cube_m03_c00.jpg
--- a/examples/textures/cube/angus/cube_m03_c01.jpg
+++ b/examples/textures/cube/angus/cube_m03_c01.jpg
--- a/examples/textures/cube/angus/cube_m03_c02.jpg
+++ b/examples/textures/cube/angus/cube_m03_c02.jpg
--- a/examples/textures/cube/angus/cube_m03_c03.jpg
+++ b/examples/textures/cube/angus/cube_m03_c03.jpg
--- a/examples/textures/cube/angus/cube_m03_c04.jpg
+++ b/examples/textures/cube/angus/cube_m03_c04.jpg
--- a/examples/textures/cube/angus/cube_m03_c05.jpg
+++ b/examples/textures/cube/angus/cube_m03_c05.jpg
--- a/examples/textures/cube/angus/cube_m04_c00.jpg
+++ b/examples/textures/cube/angus/cube_m04_c00.jpg
--- a/examples/textures/cube/angus/cube_m04_c01.jpg
+++ b/examples/textures/cube/angus/cube_m04_c01.jpg
--- a/examples/textures/cube/angus/cube_m04_c02.jpg
+++ b/examples/textures/cube/angus/cube_m04_c02.jpg
--- a/examples/textures/cube/angus/cube_m04_c03.jpg
+++ b/examples/textures/cube/angus/cube_m04_c03.jpg
--- a/examples/textures/cube/angus/cube_m04_c04.jpg
+++ b/examples/textures/cube/angus/cube_m04_c04.jpg
--- a/examples/textures/cube/angus/cube_m04_c05.jpg
+++ b/examples/textures/cube/angus/cube_m04_c05.jpg
--- a/examples/textures/cube/angus/cube_m05_c00.jpg
+++ b/examples/textures/cube/angus/cube_m05_c00.jpg
--- a/examples/textures/cube/angus/cube_m05_c01.jpg
+++ b/examples/textures/cube/angus/cube_m05_c01.jpg
--- a/examples/textures/cube/angus/cube_m05_c02.jpg
+++ b/examples/textures/cube/angus/cube_m05_c02.jpg
--- a/examples/textures/cube/angus/cube_m05_c03.jpg
+++ b/examples/textures/cube/angus/cube_m05_c03.jpg
--- a/examples/textures/cube/angus/cube_m05_c04.jpg
+++ b/examples/textures/cube/angus/cube_m05_c04.jpg
--- a/examples/textures/cube/angus/cube_m05_c05.jpg
+++ b/examples/textures/cube/angus/cube_m05_c05.jpg
--- a/examples/textures/cube/angus/cube_m06_c00.jpg
+++ b/examples/textures/cube/angus/cube_m06_c00.jpg
--- a/examples/textures/cube/angus/cube_m06_c01.jpg
+++ b/examples/textures/cube/angus/cube_m06_c01.jpg
--- a/examples/textures/cube/angus/cube_m06_c02.jpg
+++ b/examples/textures/cube/angus/cube_m06_c02.jpg
--- a/examples/textures/cube/angus/cube_m06_c03.jpg
+++ b/examples/textures/cube/angus/cube_m06_c03.jpg
--- a/examples/textures/cube/angus/cube_m06_c04.jpg
+++ b/examples/textures/cube/angus/cube_m06_c04.jpg
--- a/examples/textures/cube/angus/cube_m06_c05.jpg
+++ b/examples/textures/cube/angus/cube_m06_c05.jpg
--- a/examples/textures/cube/angus/cube_m07_c00.jpg
+++ b/examples/textures/cube/angus/cube_m07_c00.jpg
--- a/examples/textures/cube/angus/cube_m07_c01.jpg
+++ b/examples/textures/cube/angus/cube_m07_c01.jpg
--- a/examples/textures/cube/angus/cube_m07_c02.jpg
+++ b/examples/textures/cube/angus/cube_m07_c02.jpg
--- a/examples/textures/cube/angus/cube_m07_c03.jpg
+++ b/examples/textures/cube/angus/cube_m07_c03.jpg
--- a/examples/textures/cube/angus/cube_m07_c04.jpg
+++ b/examples/textures/cube/angus/cube_m07_c04.jpg
--- a/examples/textures/cube/angus/cube_m07_c05.jpg
+++ b/examples/textures/cube/angus/cube_m07_c05.jpg
--- a/examples/textures/cube/angus/cube_m08_c00.jpg
+++ b/examples/textures/cube/angus/cube_m08_c00.jpg
--- a/examples/textures/cube/angus/cube_m08_c01.jpg
+++ b/examples/textures/cube/angus/cube_m08_c01.jpg
--- a/examples/textures/cube/angus/cube_m08_c02.jpg
+++ b/examples/textures/cube/angus/cube_m08_c02.jpg
--- a/examples/textures/cube/angus/cube_m08_c03.jpg
+++ b/examples/textures/cube/angus/cube_m08_c03.jpg
--- a/examples/textures/cube/angus/cube_m08_c04.jpg
+++ b/examples/textures/cube/angus/cube_m08_c04.jpg
--- a/examples/textures/cube/angus/cube_m08_c05.jpg
+++ b/examples/textures/cube/angus/cube_m08_c05.jpg
--- a/examples/webgl_materials_cubemap_mipmaps.html
+++ b/examples/webgl_materials_cubemap_mipmaps.html
@@ -0,0 +1,165 @@
 
															+<!DOCTYPE html>
														
 
															+<html lang="en">
														
 
															+	<head>
														
 
															+		<title>three.js webgl - materials - cubemap mipmaps</title>
														
 
															+		<meta charset="utf-8">
														
 
															+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
														
 
															+		<link type="text/css" rel="stylesheet" href="main.css">
														
 
															+	</head>
														
 
															+	<body>
														
 
															+
														
 
															+		<div id="container"></div>
														
 
															+		<div id="info">
														
 
															+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - cubemap customized mipmaps demo. Author <a href="https://github.com/AngusLang">Angus</a><br/>
														
 
															+			Left: webgl generated mipmaps<br/>
														
 
															+			Right: manual mipmaps<br/>
														
 
															+		</div>
														
 
															+
														
 
															+		<script type="module">
														
 
															+
														
 
															+			import * as THREE from '../build/three.module.js';
														
 
															+
														
 
															+			import Stats from './jsm/libs/stats.module.js';
														
 
															+
														
 
															+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
														
 
															+
														
 
															+			var container, stats;
														
 
															+
														
 
															+			var camera, scene, renderer;
														
 
															+
														
 
															+			init();
														
 
															+			animate();
														
 
															+
														
 
															+			//load custmized cube texture
														
 
															+			async function loadCubeTextureWithMipmaps() {
														
 
															+
														
 
															+				var path = 'textures/cube/angus/';
														
 
															+				var format = '.jpg';
														
 
															+				var mipmaps = [];
														
 
															+
														
 
															+				async function loadCubeTexture( urls ) {
														
 
															+					return new Promise( function( resolve, reject) {
														
 
															+						new THREE.CubeTextureLoader().load( urls, function( cubeTexture ) {
														
 
															+							resolve( cubeTexture );
														
 
															+						} );
														
 
															+					} );
														
 
															+				}
														
 
															+
														
 
															+				//load mipmaps
														
 
															+				var pendings = [];
														
 
															+				for ( var level = 0; level < 9; ++ level ) {
														
 
															+
														
 
															+					var urls = [];
														
 
															+					for ( var face = 0; face < 6; ++ face ) {
														
 
															+						urls.push( path + 'cube_m0' + level + '_c0' + face + format );
														
 
															+					}
														
 
															+
														
 
															+					pendings.push( loadCubeTexture( urls ).then( function( cubeTexture ) {
														
 
															+
														
 
															+						mipmaps.push( cubeTexture );
														
 
															+
														
 
															+					} ) );
														
 
															+
														
 
															+				}
														
 
															+
														
 
															+				await Promise.all( pendings );
														
 
															+
														
 
															+				var customizedCubeTexture = mipmaps.shift();
														
 
															+				customizedCubeTexture.mipmaps = mipmaps;
														
 
															+				customizedCubeTexture.minFilter = THREE.LinearMipMapLinearFilter;
														
 
															+				customizedCubeTexture.magFilter = THREE.LinearFilter;
														
 
															+				customizedCubeTexture.generateMipmaps = false;
														
 
															+				customizedCubeTexture.needsUpdate = true;
														
 
															+	
														
 
															+				return customizedCubeTexture;
														
 
															+
														
 
															+			}
														
 
															+
														
 
															+			function init() {
														
 
															+
														
 
															+				container = document.createElement( 'div' );
														
 
															+				document.body.appendChild( container );
														
 
															+
														
 
															+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
														
 
															+				camera.position.z = 500;
														
 
															+
														
 
															+				scene = new THREE.Scene();
														
 
															+
														
 
															+				var pendings = [];
														
 
															+				loadCubeTextureWithMipmaps().then( function( cubeTexture ) {
														
 
															+
														
 
															+					//model
														
 
															+					var sphere = new THREE.SphereBufferGeometry( 100, 128, 128 );
														
 
															+
														
 
															+					//manual mipmaps
														
 
															+					var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: cubeTexture } );
														
 
															+					material.name = 'manual mipmaps';
														
 
															+
														
 
															+					var mesh = new THREE.Mesh( sphere, material );
														
 
															+					mesh.position.set( 150, 0, 0 );
														
 
															+					scene.add( mesh );
														
 
															+
														
 
															+
														
 
															+					//webgl mipmaps
														
 
															+					material = material.clone();
														
 
															+					material.name = 'auto mipmaps';
														
 
															+
														
 
															+					var autoCubeTexture = cubeTexture.clone();
														
 
															+					autoCubeTexture.mipmaps = [];
														
 
															+					autoCubeTexture.generateMipmaps = true;
														
 
															+					autoCubeTexture.needsUpdate = true;
														
 
															+
														
 
															+					material.envMap = autoCubeTexture;
														
 
															+
														
 
															+					mesh = new THREE.Mesh( sphere, material );
														
 
															+					mesh.position.set( -150, 0, 0 );
														
 
															+					scene.add( mesh );
														
 
															+
														
 
															+				} );
														
 
															+
														
 
															+				//renderer
														
 
															+				renderer = new THREE.WebGLRenderer( { antialias: true } );
														
 
															+				renderer.setPixelRatio( window.devicePixelRatio );
														
 
															+				renderer.setSize( window.innerWidth, window.innerHeight );
														
 
															+				container.appendChild( renderer.domElement );
														
 
															+
														
 
															+				//controls
														
 
															+				var controls = new OrbitControls( camera, renderer.domElement );
														
 
															+				controls.minPolarAngle = Math.PI / 4;
														
 
															+				controls.maxPolarAngle = Math.PI / 1.5;
														
 
															+
														
 
															+				//stats
														
 
															+				stats = new Stats();
														
 
															+				container.appendChild( stats.dom );
														
 
															+
														
 
															+				window.addEventListener( 'resize', onWindowResize, false );
														
 
															+
														
 
															+			}
														
 
															+
														
 
															+			function onWindowResize() {
														
 
															+
														
 
															+				camera.aspect = window.innerWidth / window.innerHeight;
														
 
															+				camera.updateProjectionMatrix();
														
 
															+
														
 
															+				renderer.setSize( window.innerWidth, window.innerHeight );
														
 
															+
														
 
															+			}
														
 
															+
														
 
															+			function animate() {
														
 
															+
														
 
															+				requestAnimationFrame( animate );
														
 
															+				render();
														
 
															+
														
 
															+			}
														
 
															+
														
 
															+			function render() {
														
 
															+
														
 
															+				renderer.render( scene, camera );
														
 
															+				stats.update();
														
 
															+
														
 
															+			}
														
 
															+
														
 
															+		</script>
														
 
															+
														
 
															+	</body>
														
 
															+</html>
														
--- a/src/renderers/webgl/WebGLProgram.js
+++ b/src/renderers/webgl/WebGLProgram.js
@@ -5,7 +5,7 @@
 
															 import { WebGLUniforms } from './WebGLUniforms.js';
														
 
															 import { WebGLShader } from './WebGLShader.js';
														
 
															 import { ShaderChunk } from '../shaders/ShaderChunk.js';
														
 
															-import { NoToneMapping, AddOperation, MixOperation, MultiplyOperation, EquirectangularRefractionMapping, CubeRefractionMapping, SphericalReflectionMapping, EquirectangularReflectionMapping, CubeUVRefractionMapping, CubeUVReflectionMapping, CubeReflectionMapping, PCFSoftShadowMap, PCFShadowMap, ACESFilmicToneMapping, CineonToneMapping, Uncharted2ToneMapping, ReinhardToneMapping, LinearToneMapping, GammaEncoding, RGBDEncoding, RGBM16Encoding, RGBM7Encoding, RGBEEncoding, sRGBEncoding, LinearEncoding } from '../../constants.js';
														
 
															+import { NoToneMapping, AddOperation, MixOperation, MultiplyOperation, EquirectangularRefractionMapping, CubeRefractionMapping, SphericalReflectionMapping, EquirectangularReflectionMapping, CubeUVRefractionMapping, CubeUVReflectionMapping, CubeReflectionMapping, PCFSoftShadowMap, PCFShadowMap, ACESFilmicToneMapping, CineonToneMapping, Uncharted2ToneMapping, ReinhardToneMapping, LinearToneMapping, GammaEncoding, RGBDEncoding, RGBM16Encoding, RGBM7Encoding, RGBEEncoding, sRGBEncoding, LinearEncoding, LogLuvEncoding } from '../../constants.js';
														
 
															 var programIdCount = 0;
														
@@ -41,6 +41,8 @@ function getEncodingComponents( encoding ) {
 
															 			return [ 'RGBD', '( value, 256.0 )' ];
														
 
															 		case GammaEncoding:
														
 
															 			return [ 'Gamma', '( value, float( GAMMA_FACTOR ) )' ];
														
 
															+		case LogLuvEncoding:
														
 
															+			return [ 'LogLuv', '( value )' ];
														
 
															 		default:
														
 
															 			throw new Error( 'unsupported encoding: ' + encoding );
														
--- a/src/renderers/webgl/WebGLTextures.js
+++ b/src/renderers/webgl/WebGLTextures.js
@@ -397,6 +397,8 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
															 				setTextureParameters( _gl.TEXTURE_CUBE_MAP, texture, supportsMips );
														
 
															+				var mipmaps = texture.mipmaps;
														
 
															+
														
 
															 				for ( var i = 0; i < 6; i ++ ) {
														
 
															 					if ( ! isCompressed ) {
														
@@ -405,10 +407,30 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
															 							state.texImage2D( _gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, glInternalFormat, cubeImage[ i ].width, cubeImage[ i ].height, 0, glFormat, glType, cubeImage[ i ].data );
														
 
															+							var mipmap;
														
 
															+
														
 
															+							for ( var j = 0; j < mipmaps.length; ++ j ) {
														
 
															+
														
 
															+								mipmap = mipmaps[ j ];
														
 
															+
														
 
															+								state.texImage2D( _gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, j + 1, glInternalFormat, mipmap.image[ i ].image.width, mipmap.image[ i ].image.height, 0, glFormat, glType, mipmap.images[ i ].image.data );
														
 
															+
														
 
															+							}
														
 
															+
														
 
															 						} else {
														
 
															 							state.texImage2D( _gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, glInternalFormat, glFormat, glType, cubeImage[ i ] );
														
 
															+							var mipmap;
														
 
															+
														
 
															+							for ( var j = 0; j < mipmaps.length; ++ j ) {
														
 
															+
														
 
															+								mipmap = mipmaps[ j ];
														
 
															+
														
 
															+								state.texImage2D( _gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, j + 1, glInternalFormat, glFormat, glType, mipmap.image[ i ] );
														
 
															+
														
 
															+							}
														
 
															+
														
 
															 						}
														
 
															 					} else {
														
@@ -443,15 +465,7 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
															 				}
														
 
															-				if ( ! isCompressed ) {
														
 
															-
														
 
															-					textureProperties.__maxMipLevel = 0;
														
 
															-
														
 
															-				} else {
														
 
															-
														
 
															-					textureProperties.__maxMipLevel = mipmaps.length - 1;
														
 
															-
														
 
															-				}
														
 
															+				textureProperties.__maxMipLevel = isCompressed ? mipmaps.length - 1 : mipmaps.length;
														
 
															 				if ( textureNeedsGenerateMipmaps( texture, supportsMips ) ) {