Performance & 3D Vitals
Add to favorites
Monitor and optimize your scene using 3D Vitals
Play video
3D Vitals
To access the 3D vitals, on the top bar, click on export and then, select run test.
Metrics
You will see an overview of your scene. The export size is the size of your scene. If this value is really high, expect the loading time to be high as well. Right below, we have the metrics. It gives you a summary of what you have on your scene, the amount of objects, polygons, materials, audio assets, lights, post-processors and textures.
Export Size and Loading Time are estimates based on a slow internet connection. Actual values may vary.
Opportunities
Opportunities follow Metrics, which are suggestions for improvement with actions within them based on the current state.
Recommendations
We highly recommend you to always double check assets that you bring to Spline, such as images, audios and also 3D objects from other softwares. For images, always optimize them and try to keep the size low so it doesn’t affect the loading time. For audios, do not exceed 2MB and try using the sound library instead. Be mindful of the amount of objects in your scene and put a limit, for example, if you know that a certain object has a lot of polygons and materials, add 1 or 2 in your scene and not more.
Shadows
Another metric that is very important is the lights. Each object in your scene has the Shadow property. It can cast or receive shadows and this is performance heavy so make sure to limit the amount of lights in your scene and which object to be affected by it. Try working with less than 3 lights per scene.
Isolating objects
In this process, you might have an object in your scene that is performance heavy and you can’t find it or you don’t know which one it is. I recommend isolating each object in another file and running the test on each of them.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Subtitles
Videos
Assets
1
Intro to Game Controls
Use key inputs, joysticks, buttons, gravity, and collision detection to move your character through your scene
4:26
2
States, Events & Animations
Animate objects by using state-based animations
13:03
3
Movement & Controls
Use game controls to move an object in your scene
5:26
4
Collision Detection
Set a shape to your character to enable collisions
10:15
5
Physics
Make your object dynamic in a 3D environment
4:34
6
3D Camera & Lighting
Customize your camera to make your scene looks stunning
16:10
7
Audio & Sounds
Elevate your scene with beautiful sounds
6:32
8
URL & Embed
Export your 3D scene in web with no code
4:16
9
Export in React Site
Export your design in a React environment
29:31
10
Performance & 3D Vitals
Monitor and optimize your scene using 3D Vitals
4:28
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Willie Yam
Front-end/UI developer at Design+Code
I do UI coding. HTML/CSS/JS/SWIFTUI dev.
10 courses - 37 hours
![course logo](http://images.ctfassets.net/ooa29xqb8tix/6LKKWLFkx6JrlMY2mWPocd/2513a06a163424ba900bcff844c2c3fb/play-logo.png?w=400&q=50?fm=jpg&q=50)
Design and Prototype an App with Play
Build a completely functional prototype without writing a single line of code from your phone
3 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/1bYdUtniEAUH3jdqQd3Qc1/7cf21d20882bfe59f01d7bc74e81010d/react-logo.png?w=400&q=50?fm=jpg&q=50)
Create a 3D site with game controls in Spline
Build an interactive 3D scene implemented on a ReactJS site using Figma and Spline
2 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/4bWEQMRsA6PzjiHljsxryp/55d78d84da072e9c22caddbccd67396b/swift-logo.png?w=400&q=50?fm=jpg&q=50)
Build a Movie Booking App in SwiftUI
Learn how to create an iOS app based on a beautiful UI design from Figma with interesting animations and interactions, create a custom tab bar and use navigation views to build a whole flow
1 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/628IYmTv4uib8slYz9iuok/3de9010de04ae92a23c94f9885746db2/swift-logo.png?w=400&q=50?fm=jpg&q=50)
Build Quick Apps with SwiftUI
Apply your Swift and SwiftUI knowledge by building real, quick and various applications from scratch
11 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50?fm=jpg&q=50)
CSS Handbook
A comprehensive series of tutorials that encompass styled-components, CSS, and all layout and UI developments
1 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/1bYdUtniEAUH3jdqQd3Qc1/7cf21d20882bfe59f01d7bc74e81010d/react-logo.png?w=400&q=50?fm=jpg&q=50)
Advanced React Hooks
Learn how to build a website with Typescript, Hooks, Contentful and Gatsby Cloud
5 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/4k80OoiAH74E4JWnzT7iHv/d8b989084c313064df5be11f940ea48b/unity-logo.png?w=400&q=50?fm=jpg&q=50)
Unity for Designers
If you want to make a game and don't know where to start, you are in the right place. I will teach you how to use Unity, code in C# and share essential tips and tricks to make your first game.
5 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/1YISP6mvD83Gao3lQdhWqi/8b36d37d05f77a894dd0b7d30f8e6753/js-logo.png?w=400&q=50?fm=jpg&q=50)
Create a Javascript Game
Learn how to create a web game using Phaser 3, a popular javascript game engine. Draw a map using an editor, implement the player, make the player move, apply physics, collisions, and implement the enemies.
2 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/4bWEQMRsA6PzjiHljsxryp/55d78d84da072e9c22caddbccd67396b/swift-logo.png?w=400&q=50?fm=jpg&q=50)
Build an ARKit 2 App
Introduction to ARKit and learn how to make your own playground. You will be able to add models or even your own designs into the app and play with them
4 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/4bWEQMRsA6PzjiHljsxryp/55d78d84da072e9c22caddbccd67396b/swift-logo.png?w=400&q=50?fm=jpg&q=50)
Create a SpriteKit Game
Overview of SpriteKit a powerful 2D sprite-based framework for games development from Apple and learn how to create your very own platform
3 hrs