Making 3D perform(ant)
Daniel Marqusee
July 2, 2024
INTRO
For those not knee-deep in 3D performance, it’s essentially manipulating assets, animations, and lighting so the 3D experience you build will run smoothly in its intended device (ex. desktop, mobile, VR headsets). Optimization is the act of making something performant.
Performance determines the success of the design and end product. In an ideal world, it should be top of mind for designers from the moment design starts until it’s handed off to an engineer to build in an engine.
However, there’s no single way to approach performance in 3D design and it's rarely a priority in early design process.
We believe it’s time to address this conundrum. Performance can no longer be an afterthought in the 3D design process or left to engineers to figure out. 3D creative tools have to help designers optimize their work, while improving their ability to iterate.
With so many teams designing 3D games and apps in Bezi, we felt it was due time to start the long journey of understanding performance and building a truly helpful solution for 3D design workflows.
Before we get into the weeds, let’s go back in time to see how we got here. Then we can all share some laughs about what a tar-pit idea this is and why we’re committed to solving it anyway.
Source: Teehan & Lax
BACK IN TIME
Optimization has always been a sign of successful, mature designers. However, the need for such thoughtfulness has been mitigated over the years thanks to improvements in tooling. Here’s a short history of how optimization went from tables stakes to a lost-yet-coveted art in 2D design.
Please note - we've left out a million important things that happened during this time period. We’re also being intentionally squishy with dates since there are very passionate views about what happened and when and we don’t want people with pitchforks showing up outside our office.
Source: Coronam Francisco Dominic Tiongson
2012(ish)
The world looked really different roughly a decade ago. Designers lived in multiple tools - primarily in the Adobe ecosystem. Vectors (SVGs) weren’t supported, everything was made of raster images, and all prototyping happened with a pen and paper. Designers were an integral part of figuring out how to make an end product or website work properly for the end device.
2013(ish)
Sketch 2 came along and changed the game. Their ability to support raster and vectors joined the split ecosystem and enabled them to carve out a nascent industry (mobile design lol) in the Apple ecosystem. Designers still had to create multiple sizes of images and assets that scaled for different devices, but the industry was starting to rally around a single standardized solution.
In many ways, Sketch started the path to addressing performance across 2D design by enabling more widespread use of vectors on the web - replacing raster graphics and enabling faster, more scalable websites.
However, while the power of vector was indeed powerful, few mediums could support it.
2016/2017
All hail the season of improved standards. CSS3 and HTML5 became the standard for the web, Chrome (and the rise of self-updating browsers) finally beat out IE10 as standard browser, and the SVG became the interoperable standard for web graphics. You no longer needed 3 versions of a single graphic running on your website. You didn’t have to spend half your design time optimizing. Life was good.
Ironically, Sketch 2 enabled much of this but wasn’t interoperable themselves. As a result, deliverables and collaboration were too fractured.
2017 and beyond
Having an interoperable standard but not being able to create things inter-operably in Sketch created a vacuum. Enter Figma, who took the 2D design industry by storm through their browser-based tool that was optimized for the interoperable nature of the web.
Figma’s platforms allowed designers to create one single, auto-optimized graphic and distribute it across all mediums, with SVGs being the silver bullet enabling it all.
—
In just 5 years the SVG enabled a full revolution in how designers created 2D content and managed their performance. It went from something we were optimizing for from the beginning to something we didn’t have to think about. As tools evolved, they enabled designers to focus on the flow instead of the technical limitations. Instead, we just left that to developers.
And this leads to where we are today.
Source: Digitaltrends
WHY PERFORMANCE IS IMPORTANT NOW
Today designers often prioritize building the ideal thing first and consider optimization later on - or not at all. There’s plenty of debate about the cause. We believe that designers may not understand the performance implications of what they design because they - regardless of the medium they design for - use mature, 2D design tools for their early design processes. These tools are beloved by many - including us! In fact, one of the best parts is they obfuscate performance and optimization so designers can focus on creating something beautiful (ref: 2017 and beyond). If performance and optimization wasn’t something we HAD to spend a lot of time on, trust us.. we wouldn’t want to either.
Alas, performance isn't something that can be ignored. It’s critical to designing good 3D experiences for apps and games. Whether you want someone to feel like they’re part of a new world that’s all around them (AR/VR) or in a screen (desktop/mobile) the core of good 3D design is how real it feels.
This means that if lagging performance prevents an interaction from feeling as smooth as a real-life experience, you’ll never get the nuanced feedback needed to make an exceptional app or game.
From the very beginning, subtleties MATTER.
Achieving this requires designing for both performance and visuals from the start. That seems straightforward… but let’s break down the actual implications of that for a designer’s job.
For a designer to effectively optimize a 3D game or app in early stages of a design they need a fundamental understanding of how 3D software works. We’ve taken the liberty of noting a subset of the skills they would need to have or learn. Each can take decades and even the best don’t actually consider themselves masters of these domains.
Animation
Modeling
Raster Creation
Texture Creation
UV Unwrapping
Topology (Retopology and Decimation)
Lighting
Baking (Light, Texture, Animations)
Atlasing
Lazy Loading
Occlusion Culling
Managing Draw Calls with Instancing
Audio and Video Compression
Material Optimization
Managing Content Deliverables per Platform
Shader Creation and Management
and so. much. more.
Let's not forget that optimization is not the only thing that matters. Performance is a single variable - one of a million - inside a 3D design or scene that designers need to obsess over.
If designers have a million variables to consider, performance is only one of them, and it’s THAT complicated to do well, how can designers prioritize it regularly without sacrificing design?
If designers need to be empowered to design for good performance from the very beginning, we need to give them tools that reduce the time, effort, and expertise needed to do so. Sounds easy enough.. right?
Pfff.
TAR PIT IDEA
In the absence of a “silver bullet” for 3D design - a vector-esque solution that can unify the industry around one path to performance - we won’t be able to deliver a one-size-fits-all perfect solution.
How do you build a tool capable of diagnosing a solution to the unique, unknown desire of a design?
Performance is, by definition, ambiguous. That’s only exacerbated more by unpredictable nuance of 3D. Every platform and engine is different, and technology is evolving rapidly. There is no universal standard for 3D models and platforms use different formats (USDZ, GLTF, FBX, …). Physics and simulations are complex. Lighting is somehow an art AND a science.
The intent and context changes by designer (and project), which changes how a design should be optimized. For example, if there’s a large 3D world with a high-poly card model placed in it, what does the system optimize for? If the designer needs a performant high-poly car model, it’s OK to cut down on other elements… but if they need a performant 3D world with detailed lighting, the high-poly model can be made into a low-poly object.
This is why some may consider 3D performance a “tar pit idea”. We are starting this journey knowing we cannot give 3D designers what they really need right now. We know, even at the start, that this will be a total slog.
WHY WE'RE INVESTING IN IT ANYWAY
So… why do it?
Do we know something others don’t? Nope.
Are we going to build a standardized solution to this amorphous problem tomorrow? Lol, also no.
We’re investing in this because we’ve observed that people want help with performance and no tools have taken the designer's perspective seriously enough to really help. We want to start there and open a thoughtful conversation that will move the industry towards real change.
Too abstract you say? Let’s break it down together.
As designers we must define the pain points, constraints, and problem space of a design. Creating a premature solution to an undefined problem will only make things worse.
Since the performance problem is still poorly defined and not fully understood, the first step is to learn and information gather.
Anyone trying to craft a “comprehensive solution” (something that’s both reactive and proactive) today is missing the point. They’re building something to make themselves seem more advanced, instead of approaching it from a design POV - understanding the problem so we can make real advancements sooner.
We are dedicated to approaching the performance problem as designers. We know this will benefit everyone in the industry but some thing are bigger than us. We want to be a part of the movement that helps bring the industry towards a standardized solution to make performant 3D design accessible.
HOW WE'RE APPROACHING IT
Lots of talk about the why - but the how is all that really matters.
We’ve already covered why were too early in discovery to deliver a holistic, proactive solution. And with so many variable that go into a 3D design, we can’t possibly build a tool that tries to optimize each 1:1.
Where the industry is today, the most important thing is to bring performance into the design process earlier and gather the insight needed to diagnose the sickness. As a result, our first investment in performance optimizes (hehe) for three things:
Prominence in the design workflow
Responsive and actionable
Communication
Prominence in the design workflow
We are baking performance into the core design workflow in Bezi. Performance isn’t a “checklist feature” to be buried in a menu item. It’s a critical part of the design process that's given proportional real estate in Bezi's UI, so it’s easier for designers to incorporate and prioritize it early.
Responsive and actionable
In this season of learning, our goal is to give designers the most accurate, timely, and actionable insight into what is and isn’t working in their Bezi file. The intention is that by surfacing easy-to-digest touch points early in the design process, it will be easier to design for visuals AND performance from the start.
Communication
Only through conversation will the industry be able to build a standardized solution to 3D performance. We’re prioritizing clear communication in the performance panel to incentivize this conversation. If designers are given explicit details as to why something isn’t working, it can be made more performant AND we have the vocabulary needed to discuss optimization with our design and eng counterparts.
This dedication to clarity and action ironically revealed some weakness of our own. When testing our Performance Panel, we noticed many of our pre-built templates (and other things) were NOT performant. This is embarrassing right? We’re building a tool in our platform to help people optimize their work, but parts of our platform and assets aren’t optimized? We should hide that.. or at least make it harder for people to understand?! But instead of obfuscating the information or hiding the tool, we’ve embraced this as a necessary reality to bring us closer to resolution. We optimized the templates (and other things) and shipped this first step.
This is just that - the first step in a very long journey. If done right everyone will learn and evolve a lot - including us.
We hope the Performance Panel helps improve your work, the same way it’s helped to improve our own. We’re excited to walk this road together.
INTRO
For those not knee-deep in 3D performance, it’s essentially manipulating assets, animations, and lighting so the 3D experience you build will run smoothly in its intended device (ex. desktop, mobile, VR headsets). Optimization is the act of making something performant.
Performance determines the success of the design and end product. In an ideal world, it should be top of mind for designers from the moment design starts until it’s handed off to an engineer to build in an engine.
However, there’s no single way to approach performance in 3D design and it's rarely a priority in early design process.
We believe it’s time to address this conundrum. Performance can no longer be an afterthought in the 3D design process or left to engineers to figure out. 3D creative tools have to help designers optimize their work, while improving their ability to iterate.
With so many teams designing 3D games and apps in Bezi, we felt it was due time to start the long journey of understanding performance and building a truly helpful solution for 3D design workflows.
Before we get into the weeds, let’s go back in time to see how we got here. Then we can all share some laughs about what a tar-pit idea this is and why we’re committed to solving it anyway.
Source: Teehan & Lax
BACK IN TIME
Optimization has always been a sign of successful, mature designers. However, the need for such thoughtfulness has been mitigated over the years thanks to improvements in tooling. Here’s a short history of how optimization went from tables stakes to a lost-yet-coveted art in 2D design.
Please note - we've left out a million important things that happened during this time period. We’re also being intentionally squishy with dates since there are very passionate views about what happened and when and we don’t want people with pitchforks showing up outside our office.
Source: Coronam Francisco Dominic Tiongson
2012(ish)
The world looked really different roughly a decade ago. Designers lived in multiple tools - primarily in the Adobe ecosystem. Vectors (SVGs) weren’t supported, everything was made of raster images, and all prototyping happened with a pen and paper. Designers were an integral part of figuring out how to make an end product or website work properly for the end device.
2013(ish)
Sketch 2 came along and changed the game. Their ability to support raster and vectors joined the split ecosystem and enabled them to carve out a nascent industry (mobile design lol) in the Apple ecosystem. Designers still had to create multiple sizes of images and assets that scaled for different devices, but the industry was starting to rally around a single standardized solution.
In many ways, Sketch started the path to addressing performance across 2D design by enabling more widespread use of vectors on the web - replacing raster graphics and enabling faster, more scalable websites.
However, while the power of vector was indeed powerful, few mediums could support it.
2016/2017
All hail the season of improved standards. CSS3 and HTML5 became the standard for the web, Chrome (and the rise of self-updating browsers) finally beat out IE10 as standard browser, and the SVG became the interoperable standard for web graphics. You no longer needed 3 versions of a single graphic running on your website. You didn’t have to spend half your design time optimizing. Life was good.
Ironically, Sketch 2 enabled much of this but wasn’t interoperable themselves. As a result, deliverables and collaboration were too fractured.
2017 and beyond
Having an interoperable standard but not being able to create things inter-operably in Sketch created a vacuum. Enter Figma, who took the 2D design industry by storm through their browser-based tool that was optimized for the interoperable nature of the web.
Figma’s platforms allowed designers to create one single, auto-optimized graphic and distribute it across all mediums, with SVGs being the silver bullet enabling it all.
—
In just 5 years the SVG enabled a full revolution in how designers created 2D content and managed their performance. It went from something we were optimizing for from the beginning to something we didn’t have to think about. As tools evolved, they enabled designers to focus on the flow instead of the technical limitations. Instead, we just left that to developers.
And this leads to where we are today.
Source: Digitaltrends
WHY PERFORMANCE IS IMPORTANT NOW
Today designers often prioritize building the ideal thing first and consider optimization later on - or not at all. There’s plenty of debate about the cause. We believe that designers may not understand the performance implications of what they design because they - regardless of the medium they design for - use mature, 2D design tools for their early design processes. These tools are beloved by many - including us! In fact, one of the best parts is they obfuscate performance and optimization so designers can focus on creating something beautiful (ref: 2017 and beyond). If performance and optimization wasn’t something we HAD to spend a lot of time on, trust us.. we wouldn’t want to either.
Alas, performance isn't something that can be ignored. It’s critical to designing good 3D experiences for apps and games. Whether you want someone to feel like they’re part of a new world that’s all around them (AR/VR) or in a screen (desktop/mobile) the core of good 3D design is how real it feels.
This means that if lagging performance prevents an interaction from feeling as smooth as a real-life experience, you’ll never get the nuanced feedback needed to make an exceptional app or game.
From the very beginning, subtleties MATTER.
Achieving this requires designing for both performance and visuals from the start. That seems straightforward… but let’s break down the actual implications of that for a designer’s job.
For a designer to effectively optimize a 3D game or app in early stages of a design they need a fundamental understanding of how 3D software works. We’ve taken the liberty of noting a subset of the skills they would need to have or learn. Each can take decades and even the best don’t actually consider themselves masters of these domains.
Animation
Modeling
Raster Creation
Texture Creation
UV Unwrapping
Topology (Retopology and Decimation)
Lighting
Baking (Light, Texture, Animations)
Atlasing
Lazy Loading
Occlusion Culling
Managing Draw Calls with Instancing
Audio and Video Compression
Material Optimization
Managing Content Deliverables per Platform
Shader Creation and Management
and so. much. more.
Let's not forget that optimization is not the only thing that matters. Performance is a single variable - one of a million - inside a 3D design or scene that designers need to obsess over.
If designers have a million variables to consider, performance is only one of them, and it’s THAT complicated to do well, how can designers prioritize it regularly without sacrificing design?
If designers need to be empowered to design for good performance from the very beginning, we need to give them tools that reduce the time, effort, and expertise needed to do so. Sounds easy enough.. right?
Pfff.
TAR PIT IDEA
In the absence of a “silver bullet” for 3D design - a vector-esque solution that can unify the industry around one path to performance - we won’t be able to deliver a one-size-fits-all perfect solution.
How do you build a tool capable of diagnosing a solution to the unique, unknown desire of a design?
Performance is, by definition, ambiguous. That’s only exacerbated more by unpredictable nuance of 3D. Every platform and engine is different, and technology is evolving rapidly. There is no universal standard for 3D models and platforms use different formats (USDZ, GLTF, FBX, …). Physics and simulations are complex. Lighting is somehow an art AND a science.
The intent and context changes by designer (and project), which changes how a design should be optimized. For example, if there’s a large 3D world with a high-poly card model placed in it, what does the system optimize for? If the designer needs a performant high-poly car model, it’s OK to cut down on other elements… but if they need a performant 3D world with detailed lighting, the high-poly model can be made into a low-poly object.
This is why some may consider 3D performance a “tar pit idea”. We are starting this journey knowing we cannot give 3D designers what they really need right now. We know, even at the start, that this will be a total slog.
WHY WE'RE INVESTING IN IT ANYWAY
So… why do it?
Do we know something others don’t? Nope.
Are we going to build a standardized solution to this amorphous problem tomorrow? Lol, also no.
We’re investing in this because we’ve observed that people want help with performance and no tools have taken the designer's perspective seriously enough to really help. We want to start there and open a thoughtful conversation that will move the industry towards real change.
Too abstract you say? Let’s break it down together.
As designers we must define the pain points, constraints, and problem space of a design. Creating a premature solution to an undefined problem will only make things worse.
Since the performance problem is still poorly defined and not fully understood, the first step is to learn and information gather.
Anyone trying to craft a “comprehensive solution” (something that’s both reactive and proactive) today is missing the point. They’re building something to make themselves seem more advanced, instead of approaching it from a design POV - understanding the problem so we can make real advancements sooner.
We are dedicated to approaching the performance problem as designers. We know this will benefit everyone in the industry but some thing are bigger than us. We want to be a part of the movement that helps bring the industry towards a standardized solution to make performant 3D design accessible.
HOW WE'RE APPROACHING IT
Lots of talk about the why - but the how is all that really matters.
We’ve already covered why were too early in discovery to deliver a holistic, proactive solution. And with so many variable that go into a 3D design, we can’t possibly build a tool that tries to optimize each 1:1.
Where the industry is today, the most important thing is to bring performance into the design process earlier and gather the insight needed to diagnose the sickness. As a result, our first investment in performance optimizes (hehe) for three things:
Prominence in the design workflow
Responsive and actionable
Communication
Prominence in the design workflow
We are baking performance into the core design workflow in Bezi. Performance isn’t a “checklist feature” to be buried in a menu item. It’s a critical part of the design process that's given proportional real estate in Bezi's UI, so it’s easier for designers to incorporate and prioritize it early.
Responsive and actionable
In this season of learning, our goal is to give designers the most accurate, timely, and actionable insight into what is and isn’t working in their Bezi file. The intention is that by surfacing easy-to-digest touch points early in the design process, it will be easier to design for visuals AND performance from the start.
Communication
Only through conversation will the industry be able to build a standardized solution to 3D performance. We’re prioritizing clear communication in the performance panel to incentivize this conversation. If designers are given explicit details as to why something isn’t working, it can be made more performant AND we have the vocabulary needed to discuss optimization with our design and eng counterparts.
This dedication to clarity and action ironically revealed some weakness of our own. When testing our Performance Panel, we noticed many of our pre-built templates (and other things) were NOT performant. This is embarrassing right? We’re building a tool in our platform to help people optimize their work, but parts of our platform and assets aren’t optimized? We should hide that.. or at least make it harder for people to understand?! But instead of obfuscating the information or hiding the tool, we’ve embraced this as a necessary reality to bring us closer to resolution. We optimized the templates (and other things) and shipped this first step.
This is just that - the first step in a very long journey. If done right everyone will learn and evolve a lot - including us.
We hope the Performance Panel helps improve your work, the same way it’s helped to improve our own. We’re excited to walk this road together.
hello@bezi.com
Built by 3D people in San Francisco
© 2024 Bezi, Inc.
hello@bezi.com
Built by 3D people in San Francisco
© 2024 Bezi, Inc.
hello@bezi.com
Built by 3D people in San Francisco
© 2024 Bezi, Inc.