|
@@ -34,72 +34,82 @@
|
|
|
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
|
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
|
|
|
|
- const width = window.innerWidth;
|
|
|
- const height = window.innerHeight;
|
|
|
+ let camera, scene, renderer, controls;
|
|
|
|
|
|
- const renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
- renderer.setSize( width, height );
|
|
|
- renderer.outputEncoding = THREE.sRGBEncoding;
|
|
|
- document.body.appendChild( renderer.domElement );
|
|
|
+ init().then( animate );
|
|
|
|
|
|
- const scene = new THREE.Scene();
|
|
|
- scene.background = new THREE.Color( 0x202020 );
|
|
|
+ async function init() {
|
|
|
|
|
|
- const camera = new THREE.PerspectiveCamera( 60, width / height, 0.1, 100 );
|
|
|
- camera.position.set( 2, 1.5, 1 );
|
|
|
- camera.lookAt( scene.position );
|
|
|
- scene.add( camera );
|
|
|
+ const width = window.innerWidth;
|
|
|
+ const height = window.innerHeight;
|
|
|
+
|
|
|
+ renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
+ renderer.setSize( width, height );
|
|
|
+ renderer.outputEncoding = THREE.sRGBEncoding;
|
|
|
+ document.body.appendChild( renderer.domElement );
|
|
|
+
|
|
|
+ window.addEventListener( 'resize', onWindowResize );
|
|
|
+
|
|
|
+ scene = new THREE.Scene();
|
|
|
+ scene.background = new THREE.Color( 0x202020 );
|
|
|
|
|
|
- const controls = new OrbitControls( camera, renderer.domElement );
|
|
|
- controls.autoRotate = true;
|
|
|
+ camera = new THREE.PerspectiveCamera( 60, width / height, 0.1, 100 );
|
|
|
+ camera.position.set( 2, 1.5, 1 );
|
|
|
+ camera.lookAt( scene.position );
|
|
|
+ scene.add( camera );
|
|
|
|
|
|
- // PlaneGeometry UVs assume flipY=true, which compressed textures don't support.
|
|
|
- const geometry = flipY( new THREE.PlaneGeometry() );
|
|
|
- const material = new THREE.MeshBasicMaterial( {
|
|
|
- color: 0xFFFFFF,
|
|
|
- side: THREE.DoubleSide
|
|
|
- } );
|
|
|
- const mesh = new THREE.Mesh( geometry, material );
|
|
|
- scene.add( mesh );
|
|
|
+ controls = new OrbitControls( camera, renderer.domElement );
|
|
|
+ controls.autoRotate = true;
|
|
|
|
|
|
- const formatStrings = {
|
|
|
- [ THREE.RGBAFormat ]: 'RGBA32',
|
|
|
- [ THREE.RGBA_BPTC_Format ]: 'RGBA_BPTC',
|
|
|
- [ THREE.RGBA_ASTC_4x4_Format ]: 'RGBA_ASTC_4x4',
|
|
|
- [ THREE.RGB_S3TC_DXT1_Format ]: 'RGB_S3TC_DXT1',
|
|
|
- [ THREE.RGBA_S3TC_DXT5_Format ]: 'RGBA_S3TC_DXT5',
|
|
|
- [ THREE.RGB_PVRTC_4BPPV1_Format ]: 'RGB_PVRTC_4BPPV1',
|
|
|
- [ THREE.RGBA_PVRTC_4BPPV1_Format ]: 'RGBA_PVRTC_4BPPV1',
|
|
|
- [ THREE.RGB_ETC1_Format ]: 'RGB_ETC1',
|
|
|
- [ THREE.RGB_ETC2_Format ]: 'RGB_ETC2',
|
|
|
- [ THREE.RGBA_ETC2_EAC_Format ]: 'RGB_ETC2_EAC',
|
|
|
- };
|
|
|
+ // PlaneGeometry UVs assume flipY=true, which compressed textures don't support.
|
|
|
+ const geometry = flipY( new THREE.PlaneGeometry() );
|
|
|
+ const material = new THREE.MeshBasicMaterial( {
|
|
|
+ color: 0xFFFFFF,
|
|
|
+ side: THREE.DoubleSide
|
|
|
+ } );
|
|
|
+ const mesh = new THREE.Mesh( geometry, material );
|
|
|
+ scene.add( mesh );
|
|
|
|
|
|
- // Samples: sample_etc1s.ktx2, sample_uastc.ktx2, sample_uastc_zstd.ktx2
|
|
|
- const loader = new KTX2Loader()
|
|
|
- .setTranscoderPath( 'jsm/libs/basis/' )
|
|
|
- .detectSupport( renderer );
|
|
|
+ const formatStrings = {
|
|
|
+ [ THREE.RGBAFormat ]: 'RGBA32',
|
|
|
+ [ THREE.RGBA_BPTC_Format ]: 'RGBA_BPTC',
|
|
|
+ [ THREE.RGBA_ASTC_4x4_Format ]: 'RGBA_ASTC_4x4',
|
|
|
+ [ THREE.RGB_S3TC_DXT1_Format ]: 'RGB_S3TC_DXT1',
|
|
|
+ [ THREE.RGBA_S3TC_DXT5_Format ]: 'RGBA_S3TC_DXT5',
|
|
|
+ [ THREE.RGB_PVRTC_4BPPV1_Format ]: 'RGB_PVRTC_4BPPV1',
|
|
|
+ [ THREE.RGBA_PVRTC_4BPPV1_Format ]: 'RGBA_PVRTC_4BPPV1',
|
|
|
+ [ THREE.RGB_ETC1_Format ]: 'RGB_ETC1',
|
|
|
+ [ THREE.RGB_ETC2_Format ]: 'RGB_ETC2',
|
|
|
+ [ THREE.RGBA_ETC2_EAC_Format ]: 'RGB_ETC2_EAC',
|
|
|
+ };
|
|
|
|
|
|
- animate();
|
|
|
+ // Samples: sample_etc1s.ktx2, sample_uastc.ktx2, sample_uastc_zstd.ktx2
|
|
|
+ const loader = new KTX2Loader()
|
|
|
+ .setTranscoderPath( 'jsm/libs/basis/' )
|
|
|
+ .detectSupport( renderer );
|
|
|
|
|
|
- try {
|
|
|
|
|
|
- const texture = await loader.loadAsync( './textures/compressed/sample_uastc_zstd.ktx2' );
|
|
|
+ try {
|
|
|
|
|
|
- console.info( `transcoded to ${formatStrings[ texture.format ]}` );
|
|
|
+ const texture = await loader.loadAsync( './textures/compressed/sample_uastc_zstd.ktx2' );
|
|
|
|
|
|
- material.map = texture;
|
|
|
- material.transparent = true;
|
|
|
+ console.info( `transcoded to ${formatStrings[ texture.format ]}` );
|
|
|
|
|
|
- material.needsUpdate = true;
|
|
|
+ material.map = texture;
|
|
|
+ material.transparent = true;
|
|
|
|
|
|
- } catch ( e ) {
|
|
|
+ material.needsUpdate = true;
|
|
|
|
|
|
- console.error( e );
|
|
|
+ } catch ( e ) {
|
|
|
|
|
|
- } finally {
|
|
|
+ console.error( e );
|
|
|
+
|
|
|
+ } finally {
|
|
|
+
|
|
|
+ loader.dispose();
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
- loader.dispose();
|
|
|
|
|
|
}
|
|
|
|
|
@@ -113,8 +123,6 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
- window.addEventListener( 'resize', onWindowResize );
|
|
|
-
|
|
|
function onWindowResize() {
|
|
|
|
|
|
const width = window.innerWidth;
|