{"$schema": "https://raw.githubusercontent.com/guitaripod/wwdc-sessions/master/schema/transcript.schema.json", "id": "wwdc2026-215", "language": "eng", "source": "https://developer.apple.com/videos/play/wwdc2026/215", "wordCount": 2127, "segments": [{"start": 7.0, "text": "Hi, my name is Aleksei an engineer from the Safari team."}, {"start": 11.0, "text": "Today I'm thrilled to tell you about the HTML Model element,"}, {"start": 16.0, "text": "and how we're making it easier for developers to bring 3D content"}, {"start": 21.0, "text": "to the web across Apple platforms and beyond."}, {"start": 25.0, "text": "Whether you're a web developer exploring 3D for the first time,"}, {"start": 29.0, "text": "or an experienced 3D artist looking to bring your work to the web,"}, {"start": 34.0, "text": "I've got everything you need to get started."}, {"start": 37.0, "text": "We pioneered the Model element in visionOS —"}, {"start": 40.0, "text": "a native HTML element that makes adding a 3D model as simple as adding an image."}, {"start": 48.0, "text": "Now the Model element comes to iOS, iPadOS, and macOS!"}, {"start": 54.0, "text": "The same markup, the same element works across Apple's platforms."}, {"start": 60.0, "text": "Your 3D content reaches every Safari visitor"}, {"start": 64.0, "text": "whether they are on iPhone on the go,"}, {"start": 68.0, "text": "on iPad at the coffee shop,"}, {"start": 72.0, "text": "or on Mac at their desk."}, {"start": 75.0, "text": "You might be familiar with \"model-viewer\", the go-to JavaScript library for 3D today."}, {"start": 81.0, "text": "It's served developers well,"}, {"start": 84.0, "text": "but the Model element is native: no extra library,"}, {"start": 88.0, "text": "rendered directly by the platform,"}, {"start": 90.0, "text": "with built-in stereoscopic rendering on visionOS."}, {"start": 94.0, "text": "It's also an emerging web standard, so your code is future-proof."}, {"start": 100.0, "text": "To reach all platforms across the web, a polyfill is available for browsers"}, {"start": 105.0, "text": "that don't natively support the Model element yet."}, {"start": 109.0, "text": "I'll cover that in more detail later."}, {"start": 112.0, "text": "Let's say I'm working on"}, {"start": 113.0, "text": "an e-commerce platform for outdoor adventures"}, {"start": 117.0, "text": "and I already have images for the products."}, {"start": 119.0, "text": "Today, I'll walk you through adding 3D models to the product pages."}, {"start": 124.0, "text": "First, I'll show you how to get assets ready."}, {"start": 128.0, "text": "Then, we'll dive into the Model element"}, {"start": 131.0, "text": "building up the experience one feature at a time."}, {"start": 134.0, "text": "And finally, I'll show you command-line tools to optimize models for production."}, {"start": 140.0, "text": "Let's get into it."}, {"start": 142.0, "text": "What if you don't have 3D assets in the first place?"}, {"start": 146.0, "text": "We recommend a Capture, Convert, Create approach"}, {"start": 149.0, "text": "using your iPhone to scan real-world objects, converting existing files,"}, {"start": 155.0, "text": "or building from scratch in tools like Blender."}, {"start": 159.0, "text": "But there's also been a revolution in generative AI"}, {"start": 162.0, "text": "and with it an entirely new way to make the content you want."}, {"start": 167.0, "text": "You can use images to generate a model that matches a real-world object,"}, {"start": 171.0, "text": "or a text prompt for more creative generation."}, {"start": 175.0, "text": "Apps like Tripo3D and Meshy.ai are only a couple to choose from."}, {"start": 180.0, "text": "My store already has a few products, but I want to add an essential:"}, {"start": 185.0, "text": "a camping mallet."}, {"start": 186.0, "text": "I started with several images of a mallet"}, {"start": 190.0, "text": "and after a few minutes, my model was ready to use."}, {"start": 194.0, "text": "I exported it as a USDZ file."}, {"start": 197.0, "text": "The Model element supports USDZ —"}, {"start": 200.0, "text": "Universal Scene Description, zipped into a single file."}, {"start": 204.0, "text": "It packages everything a 3D model needs:"}, {"start": 207.0, "text": "geometry, materials, textures, animations."}, {"start": 212.0, "text": "Safari supports other formats too, but for the best experience,"}, {"start": 217.0, "text": "I would recommend starting with USDZ."}, {"start": 220.0, "text": "It's time to put a model on the page."}, {"start": 223.0, "text": "Now, the mallet is ready as a USDZ file."}, {"start": 226.0, "text": "I'll cover different ways of presenting the Model element."}, {"start": 230.0, "text": "I'll talk about how to embed a model,"}, {"start": 233.0, "text": "know when it's ready to display, and handle fallbacks."}, {"start": 237.0, "text": "How to match the model to my page design."}, {"start": 240.0, "text": "Let visitors interact and explore."}, {"start": 243.0, "text": "I'll guide you on how to implement custom transforms and play animations."}, {"start": 249.0, "text": "And bring models into the real world with AR Quick Look and spatial computing."}, {"start": 255.0, "text": "OK, starting with loading a model."}, {"start": 258.0, "text": "Just like <img> tag or <video> tag,"}, {"start": 261.0, "text": "you point <model> tag at a file with the source attribute,"}, {"start": 265.0, "text": "and the browser handles the rest."}, {"start": 268.0, "text": "No plugins required."}, {"start": 270.0, "text": "You can also use the <source> tag with a specified mime type"}, {"start": 274.0, "text": "again the same pattern as <video> tag."}, {"start": 279.0, "text": "It's also important to think about fallback."}, {"start": 282.0, "text": "The simplest approach: place an <img> tag inside your <model> tag."}, {"start": 287.0, "text": "Older versions of Safari and browsers that don't yet support the Model element"}, {"start": 292.0, "text": "will render the image instead."}, {"start": 294.0, "text": "Your visitors still get an idea of the product."}, {"start": 297.0, "text": "3D models can be tens of megabytes or more in size,"}, {"start": 301.0, "text": "so it can take a while to load."}, {"start": 304.0, "text": "The ready promise lets you know"}, {"start": 306.0, "text": "when the model is actually loaded and ready to display."}, {"start": 310.0, "text": "While the model is loading, it's a good idea to provide a visual cue"}, {"start": 314.0, "text": "like a spinner."}, {"start": 316.0, "text": "Hide it when the ready promise resolves."}, {"start": 319.0, "text": "And if something unexpected happens,"}, {"start": 322.0, "text": "handle it in the catch block and show your fallback content."}, {"start": 326.0, "text": "You can also polyfill the model functionality as well."}, {"start": 330.0, "text": "A polyfill retrofits the API of a new standard via JavaScript"}, {"start": 334.0, "text": "letting you use modern features even before they land on every platform."}, {"start": 339.0, "text": "The Model element samples at the W3C show an example of exactly this."}, {"start": 345.0, "text": "If the native element isn't defined on the window,"}, {"start": 349.0, "text": "they load the polyfill library to fill in as much of the functionality as they can,"}, {"start": 354.0, "text": "as close to the native API as possible."}, {"start": 358.0, "text": "Just make sure to test the functionality of both"}, {"start": 361.0, "text": "the polyfill and the native element,"}, {"start": 363.0, "text": "and remember that some features of the element can not be polyfilled,"}, {"start": 368.0, "text": "such as the stereoscopic display on spatial platforms like Apple Vision Pro."}, {"start": 374.0, "text": "The Model element is rendered in its own virtual space,"}, {"start": 378.0, "text": "so it won't pick up the page's background."}, {"start": 380.0, "text": "To match your page design,"}, {"start": 382.0, "text": "set background-color directly on the model."}, {"start": 386.0, "text": "Keep in mind: the background is always rendered opaque,"}, {"start": 391.0, "text": "even if you specify a color with transparency it will be converted."}, {"start": 395.0, "text": "Now we have a model loaded and integrated into the existing page."}, {"start": 400.0, "text": "Giving our visitors an option to interact with it is a natural next step."}, {"start": 405.0, "text": "Let me show you how easy that is."}, {"start": 408.0, "text": "The stagemode attribute with value orbit"}, {"start": 411.0, "text": "lets your visitors rotate the model freely side-to-side"}, {"start": 415.0, "text": "and if they tilt it up or down,"}, {"start": 417.0, "text": "it gently springs back to its original angle."}, {"start": 420.0, "text": "Interactive, but always looking its best."}, {"start": 423.0, "text": "The attribute also makes the model slightly smaller —"}, {"start": 426.0, "text": "it's rescaled to ensure no parts get clipped during rotation."}, {"start": 431.0, "text": "Sometimes you want to add custom interactivity to the experience."}, {"start": 435.0, "text": "The entityTransform property lets you set exact viewing angles via JavaScript"}, {"start": 441.0, "text": "and I'm going to add two buttons to show how it works:"}, {"start": 445.0, "text": "one for Side view,"}, {"start": 447.0, "text": "and a Reset button to bring the model back to its original orientation."}, {"start": 452.0, "text": "To use entityTransform, you'll need to disable orbit —"}, {"start": 456.0, "text": "either remove stagemode attribute or set it to \"none\"."}, {"start": 462.0, "text": "When you transform the model manually, parts of it may get clipped"}, {"start": 466.0, "text": "or even disappear if rotated out of the visible area."}, {"start": 470.0, "text": "You might need to adjust the position to make it visible."}, {"start": 475.0, "text": "To implement a transform I create a DOMMatrix"}, {"start": 479.0, "text": "— this represents the model's orientation in 3D space —"}, {"start": 483.0, "text": "then call rotateSelf to define the rotation."}, {"start": 486.0, "text": "Here we're rotating 135 degrees around the Y axis to get the side view."}, {"start": 492.0, "text": "Finally, assign it to model.entityTransform"}, {"start": 496.0, "text": "to apply the change."}, {"start": 498.0, "text": "Capture the initial transform up front"}, {"start": 501.0, "text": "then use it to reset the model back to its original orientation."}, {"start": 506.0, "text": "The views switched instantly from one to another."}, {"start": 509.0, "text": "To make that transition smooth,"}, {"start": 511.0, "text": "you can animate the rotation with requestAnimationFrame."}, {"start": 515.0, "text": "First, set up the state:"}, {"start": 518.0, "text": "the current angle, the animation duration in milliseconds"}, {"start": 522.0, "text": "— 500 gives you half a second which feels snappy but smooth —"}, {"start": 526.0, "text": "and a reference to cancel any inflight animation."}, {"start": 531.0, "text": "The animateTo first cancels any running animation so transitions don't conflict,"}, {"start": 538.0, "text": "captures the current angle as the starting point,"}, {"start": 541.0, "text": "and marks the start time."}, {"start": 545.0, "text": "Then I add the step function."}, {"start": 548.0, "text": "On each frame, it computes how far along the animation is,"}, {"start": 553.0, "text": "eases the rotation for a smooth finish,"}, {"start": 556.0, "text": "and updates entityTransform with a new DOMMatrix."}, {"start": 560.0, "text": "While the animation is still running, it requests the next frame."}, {"start": 565.0, "text": "Finally, assign animateTo calls to the buttons."}, {"start": 569.0, "text": "Side view animates to 135 degrees…"}, {"start": 573.0, "text": "reset to 0."}, {"start": 576.0, "text": "Let's see it in action."}, {"start": 577.0, "text": "When a user taps Side button,"}, {"start": 579.0, "text": "the model smoothly rotates to show the side view."}, {"start": 583.0, "text": "After tapping Reset it glides right back to where it started."}, {"start": 587.0, "text": "Custom transforms and animations give you full control,"}, {"start": 591.0, "text": "but they require extra work:"}, {"start": 594.0, "text": "bounding boxes, clipping, manual animation code."}, {"start": 597.0, "text": "If your use-case allows it,"}, {"start": 599.0, "text": "the orbit stagemode gets you interactive 3D with a single attribute."}, {"start": 604.0, "text": "Choose what works best for your product."}, {"start": 607.0, "text": "Models can also come to life with built-in animation."}, {"start": 612.0, "text": "These animations are typically authored in 3D tools like Blender or Maya"}, {"start": 617.0, "text": "and baked into the USDZ file."}, {"start": 620.0, "text": "The Model element plays the first animation track,"}, {"start": 623.0, "text": "and with a couple of lines of JavaScript,"}, {"start": 626.0, "text": "you can control the playback rate"}, {"start": 628.0, "text": "or even run it in reverse by providing a negative value."}, {"start": 632.0, "text": "To do that, I implement a simple play function"}, {"start": 636.0, "text": "that sets playbackRate on the model"}, {"start": 639.0, "text": "and calls model's play() method — that's it."}, {"start": 642.0, "text": "A positive value plays forward, a negative one reverses it."}, {"start": 647.0, "text": "Here I'm using 5 and -5 for a faster playback."}, {"start": 652.0, "text": "So far, the store visitors can explore products in 3D right on the page."}, {"start": 657.0, "text": "But what if they want to see how it looks in their environment?"}, {"start": 664.0, "text": "Wrap the model in an <a> tag with rel=\"ar\" attribute,"}, {"start": 670.0, "text": "point to the same resource,"}, {"start": 673.0, "text": "and on iOS and iPadOS, your customers get a full AR Quick Look experience."}, {"start": 681.0, "text": "On visionOS, the Model element was already making 3D content"}, {"start": 685.0, "text": "feel like a natural part of the web."}, {"start": 688.0, "text": "With stereoscopic rendering, models gain real depth."}, {"start": 693.0, "text": "Your customers can pull the product out of the page"}, {"start": 697.0, "text": "and examine it as if it were right in their hands."}, {"start": 701.0, "text": "visionOS also supports immersive website environments"}, {"start": 705.0, "text": "which use the Model element"}, {"start": 707.0, "text": "and let you transport your audience right inside a scene,"}, {"start": 711.0, "text": "all from Safari."}, {"start": 715.0, "text": "If you want to learn more about this feature,"}, {"start": 718.0, "text": "be sure to check the \"Explore immersive website environments\" session."}, {"start": 721.0, "text": "It explains the API in detail."}, {"start": 725.0, "text": "With the assets ready and the model elements in place,"}, {"start": 728.0, "text": "let's see it all come together."}, {"start": 731.0, "text": "Here's our catalog page with 3D models."}, {"start": 735.0, "text": "And the interactive exploration is my personal favorite."}, {"start": 739.0, "text": "Your customers can rotate, tilt, and view every angle of the product,"}, {"start": 744.0, "text": "exploring it in the way they want."}, {"start": 746.0, "text": "All running right in Safari."}, {"start": 749.0, "text": "Our product page looks fantastic running locally,"}, {"start": 752.0, "text": "but you may find loading can take a while over the internet."}, {"start": 755.0, "text": "It would be great if we could get these models smaller."}, {"start": 759.0, "text": "To do that, I'm going to run a command-line tool"}, {"start": 762.0, "text": "called usdcrush on the boot model."}, {"start": 765.0, "text": "And with no change in quality,"}, {"start": 767.0, "text": "the file goes from 7.9 MB down to 1.9 MB!"}, {"start": 772.0, "text": "That's crushing savings!"}, {"start": 776.0, "text": "When we open both versions side- by-side in Safari — they look identical."}, {"start": 781.0, "text": "Same visual quality, significantly smaller file."}, {"start": 786.0, "text": "If you have a 3D file, but no image for it yet,"}, {"start": 790.0, "text": "you can use usdrecord tool to generate a thumbnail"}, {"start": 793.0, "text": "or a fallback image directly,"}, {"start": 795.0, "text": "specifying things like output format or rendering from a custom camera"}, {"start": 800.0, "text": "if there's one in the file."}, {"start": 802.0, "text": "And unlike a screenshot, you can write a script —"}, {"start": 805.0, "text": "well, who am I kidding?"}, {"start": 807.0, "text": "Your favorite LLM can write the script — to run it across your entire catalog."}, {"start": 812.0, "text": "Both these command-line tools are already installed on your Mac."}, {"start": 816.0, "text": "They're part of a larger suite of tools for working with USD content."}, {"start": 822.0, "text": "You can learn more about all of them and the overall USD ecosystem…"}, {"start": 826.0, "text": "in the WWDC24 session"}, {"start": 829.0, "text": "\"What's new in USD and MaterialX\"."}, {"start": 833.0, "text": "The Model element started on visionOS, and with iOS, iPadOS, and macOS support,"}, {"start": 839.0, "text": "it's expanding across the Apple family"}, {"start": 842.0, "text": "and we want to bring it to the web at large."}, {"start": 845.0, "text": "Our team actively contributing to the model specification at the W3C,"}, {"start": 850.0, "text": "and we would love to hear from you."}, {"start": 853.0, "text": "If there are features you would add or use cases we haven't considered,"}, {"start": 857.0, "text": "now is a great time to share your feedback."}, {"start": 861.0, "text": "Web standards are shaped by the developer community,"}, {"start": 864.0, "text": "and your voice matters."}, {"start": 867.0, "text": "For 3D content in the USDZ file format,"}, {"start": 870.0, "text": "the Alliance of OpenUSD has published the full specification,"}, {"start": 874.0, "text": "a clear, vendor-neutral reference."}, {"start": 877.0, "text": "The alliance also provides conversion tools and resources"}, {"start": 881.0, "text": "to help you integrate USDZ into your existing content pipelines."}, {"start": 886.0, "text": "That's the Model element — from assets to production."}, {"start": 890.0, "text": "Now, let me tell you about next steps."}, {"start": 893.0, "text": "Try to create a 3D model of your own"}, {"start": 896.0, "text": "using text-based prompts or images you already have."}, {"start": 901.0, "text": "Add a <model> tag to your website,"}, {"start": 903.0, "text": "point it at a USDZ file, and see how it comes to life in Safari."}, {"start": 909.0, "text": "Use the USD tools to optimize your assets."}, {"start": 912.0, "text": "Play with it on different platforms and see how the element adapts."}, {"start": 917.0, "text": "Join the Immersive Web Community Group at the W3C."}, {"start": 922.0, "text": "Bring your use cases, your feedback, and your ideas."}, {"start": 926.0, "text": "Catch up on the related sessions."}, {"start": 928.0, "text": "Like \"Immersive website environments.\""}, {"start": 930.0, "text": "And for a deeper dive into spatial web features,"}, {"start": 933.0, "text": "see \"What's new for the spatial web\" from WWDC25."}, {"start": 939.0, "text": "I can't wait to see what you build."}, {"start": 941.0, "text": "Thank you and have a great WWDC!"}]}