mirror of
https://github.com/BinomialLLC/basis_universal.git
synced 2026-06-08 08:33:53 +00:00
132 lines
3.7 KiB
HTML
132 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/three@v0.108.0"></script> -->
|
|
<script src="three.min.js"></script>
|
|
<script src="GLTFLoader.js"></script>
|
|
<script src="BasisTextureLoader.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@v0.104.0/examples/js/controls/OrbitControls.js"></script>
|
|
<style>
|
|
html, body { width:100%; height:100%; margin:0; padding:0; }
|
|
canvas { display:block; }
|
|
#panel { position: absolute; top: 10px; left: 10px; color: white; background-color:rgba(0.3, 0.3, 0.3, 0.3); padding: 0.5em; max-width: 400px;}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="panel">
|
|
<strong>Basis Texture Transcoder glTF Demo</strong>
|
|
<div id="log"></div>
|
|
|
|
</div>
|
|
<script>
|
|
const renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
renderer.gammaOutput = true;
|
|
renderer.gammaFactor = 2.2;
|
|
|
|
const scene = new THREE.Scene();
|
|
scene.background = new THREE.Color( 0xf0f0f0 );
|
|
|
|
const light = new THREE.AmbientLight();
|
|
scene.add( light );
|
|
|
|
const light2 = new THREE.PointLight();
|
|
scene.add( light2 );
|
|
|
|
const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
|
|
camera.position.set( 8, 6, 5 );
|
|
camera.lookAt( new THREE.Vector3( 0, -2, 0 ) );
|
|
|
|
const controls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
controls.autoRotate = true;
|
|
|
|
// Create BasisTextureLoader and detect supported target formats.
|
|
|
|
const basisLoader = new THREE.BasisTextureLoader();
|
|
basisLoader.setTranscoderPath( '../transcoder/build/' );
|
|
basisLoader.useAlpha = false;
|
|
basisLoader.detectSupport( renderer );
|
|
|
|
let formatName = 'Unknown format';
|
|
switch(basisLoader.workerConfig.format)
|
|
{
|
|
case THREE.BasisTextureLoader.BASIS_FORMAT.cTFASTC_4x4:
|
|
formatName = 'ASTC';
|
|
break;
|
|
case THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC1:
|
|
formatName = 'BC1';
|
|
break;
|
|
case THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC3:
|
|
formatName = 'BC3';
|
|
break;
|
|
case THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC7_M6_OPAQUE_ONLY:
|
|
formatName = 'BC7';
|
|
break;
|
|
case THREE.BasisTextureLoader.BASIS_FORMAT.cTFPVRTC1_4_RGB:
|
|
case THREE.BasisTextureLoader.BASIS_FORMAT.cTFPVRTC1_4_RGBA:
|
|
formatName = 'PVRTC';
|
|
break;
|
|
case THREE.BasisTextureLoader.BASIS_FORMAT.cTFETC1:
|
|
formatName = 'ETC1';
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
log(`Transcode to: <strong>${formatName}</strong>`);
|
|
|
|
// Register BasisTextureLoader for .basis extension.
|
|
|
|
let loadingManager = new THREE.LoadingManager();
|
|
loadingManager.addHandler( /\.basis$/, basisLoader );
|
|
|
|
// Create GLTFLoader, load model, and render.
|
|
|
|
const loader = new THREE.GLTFLoader(loadingManager);
|
|
|
|
loader.load( 'assets/AgiHqSmall.gltf', ( gltf ) => {
|
|
|
|
const model = gltf.scene;
|
|
model.scale.set( 0.01, 0.01, 0.01 );
|
|
|
|
scene.add( model );
|
|
|
|
document.body.appendChild( renderer.domElement );
|
|
|
|
animate();
|
|
|
|
}, undefined, ( e ) => console.error( e ) );
|
|
|
|
// Main render loop.
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
controls.update();
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
// Support viewport resizing.
|
|
|
|
window.addEventListener( 'resize', () => {
|
|
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
}, false );
|
|
|
|
function log(s) {
|
|
|
|
const div = document.createElement('div');
|
|
div.innerHTML = s;
|
|
document.getElementById('log').appendChild(div);
|
|
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|