How Oblique Camera Models Can Be Efficiently Used in WebGL

1. Project introduction

Purpose:

• Convert the large-scale model of oblique photography into a WebGL version that can be used with high performance on the web page;
• This article is mainly for process sharing, and private messages are welcome.

Resource source:

• https://sketchfab.com/3d-models/la-night-city-a85450184c6e4ddf87b49c402641e5b4

Original resource size:

• GLTF file size 143M (model 130W surface + 5 sets of 8096 texture maps)

Optimized resource size:

• GLTF file size 3M (model 2.1W surface + 3 sets of 2048 texture maps)

Using the Software:

• Blender 3.3.6

Screenshot of the original effect:

Screenshot of optimization effect:

2. Optimization steps

s01: import

• Import the original model;

s02: Building Retopology

1. redeveloped surface architecture;

   • Requirement 1: The number of sides should be as simple as possible;

   • Requirement 2: The topology model should be as close as possible to the original model;

   • 

   • 

2. Split the model according to the texel size;

   • Texel: How much texture pixel space is used for each model size of 1 meter;
   • After testing: when the park is at 0.5px/m, it can preserve the details as much as possible while reducing the size of texture resources;
   • So here we split the topological model into two parts, and use two 2048 textures to meet the requirements.
   • As shown in the figure below: the actual occupancy of a building with a width of 90m in the park: 90*0.55=49.5 pixels
   • 

3. Sub-model UV + baking texture;

   • UV requirement 1: no overlap;
   • UV requirement 2: UV blocks are separated by 5 pixels;
   • Baking requirements: The inner and outer distances for detecting high-mode textures should be increased to ensure that no black pixel-free blocks appear;
   • 
   • 
   • 

4. Select the bottom of the building and copy it to an independent model. When combined with the ground, clip the shape of the ground;

   • 

s03: Preparing for the campus topology

1. Delete buildings that are higher than the terrain;

   • Keep as much terrain as possible;
   • The less the building part is reserved, the more convenient the follow-up operation is;
   • 

2. Delete the four edges and the bottom face of the parcel;

   • Reason: The principle of the topology software is uniform distribution, so the invalid parts should be deleted as much as possible;
   • 

s04: Campus retopology

1. Apply plug-ins to test the appropriate order of magnitude reduction;

   • Plugin: Quad Remesher 1.23

   • 

   • 

2. Manually complete model holes, delete fragmented and overlapping surfaces, and complete plot edges;

   • The purpose of filling the hole: follow up with the bottom contour of the building, and re-dug out (bool) the hole that completely fits the building;
   • Pay attention when filling holes: delete some vertical faces, these faces are construction residues, which will affect the subsequent bool calculations;
   • Complement the edge of the plot: Extrude a strip and align it into a straight line.
   • 

3. Bake the high-model material texture to the optimized model;

   • 

4. Use the contour of the bottom surface of the building to cut out the redundant surface of the bottom surface (bool operation);

   • If there is no overlapping bug after the bottom surface and the building are merged, this step can be omitted, or the intersection part can be manually deleted to replace this step;
   • 
   • 
   • 

s05: Merge models

1. Merge the building with the park;
2. Make thickness and base for the overall model;
   • 

s06: Output GLTF

1. Baked texture output and compressed;

   • In PS, reducing the number of color samples of pictures can achieve the purpose of compressing pictures in large volume;
   • 

2. Re-import the texture and configure the material as the style of GLTF output;

   • This project is as shown in the figure below, and the material produced is not subject to light;

   •