3D

Creating and rendering 3D objects in web applications and games is a subtle art. To achieve smooth operation and high display quality, many factors must be taken into account. In this section, we will take a look at key points to help you effectively manage resources and create optimized 3D models for web projects.

Model Polygonality

Polygonality is the number of polygons that make up a 3D object. A large number of polygons can make a model more detailed, but it also increases the load on the GPU and slows down rendering.

Optimization Recommendations:

  • Model Simplification: Use the minimum number of polygons that is necessary to achieve the level of detail. This will help reduce the load on the GPU.
  • LOD (Level of Detail) Simulation: Apply different levels of detail depending on the distance to the camera to automatically simplify models when they are far from the viewer.
  • Optimization Tools: Use specialized tools to edit and optimize polygon meshes.
3d model of a house
3d model of a house

Textures

Textures add an extra level of detail to 3D objects and can significantly impact performance.

Texture Management Recommendations:


  • Resolution Optimization: Choose textures with an appropriate resolution. Do not use too high a resolution if it is not really necessary.
  • Texture Compression: Apply compression methods (e.g. DXT, ASTC) to reduce texture size and memory footprint.
  • Using Texture Atlases: Combine multiple textures into one atlas. This will reduce the number of texture switches and improve performance.

In addition, you can also bake textures for further optimization.

You can pre-calculate lighting and shadows, store that data in textures, and then apply it to 3D models. This allows us to avoid the cost of calculating lighting in real time.

Texture Baking Methods:

  • Shadow Baking: Create textures that contain shadow information. This reduces the need for dynamic shadow calculations.
  • Global Illumination Baking: For more realistic lighting, we use global illumination baking, which stores information about the interaction of light and objects.

Benefits of Texture Baking:

  • Reduced computational load: Texture baking reduces the need for complex lighting and shadow calculations in real time.
  • Improved performance: Using baked textures improves performance, especially on devices with limited resources.

Light

Lighting is a key element in creating realistic and beautiful 3D scenes. But mismanagement of lighting can lead to performance issues, especially if we use dynamic light and many light sources.

Dynamic light is lighting that changes in real time depending on the movement of light sources and objects in the scene. It allows us to create more realistic effects (shadows, highlights, reflections), but requires a lot of computing resources.


Performance Issues

1. Shadow Calculation: Dynamic lighting often requires real-time shadow calculations. This process can be computationally expensive, especially if complex shadows and high rendering quality are used. Constantly updating shadows when objects or light sources move can significantly reduce performance.

2. Multiple Light Sources: When there are many light sources in a scene, each of which dynamically changes, the GPU has to handle a lot of calculations for each source. This increases the load on the graphics processor and can slow down rendering.

3. Lighting Update: Dynamic lighting requires constant updating of lighting calculations, which can heavily load the GPU, especially at high frame rates or in complex scenes.

Lighting Optimization Methods

To minimize performance issues associated with dynamic lighting, consider the following optimization methods:

1. Reducing the number of dynamic light sources:

  • Limit the number of sources: Use the minimum number of dynamic light sources needed. Determine which sources are critical to the scene and avoid adding unnecessary ones.
  • Use static lighting: If part of the scene does not require dynamic lighting, consider using static lighting. This allows us to pre-calculate the lighting and store it in textures, reducing the load on the GPU in real time.

2. Optimizing shadow calculations:

  • Use Cascaded Shadows: For objects that are far from the camera, you can use cascaded shadows. This method splits shadow calculations into multiple levels of detail, reducing the load on the GPU for distant objects.
  • Simplify shadow maps: Use simplified shadow mapping methods, such as fixed resolution shadow maps, to reduce computational costs.

3. Baking lighting:

  • Bake textures: Baking lighting allows us to pre-calculate lighting and store it in textures. This can significantly reduce the load on the GPU.
  • Bake shadows and global illumination: Use shadow and global illumination baking to reduce the amount of dynamic calculations.

4. Optimizing shaders and calculations:

  • Simplified shaders: Use less complex shaders for lighting to reduce computational costs. Apply simplified lighting models whenever possible.
  • Cache lighting: Apply caching of lighting calculations to reduce the frequency of recalculations and reduce the load on the GPU.

Read also:

Optimizing video content

read

Srcset and sizes attributes

read

Web animation basics

read

3D

read