Skip to content

Commit

Permalink
Examples: Convert loaders to ES6 Part II. (#21614)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mugen87
Mugen87 authored Apr 8, 2021
1 parent d1a5133 commit 151a294
Show file tree
Hide file tree
Showing 17 changed files with 5,746 additions and 5,693 deletions.
2,507 changes: 1,280 additions & 1,227 deletions examples/js/loaders/GLTFLoader.js
View file

Large diffs are not rendered by default.

36 changes: 19 additions & 17 deletions examples/js/loaders/HDRCubeTextureLoader.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
( function () {

var HDRCubeTextureLoader = function ( manager ) {
class HDRCubeTextureLoader extends THREE.Loader {

THREE.Loader.call( this, manager );
this.hdrLoader = new THREE.RGBELoader();
this.type = THREE.UnsignedByteType;
constructor( manager ) {

};
super( manager );
this.hdrLoader = new THREE.RGBELoader();
this.type = THREE.UnsignedByteType;

HDRCubeTextureLoader.prototype = Object.assign( Object.create( THREE.Loader.prototype ), {
constructor: HDRCubeTextureLoader,
load: function ( urls, onLoad, onProgress, onError ) {
}

load( urls, onLoad, onProgress, onError ) {

if ( ! Array.isArray( urls ) ) {

Expand All @@ -23,7 +23,7 @@

}

var texture = new THREE.CubeTexture();
const texture = new THREE.CubeTexture();
texture.type = this.type;

switch ( texture.type ) {
Expand Down Expand Up @@ -54,20 +54,20 @@

}

var scope = this;
var loaded = 0;
const scope = this;
let loaded = 0;

function loadHDRData( i, onLoad, onProgress, onError ) {

new THREE.FileLoader( scope.manager ).setPath( scope.path ).setResponseType( 'arraybuffer' ).setWithCredentials( scope.withCredentials ).load( urls[ i ], function ( buffer ) {

loaded ++;
var texData = scope.hdrLoader.parse( buffer );
const texData = scope.hdrLoader.parse( buffer );
if ( ! texData ) return;

if ( texData.data !== undefined ) {

var dataTexture = new THREE.DataTexture( texData.data, texData.width, texData.height );
const dataTexture = new THREE.DataTexture( texData.data, texData.width, texData.height );
dataTexture.type = texture.type;
dataTexture.encoding = texture.encoding;
dataTexture.format = texture.format;
Expand All @@ -89,23 +89,25 @@

}

for ( var i = 0; i < urls.length; i ++ ) {
for ( let i = 0; i < urls.length; i ++ ) {

loadHDRData( i, onLoad, onProgress, onError );

}

return texture;

},
setDataType: function ( value ) {
}

setDataType( value ) {

this.type = value;
this.hdrLoader.setDataType( value );
return this;

}
} );

}

THREE.HDRCubeTextureLoader = HDRCubeTextureLoader;

Expand Down
81 changes: 38 additions & 43 deletions examples/js/loaders/KTXLoader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@
* ported from https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.khronosTextureContainer.ts
*/

var KTXLoader = function ( manager ) {
class KTXLoader extends THREE.CompressedTextureLoader {

THREE.CompressedTextureLoader.call( this, manager );
constructor( manager ) {

};
super( manager );

KTXLoader.prototype = Object.assign( Object.create( THREE.CompressedTextureLoader.prototype ), {
constructor: KTXLoader,
parse: function ( buffer, loadMipmaps ) {
}

parse( buffer, loadMipmaps ) {

var ktx = new KhronosTextureContainer( buffer, 1 );
const ktx = new KhronosTextureContainer( buffer, 1 );
return {
mipmaps: ktx.mipmaps( loadMipmaps ),
width: ktx.pixelWidth,
Expand All @@ -28,25 +28,34 @@
};

}
} );

var KhronosTextureContainer = function () {
}

const HEADER_LEN = 12 + 13 * 4; // identifier + header elements (not including key value meta-data pairs)
// load types

const COMPRESSED_2D = 0; // uses a gl.compressedTexImage2D()
//const COMPRESSED_3D = 1; // uses a gl.compressedTexImage3D()
//const TEX_2D = 2; // uses a gl.texImage2D()
//const TEX_3D = 3; // uses a gl.texImage3D()

class KhronosTextureContainer {

/**
* @param {ArrayBuffer} arrayBuffer- contents of the KTX container file
* @param {number} facesExpected- should be either 1 or 6, based whether a cube texture or or
* @param {boolean} threeDExpected- provision for indicating that data should be a 3D texture, not implemented
* @param {boolean} textureArrayExpected- provision for indicating that data should be a texture array, not implemented
*/
function KhronosTextureContainer( arrayBuffer, facesExpected
constructor( arrayBuffer, facesExpected
/*, threeDExpected, textureArrayExpected */
) {

this.arrayBuffer = arrayBuffer; // Test that it is a ktx formatted file, based on the first 12 bytes, character representation is:
// '´', 'K', 'T', 'X', ' ', '1', '1', 'ª', '\r', '\n', '\x1A', '\n'
// 0xAB, 0x4B, 0x54, 0x58, 0x20, 0x31, 0x31, 0xBB, 0x0D, 0x0A, 0x1A, 0x0A

var identifier = new Uint8Array( this.arrayBuffer, 0, 12 );
const identifier = new Uint8Array( this.arrayBuffer, 0, 12 );

if ( identifier[ 0 ] !== 0xAB || identifier[ 1 ] !== 0x4B || identifier[ 2 ] !== 0x54 || identifier[ 3 ] !== 0x58 || identifier[ 4 ] !== 0x20 || identifier[ 5 ] !== 0x31 || identifier[ 6 ] !== 0x31 || identifier[ 7 ] !== 0xBB || identifier[ 8 ] !== 0x0D || identifier[ 9 ] !== 0x0A || identifier[ 10 ] !== 0x1A || identifier[ 11 ] !== 0x0A ) {

Expand All @@ -56,10 +65,10 @@
} // load the reset of the header in native 32 bit uint


var dataSize = Uint32Array.BYTES_PER_ELEMENT;
var headerDataView = new DataView( this.arrayBuffer, 12, 13 * dataSize );
var endianness = headerDataView.getUint32( 0, true );
var littleEndian = endianness === 0x04030201;
const dataSize = Uint32Array.BYTES_PER_ELEMENT;
const headerDataView = new DataView( this.arrayBuffer, 12, 13 * dataSize );
const endianness = headerDataView.getUint32( 0, true );
const littleEndian = endianness === 0x04030201;
this.glType = headerDataView.getUint32( 1 * dataSize, littleEndian ); // must be 0 for compressed textures

this.glTypeSize = headerDataView.getUint32( 2 * dataSize, littleEndian ); // must be 1 for compressed textures
Expand Down Expand Up @@ -120,29 +129,28 @@
// would need to make this more elaborate & adjust checks above to support more than one load type


this.loadType = KhronosTextureContainer.COMPRESSED_2D;

} // return mipmaps for js
this.loadType = COMPRESSED_2D;

}

KhronosTextureContainer.prototype.mipmaps = function ( loadMipmaps ) {
mipmaps( loadMipmaps ) {

var mipmaps = []; // initialize width & height for level 1
const mipmaps = []; // initialize width & height for level 1

var dataOffset = KhronosTextureContainer.HEADER_LEN + this.bytesOfKeyValueData;
var width = this.pixelWidth;
var height = this.pixelHeight;
var mipmapCount = loadMipmaps ? this.numberOfMipmapLevels : 1;
let dataOffset = HEADER_LEN + this.bytesOfKeyValueData;
let width = this.pixelWidth;
let height = this.pixelHeight;
const mipmapCount = loadMipmaps ? this.numberOfMipmapLevels : 1;

for ( var level = 0; level < mipmapCount; level ++ ) {
for ( let level = 0; level < mipmapCount; level ++ ) {

var imageSize = new Int32Array( this.arrayBuffer, dataOffset, 1 )[ 0 ]; // size per face, since not supporting array cubemaps
const imageSize = new Int32Array( this.arrayBuffer, dataOffset, 1 )[ 0 ]; // size per face, since not supporting array cubemaps

dataOffset += 4; // size of the image + 4 for the imageSize field

for ( var face = 0; face < this.numberOfFaces; face ++ ) {
for ( let face = 0; face < this.numberOfFaces; face ++ ) {

var byteArray = new Uint8Array( this.arrayBuffer, dataOffset, imageSize );
const byteArray = new Uint8Array( this.arrayBuffer, dataOffset, imageSize );
mipmaps.push( {
'data': byteArray,
'width': width,
Expand All @@ -160,22 +168,9 @@

return mipmaps;

};

KhronosTextureContainer.HEADER_LEN = 12 + 13 * 4; // identifier + header elements (not including key value meta-data pairs)
// load types

KhronosTextureContainer.COMPRESSED_2D = 0; // uses a gl.compressedTexImage2D()

KhronosTextureContainer.COMPRESSED_3D = 1; // uses a gl.compressedTexImage3D()

KhronosTextureContainer.TEX_2D = 2; // uses a gl.texImage2D()

KhronosTextureContainer.TEX_3D = 3; // uses a gl.texImage3D()

return KhronosTextureContainer;
}

}();
}

THREE.KTXLoader = KTXLoader;

Expand Down
Loading

0 comments on commit 151a294

Please sign in to comment.