https://github.com/mrdoob/three.js/pull/16522ã§è¿œå ããã.basisãã¯ã¹ãã£ã®åæãµããŒã
setMaxWorkers()
ã¡ãœãããè¿œå ããŸãload()
ããåæçã«ãã¯ã¹ãã£ãè¿ããŸãïŒã¢ã«ãã¡ãªãïŒïŒã³ãŒãã«ã€ããŠã¯ãŸã 詳ãã調ã¹ãŠããŸããããä»ã®ãã¯ã¹ãã£ããŒããŒãšåãããã«load
ããtexture
ãåæçã«è¿ãããšãã§ããŸããïŒ
äžè²«æ§ã«è¯ããšæããŸãã ãŸãããã¯ã¹ãã£ãåæçã«è¿ããªãå ŽåããŠãŒã¶ãŒã¯ã³ãŒã«ããã¯ã§material.needsUpdate = true
ãåŒã³åºãå¿
èŠããããŸãïŒã¢ãã¡ãŒã·ã§ã³ã«ãŒãããã§ã«éå§ãããŠããå ŽåïŒã
var material = new XXXMaterial();
textureLoader.load(..., function (texture) {
material.map = texture;
// .map is from null to non-null.
// User needs to call material.needsUpdate = true here if already started animation loop
// because whether material.map is null or not affects the final shader code.
material.needsUpdate = true;
});
THREE.CompressedTexture
ã§åäœããããšã確èªããããã«ãŸã ãã§ãã¯ããŠããŸããããåäœããå Žåã¯ããããæåã§ããããšã«åæããŸãã ð
ãã®ä»ã®ã¯ãªãŒã³ã¢ããïŒãã¯ã¹ãã£ã«å²ãåœãŠãããããããã£ã¯ã flipY=false
ããã«ãå°ãä»»æã§ãïŒããŒã·ã¹ãã¢ããæ®ãããŠããŸãïŒã ãããŠãã¯ãŒã«ãŒã«ã¯æªäœ¿çšã®startTime
å€æ°ããããŸãã
ç§ãæ£ãããã°ãããããããã¯ãµããŒããããŠããªãããã§ãã ãã©ã³ã¹ã³ãŒããŒã¯ãµããŒãããŠããŸãããïŒ ãŸãã¯ãããŒããŒã¯ãŸã ããããããã®ãµããŒããå®è£ ããŠããŸãããïŒ
ã¯ãã .basis
ãã¡ã€ã«ã«ã¯è€æ°ã®ããããããã¬ãã«ãå«ããããšãã§ããŸãã ãã©ã³ã¹ã³ãŒããŒã¯ãã§ã«ããããµããŒãããŠãããšæããŸãããç§ã¯ããããã¹ãããŠããŸããã BasisTextureLoaderã¯ãŸã ãµããŒãããŠããŸããã
ãã©ã³ã¹ã³ãŒããŒã®æ°ãã/å°ããããŒãžã§ã³ã«ãæŽæ°ããå¿
èŠããããŸãïŒ https ïŒ
ããããã©ã³ã¹ã³ãŒããŒã¯ããããµããŒãããå¿
èŠããããŸãã mipã¬ãã«ãlevelIndex
ããtranscodeImage
æž¡ããŸãã
https://github.com/BinomialLLC/basis_universal/blob/master/webgl/transcoder/basis_wrappers.cpp#L197
説æããããšãããããŸãã
ãŸããããŒããŒããŸã ãµããŒãããŠããªãæ©èœãä»ã«ãããããã©ã³ã¹ã³ãŒããŒããµããŒãããŠããå Žåã¯ãTODOãªã¹ãã«è¿œå ããŠãã ããã å®è£ ããæäŒãããŸãã
äŸãäœã£ãã ïŒ16553åçŽããããããããŸããããããŒãžãããå Žåã¯ãåŸã§æ¡åŒµ/亀æããŠãã ããã
ãã©ã³ã¹ã³ãŒããŒã«ã¯ãããTHREE.BasisTextureLoaderã«ã¯ãªãä»ã®æ©èœã§ã¯ãäž»ãªéãã¯ããã©ã³ã¹ã³ãŒããŒãå€ãã®è¿œå ãã©ãŒããããåºåã§ããããšã§ãã
https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/BasisTextureLoader.js#L264 -L273
ããããã¹ãŠããã€äœ¿çšãããã¯æ£çŽããããŸããã ãŠãŒã¶ãŒããããå¶åŸ¡ãããå Žåãããã°ãããŒããŒïŒGLTFLoaderãªã©ïŒããã¯ã¹ãã£ã®ç®çã«åºã¥ããŠæ±ºå®ãäžãå ŽåããããšæããŸãã ããšãã°ã material.map
ïŒããŒã¹ã«ã©ãŒïŒãšmaterial.aoMap
ïŒã¢ã³ããšã³ããªã¯ã«ãŒãžã§ã³ïŒã§ç°ãªãå§çž®åœ¢åŒãéžæããå ŽåããããŸãã
ããããµããŒãããæãæçœãªæ¹æ³ã¯ã detectSupport( renderer )
代æ¿æ段ãè¿œå ããããšã§ãã
// Let loader decide, based on device capabilities:
loader.detectSupport( renderer );
// Or, choose a particular format:
loader.setFormat( THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC4 );
ããã«ã¯æœåšçãªåé¡ããããŸããè€æ°ã®ãã¯ã¹ãã£ãããŒãããŠããå Žåãããããã¹ãŠãåã圢åŒã«ãã©ã³ã¹ã³ãŒãããããªãå ŽåããããŸãã è€æ°ã®ããŒããŒãäœæããããšãã§ããŸãããæ¢åã®Webã¯ãŒã«ãŒãåå©çšããã®ã¯é£ãããªããŸãïŒããã¯éèŠã§ãïŒã ãã©ãŒããããload()
ã¡ãœããã«æž¡ãããšã¯ã§ããŸãããTextureLoaderãšã®äžäœäºææ§ã¯ãããŸããã ç§ã¯ãããè¡ãããšã確å®ã«ããããšãæåãããããªããšæããŸã...
loader.setFormat( THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC4 );
var fooTex = loader.load( 'foo.basis' );
loader.setFormat( THREE.BasisTextureLoader.BASIS_FORMAT.cTFBC1 );
var barTex = loader.load( 'bar.basis' );
...ãã³ãŒããéåæã§ãã£ãŠããåãã¯ã¹ãã£ã«åžžã«æ£ãããã©ãŒããããé©çšãããŸãã
é¢é£ïŒ http ïŒ
å¥ã®æ³šæç¹ãšããŠããããã©ããã§è¿œè·¡ããããã«ã examples/js/libs/basis
ã®JSã©ãããŒã«ã¯ãããŒã·ã¹ãªããžããªã®ããŒãžã§ã³ããã®ãã€ããŒãªå€æŽãå«ãŸããŠããŸãã æåã®å®£èšïŒ var Module
ïŒã¯Module
ã ãã«çœ®ãæããããWebWorkerã§äœ¿çšãããé
延åæåãæå¹ã«ããŸãã ããã¯ãç°ãªããã©ã°ã䜿çšããŠãã©ã³ã¹ã³ãŒããŒãã³ã³ãã€ã«ãããã httpsïŒ//github.com/BinomialLLC/basis_universal/issues/21ãä»ããŠãããããç°ãªãæ¹æ³ã§å®è¡ã§ã
BasisTextureLoaderã¯glTFãšé£æºããŠåäœããå¿ èŠããããŸããïŒ ãã¯ã¹ãã£ã.basis圢åŒã«æåã§ãšã³ã³ãŒãããBasisTextureLoaderã次ã®ãããªããŒããŒãšããŠè¿œå ããŠã¿ãŸããã
var basisLoader = new THREE.BasisTextureLoader();
basisLoader.setTranscoderPath( 'basis/' );
basisLoader.detectSupport( renderer );
THREE.Loader.Handlers.add( /\.basis$/i, basisLoader );
ãã ãããã¯ã¹ãã£ã¯é©åã«ã¬ã³ããªã³ã°ããããã³ã³ãœãŒã«ã«ã¯æ¬¡ã®åºåããããŸãã
[.WebGL-000002B68031CEF0]RENDER WARNING: texture bound to texture unit 1 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
@zeuxã説æããã®ãšåãåé¡
ç§ã¯ããããããã°ããŸããããããŠããã¯ä»¥äžã®ããã«èµ·ãããŸãïŒ
@zeuxå ¬åŒã«ã¯ãµããŒããããŠããŸããâã³ã¢glTFä»æ§ã§ã¯ãJPEGããã³PNGãã¯ã¹ãã£ã®ã¿ãèš±å¯ãããŠããŸãã ãã ããïŒKTX2ã©ãããŒãä»ããïŒããŒã·ã¹ã®æ¡åŒµæ©èœã¯ãå§çž®ããããã¯ã¹ãã£ã®ãµããŒãããã©ãŒãããã«è¿œå ããããšãèšç»ããŠããã¡ã«ããºã ã§ãã ãã©ããæ¡åŒµæ©èœã«ã€ããŠã¯https://github.com/KhronosGroup/glTF/pull/1612ãåç §ãïŒããã§ã¯æåã®2ã€ã®ã¿ãé¢ä¿ããŸãïŒããã£ãŒãããã¯ãèªç±ã«è¿œå ããŠãã ããã
ãšã¯èšããã®ã®ãBasisTextureLoaderã§ããããããããµããŒããããŠããªãã®ã¯ãçŽç²ã«ãŸã ããã«å°éããŠããªãããã§ãã ç§ã®ç¥ãéãããã©ã³ã¹ã³ãŒããŒèªäœãããããµããŒãããã¯ãã§ãã
mipmapãµããŒããä¿®æ£ããããã«PRãæåºããŸãã-ããã«ããã -mipmap
ãªãã·ã§ã³ã䜿çšããŠãã¯ã¹ãã£ãå€æããéããå°ãªããšããã¹ã¯ãããã§ã¯ãäžèšã®ããŒããŒãè¿œå ããéããglTFããŒããŒã¯æ©èœããŸãã ã¢ãã€ã«ïŒiPhoneãŸãã¯AndroidïŒã§å®è¡ã§ããŸããã§ããããå転ãããã¥ãŒãã䜿çšããthreejs.orgã®äŸã¯iPhoneã§ãæ©èœããªããããå¥ã®åé¡ã«ãªãå¯èœæ§ããããŸãã
ã¢ãã€ã«ïŒiPhoneãŸãã¯AndroidïŒã§å®è¡ã§ããŸããã§ãã
ããŒã·ã¹ããã¥ã¡ã³ãããâ
ããšãã°ãiOSã§ã¯ãPVRTC1ã«äœ¿çšã§ããã®ã¯2ãã¯ã¹ãã£æ¬¡å ã®2ä¹ã®ã¿ã§ããããã®å¶éãåé¿ããããã«BasisãçŸåšå®è¡ã§ããããšã¯äœããããŸããã ïŒç§ãã¡ã¯ãå°ããªépow2ãã¯ã¹ãã£ã2 PVRTC1ãã¯ã¹ãã£ã®ãã倧ããªãã¯ãŒã«ããã«å€æããæ©èœããµããŒãããäºå®ã§ããïŒ
ãã®ãã¢ã§ã¯512x768ã®ãã¯ã¹ãã£ã䜿çšããŠããããããããã®å¶çŽã«é©åãããã®ã«çœ®ãæããå¿ èŠããããŸãã
ããããŸãã-ããã¯çã«ããªã£ãŠããŸãã ç§ããã¹ãããŠããAndroidãã©ã³ã«ã¯ãããŒã·ã¹ãã¯ã¹ãã£ã«é¢é£ããã ãã§ãªããè€æ°ã®WebGLãã¢ã«é¢ããå€ãã®åé¡ããããŸããå¥ã®Androidãã©ã³ã¯åé¡ãªãåäœããŸãã ããã§ãããiOSã§åé¡ã«ãªãã®ã¯ãããã2ã®çŽ¯ä¹ã®å¶éã ãã§ãã
https://github.com/mrdoob/three.js/pull/16675ã«ããBasisTextureLoaderã®ããŸããŸãªæŽæ°
ã¢ã«ãã¡ããµããŒãããæ¹æ³ã«ã€ããŠãæ€èšããå¿ èŠããããŸã...åºæ¬ããã¥ã¡ã³ãã§ã¯ããªãã·ã§ã³ïŒhttps://github.com/BinomialLLC/basis_universal/#how-to-use-the-systemïŒã«ã€ããŠè©³ãã説æããŠããŸãããäžéšã®å Žåã¯ããã«ã¯è€æ°ã®ãã©ã³ã¹ã³ãŒãã£ã³ã°åºåãå«ãŸããããã€ã¹ïŒ
ETC1ã®ã¿ã®ããã€ã¹/ APIïŒ2ã€ã®ETC1ãã¯ã¹ãã£ã«ãã©ã³ã¹ã³ãŒãããã·ã§ãŒããŒã§ãµã³ããªã³ã°ããŸãã 2åã®é«ãã®1ã€ã®ETC1ãã¯ã¹ãã£ã䜿çšããããšãã2ã€ã®å¥ã ã®ETC1ãã¯ã¹ãã£ã䜿çšããããšãã§ããŸãã
ãããŸã§ã®ãšãããAPIã¯TextureLoader
ãšäžèŽããŸããããã¯ãåäžã®.basis
ãã¯ã¹ãã£ããè€æ°ã®ãã©ã³ã¹ã³ãŒããããåºåãè¿ãããšããµããŒãããããã«å€æŽããå¿
èŠããããŸãïŒãŸãã¯ä»£æ¿APIãå¿
èŠã§ãïŒã
https://github.com/mrdoob/three.js/pull/16686ã§æ£æ¹åœ¢ã®2ä¹ãã¯ã¹ãã£ã«å€æŽãããšãiOSã§ã®ãã¢ãä¿®æ£ãã
INVALID_VALUEïŒcompressedTexImage2DïŒArrayBufferViewã®é·ãããã£ã¡ã³ã·ã§ã³ã«å¯ŸããŠæ£ãããããŸããã
PVRTCã䜿çšããããããããã«ç¹å¥ãªããšãããå¿ èŠããããŸããïŒ
ããã¯æåŸã®æ°åã®ãããã®1ã€ã§èµ·ãã£ãŠããŸããïŒ
ã©ã®mipãç¹å®ããã®ã«ååãªã»ã©å³å¯ã«ãããã°ããŠããŸããã§ãããããšã©ãŒã¯3ååºåãããæåŸã®3ã€ã¯ãã¹ãŠåããããã¡ãŒãµã€ãºã§ããã ð€
BasisãæåŸã®æ°ãããã®ãµã€ãºïŒãã€ãåäœïŒãæ£ããèšç®ããŠããªãã®ã§ã¯ãªãããšæããŸãã PVRTC1 4bppã®å Žåããããã¯ã®å¯žæ³ã¯8ã«äžžããããããã4x4ã2x2ãããã³1x1ã¯8x8ãšåããµã€ãºã§ããå¿ èŠããããŸãã ããŒã·ã¹ãã©ã³ã¹ã³ãŒããŒã¯4x4ã«äžžãããããšæããŸãã ãµã€ãº8x8ã4x4ã2x2ã1x1ã®ãã¹ãŠã®ç»åã¯32ãã€ããåãå¿ èŠããããŸãã 4x4以äžã®å ŽåãããŒã·ã¹ã¯ã8ãã€ãã§32ã§ã¯ãªã8ãã€ããæäŸãã1ã€ã®4x4ãããã¯ã§ãããšæ³å®ããŠããŸãã@ richgel999
ç»åãµã€ãºã®èšç®åŒã¯æ¬¡ã®ãšããã§ãïŒ https ïŒ
For PVRTC 4BPP formats the imageSize is calculated as: ( max(width, 8) * max(height, 8) * 4 + 7) / 8
ãã®åé¿çïŒãã©ã³ã¹ã³ãŒããåŒã³åºãçŽåã®ã¯ãŒã«ãŒã§ïŒã¯ç§ã«ãšã£ãŠã¯ããŸãããããã§ãã ãã¡ãããããã¯ãã©ã³ã¹ã³ãŒããŒã§ä¿®æ£ããå¿ èŠããããŸãããJSã§ãããæ€èšŒããã®ã¯ç°¡åã§ãã
var mipWidth = basisFile.getImageWidth( 0, mip );
var mipHeight = basisFile.getImageHeight( 0, mip );
var mipSize = basisFile.getImageTranscodedSizeInBytes( 0, mip, config.format );
if ( config.pvrtcSupported ) {
// Basis incorrectly computes mip sizes for PVRTC, let's fix them up using the spec:
// https://www.khronos.org/registry/OpenGL/extensions/IMG/IMG_texture_compression_pvrtc.txt
mipSize = Math.floor((Math.max(mipWidth, 8) * Math.max(mipHeight, 8) * 4 + 7) / 8);
}
var dst = new Uint8Array( mipSize );
ããããšãïŒ ç§ã¯ãããã§ããã ãæ©ãä¿®æ£ããŸãã
PVRTC1ãããããããµã€ãºã®ãã°ãä¿®æ£ããå¿ èŠããããŸãã ãã©ã³ã¹ã³ãŒããŒãä¿®æ£ããŠãå°ããïŒå¹ 8ãã¯ã»ã«/é«ãæªæºïŒãããã®äœåãªãã€ããã¯ãªã¢ããããã«ããŸããã ãããŠãæ£ãããµã€ãºãè¿ãããã«ã©ãããŒãä¿®æ£ããŸããã åé¡ãããå Žåã¯ãç¥ãããã ãããã§ããã ãæ©ãä¿®æ£ããŸãã
@donmccurdy ã load
ã¡ãœããããtexture
ãåæçã«è¿ãããtodoãªã¹ãã«è¿œå ã§ããŸããïŒ ïŒtakahiroxãäžã§ææ¡ããããã«ïŒ
@ Ben-Mackãè¿œå ãããŸããã ã¢ã«ãã¡ãã£ãã«ãæã€ãã¯ã¹ãã£ã¯è€æ°ã®ãã¯ã¹ãã£ã«ãã©ã³ã¹ã³ãŒããããå¯èœæ§ããããåæçã«ãããããããªããããå¥ã®APIãå¿ èŠã«ãªãããšã«æ³šæããŠãã ããã
@ richgel999ããããšãããããŸãïŒ https://github.com/BinomialLLC/basis_universal/commit/ab722fa2e18536f9a1d5f33814f3088232446d52ãwebgl/transcoder/basis_wrappers.cpp
ã®ã¿ãæŽæ°ãããããWASMãã©ã³ã¹ã³ãŒããŒã®åæ§ç¯ã«åé¡ããããŸãã macOSã§ã®ã³ã³ãã€ã«ïŒ
$ emcmake cmake ../
-- Configuring done
-- Generating done
-- Build files have been written to: /Users/donmccurdy/Documents/Projects/basis_universal/webgl/transcoder/build
$ make
[ 33%] Linking CXX executable basis_transcoder.js
Traceback (most recent call last):
File "/Users/donmccurdy/Documents/Projects/emsdk/emscripten/1.37.22/em++", line 16, in <module>
emcc.run()
File "/Users/donmccurdy/Documents/Projects/emsdk/emscripten/1.37.22/emcc.py", line 882, in run
exec 'shared.Settings.' + key + ' = ' + value in globals(), locals()
File "<string>", line 1, in <module>
NameError: name 'emmalloc' is not defined
make[2]: *** [basis_transcoder.js] Error 1
make[1]: *** [CMakeFiles/basis_transcoder.js.dir/all] Error 2
make: *** [all] Error 2
çè«çã«ã¯ããã©ã³ã¹ã³ãŒããŒãPavingStones.basis
ãã¯ã¹ãã£ããããããããå«ã次ã®ãã¯ã¹ãã£ã«çœ®ãæããããšãã§ããã¯ãã§ãã
ç·šéïŒãã£ãšãããã¯https://github.com/BinomialLLC/basis_universal/pull/27ã«é¢é£ããŠããå¯èœæ§ããã
@donmccurdyããã«ã¯ã httpsïŒ//github.com/BinomialLLC/basis_universal/pull/27ãããŒãžããå¿ èŠããããšæããŸããããŸãããã°ãããã¯ããã«çºçããå¯èœæ§ããããŸãã ãŸããemscriptenããŒãžã§ã³ã¯emmallocã®ååšãããåã®ãã®ã§ããå¯èœæ§ããããŸããçŸåšãthree.jsã®äžéšã§ãããã¡ã€ã«ã¯ã1.38.31ã§ãã«ããããŠãããšæããŸãã
ãã®ãšã©ãŒã¯ãè€æ°ã®ããŒã·ã¹ãã¡ã€ã«ãåæã«ããŒãããããšãããšãã«çºçããŸããã
Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already neutered.
åçŸããã«ã¯ã次ã®ããã«load
ã¡ãœããã2ååŒã³åºãã ãã§ãã
loader.load( 'textures/compressed/PavingStones.basis');
loader.load( 'textures/compressed/PavingStones.basis');
@ Ben-MackãããããŸã ä¿®æ£ãã䟡å€ããããŸããããã®ãšã©ãŒã¯ããŸã£ããåããã¯ã¹ãã£ã2åããŒãããŠããããã§ãããããŒããŒã¯2ã€ã®ã¯ãŒã«ãŒã«åæã«è»¢éã§ããªãArrayBufferãåå©çšããŸãã 以äžã®ã³ãŒãã¯ã2åã®äœæ¥ãç ç²ã«ããŠå®è¡ãããŸãã
loader.load( 'textures/compressed/PavingStones.basis?v=1' );
loader.load( 'textures/compressed/PavingStones.basis?v=2' );
@donmccurdyã¢ã«ãã¡ã®ãµããŒãã«ã€ããŠã¯ã次ã®ãããªãã®ã¯ã©ã
load(...) // as usual
//then :
loader.getRGBTexture() //return by the load function as usual
loader.getAlphaTexture() //can be use as alphaMap
ã¢ã«ãã¡ããµããŒããããªãã·ã§ã³ãããããããã®ã¢ãã«ã«è¿œå ãããå¯èœæ§ããããŸãã
loader.generateAlpha = true //default
@ Makio64ãã®ãããªãã®ïŒ ã»ãšãã©ã®threejsããŒããŒã¯ã¹ããŒããã«ã§ã¯ãããŸããïŒåäžã®ããŒããŒãè€æ°ã®ãã®ã䞊è¡ããŠåŠçããŠããå¯èœæ§ããããŸãïŒã®ã§ãããããïŒ
const [ map ] = loader.loadRGB( 'foo.basis', { ...options } );
const [ map, alphaMap ] = loader.loadRGBA( 'bar.basis', { ...options } );
^ã©ã¡ãã®å Žåããç¹ã«ã¢ã«ãã¡çã§ã¯ãã¡ãœããã®æ§æãå¿ èŠãšããããã«ãããŸããŸãªæ¹æ³ããããšæããŸãã
ãŸãã¯ã代ããã«ãæ°ããã¡ãœããã§éåæã«ããããšãã§ããŸãã
loader.loadRGBA( 'bar.basis', { ...options }, ( map, alphaMap ) => {
// ...
} );
éåæãœãªã¥ãŒã·ã§ã³ã¯ãã¯ãŒã«ãŒã䜿çšããŠå®è£ ããä»ã®threejsã®ããŒããŒãšé£æºããæ¹ãç°¡åã«èŠããŸãã
解å床768x512ãŸãã¯384x 256ãªã©ã®ãã¯ã¹ãã£ã®ã¿ãããŒãã§ããŸããä»ã®è§£å床ã¯Three.jsããã³BasisTextureLoaderã§ããŒãã«å€±æããèŠåã衚瀺ãããŸãã
ããã¯ã¹ãã£ãŠããã0ã«ãã€ã³ãããããã¯ã¹ãã£ã¯ã¬ã³ããªã³ã°ã§ããŸããããããã2ã®çŽ¯ä¹ã§ã¯ãªããäºææ§ã®ãªããã¯ã¹ãã£ãã£ã«ã¿ãªã³ã°ããããŸããã
@ mozg4Dã¯ãããŒã·ã¹ã®ããã¥ã¡ã³ããåç §ããŠãã ãããç¹ã«ãiOSã§ã¯2ã®çŽ¯ä¹ã®ãã¯ã¹ãã£ãå¿ èŠã§ãã ããã¥ã¡ã³ãã衚瀺ãããŠããåäœãšäžèŽããªãå Žåã¯ãæ°ãããã°ãå ±åããŠãã ããã éžæãããã¯ã¹ãã£ãã£ã«ã¿ãªã³ã°ã«äºææ§ããªãå¯èœæ§ããããŸãããã®å Žåã§ããã¢ãå¿ èŠã§ãããæ°ãããã°ã圹ç«ã€ã§ãããã ããããšãïŒ
@donmccurdyããŒã·ã¹ã¢ã«ãã¡ãµããŒãã¯ãŸããªããªãªãŒã¹ãããŸããïŒ
ãã°ãèŠã€ãããšæããŸããiOSã®ã¿ã§ããã¯ã¹ãã£ãžãªã¡ããªã®ãšããžå šäœã«å¥åŠãªããã¯ã¹ãã£ã°ããŒã€ã³ã°ãå¹æããããŸãïŒïŒ17597
ä»ã®èª°ããããã«ééããŸãããïŒ
iOSã§ã¯PVRTCã䜿çšããå¯èœæ§ãé«ããšæããŸãã ããã¯ä»¥åã®ããŒãžã§ã³ïŒr108ïŒã§çºçããŸããïŒ
ãã¶ãã httpsïŒ//github.com/BinomialLLC/basis_universalã§åé¡ããŸããïŒ
ããã¯ä»¥åã®ããŒãžã§ã³ïŒr108ïŒã§çºçããŸããïŒ
ç§ãæåºãããã°ã¯r108çšã§ãã
ãã¶ãã httpsïŒ//github.com/BinomialLLC/basis_universalã§åé¡ããŸããïŒ
ã¡ããã©ããããŠããéäžã§ããïŒ https ïŒ
ãã°ãèŠã€ãããšæããŸããiOSã®ã¿ã§ããã¯ã¹ãã£ãžãªã¡ããªã®ãšããžå šäœã«å¥åŠãªããã¯ã¹ãã£ã°ããŒã€ã³ã°ãå¹æããããŸãïŒïŒ17597
ç§ã¯basis_universalgithubã§è¿ä¿¡ããŸããã ãã¯ã¹ãã£ãååŸããŠãäœãèµ·ãã£ãŠãããã確èªããŸãã ã»ãšãã©ã®å Žåãããã¯ãã©ãã/ã¯ã©ã³ãã¢ãã¬ã¹æå®ãã©ã³ã¹ã³ãŒããã©ã°ãæ£ããèšå®ãããŠããªãããšã«é¢é£ããã¢ãŒãã£ãã¡ã¯ãããŸãã¯ãªã¢ã«ã¿ã€ã PVRTC1ãšã³ã³ãŒããŒã«ãã£ãŠåŒãèµ·ããããã¢ãŒãã£ãã¡ã¯ãã§ãã ã©ã¡ãããåé¡ã§ããå Žåãéåžžã¯åé¿çããããŸãã ãã©ã³ã¹ã³ãŒãCPUæé/ã¡ã¢ãªãå¢ããããšã§ãPVRTC1ã®å質ãåäžãããããšãã§ããŸãã
https://github.com/BinomialLLC/basis_universal/issues/78#issuecomment-536159690ã«æŽæ°ãæçš¿ããŸãã-ã¹ã¯ãªãŒã³ã·ã§ãããå«ãŸããŠããŸãã
ããã¯ãå転ããŠããªãç«æ¹äœã®ã©ããã¢ã©ãŠã³ãã®åé¡ã瀺ããŠããŸãã
å¥ã®ãã°ãèŠã€ããŸããïŒãã ããããããç¡é¢ä¿ã§ãïŒïŒ https ïŒ
å¥ã®ãã°ãèŠã€ããŸããïŒãã ããããããç¡é¢ä¿ã§ãïŒïŒ ïŒ17546ïŒã³ã¡ã³ãïŒ
ïŒ17622ã§ä¿®æ£ãããŸããã
ããããããã«é¢ããŠãããããããã.basisãã¡ã€ã«ã«åã蟌ãããšãªããåºæ¬ãã¯ã¹ãã£ãã¡ã€ã«ïŒ.gltfãã¡ã€ã«å ã§åç §ãããïŒãé©åã«ããŒãããæ¹æ³ã¯ãããŸããïŒ
-mipmap
ã䜿çšããŠ.basisãã¡ã€ã«ãçæãããšãããããã£ãããŒãã§ããŸãããããã«ããã.basisãã¡ã€ã«ã«å€ãã®ãã¡ã€ã«ãµã€ãºãè¿œå ãããŸãããã ãã -mipmap
䜿çšããã«.basisãã¡ã€ã«ãçæãããšããªãã·ã§ã³ã®å Žåãthreejsã䜿çšãããã©ãŠã¶ã§ã¯åã«é»ã§è¡šç€ºãããŸãã
ããããããã«é¢ããŠãããããããã.basisãã¡ã€ã«ã«åã蟌ãããšãªããåºæ¬ãã¯ã¹ãã£ãã¡ã€ã«ïŒ.gltfãã¡ã€ã«å ã§åç §ãããïŒãé©åã«ããŒãããæ¹æ³ã¯ãããŸããïŒ
-mipmap
ã䜿çšããŠ.basisãã¡ã€ã«ãçæãããšãããããã£ãããŒãã§ããŸãããããã«ããã.basisãã¡ã€ã«ã«å€ãã®ãã¡ã€ã«ãµã€ãºãè¿œå ãããŸãããã ãã-mipmap
䜿çšããã«.basisãã¡ã€ã«ãçæãããšããªãã·ã§ã³ã®å Žåãthreejsã䜿çšãããã©ãŠã¶ã§ã¯åã«é»ã§è¡šç€ºãããŸãã
ä»ã®ãšããããããããããç¡å¹ã«ããŠãã¯ã¹ãã£ã衚瀺ããããšãã§ããŸãã
https://discourse.threejs.org/t/compressed-texture-workflow-gltf-basis/10039/12?u=johannesdeml
https://github.com/JohannesDeml/three.js/commit/909d9cc6dc9192f398df7455f52b7e71e3bf61e2
ãã¡ãããããã¯ããããããã®ãµããŒãã§ã¯ãããŸãããããã¯ã¹ãã£ã衚瀺ããããšã ããç®çã®å Žåã¯ãç°¡åãªè§£æ±ºçã«ãªãå¯èœæ§ããããŸãã
ããã¯ããæ©èœããŠããªãããã§ãã1ã€ã®ããããããã®ã¿ãæ€åºãããå ŽåïŒhttps://github.com/mrdoob/three.jsïŒãBasisTextureLoaderã«ãåæ§ã®ã³ãŒãïŒmin / magFilter = LinearFilterãèšå®ïŒãããããã§ãã /blob/e66e86901abd84ffc260fea9665170631a2b0493/examples/js/loaders/BasisTextureLoader.js#L170-L171ïŒ-ããã¯ã -mipmap
ãªãã·ã§ã³ãªãã§basisu
çæãããã®ã§ãã ããããããã¯ãŸã é»ã§ãã
ãã¡ã€ã«ãå
±æã§ããŸããïŒ ç§ã¯å
é±ãšåããããæè¿ãããè¡ã£ãŠããŸããããããã¯.basis
ã§ã¯ãªã.ktx2
ã³ã³ããã®ããŒã·ã¹.basis
...
ãããŠç¢ºèªããããã«âå®è¡æã«ãããã®ãããããããçæããããšã¯ã§ãããé¢é£ããè£éå¶çŽãåŠçããå¿ èŠãããããšãç¥ã£ãŠããŸããïŒ
æ¿ç¥ããŸãããã芧ããã ãããããšãããããŸãã
ãããŠç¢ºèªããããã«âå®è¡æã«ãããã®ãããããããçæããããšã¯ã§ãããé¢é£ããè£éå¶çŽãåŠçããå¿ èŠãããããšãç¥ã£ãŠããŸããïŒ
ã¯ããç§ããããç解ããŸãããå§çž®ãããjpgãšæ¯èŒããŠ.basisã®äœããã¡ã€ã«ãµã€ãºã§èŠãã²ã€ã³ã®å€ãã倱ãããã®ã§å°ãæ®å¿µã§ã-GPUã¡ã¢ãªã²ã€ã³ããŸã ããã«ããããšãç¥ã£ãŠããŸãããç§ã¯ã»ãšãã©ã§ãããã¯ã¹ãã£ã®ããŠã³ããŒã/転éãµã€ãºã«çŠç¹ãåœãŠãŠããŸãã
ãããŠç¢ºèªããããã«âå®è¡æã«ãããã®ãããããããçæããããšã¯ã§ãããé¢é£ããè£éå¶çŽãåŠçããå¿ èŠãããããšãç¥ã£ãŠããŸããïŒ
jpg / pngã®ä»£ããã«basisã䜿çšããå Žåãããã¯åžžã«åœãŠã¯ãŸããŸããïŒ
ãã©ãŒããããREADMEã§ããããµããŒã/èšåããŠããããããã¥ãŒããããã®ãã§ã€ã¹ãªã¹ããšããŠ6ã€ã®ãã¯ã¹ãã£ãåäžã®åºæ¬ãã¡ã€ã«ã«ããã¯ãããŠãŒã¹ã±ãŒã¹ã«ã€ããŠã¯ã©ãã§ããããã ããã§ã¯PMREMãžã§ãã¬ãŒã¿ãŒã¯åœ¹ã«ç«ãããåºæ¬ãã¡ã€ã«ã«ã¯çæãããåãã¯ã¹ãã£ã®ãããããããå«ãŸããŠããå¿ èŠããããŸããïŒ
ThreeJSã§ãã¥ãŒãããããšããŠäœ¿çšããããã«ãã®ããã¯ããããã¯ã¹ãã£ããŒã¿ãæäŸããã®ã¯ã©ãã§ããïŒ éåžžãåã ã®ãã¯ã¹ãã£ããšã«åŒæ°ãæž¡ããŸããïŒ ïŒãã®ãã¯ã¹ãã£ããŒããŒã®ãµããŒãã«ã€ããŠã¯ãè€æ°ã®ãã¯ã¹ãã£ãå«ãåºæ¬ãã¡ã€ã«ãå¯èœãã©ããããŸã 調ã¹ãŠããŸããïŒä»£æ¿æ段ã¯ããã¥ãŒãããããšããŠäœ¿çšãããã§ã€ã¹ãªã¹ãããã¯ã®åºæ¬ãã¡ã€ã«ãæäŸããã®ã«é©ããŠããå¯èœæ§ãããKTX2çµç±ã§ãã
ã¢ã«ãã¡ã®åŠçã«ã€ããŠèª¬æããŠãããšãã®ãã®äœ¿çšæ³ã«é¢ããæåŸã®è³ªåã§ããããããã®ãã¯ã¹ãã£ã¯RGBEãŸãã¯RGBMãšããŠãšã³ã³ãŒãã§ããŸãïŒThreeJSã¯M7ããã³M16ããµããŒãããŠããŸãïŒã ããããåºæ¬çã«ã©ãã ãããŸãå§çž®ããããã«ã€ããŠã¯èª¿æ»ããŠããŸããããæ³ç·ããããç¥ãããŠããã®ãšåæ§ã®åé¡ãçºçããå¯èœæ§ããããŸãã ã¢ã«ãã¡ãã£ãã«ããŒã¿ã¯ãããã§ãµããŒãããããã«éåžžã«éèŠã§ããã©ã®å§çž®ãã¯ã¹ãã£åœ¢åŒã«ãã©ã³ã¹ã³ãŒãããããã¯ããããŸããã以äžã®ãªã³ã¯å ã®èšäºã§èª¬æããŠããããã«ãçµæãããªãæªããã®ããããŸãã
ARMã¯ãããšãã°ASTCãšRGBMã®åé¡ã«é¢ããèšäºãæžããŸããã èšäºã§èšåãããŠããUnityãšã³ãžã³ã¯RGBM5ã䜿çšããŸããããã¯ãã»ãšãã©ã®å Žåãé©åãªHDRç¯å²ãã«ããŒããã¯ãã§ããããŒã¿ãç¯å²å¶éå ã«åãŸãå Žåãä¹æ°ãäœãã»ã©ãä¹æ°å®æ°ãé«ãå Žåãããå§çž®å質ã®åé¡ãå°ãªããªããšèããããŸãã
ç³ãèš³ãããŸãããããããã®è³ªåã«å¯Ÿããçãã¯ããããŸããã BasisUniversalãŸãã¯KTXGitHubãªããžããªã®æ¹ã幞éãããããŸããã KTX2ãããŒã·ã¹ãã€ããŒããæã€ãã¥ãŒããããããµããŒãããããã«èšèšãããŠããããšãç§ã¯ç¥ã£ãŠããŸãã
ããã§èª¬æããŠããThreeJSãµããŒãã䜿çšããã®ã«é¢é£ããã±ãŒã¹ã®ããã«æãããã®ã§ãããã§ããããåãäžããŸããã
ããŒã·ã¹ã¯ããã¥ãŒããããã®6ã€ã®ãã¯ã¹ãã£ãã¹ãŠã1ã€ã®ããŒã·ã¹ãã¡ã€ã«ã«ä¿åã§ããŸãã ããŒã·ã¹ããµããŒãããKTX2ã¯ãè€æ°ã®ãã¯ã¹ãã£ãåãããã¥ãŒãããããããé©åã«ãµããŒãã§ããŸããããã¡ã€ã«ã¯1ã€ã§ãã
ThreeJSãå°æ¥ãããåŠçã§ãããã©ããã¯äžæã§ãã ããããã6ã€ã®ç°ãªãåºæ¬ãã¡ã€ã«ãæäŸããããåºæ¬ããŒããŒã®ãµããŒãã§KTX2ãååŸããå¿ èŠããããŸãã
RGBM5ã«ã¯åå¥ã®PRãå¿ èŠã§ããçŸåšååšããã®ã¯ãRGBM7ãŸãã¯RGBM16ããä¹æ°ã®å€ã調æŽããããã«ãŠããã©ãŒã ã䜿çšããããªã¢ã³ãã§ãã ããã«ããäž»ãªéèŠãªéšåã¯ãæ£ããå§çž®ããããã«ã¢ã«ãã¡ãé©åã«åŠçããå¿ èŠãããããããã®å·ã®ååã§èª¬æããããã«ãã¢ã«ãã¡ãããçšåºŠå¶åŸ¡ã§ããããšã¯ãæ³ç·ããããšãã®ç·åœ¢/ãšåæ§ã«ãã¢ã«ãã¡ã圹ç«ã€å¥ã®äŸã§ããéã«ã©ãŒãšã³ã³ãŒãã£ã³ã°ãå§çž®ã®ãµããŒãã«å¿ããŠããã©ãŒãããã2ã€ã®å¯èœãªãã¯ã¹ãã£ïŒXã®å Žåã¯åè²RGBãYã®å Žåã¯ã¢ã«ãã¡ïŒã«åå²ãããå ŽåããããŸãã
Three.jsã¯çŸåšãããŒã·ã¹ãŠãããŒãµã«ããµããŒãããŠããŸãã æ°ããããŒã·ã¹ãã©ãŒãããã§ããUASTCã¯ãã»ãã®æ°é±éåã«ãªãªãŒã¹ãããŸããã ãã以åã¯ãããŒã·ã¹ãåäžã®ãã¡ã€ã«ã§ãã¥ãŒããããããµããŒãããŠãããšã¯æããŸããã ãã«ãªã¯ãšã¹ãã¯å€§æè¿ã§ãã
KTX2ããŒããŒãé²è¡äžã§ããhttpsïŒ//github.com/mrdoob/three.js/pull/18490ããããŸãã
README for Basisã®å€ãããŒãžã§ã³ïŒUASTCããåã§ãããçŸåšã®READMEã«ã¯ãŸã ååšããŸãïŒã¯ãåäžããŒã¹ã®ãã¡ã€ã«æ©èœãžã®è€æ°ã®ãã¯ã¹ãã£ãããã³ã°ã«ã€ããŠã®èšåã瀺ããŠããŸãã
ããŒã·ã¹ãã¡ã€ã«ã¯äžåäžãªãã¯ã¹ãã£é åããµããŒãããŠããããããã¥ãŒãããããããªã¥ãŒã ãã¯ã¹ãã£ããã¯ã¹ãã£é åãããããããã¬ãã«ããããªã·ãŒã±ã³ã¹ããŸãã¯ä»»æã®ãã¯ã¹ãã£ãã¿ã€ã«ãã1ã€ã®ãã¡ã€ã«ã«ä¿åã§ããŸãã ã³ã³ãã¬ããµãŒã¯ãã¡ã€ã«å šäœã®è²ãšãã¿ãŒã³ã®çžé¢é¢ä¿ãå©çšã§ããããããããããããå«ãè€æ°ã®ç»åã1ã€ã®ãã¡ã€ã«ã«éåžžã«å¹ççã«ä¿åã§ããŸãã
ãã«ãªã¯ãšã¹ãã¯å€§æè¿ã§ãã
ã©ãããå§ãããããã®ãããããªãããä»ã®ãšããæããããŸããã ããããããã®åé¡ãå®äºãŸã§é²è¡ããKTX2ããŒããŒã®æºåãã§ããããå§çž®/ããã¯ããããã¥ãŒããããã®ãµããŒãã«å¯ŸåŠã§ããŸãã ãããŸã§ã«æãããã°ãPRã«è²¢ç®ããŠã¿ãŠãã ãã:)
ããã«ã¡ã¯ãiOSã§æç¶çãªåé¡ãçºçããŸããïŒaawww maaaanïŒïŒ
åºæ¬çã«ããã¯ã¹ãã£ãããŸãèªã¿èŸŒãŸããããšãããã°ã衚瀺ãããªãããšããããŸãã
ã³ã³ãœãŒã«ã«ãšã©ãŒã¯ãããŸãããããŒãã®é²è¡ç¶æ³ã¯100ïŒ
ãªã®ã§ããããã¯ãŒã¯ã®åé¡ã§ã¯ãããŸããã
å
¬åŒã®äŸïŒhttps://threejs.org/examples/?q=basis#webgl_loader_texture_basisïŒãšç§èªèº«ã®ãããžã§ã¯ãã®äž¡æ¹ã§ãã¹ãããŸããã ç§ã®iPhoneXãSafariã§ã¯ããã¯ã¹ãã£ã衚瀺ãããå Žåãšè¡šç€ºãããªãå ŽåããããŸãã
iPhone 6ãSafariã§ã¯ã衚瀺ãããŸããã
ä»ã®ãã¹ãŠã¯ããŸãèŠããŸãã
ã©ããªãåŸããïŒ
[ç·šé] Mac OSã®Safariã§ãåãåé¡ãçºçããŸããããæç¶çã§ã
@iggheraããã¯ãã°ã®ããã«
BasisTextureLoader
2Dé
åãã¯ã¹ãã£ã®ãµããŒããè¿œå ããã«ã¯ã©ãããã°ããã§ããããã ãããå°ã調ã¹ãŸããããã©ãããã°ããã®ãããããããŸããã
transcode
é¢æ°ãå€æŽããŠã basisFile.getNumImages()
ã«ãã£ãŠè¿ãããã«ãŠã³ãããç»åãã«ãŒãããããã«å€æŽããã®ã¯ç°¡åã«æããŸãããããã«ç¶ããŠå¯ŸåŠãã3ã€ã®ããšãããããã§ãã
compressedTexImage3D
ã¯THREE.WebGLState
ååšããªãããã WebGLRenderingContext.compressedTexImage3D
ããšã«gl.TEXTURE_2D_ARRAY
ãªãã·ã§ã³ãæž¡ãå¿
èŠããããŸããsampler2DArray
ã«ãã€ã³ãããã«ã¯ãåäžã®å€§ããªãã¯ã¹ãã£ããããå¿
èŠã§ããïŒCompressedTexture
ã¯ãç»åã€ã³ããã¯ã¹ããšã«ãããããããé¢é£ä»ããæ¹æ³ãå¿
èŠã§ãã 200æ·±ãé
åã®ç»åãš6ããããããã¬ãã«ã§ã¯ãããã¯ããã ããã1200ã®ãããããããšã³ããªã«ãªãã ããmipmaps
ã§CompressedTexture
ã¹ãã©ã€ãã®é
åã«ãªããŸãã ãŸãã¯ãWebGLããã®è©³çŽ°ãæœè±¡åããæ¹æ³ã¯ãããŸããïŒæ¬¡ã«ããããªãã¯ã¹ãã£ã®å Žåãããããå¥ã®å®è£ ãå¿ èŠã«ãªããŸãã äžåºŠã«ãããã§ãã©ã³ã¹ã³ãŒãããã®ã§ã¯ãªããåºæ¬ãã¡ã€ã«ãã³ãã«ãéãããŸãŸã«ããŠã次ã®ãã¬ãŒã ãèŠæ±ããæ¹æ³ããããŸãã
æãåèã«ãªãã³ã¡ã³ã
ãã®åé¿çïŒãã©ã³ã¹ã³ãŒããåŒã³åºãçŽåã®ã¯ãŒã«ãŒã§ïŒã¯ç§ã«ãšã£ãŠã¯ããŸãããããã§ãã ãã¡ãããããã¯ãã©ã³ã¹ã³ãŒããŒã§ä¿®æ£ããå¿ èŠããããŸãããJSã§ãããæ€èšŒããã®ã¯ç°¡åã§ãã