Have you ever had an animated model mysteriously disappear when viewed from different angles in Hubs? Take the famous star whale from the 2021 exhibit 'Road Gallery' below as an example. Notice how looking in a different direction causes the whale to vanish.
Back when Roger Kenny created this awesome space, we didn't have an easy way for creators to address this problem in Hubs but now we do! This post will help you understand why we have this problem and how to fix it.
What is Frustum Culling?
Frustum culling is a technique used in 3D graphics to improve performance by only rendering objects that are visible on the screen. This is important for maintaining a smooth experience when there are many objects in the space.
Imagine you are looking through a camera lens. The visible area captured by the camera is shaped like a pyramid with the top chopped off. This shape is called the "view frustum."
Frustum culling works by checking if an object in the 3D scene is inside this view frustum. If it's inside, the object is visible and gets rendered. If it's outside, the object is not visible and doesn't get rendered. This saves computing resources and makes the rendering process faster.
In Three.js, the 3D graphics library for the web Hubs is built with, frustum culling is automatically handled to improve performance. The library takes care of determining which objects in a 3D scene are visible on the screen and only renders those visible objects. There are some specific cases in Hubs where we disable this feature but sometimes this can produce results we may not be looking for, like in some animated objects.
How to Fix This in Hubs?
Thanks to the efforts of Hubs community resident hero rawnsley (AKA: Pellinore), we have a way to manually make adjustments to this performance optimization to fit our needs. Regardless of how many 'r's exist in the word 'frustum', the Hubs Blender add-on provides us a simple and effective way to disable this feature on select objects. You can download the add-on here and install it following the directions provided.
Let's Fix it by Disabling Frustum Culling
With the Hubs Blender Add-on installed, let's create a new scene using Christian's Blender Starter Scene and add in a armature with skin from Adobe's Maximo.
After dropping the model, exporting to .glb and deploying it with Hubs, we notice right away that things are not going swimmingly.
We need to disable frustum culling on the object by adding the frustum component. As you do this, reflect on the fact this component was contributed by community member Pellinore, and remind yourself to say a kind word to your favorite open-source maintainer. 😊
After adding our frustum culling component and exporting the glb, we reload our space using ?debugLocalScene (Read more about this time-saving method here) and quickly preview the results.
With the query parameter set up, I can drop in the .glb file for a quick reload of the scene to test my changes.
You can see we only removed culling on the surface mesh and not the joints! Back to Blender to add the component to the joints as well!
Little elbow grease on the joints and there we have it. No more disappearing models.
For more Mozilla Hubs updates Creator Labs content and announcements follow us on Twitter, LinkedIn, or Discord
