|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + <head> |
| 4 | + <title>three.js webgl - exporter - ktx2</title> |
| 5 | + <meta charset="utf-8"> |
| 6 | + <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> |
| 7 | + <link type="text/css" rel="stylesheet" href="main.css"> |
| 8 | + </head> |
| 9 | + <body> |
| 10 | + <div id="info"> |
| 11 | + <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - ktx2 |
| 12 | + </div> |
| 13 | + |
| 14 | + <script type="importmap"> |
| 15 | + { |
| 16 | + "imports": { |
| 17 | + "three": "../build/three.module.js", |
| 18 | + "three/addons/": "./jsm/" |
| 19 | + } |
| 20 | + } |
| 21 | + </script> |
| 22 | + |
| 23 | + <script type="module"> |
| 24 | + |
| 25 | + import * as THREE from 'three'; |
| 26 | + |
| 27 | + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; |
| 28 | + import { KTX2Exporter } from 'three/addons/exporters/KTX2Exporter.js'; |
| 29 | + import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'; |
| 30 | + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; |
| 31 | + |
| 32 | + let scene, camera, renderer, exporter, mesh, controls, renderTarget, dataTexture; |
| 33 | + |
| 34 | + const params = { |
| 35 | + target: 'pmrem', |
| 36 | + export: exportFile |
| 37 | + }; |
| 38 | + |
| 39 | + init(); |
| 40 | + |
| 41 | + function init() { |
| 42 | + |
| 43 | + renderer = new THREE.WebGLRenderer( { antialias: true } ); |
| 44 | + renderer.toneMapping = THREE.AgXToneMapping; |
| 45 | + renderer.setPixelRatio( window.devicePixelRatio ); |
| 46 | + renderer.setSize( window.innerWidth, window.innerHeight ); |
| 47 | + renderer.setAnimationLoop( animate ); |
| 48 | + document.body.appendChild( renderer.domElement ); |
| 49 | + |
| 50 | + // |
| 51 | + |
| 52 | + camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 ); |
| 53 | + camera.position.set( 10, 0, 0 ); |
| 54 | + |
| 55 | + scene = new THREE.Scene(); |
| 56 | + |
| 57 | + exporter = new KTX2Exporter(); |
| 58 | + const rgbeloader = new RGBELoader(); |
| 59 | + |
| 60 | + // |
| 61 | + |
| 62 | + const pmremGenerator = new THREE.PMREMGenerator( renderer ); |
| 63 | + pmremGenerator.compileEquirectangularShader(); |
| 64 | + |
| 65 | + rgbeloader.load( 'textures/equirectangular/venice_sunset_1k.hdr', function ( texture ) { |
| 66 | + |
| 67 | + texture.mapping = THREE.EquirectangularReflectionMapping; |
| 68 | + |
| 69 | + renderTarget = pmremGenerator.fromEquirectangular( texture ); |
| 70 | + scene.background = renderTarget.texture; |
| 71 | + |
| 72 | + } ); |
| 73 | + |
| 74 | + createDataTexture(); |
| 75 | + |
| 76 | + // |
| 77 | + |
| 78 | + controls = new OrbitControls( camera, renderer.domElement ); |
| 79 | + controls.enableDamping = true; |
| 80 | + controls.rotateSpeed = - 0.25; // negative, to track mouse pointer |
| 81 | + |
| 82 | + // |
| 83 | + |
| 84 | + window.addEventListener( 'resize', onWindowResize ); |
| 85 | + |
| 86 | + const gui = new GUI(); |
| 87 | + |
| 88 | + gui.add( params, 'target' ).options( [ 'pmrem', 'data-texture' ] ).onChange( swapScene ); |
| 89 | + gui.add( params, 'export' ).name( 'Export KTX2' ); |
| 90 | + gui.open(); |
| 91 | + |
| 92 | + } |
| 93 | + |
| 94 | + function onWindowResize() { |
| 95 | + |
| 96 | + camera.aspect = window.innerWidth / window.innerHeight; |
| 97 | + camera.updateProjectionMatrix(); |
| 98 | + |
| 99 | + renderer.setSize( window.innerWidth, window.innerHeight ); |
| 100 | + |
| 101 | + } |
| 102 | + |
| 103 | + function animate() { |
| 104 | + |
| 105 | + controls.update(); |
| 106 | + renderer.render( scene, camera ); |
| 107 | + |
| 108 | + } |
| 109 | + |
| 110 | + function createDataTexture() { |
| 111 | + |
| 112 | + const normal = new THREE.Vector3(); |
| 113 | + const coord = new THREE.Vector2(); |
| 114 | + const size = 800, radius = 320, factor = Math.PI * 0.5 / radius; |
| 115 | + const data = new Float32Array( 4 * size * size ); |
| 116 | + |
| 117 | + for ( let i = 0; i < size; i ++ ) { |
| 118 | + |
| 119 | + for ( let j = 0; j < size; j ++ ) { |
| 120 | + |
| 121 | + const idx = i * size * 4 + j * 4; |
| 122 | + coord.set( j, i ).subScalar( size / 2 ); |
| 123 | + |
| 124 | + if ( coord.length() < radius ) |
| 125 | + normal.set( |
| 126 | + Math.sin( coord.x * factor ), |
| 127 | + Math.sin( coord.y * factor ), |
| 128 | + Math.cos( coord.x * factor ) |
| 129 | + ); |
| 130 | + else |
| 131 | + normal.set( 0, 0, 1 ); |
| 132 | + |
| 133 | + data[ idx + 0 ] = .5 + .5 * normal.x; |
| 134 | + data[ idx + 1 ] = .5 + .5 * normal.y; |
| 135 | + data[ idx + 2 ] = .5 + .5 * normal.z; |
| 136 | + data[ idx + 3 ] = 1.; |
| 137 | + |
| 138 | + } |
| 139 | + |
| 140 | + } |
| 141 | + |
| 142 | + dataTexture = new THREE.DataTexture( data, size, size, THREE.RGBAFormat, THREE.FloatType ); |
| 143 | + dataTexture.needsUpdate = true; |
| 144 | + |
| 145 | + const material = new THREE.MeshBasicMaterial( { map: dataTexture } ); |
| 146 | + const quad = new THREE.PlaneGeometry( 50, 50 ); |
| 147 | + mesh = new THREE.Mesh( quad, material ); |
| 148 | + mesh.visible = false; |
| 149 | + |
| 150 | + scene.add( mesh ); |
| 151 | + |
| 152 | + } |
| 153 | + |
| 154 | + function swapScene() { |
| 155 | + |
| 156 | + if ( params.target == 'pmrem' ) { |
| 157 | + |
| 158 | + camera.position.set( 10, 0, 0 ); |
| 159 | + controls.enabled = true; |
| 160 | + scene.background = renderTarget.texture; |
| 161 | + mesh.visible = false; |
| 162 | + renderer.toneMapping = THREE.AgXToneMapping; |
| 163 | + |
| 164 | + } else { |
| 165 | + |
| 166 | + camera.position.set( 0, 0, 70 ); |
| 167 | + controls.enabled = false; |
| 168 | + scene.background = new THREE.Color( 0, 0, 0 ); |
| 169 | + mesh.visible = true; |
| 170 | + renderer.toneMapping = THREE.NoToneMapping; |
| 171 | + |
| 172 | + } |
| 173 | + |
| 174 | + } |
| 175 | + |
| 176 | + async function exportFile() { |
| 177 | + |
| 178 | + let result; |
| 179 | + |
| 180 | + if ( params.target == 'pmrem' ) |
| 181 | + result = await exporter.parse( renderer, renderTarget ); |
| 182 | + else |
| 183 | + result = await exporter.parse( dataTexture ); |
| 184 | + |
| 185 | + saveArrayBuffer( result, params.target + '.ktx2' ); |
| 186 | + |
| 187 | + } |
| 188 | + |
| 189 | + function saveArrayBuffer( buffer, filename ) { |
| 190 | + |
| 191 | + const blob = new Blob( [ buffer ], { type: 'image/ktx2' } ); |
| 192 | + const link = document.createElement( 'a' ); |
| 193 | + |
| 194 | + link.href = URL.createObjectURL( blob ); |
| 195 | + link.download = filename; |
| 196 | + link.click(); |
| 197 | + |
| 198 | + } |
| 199 | + |
| 200 | + </script> |
| 201 | + |
| 202 | + </body> |
| 203 | +</html> |
0 commit comments