© New Art City

How to Improve Performance

Performance Budget

In the top right hand corner of every space settings page is a box labeled Performance Budget. This counts the total file size of all non-streaming media in your space. The optimal size for a space is under 40 megabytes, which ensures that it will load quickly on mobile and desktop, and perform well on older machines.

Fog Is Your Friend

Fog is more than just an effect. It also helps mitigate the amount of polygons your browser has to render at a time, and prevents users from triggering too many videos at once.

Duplicate, Don't Copy

Each art work on the New Art City editor page has a "Duplicate" button. Duplicated objects reduce load times because when the page loads, they only reference the object once, rather than loading every instance of it as a unique object. If you want to use an object more than once, do not re-upload it multiple times. Duplicate it.

Blender lets you do something similar with linked duplication. Pressing Shift + D copies a shape in a way that increases file size. You can create linked duplicates by pressing Alt + D instead, so Blender will only reference a single shape. This is a way to make a garden, a city, or a forest without eating up your performance budget.

Streaming vs. Non-Streaming Media

You'll see that the performance budget only accounts for non-streaming media.

Images and 3D shapes are non-streaming, meaning that they must be loaded before a visitor can enter the page. More non-streaming media means longer load times for the visitor.

Audio and Video are streaming media and do not count against your performance budget. They are loaded asynchronously, meaning they are only loaded when a user approaches them, rather than before the user enters the space.

🚨Caution🚨 Streaming media doesn't affect page load times, but it can still affect performance. Clustering several videos and audio tracks close to one another can cause performance problems because streaming media still consumes bandwidth, and simultaneously streaming several videos can quickly add up. If your videos are choppy or have trouble loading, try spacing them further apart or reducing the audible radius.

Optimizing Images

• When you upload PNGs or TIFs to New Art City, they are automatically converted to JPEGs if they are over 2MB. JPEGs are an optimal format for web publishing because of their size.
• If you have already converted your PNGs or TIFs to JPEG, be aware that they will be further compressed when you upload them. If the resolution looks bad in the space, try uploading the original files.

Optimizing Videos

• There is a 500mb upload limit per video. If you have a video over this size, you can optimize it using Handbrake. Set the format to MP4 and be sure to tick the "Web Optimized" box.

Optimizing 3D Files

The two variables of a 3D file which contribute to performance are the number of polygons, and texture size. Often models from online marketplaces with low polygon counts use image textures which can take a file size from kilobytes to megabytes, and makes a big difference in load times.

Reducing Polygons With Blender:

• Merge by Distance takes vertices which are very close to one another, and merges them. This reduces doubled vertices and can very quickly improve the poly count of a model.

• Decimate is a modifier which looks at the shape of your model and removes polygons by merging faces together. Typically the Planar mode gives the best results.

1. Select your model, navigate to the Modifiers tab on the right hand side, and add the Decimate modifier.
2. Select Planar mode, and adjust the angle limit to reduce the number of polygons.
3. Apply your modifier by clicking the downward arrow and selecting Apply.

Note: Modifiers are non-destructive until you apply them. Removing the modifier returns your shape to its original state. You can also apply your modifiers upon export by ticking the "Apply Modifiers" box under the Geometry section.

Reducing Image Texture Sizes with Blender:

Image textures are commonly used to create realistic models for the web. The gLTF format can't recognize most of the nodes and shaders in Blender's shading system, and images allow you to get more complex textures. For more information on how image textures work in Blender, visit our Blender for New Art City guide.

Building for the web requires some compromise and balancing of priorities. It makes sense to maintain high resolution for the main architecture of a space, but other flourishes like plants which are not central to the experience are good candidates for texture reduction.

• Example:
• This plant downloaded from Turbosquid started out at 3.3mb with no modifications. The textures are already 512px by 512px PNGs, so already relatively small.

• Exporting with textures converted to JPEGs reduces the file size by 50% to 1.8mb

• Remove Roughness and Normal Maps
• While roughness and normal maps can make a shape look more realistic, they can also make the file sizes much bigger. In the case of this plant, it likely exists to bring some placeness to a scene, but it isn't a central feature. The geometry is also small enough that most of these additional textures are barely perceptible.
• Select each of the materials applied to your model in the Material Properties menu on the right hand side.

• Edit the materials in the Shader Editor tab. Select each node attached to the image labeled METALLIC ROUGHNESS either by dragging to highlight, or holding shift and clicking on each node. Press X to delete. Do the same for normal maps on each material.

• Removing roughness and normal maps reduced the file size from 1.8 to 1.4mb
• Reduce Image Texture Size
• When downloading PBR textures online, you often have the option of multiple different resolutions. Higher resolution means bigger file sizes. They are typically measured in powers of 2: 4k = 4096px by 4096px, 1k = 1024px by 1024px and so on.
• Now that we've removed roughness and normal maps, let's unpack all of the remaining image textures into a folder, so we can reduce their sizes.
1. Save your Blender file in a folder.
2. Select File>External Data> Unpack All Into Files> Use Files In Current Directory (Create When Necessary)
3. Go to your folder and a file labeled Textures should appear.
4. Open your textures using your computer's image editor. There are many to choose from. Preview is preinstalled on Macintosh computers, and GIMP is a free open source image software available on Windows, Linux, and MacOS.
5. Resize the images from 512px to 256px and save them.
6. Return to your Shader Editor in Blender and replace each texture with the corresponding resized image.

• Resizing the remaining three image textures by 50% reduced the file size to 356kb, about 10x smaller than when we started!

• How to Improve Performance
• Performance Budget
• Fog Is Your Friend
• Duplicate, Don't Copy
• Streaming vs. Non-Streaming Media
• Optimizing Images
• Optimizing Videos
• Optimizing 3D Files
• Reducing Polygons With Blender:
• Reducing Image Texture Sizes with Blender: