# Safari 27's model element: do you still need WebGL? By Sindhur Dutta, Creative Director, BUNQ LABS. Published 5 October 2026. Canonical: https://bunqlabs.com/insights/safari-27-model-element-3d-on-the-web > Safari 27 makes simple 3D a plain HTML element. Where the model element is enough, and where custom WebGL or WebGPU still earns its place. ## Key takeaways - Safari 27, released on 17 September 2026, supports the HTML model element on iOS, iPadOS and macOS, so a 3D model can be embedded much like an image or video. - For simply showing a product and letting people rotate it, the model element may be all you need on Apple devices. - Custom WebGL or WebGPU still wins for art direction, custom shaders, scroll-driven storytelling, configurators and fine control over performance. - The model element is a Safari feature for now, so any site using it needs a fallback for other browsers. - Choose the tool by what the 3D has to do, not by what is newest. For simple 3D, such as showing a product and letting people turn it around, you may not need WebGL any more on Apple devices. Safari 27 supports the HTML model element, which embeds a 3D model much like an image. For anything beyond viewing, such as custom visuals, storytelling, configurators or tight performance control, custom WebGL or WebGPU is still the right tool. Here is what changed, where each option fits, and how we would decide. ## What is new in Safari 27? Apple released Safari 27 on 17 September 2026. The headline for 3D is that the HTML model element now works on iOS, iPadOS and macOS, letting sites embed 3D models natively. You can read the full list in [WebKit's Safari 27 post](https://webkit.org/blog/18325/webkit-features-for-safari-27-0/). Safari 27 brings plenty more for web designers too, as [9to5Mac summarised](https://9to5mac.com/2026/09/17/webkit-blog-breaks-down-whats-new-with-safari-27-for-developers-including-mcp-support/): - a customisable select menu, with new ways to style its icon and checkmark - the CSS stretch keyword, for sizing an element to fill the space available - color-mix() with more than two colours - a :heading selector, which targets all headings at once - scroll anchoring, which stops content jumping when things load above it - anchor positioning that follows transformed elements - 844 quality fixes The model element is the one that changes how we think about 3D on the web. ## What is the model element? It is a tag you put in a page's HTML, like the img tag for a picture or the video tag for a film. Instead of a picture, you point it at a 3D model file. The browser then draws the model for you. Before this, showing a 3D model on a web page meant using WebGL, the technology that lets a browser draw real time 3D graphics, usually through a library such as Three.js. That works well, but it means loading extra code and writing the viewer yourself. With the model element, the browser does that job. That means less code to load and less to maintain. ## When is the model element enough? When the job is simply: "let people look at this object properly". Good fits include: - **A product page.** A shoe, a watch, a speaker. The visitor wants to see it from every side. - **A catalogue.** Many products, each with a model, where building a custom viewer for each would not make sense. - **Documentation and education.** A part, a tool or an object people need to understand in three dimensions. - **A quick upgrade.** A site that currently shows a photo carousel and wants something more tangible, without a full 3D build. Our take: if your 3D only needs to be looked at, the model element is a genuinely good option on Apple devices. Simpler is better when simpler does the job. We make the same argument in [does your brand need an immersive 3D website](/insights/does-your-brand-need-an-immersive-3d-website): use the lightest tool that does what the page needs. ## When do you still need WebGL or WebGPU? When the 3D has to do more than sit still and be turned. WebGPU is the newer way for browsers to use the graphics chip, with more control than WebGL. It has been available in all major browsers since around January 2026. Custom builds still win in five areas: ### Art direction A browser's built-in viewer decides how your model is lit and framed, within limits. A custom scene lets you choose the lighting, camera, colour and mood, so the 3D looks like your brand rather than a generic viewer. ### Shaders and effects A shader is a small program that runs on the graphics chip and decides how each pixel looks. Glass, fog, liquid, glow and stylised looks all come from custom shaders. On [Why Zero](/projects/why-zero), which won FWA Site of the Month and an Awwwards Developer Award, four custom shaders carry the story, including glass shards falling through a red void. A built-in viewer cannot do that. ### Storytelling Scroll-driven scenes, camera moves, gates the visitor must cross, sound timed to motion. Telling a story in 3D needs code that controls what happens and when. ### Configurators A 3D product configurator lets a customer change colours, materials and parts and see the result live. That needs logic, interface and data connected to the model. On the [Tesels homepage](/projects/tesels), the hero is a live mini configurator built around a watch. We explain what makes these work in [3D product configurator design that converts](/insights/3d-product-configurator-design-that-converts). ### Performance control With a custom build, you decide how detail drops on a slow phone, how textures are compressed, and what loads first. That control matters when your audience uses budget hardware. We cover our method in [how to make a WebGL website run smoothly on cheap, old phones](/insights/fast-webgl-websites-on-budget-phones). ## What about browsers that do not support the model element? This is the practical catch. Safari 27 supports the model element on iOS, iPadOS and macOS. Do not assume it works anywhere else. So any site using it needs a fallback. Depending on the page, that could be: - a good photograph or set of photographs - a short turntable video - a lightweight WebGL viewer for other browsers A sensible pattern is to use the model element where it is supported and fall back gracefully elsewhere. If you need a WebGL viewer as the fallback anyway, it is worth asking whether one custom viewer for everyone is simpler to maintain than two paths. ## How should you decide? Ask what the 3D has to do. 1. **Only be looked at and rotated?** Try the model element, with a fallback. 2. **Look like your brand, not a default viewer?** Custom build. 3. **Tell a story or respond to scroll?** Custom build. 4. **Let customers change options?** Custom configurator. 5. **Run fast on budget phones across all browsers?** Custom build with deliberate performance work, or the model element plus a careful fallback. Many sites will end up with both. A catalogue might use the model element for hundreds of products, while the homepage runs a custom scene that sets the tone. ## What does this mean for brands? It is good news. Simple 3D is becoming cheaper and easier, which means more products will be shown properly instead of in flat photos. That raises the floor for everyone. It also raises the bar for custom work. When basic 3D comes free with the browser, a custom scene has to earn its place through art direction, story or function. That is the work we do at BUNQ LABS, and you can see the range on our [services page](/services). If you are not sure whether your product needs a model element, a custom WebGL build or neither, [get in touch](/contact). ## Frequently asked questions ### What is the HTML model element? It is an HTML tag that embeds a 3D model in a web page, in the same way the img tag embeds a picture. The browser handles the rendering, so you do not need a 3D library. ### Does the model element work in Chrome and Firefox? Safari 27 supports it on iOS, iPadOS and macOS. Do not assume it works in other browsers, and always provide a fallback such as an image, a video or a WebGL viewer. ### Is WebGL now obsolete for 3D websites? No. The model element covers simple viewing. Anything with custom visuals, storytelling, interaction logic or configuration still needs WebGL or WebGPU. ### Should I use the model element for my product page? If you only need people to look at and rotate a product on Apple devices, it is worth trying, with a fallback for everyone else. If you need options, animation or a branded scene, use a custom build. ### What is WebGPU? WebGPU is a newer way for browsers to use the graphics chip, offering more control than WebGL. It has been available in all major browsers since around January 2026. --- BUNQ LABS: https://bunqlabs.com/ ยท Contact: projects@bunqlabs.com