This is an article about 3D modeling. The question is, with so many video tutorials online, is it necessary to write another article? Well, if you think about it this way, chances are you’ll run into a performance crunch on Web3D projects, where the model won’t “run” in the browser. This article is not about modeling tools and tutorials (there are many on the Web), but about how to save face on Web modeling from a performance optimization perspective, and what details and methods to pay attention to.
Basic idea of modeling
With the least surface, to achieve acceptable results. Because the more the number of faces, the greater the consumption of computing power of the computer, there will be slow loading, stuck.
The following figure lists some of the inappropriate practices, some of which are used in multiple ways without adding to the appearance of the model.
The above example gives you an intuitive sense of the number of facets of the model. However, nowadays, segmentation modeling processes are widely used, and designers tend to ignore performance problems in pursuit of results. Therefore, in the Web3D project, the model is not made very fine, but from the scene to choose the overall beneficial scheme. Segmentation modeling should never be used as a primary approach, so let’s look at specific cases.
Microscopic details
Here we compare segmentation modeling with non-segmentation modeling. Take the cube as an example, the more fine fractions of the model, the more “silky” the surface of the cube is. This modeling method can render images or videos very well and is very suitable for structures with many curved surfaces. But modeling a browser entirely with a subdivision process would crash. Here you can zoom in to see the comparison of the effects presented at different subdivisions.
For Web modeling, it is recommended to use chamfering to handle the rounded parts, although it is not as effective as subdivision modeling and has a “hard” feel. But it is a very good choice in engineering, by contrast, there is no “redundant” surface at the flat, saving computing resources, as shown in the figure below.
What should we do if we add a point of complexity to the model, such as a big difference in model structure (circles in squares)? Again, comparative subdivision modeling. As shown below, in order to make the cylindrical part more rounded, the subdivision modeling needs to add enough segments to the whole.
The alternative is Boolean modeling, which deals with the number of sides of the model. For example, increase or decrease the number of cylinders, and then perform Boolean operation, the number of faces is more controllable.
Of course, Boolean modeling destroys the surface wiring of the cube, and if necessary, the model can be spliced together to make it look like the real thing. The advantage of splicing is to reduce the modeling cost and model complexity, easy to edit twice.
The above alternative uses fewer faces, but how can the surface be smooth? In particular, curved cylinders. This uses smooth coloring algorithms, which do not require many faces, to make the model look “smooth” by processing normals to save computational resources. The shade Smooth effect is shown on the right.
Next I’ll show you the advanced play of normals – fewer surfaces to achieve smooth surface effect, essentially flat, visually with curvature, as shown on the right.
Modeling decisions at the macro level
Traditional hard surface modeling tools work directly with the model (see figure below), which is difficult to modify or even re-model once formed. For example, the number of chamfering sections to determine more or less is not good to modify. The alternative is non-destructive modeling.
Non-destructive modeling can keep certain parameters, which is convenient for subsequent modification, and the number of faces is more controllable, which is convenient for considering whether a model needs to increase or decrease the number of faces from the whole scene to improve efficiency.
The above, though, only shows the simple details, but it is this “brick by brick” consideration that leads to a good performance of the scene model. The principle is not simply to pursue the four-sided wiring and subdivision appearance, but to use the face number on the blade.
Is there an easier way to save faces than with model details? Here is a specific scenario to illustrate our ultimate killer — associative replication.
Consider from the whole, reduce the whole surface number, the method is “reuse” model. If it is a normal copy, the number of faces is also increased. The geometry of the replica model needs to be correlated to reduce the number of faces, as shown in the figure above.
The campus project we do is to rely on a lot of associated replication to save the number of areas. Such as trees, buildings, street lights, signal lights and so on. When planning scenarios, you need to think about what you can reuse and what you need to merge with other models.
Because the building needs to show the internal structure, we made associative copies of the floors of the same structure. Save resources as much as possible while ensuring the results. The number of triangles in the whole scene is 4W +, and the glTF file is 4.5MB. Of course, in order to reduce draw calls, some models are merged, which is not the limit of correlation.
Of course, we cannot simply save the number of surfaces, and any modeling method is not the only choice. Here, the decision models of hard surface modeling are sorted out to make modeling decisions from a macro perspective.
We will consider the above factors to decide which modeling method to use. For example, the model has deformation requirements, Boolean modeling is not as good as subdivision modeling, because Boolean modeling will destroy the wiring structure is easy to cause cross or broken surface problems; Model surface coloring problem, it needs to deal with normal or wiring to solve; For example, the distance of the model in the scene can be reduced, the number of sides of the distant model can be reduced, more details can be added to the main model covered by the lens, etc., and even parts that cannot be seen can be directly removed, such as the back and bottom of the model.
Appearance processing of the model
Above, reduce the number of scene model facets to optimize performance. From the designer’s point of view, the material can be further optimized.
As mentioned in previous articles, we follow the PBR process. In terms of materials, we can use Base Color, Rough, Metal, Normal, Emissive and AO Occlusion to show the appearance of the model, but too many materials also need more time to render. We can use the baking technique to bake multiple material information onto a texture to form a texture, as shown in the picture below (official glTF sample). You can even bake lights and shadows to Base Color to save browser rendering calculations.
As shown below, the different material channels use a shader (green) to form a material.
As mentioned above, normal lines are used to simulate smooth surfaces. We can also use normal maps to depict false details on models, which can also save faces and improve performance.
Of course, when it comes to materials, follow Occam’s Razor: don’t add substance if you don’t have to. As with color management, try to eliminate unnecessary differences in materials with similar colors. Further or smaller models also do not require complex material representations.
The last
From modeling details to model appearance processing, these are the optimization directions that can be mined at present.
This article is not about modeling in the pursuit of effects, but about how designers should model and plan the scene as a whole from the perspective of the end. They should hold a certain restraint in the pursuit of visual effects and take responsibility for the whole experience. While not as visually appealing as images and videos, the challenges for Web3D designers are greater.
In order to highlight performance, the article is inevitably limited. In practical application, various modeling methods and techniques will be considered comprehensively to achieve the design goals. Segmentation modeling is also a necessary tool and requires flexibility. On the progress of Web3D, welcome readers to leave a message to provide different perspectives and solutions, common progress.
Review past
Data, atmosphere class dynamic effect modeling tips
Comparison and selection of model standards
Web3D scene classification, composition and workflow
Rael Web3D practice tips are here