When downloading the files, you get a bunch of .gltf and .ktx2 files. Curiously, the glTF files are invalid – there are hundreds of errors, for example – not declaring extensions (KHR_texture_basisu) - wrong image MIME types (some JPEGs are named PNG!) - accessor and normals

So when loading the files, they'll have no textures... Fortunately we can fix that quite easily. First, we open the file in a text editor (VS Code here) Then, format (ctrl + p, > format) Now that's easier to work with. The structure of glTF is basically JSON.

At the end of the file, we can declare the KHR_texture_basisu extension. That tells viewers to load textures in a GPU-optimized format pushed forward by @_binomial. Also, we need to fix the image MIME type... image/ktx is for KTX1, the textures here are actually image/ktx2.

Now, things start to work – we can use gltf-transform to pack everything together as nice single GLB file: `gltf-transform copy d9836c94f70dcebf0bc6.gltf d9836c94f70dcebf0bc6.glb` Let's drop that GLB in https://viewer.needle.tools to take a closer look:

Needle Viewer is our powerful browser-based workspace for inspecting 3D files. It's crazy dense with information, and allows deep inspection of all aspects of a glTF file. Here, looking at various texture channels and surface properties:

We can also see which objects have been individually modelled, by showing object ID colors. Nodes don't have nice names anymore, all has likely been automatically processed and mangled.

Textures still have names though! Worth noting that Apple is using very nice PBR materials here, with surface properties like clear coat, specular highlights, metallic-roughness and occlusion maps. All that can be represented in glTF.

What's notable is that all meshes and materials have a property "extras.uuid", which is often used to reference data from the outside. In this case, probably to wire together the models and the configurator around it.

There's also some custom HDR/EXR environment files (yes, both formats). They contain high-dynamic range data for nice lighting and reflections.

Now we're getting to the configurator. There's a ~38.000 line JSON file, called "iPhoneProViewer_Mac.lsd" This file contains everything from texture assignments, to camera controls, to motion easing, to environment blending, to lightmap assignments.

Seems there's quite a bit of tooling involved (the file says "version": "10.2.0-beta12"). Maybe I'll dive into their structure and decisions deeper another time... getting a bit late here 💤

TL;DR: glTF 3D is powerful and the age of spatial experiences on the web is here. It doesn't need to be this complex though, we're building @NeedleTools so you can focus on creating beautiful 3D web experiences at a fraction of the effort: https://needle.tools

@hybridherbst @glTF3D @threejs @donrmccurdy Are they using Draco/Meshopt or it’s just pure uncompressed model? 14mb sims like a huge size per model

@rennesis @glTF3D @threejs @donrmccurdy They’re not using draco or meshopt, but the data is shared between the different configurations, so 13 MB is for all

@hybridherbst @glTF3D @threejs @donrmccurdy Nice! I wonder if they add those complexities on purpose so it's no longer reusable by 3rd parties 🤷‍♂️

@maxymvs @glTF3D @threejs @donrmccurdy Thought about that too, but there would be much stronger ways to do "encrypt" the assets – this way it's still "almost valid" and pretty easy to fix (with the right knowledge).

@hybridherbst @glTF3D @threejs @donrmccurdy wow! are they even using gltf on safari?

@rcabanier @glTF3D @threejs @donrmccurdy Yep, right here – https://www.apple.com/de/iphon... From my tests, the <model> proposal that would take USDZ, maybe, one day, is not even intended for these kinds of use cases where you want full scene control

@hybridherbst @glTF3D @threejs @donrmccurdy This is such a bad model though. It isn’t optimized and full of n-gons.

@Ejviper @glTF3D @threejs @donrmccurdy It’s a typical product asset https://x.com/hybridherbst/sta...

@hybridherbst @glTF3D @threejs @donrmccurdy Apple used gltfs for previous iPhone model as well. Not sure why but many front-end guys don't know glb is a thing at all.

@gongminmin @glTF3D @threejs @donrmccurdy Tooling is hard (still mostly command line) and information about how to use it right is sparse... We're changing that with @NeedleTools though, glTF-first 3D engine in the browser with WSIWYG integrations into Unity and Blender

@hybridherbst @glTF3D @threejs @donrmccurdy Does anyone know why they had the logo be part of the mesh and not just part of the texture/metallic map?

@pBactusp @glTF3D @threejs @donrmccurdy Because as a mesh it has basically vector resolution, instead of being limited by pixels

@hybridherbst @glTF3D @threejs @donrmccurdy they are on the apple website as uncompressed gltfs loading tons of ktx?

@sylwestermiel @glTF3D @threejs @donrmccurdy That is pretty much the case, yes – each model pulls in approx. 14 MB (with some of the textures being shared though) They could be much smaller but I can't even compress them, since there's so many validation errors (incorrect sizes, out of bounds stuff) that the tools fail

@hybridherbst @glTF3D @threejs @donrmccurdy Where on Apple’s website do you find 3d models of their phones?

@hybridherbst @glTF3D @threejs @donrmccurdy @repponen a heads up... https://x.com/repponen/status/...

@hybridherbst @glTF3D @threejs @donrmccurdy My buddy