iOS large textures and Level of Detail (LOD) / Progressive Loading

[chris_east]

Hi threejs community.

We need to display models, with high res textures, on mobile device. Android is fine but Apple’s limit for iOS is 4096 x 4096.

We need to explore a LOD / progressive loading solution. I cannot find any recent posts that are of any use to our current predicament.

I believe I need to create a tiled model, right? Is there any resource online that can help us with the entire process, from exporting the Tiled model, through to what our threejs viewer needs to have enabled in order to work with a tiled model?

I look forward to hearing from my Saviour very soon and I thank you all in advance for any insight or support that you can offer.

[vielzutun.ch]

@chris_east

Android is fine but Apple’s limit for iOS is 4096 x 4096.

To my knowledge there don’t exist any devices running iOS which would be able to display 4096 x 4096. So that iOS limit seems reasonable.

[chris_east]

mmm… thanks but, as per my original post, I’m hoping to find a resource where I can research tiled models.

[vielzutun.ch]

mmm… as per your original post you gave as a reason for wanting to tile textures in the first place that iOS has a limit of 4096 x 4096. That reason I meant to invalidate.

Apparently you have other reasons you didn’t disclose yet.

[chris_east]

Thank you - 4k has served us quite satisfactorily so far. But now I’m thinking, if we go with tiled, I can reduce the resolution massively, I believe.

Currently just looking to find a really good resource for learning more about tiled models (it seems like that is the correct approach to take). I discovered a 3D Tiles renderer which looks pretty and so I’m hoping to learn more about the whole process, before diving into the deep end!

[vielzutun.ch]

Maybe this can help you out:

3d-Tiles-Renderer: A 3D Tiles implementation for three.js from NASA JPL

Hey guys! It’s been around for a while now but I wanted to share the 3d-tiles-renderer project I worked on and open sourced years ago from NASA JPL! For a couple of our Mars missions now we’ve been producing 3d tiles data sets that include data from our orbiters and rovers which are used in some of our tools for displaying contextual landscape and environment information for rover operations. The 3d tiles renderer here has specifically been used on the Perseverance and Curiosity rover missions o…

[Attila_Schroeder]

What you are looking for is called a “virtual texture system”

Here’s a link to the Unreal Engine documentation. See the second video about halfway down the page. Under the heading: Streaming Virtual Texturing
https://dev.epicgames.com/documentation/en-us/unreal-engine/virtual-texturing?application_version=4.27

I developed exactly the same mechanics: a virtual texture system in threejs, with WebGPU.

I had to upscale and rework the textures because I couldn’t find a model with 16k or, even better, 32k textures.

But it can be even more extreme.
Here, with 3 x 131k textures.

I would ideally like to have textures for Mars with over 1M but they are hard to find.

The ship model isn’t tiled, by the way. This affects the textures, not the geometry. My Mars is, of course, a precedural mesh that adapts, because otherwise the vertex density would be far too high.
Models can also be tiled. This is called a virtual geometry system. In the Unreal Engine, this is the nanite system. I did something similar in threejs WebGPU. The systems can be coupled. My Mars is like both in one. But these systems are no small feat. They are very complex projects.
If you don’t have much experience with threejs, and especially with three.webgpu.js, then this is a mammoth task you’ve taken on.