NASA-AMMOS / 3DTilesRendererJS

Renderer for 3D Tiles in Javascript using three.js
https://nasa-ammos.github.io/3DTilesRendererJS/example/bundle/mars.html
Apache License 2.0
1.64k stars 291 forks source link

Couldn't load ktx2 texture #733

Closed zysyz closed 2 months ago

zysyz commented 2 months ago

I performed KTX2 texture compression on my 3D Tiles data, but when I replaced the JSON file path in the index.html example from the example folder with my 3D Tiles data in 3DTilesRendererJS, an error appeared in the browser console. Please see the screenshot below. img_v3_02ef_33dbeee8-6a0e-469d-9629-44b3139be0fg

Platform:

gkjohnson commented 2 months ago

Hello! Just like Draco decompression, KTX2 support must be added to a custom-registered GLTFLoader manually. See this section in the docs:

https://github.com/NASA-AMMOS/3DTilesRendererJS?tab=readme-ov-file#adding-draco-decompression-support

This is done since loading worker / wasm data cannot be published internally in the package and not all tile sets require this functionality so we can avoid downloading it unless needed.

zysyz commented 2 months ago

你好!就像 Draco 解压缩一样,必须手动将 KTX2 支持添加到自定义注册的 GLTFLoader 中。请参阅文档中的此部分:

https://github.com/NASA-AMMOS/3DTilesRendererJS?tab=readme-ov-file#adding-draco-decompression-support

这样做是因为加载 worker / wasm 数据无法在包内部发布,并且并非所有图块集都需要此功能,因此我们可以避免下载它,除非需要。

Thank you for your reply. I have added support for ktx2 in my code, but it did not work and the error still exists

    tiles = new TilesRenderer( url );
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( 'https://unpkg.com/three@0.153.0/examples/jsm/libs/draco/gltf/' );

const ktx2loader = new KTX2Loader();
ktx2loader.setTranscoderPath( 'https://unpkg.com/three@0.153.0/examples/jsm/libs/basis/' );
ktx2loader.detectSupport( renderer );

const loader = new GLTFLoader( tiles.manager );
loader.setDRACOLoader( dracoLoader );
loader.setKTX2Loader( ktx2loader );
loader.register( () => new GLTFCesiumRTCExtension() );

tiles.fetchOptions.mode = 'cors';
tiles.manager.addHandler( /\.gltf$/, loader );
geospatialRotationParent.add( tiles.group );
gkjohnson commented 2 months ago
tiles.manager.addHandler( /\.gltf$/, loader );

This will need to account for gltf as well as glb extensions since your files are packed as b3dm. I've updated the docs to reflect this:

tilesRenderer.manager.addHandler( /\.(gltf|glb)$/g, loader );
zysyz commented 2 months ago
tiles.manager.addHandler( /\.gltf$/, loader );

This will need to account for gltf as well as glb extensions since your files are packed as b3dm. I've updated the docs to reflect this:这需要考虑到gltfglb扩展名,因为你的文件是打包为b3dm的。我更新了文档以反映这一点:

tilesRenderer.manager.addHandler( /\.(gltf|glb)$/g, loader );

After I switched to tilesRenderer. manager. addHandler (/. (gltf | glb) $/g, loader), the error still persists and the texture cannot be loaded. Can you load the texture on your end

gkjohnson commented 2 months ago

It looks like your models do not specify the correct extension required for supporting KTX2 textures.

zysyz commented 2 months ago

It looks like your models do not specify the correct extension required for supporting KTX2 textures.看起来您的模型没有指定支持KTX2纹理所需的正确扩展名。

Okay, I tried using Cesium to load this model and there were no issues

gkjohnson commented 2 months ago

Cesium's loader may be a bit looser with the requirements but three.js' GLTFLoader expects the extension to be defined as the GLTF specification requires:

https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_texture_basisu/README.md

zysyz commented 2 months ago

Cesium's loader may be a bit looser with the requirements but three.js' GLTFLoader expects the extension to be defined as the GLTF specification requires:Cesium的加载器的要求可能有点宽松,但three.js的GLTFLoader希望扩展被定义为GLTF规范要求:

https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_texture_basisu/README.md

Thank you for your reply. I think I may have to temporarily give up loading 3dtiles data with ktx2 texture

gkjohnson commented 2 months ago

Adding the necessary extension to GLTF binary shouldn't be too intrusive but it depends on how you are generating the assets. Unfortunately this isn't something I can help with, though. In general files should follow the GLTF specification to ensure portability.

I'll close this for now, though, because ultimately this is an issue related to three.js' GLTFLoader.