WEB & 3D: The keys to performance.

A few months ago, Valentin told us about the behind-the-scenes work of a 3D designer, but what about 3D on a Web App?

Today, we interview Julien, so that he can tell us his optimization techniques to improve the performance of 3D on the web.

Hello Julien, can you introduce yourself?

Hi Flavie, I am a web developer at Ubilink.

For the past few months, I have been focusing on optimising 3D scenes for the web.

What do you mean by "optimising 3D scenes for the web"?

From a 3D design provided by our clients, I search and optimise the various 3D elements that generate a lot of GPU calculations.

For example, I am currently working on a programme of houses for sale for a property developer. On this project, I started from a 3D-BIM model provided by the architect. This contained only the floor, walls, roof and furniture placement of the house. I inspected and lightened these elements before texturing them with optimised materials.

I then furnished and decorated each room of the house, taking care to optimise all the models I used.

What is the purpose of this work?

Our clients ask us for realistic 3D renderings, which usually means a scene with a lot of objects, nice textures, animations, and all of this to be supported on a mobile phone web page!

Optimising a 3D scene is therefore a major and indispensable step. It allows the scene to be used without bugs, without slowing down and makes the movements fluid like in a video game.

The heavier and less optimised the scene elements are, the longer the loading times will be.

How do you achieve this optimisation?

There are many steps and things to know in order to optimise a 3D scene correctly.

First of all, when I import a 3D model, I have to make sure that its number of vertices and faces is as low as possible. Generally speaking, the more cubic an object is, the fewer vertices it will have. A cube, for example, has 8 vertices (8 vertices) and 6 faces, whereas a sphere can have several hundred vertices depending on the quality of the desired visual.

Next, it is important to ensure that there are as few materials as possible in each scene. Indeed, each material needs a "draw call" to be displayed on the screen. This requires sending an instruction to the GPU and waiting for its response. The performance is therefore directly linked to the number of draw calls made.

To limit this impact, I try to reuse each material on a multitude of objects. And the creation of new materials in the scene is only done if no other material can respond to the requested visual.

Also, a material is often textured with an image, like grass. So I take care to check that the resolution of the textures is as low as possible, an image of 512x512px will require less GPU memory (VRAM) than an image of 4096x4096px.

So if I recap, an optimized 3D scene must have :

• Few vertices

• Few materials

• And a low resolution texture

Is this correct?

Yes, but there is one essential point missing: making it look good!

Indeed, all these optimization steps deteriorate the rendering of the scene.

So to counterbalance this edge effect, I add lights in the scene. The lighting of a 3D scene is an important part when it comes to producing realistic images. It adds shine, highlights, shadows, and brings out the grain of the textures. However, it is very expensive in terms of performance, so you have to find the right balance between performance and realism. The trick is also to use ambient occlusion, known as "SSAO", a second pass technique aimed at bringing out the relief of objects by shading their recluse areas.

Finally, it is necessary to work on new optimisation techniques at the very heart of iBIM application. We have, among other things:

• set up visibility zones to ensure a dynamic rendering distance

• merged geometries sharing the same material to reduce the number of draw calls

• spread scene modifications over several render cycles to reduce computation time

• supported KTX2 files, an image format optimised for the GPU

• created a shader with texture transition to draw the ground of a large terrain for example.

What 3D elements do you think need special attention?

Generally speaking, all objects with rounded surfaces (textiles, spheres, human figures, etc.) and vegetation tend to increase the number of vertices. I often have to retouch them to make them "Low Poly" and thus limit their impact on the performance.

What are your essential tools for this work?

Personally, I use 3 tools:

Blender

Blender is a must for all the 3D part (model optimisation, scene and object set-up, material creation...)

More precisely, I use the "Decimate Geometry" function which allows to reduce the number of vertices but which also reduces the quality, as well as the "Limited Disolve" function which allows to combine the faces whose angle difference is lower than a certain threshold.

Photoshop

Photoshop is used for all the texturing part, in particular to resize a texture

GLTFPack

GLTFPack is a tool that allows to optimize and compress GLTF files and their textures, I use it once my scene is finished, to reduce the size of all GLTF files as well as to compress the textures.

I thank you for all this information. I now know the keys to optimising a 3D scene.