Skip to content

Examples: Convert loaders to ES6 Part II. #21614

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 8, 2021
Merged

Examples: Convert loaders to ES6 Part II. #21614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,507 changes: 1,280 additions & 1,227 deletions examples/js/loaders/GLTFLoader.js
View file
Open in desktop

Large diffs are not rendered by default.

36 changes: 19 additions & 17 deletions examples/js/loaders/HDRCubeTextureLoader.js
View file
Open in desktop
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
Open in desktop
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