Design+Code logo

Quick links

Suggested search

Performance & 3D Vitals image 1

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.

Performance & 3D Vitals image 2

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.

BACK TO

Export in React Site

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

Subtitles

Videos

Assets

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.

icon

10 courses - 37 hours

course logo

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

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

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

Build Quick Apps with SwiftUI

Apply your Swift and SwiftUI knowledge by building real, quick and various applications from scratch

11 hrs

course logo

CSS Handbook

A comprehensive series of tutorials that encompass styled-components, CSS, and all layout and UI developments

1 hrs

course logo

Advanced React Hooks

Learn how to build a website with Typescript, Hooks, Contentful and Gatsby Cloud

5 hrs

course logo

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

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

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

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