use jpg mipmaps

examples/webgl_materials_cubemap_mipmaps.html

@@ -31,54 +31,46 @@
 			animate();
 
 			// load custmized cube texture
-			async function loadCubeTexture( path, imageWidth ) {
-
-				//fetch data
-				var response = await fetch( path );
-				var arrayBuffer = await response.arrayBuffer();
-
-				var cubeTextures = [];
-				var byteOffset = 0;
-				const maxLevel = Math.log( imageWidth ) / Math.LN2;
-
-				for ( var level = 0; level <= maxLevel; ++ level ) {
-
-					var size = Math.pow( 2, maxLevel - level );
-					var imageByteLength = size * size * 4;
-					var textures = [];
-					
-					if ( byteOffset >= arrayBuffer.byteLength ) {
-
-						break;
+			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 ) {
-
-						var imageData = new Uint8Array( arrayBuffer, byteOffset, imageByteLength );
-						var texture = new THREE.DataTexture( imageData, size, size, THREE.RGBAFormat, THREE.UnsignedByteType );
-						textures.push( texture );
-						byteOffset += imageByteLength;
+						urls.push( path + 'cube_m0' + level + '_c0' + face + format );
 					}
 
-					var levelCubeTexture = new THREE.CubeTexture( textures );
-					cubeTextures.push( levelCubeTexture );
-				}
-
-				var customizedCubeTexture = cubeTextures[0];
-				customizedCubeTexture.minFilter = THREE.LinearMipMapLinearFilter;
-				customizedCubeTexture.magFilter = THREE.LinearFilter;
-				customizedCubeTexture.format = THREE.RGBAFormat;
-				customizedCubeTexture.encoding = THREE.LogLuvEncoding;
+					pendings.push( loadCubeTexture( urls ).then( function( cubeTexture ) {
 
-				if ( cubeTextures.length > 0 ) {
+						mipmaps.push( cubeTexture );
 
-					customizedCubeTexture.mipmaps = cubeTextures;
-					customizedCubeTexture.generateMipmaps = false;
+					} ) );
 
 				}
 
+				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;
 
 			}
@@ -100,7 +92,7 @@
 				scene.add( ambient );
 
 				var pendings = [];
-				loadCubeTexture( 'textures/cube/angus/specular_cubemap_256_luv.bin', 256 ).then( function ( reflectCubeTexture ) {
+				var reflectCubeTexture = loadCubeTextureWithMipmaps().then( function( reflectCubeTexture ) {
 
 					//rewrite mipmaps
 					var originalCubeTexture = reflectCubeTexture.clone();
@@ -141,7 +133,6 @@
 
 				//controls
 				var controls = new OrbitControls( camera, renderer.domElement );
-				controls.enableZoom = false;
 				controls.minPolarAngle = Math.PI / 4;
 				controls.maxPolarAngle = Math.PI / 1.5;
 

src/renderers/webgl/WebGLTextures.js

@@ -409,11 +409,11 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 							var mipmap;
 
-							for ( var j = 1; j < mipmaps.length; ++ j ) {
+							for ( var j = 0; j < mipmaps.length; ++ j ) {
 
 								mipmap = mipmaps[ j ];
 
-								state.texImage2D( _gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, j, glInternalFormat, mipmap.image[ i ].image.width, mipmap.image[ i ].image.height, 0, glFormat, glType, mipmap.images[ i ].image.data );
+								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 );
 
 							}
 
@@ -423,11 +423,11 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 							var mipmap;
 
-							for ( var j = 1; j < mipmaps.length; ++ j ) {
+							for ( var j = 0; j < mipmaps.length; ++ j ) {
 
 								mipmap = mipmaps[ j ];
 
-								state.texImage2D( _gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, j, glInternalFormat, glFormat, glType, mipmap.image[ i ] );
+								state.texImage2D( _gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, j + 1, glInternalFormat, glFormat, glType, mipmap.image[ i ] );
 
 							}
 
@@ -465,7 +465,7 @@ function WebGLTextures( _gl, extensions, state, properties, capabilities, utils,
 
 				}
 
-				textureProperties.__maxMipLevel = mipmaps.length - 1;
+				textureProperties.__maxMipLevel = isCompressed ? mipmaps.length - 1 : mipmaps.length;
 
 				if ( textureNeedsGenerateMipmaps( texture, supportsMips ) ) {
 

src/textures/CubeTexture.d.ts

@@ -20,8 +20,7 @@ export class CubeTexture extends Texture {
 		format?: PixelFormat,
 		type?: TextureDataType,
 		anisotropy?: number,
-		encoding?: TextureEncoding,
-		mipmaps?: CubeTexture[]
+		encoding?: TextureEncoding
 	);
 
 	images: any; // returns and sets the value of Texture.image in the codde ?

src/textures/CubeTexture.js

@@ -5,16 +5,14 @@
 import { Texture } from './Texture.js';
 import { CubeReflectionMapping, RGBFormat } from '../constants.js';
 
-function CubeTexture( images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding, mipmaps ) {
+function CubeTexture( images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding ) {
 
 	images = images !== undefined ? images : [];
 	mapping = mapping !== undefined ? mapping : CubeReflectionMapping;
 	format = format !== undefined ? format : RGBFormat;
-	mipmaps = mipmaps !== undefined ? mipmaps : [];
 
 	Texture.call( this, images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding );
 
-	this.mipmaps = mipmaps;
 	this.flipY = false;
 
 }