{"id":2478,"date":"2020-09-19T10:08:13","date_gmt":"2020-09-19T02:08:13","guid":{"rendered":"http:\/\/blog.coolcoding.cn\/?p=2478"},"modified":"2020-09-19T12:24:42","modified_gmt":"2020-09-19T04:24:42","slug":"optimizing","status":"publish","type":"post","link":"https:\/\/blog.coolcoding.cn\/?p=2478","title":{"rendered":"3D\u7f8e\u672f\u5b9e\u65f6\u6e32\u67d3\u6700\u4f73\u5b9e\u8df5(5)\uff1aMesh"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>5.2-Triangle and polygon usage<\/strong><\/h2>\n\n\n\n<p>\u539f\u6587\u6863\uff1a<strong>Arm\u00ae Guide\u5f00\u53d1\u4eba\u5458\u6307\u5357 V4.1 &#8211;  \u79fb\u52a8\u5e73\u53f0\u6e38\u620f\u56fe\u5f62\u4f18\u5316 <\/strong><\/p>\n\n\n\n<p> To optimize the performance of your game, always track the number of triangles that are on-screen.<\/p>\n\n\n\n<p><br> It is vital that you use the minimum number of triangles to get the correct balance between the intended quality with your 3D objects, or models, and deliver a consistent performance.<\/p>\n\n\n\n<p><br> We recommend that you try the following tips:<\/p>\n\n\n\n<p><br> \u2022 Using fewer triangles results in increased performance.<\/p>\n\n\n\n<p><br> \u2014 It is essential to keep the triangle count in mind when creating content for a mobile platform.<\/p>\n\n\n\n<p><br> \u2014 Fewer triangles means that the GPU must process fewer vertices.<\/p>\n\n\n\n<p><br> \u2014 Processing vertices is computationally expensive. Therefore, the fewer the number of vertices that get processed, the better it is for overall performance.<\/p>\n\n\n\n<p><br> \u2022 Using fewer triangles enables the release of the game on more devices. Not just the latest devices that have the most powerful GPUs.<\/p>\n\n\n\n<p><br> The following image shows a comparison between two 3D objects. One using 584 triangles, versus one using 704 triangles. Both objects look the same in shaded mode. So remove any edges that do not contribute to the silhouette:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"483\" height=\"423\" src=\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-10.png\" alt=\"\" class=\"wp-image-2480\" srcset=\"https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-10.png 483w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-10-300x263.png 300w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-10-57x50.png 57w\" sizes=\"(max-width: 483px) 100vw, 483px\" \/><figcaption>Figure 5-2 Use the minimum number of triangles to get the intended result<\/figcaption><\/figure>\n\n\n\n<p>On mobile devices, the maximum number of vertices that each 3D object, or mesh, can use is 65,535.<\/p>\n\n\n\n<p><strong> \u5728\u79fb\u52a8\u8bbe\u5907\u4e0a\uff0c\u6bcf\u4e2a3D\u5bf9\u8c61\u6216\u7f51\u683c\u53ef\u4ee5\u4f7f\u7528\u7684\u6700\u5927\u9876\u70b9\u6570\u4e3a65,535 <\/strong><\/p>\n\n\n\n<p><br>Therefore, you must stay below this number. Some older GPUs, including Android devices using the Mali-400, do not support more. These devices do not render 3D objects with more vertices.<\/p>\n\n\n\n<p><br>It is essential to view or test the game on the target device, or as many target devices as possible. Testing your game on just a computer screen does not give you the information you need for optimization.<\/p>\n\n\n\n<p><br>Keep in mind that mobile device screens are smaller than the average computer monitor. Therefore, any details that are created using lots of triangles may not even be visible on a mobile device.<\/p>\n\n\n\n<p><br>Use more triangles on 3D objects that are in the foreground, so closer to the camera, and less on 3D objects that are further away in the background. A game that is using a static camera Point-of-View (POV) benefits more from this technique.<\/p>\n\n\n\n<p><br>The following image shows an example of where 3D models are used in the foreground, but lower quality 3D models are baked into the 2D  background  <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"621\" height=\"516\" src=\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-11.png\" alt=\"\" class=\"wp-image-2483\" srcset=\"https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-11.png 621w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-11-300x249.png 300w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-11-60x50.png 60w\" sizes=\"(max-width: 621px) 100vw, 621px\" \/><figcaption>Figure 5-3 An example of triangle usage on foreground and background objects<\/figcaption><\/figure>\n\n\n\n<p>While there are no fixed numbers for the maximum triangle count that a 3D object can use, the more 3D objects that are on-screen at the same time, the fewer triangles you can use per-object. However, if you are displaying fewer 3D objects on-screen, then you can use more triangles.<\/p>\n\n\n\n<p><br>The target device also matters. Newer phones, such as the latest Samsung Galaxy S series, are able to handle more complex geometry that older mobile devices.<\/p>\n\n\n\n<p><br>The following example shows characters from two demos. The Circuit VR demo only has one robot character, so a model with a higher polygon count can be used. While the Armies demo has hundreds of soldiers in one frame, so it needs a tiny polygon count.  <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"546\" height=\"323\" src=\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-12.png\" alt=\"\" class=\"wp-image-2485\" srcset=\"https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-12.png 546w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-12-300x177.png 300w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-12-70x41.png 70w\" sizes=\"(max-width: 546px) 100vw, 546px\" \/><figcaption>Figure 5-4 Triangle count difference example<\/figcaption><\/figure>\n\n\n\n<p> In the Armies demo, which is a 64-bit mobile device tech demo that was built in Unity, the camera is static with lots of animated characters. Each frame renders around 210,000 triangles in total, and this triangle count enables the demo to run smoothly at approximately 30 Frames Per Second (FPS)  <\/p>\n\n\n\n<p style=\"text-align:left\"> The number of triangles to use depends on both the type of game being created, and the specifications of the target devices  The following example shows the total number of triangles that were used in our tech demo:  <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"369\" src=\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-13.png\" alt=\"\" class=\"wp-image-2486\" srcset=\"https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-13.png 618w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-13-300x179.png 300w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-13-70x42.png 70w\" sizes=\"(max-width: 618px) 100vw, 618px\" \/><figcaption>Figure 5-5 Total number of triangles that are used in our example scene<\/figcaption><\/figure>\n\n\n\n<p> The largest objects in the scene, the cannon towers, are approximately 3000 triangles each as they occupy a large portion of the screen.<\/p>\n\n\n\n<p><br>Characters only use around 360 triangles. This is because there are so many of them and they are only seen from a distance. So, from the camera point-of-view, the characters look fine on-screen.  <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"283\" src=\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-14.png\" alt=\"\" class=\"wp-image-2488\" srcset=\"https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-14.png 620w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-14-300x137.png 300w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-14-70x32.png 70w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><figcaption>Figure 5-6 Tiny triangle count on soldiers<\/figcaption><\/figure>\n\n\n\n<p> This section contains the following subsections:<br>\u2022 5.2.1 Distribute triangles in areas that matter on page 5-66.<br>\u2022 5.2.2 Why micro triangles are bad on page 5-67.<br>\u2022 5.2.3 Why long and thin triangles are bad on page 5-69  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5.2.1-<strong>Distribute triangles in areas that matter\uff08 \u5728\u91cd\u8981\u7684\u533a\u57df\u5206\u5e03\u4e09\u89d2\u5f62 \uff09<\/strong><\/h2>\n\n\n\n<p>Both polygons and vertices are computationally expensive on mobile platforms. By placing them in areas that really contribute to the visual quality of the game, we are not wasting the processing budget.<br><strong>\u5728\u79fb\u52a8\u5e73\u53f0\u4e0a\uff0c\u4f7f\u7528\u591a\u8fb9\u5f62\u548c\u9876\u70b9\u7684\u6210\u672c\u8f83\u9ad8\u3002\u5c06\u5b83\u4eec\u653e\u5728\u771f\u6b63\u6709\u52a9\u4e8e\u63d0\u9ad8\u6e38\u620f\u89c6\u89c9\u7684\u533a\u57df\u4e2d\uff0c\u4f7f\u5f97\u6211\u4eec\u4e0d\u4f1a\u6d6a\u8d39\u6210\u672c\u3002 <\/strong><\/p>\n\n\n\n<p>Due to the small screen size on most devices, and where these 3D objects are in the game level, many small triangle details on a 3D object are not visible in-game. Instead, focus on large shapes and parts that contribute to the silhouette of the object instead of detail.<br><strong>\u79fb\u52a8\u5e73\u53f0\u4e0a\u7684\u5c4f\u5e55\u5c3a\u5bf8\u8f83\u5c0f\uff0c\u8fd9\u4e9b\u5728\u6e38\u620f\u5173\u5361\u4e2d\u76843D\u6a21\u578b\uff0c\u8bb8\u591a\u5c0f\u7684\u4e09\u89d2\u5f62\u7ec6\u8282\u5728\u6e38\u620f\u4e2d\u662f\u4e0d\u53ef\u89c1\u7684\u3002\u76f8\u53cd\uff0c\u5e94\u5c06\u91cd\u70b9\u653e\u5728\u6709\u52a9\u4e8e\u5bf9\u8c61\u8f6e\u5ed3\u7684\u5927\u578b\u5f62\u72b6\u548c\u96f6\u4ef6\u4e0a\uff0c\u800c\u4e0d\u662f\u7ec6\u8282\u4e0a\u3002<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"619\" height=\"356\" src=\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-15.png\" alt=\"\" class=\"wp-image-2490\" srcset=\"https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-15.png 619w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-15-300x173.png 300w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-15-70x40.png 70w\" sizes=\"(max-width: 619px) 100vw, 619px\" \/><figcaption>Figure 5-7 Focus on large shapes and silhouettes<\/figcaption><\/figure>\n\n\n\n<p><br>Use fewer triangles on the areas that are not often shown on-screen. An example of this would be the bottom of a car, or the back of a wardrobe.<br> Avoid using high-density triangle meshes for modeling small details. Instead, use textures and normal maps for fine detail.<br><strong>\u5728\u5c4f\u5e55\u4e0a\u4e0d\u5e38\u663e\u793a\u7684\u533a\u57df\u4e0a\u4f7f\u7528\u8f83\u5c11\u7684\u4e09\u89d2\u5f62\u3002\u5982\u6c7d\u8f66\u7684\u5e95\u90e8\u6216\u8863\u67dc\u7684\u80cc\u90e8\u3002\u907f\u514d\u4f7f\u7528\u9ad8\u5bc6\u5ea6\u4e09\u89d2\u5f62\u7f51\u683c\u4e3a\u5c0f\u7ec6\u8282\u5efa\u6a21\uff0c\u8981\u4f7f\u7528\u7eb9\u7406\u548c\u6cd5\u7ebf\u8d34\u56fe\u83b7\u5f97\u597d\u7684\u7ec6\u8282\u3002<\/strong><\/p>\n\n\n\n<p><br> The following images show the same mesh with and without normal map:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"616\" height=\"329\" src=\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-16.png\" alt=\"\" class=\"wp-image-2494\" srcset=\"https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-16.png 616w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-16-300x160.png 300w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-16-70x37.png 70w\" sizes=\"(max-width: 616px) 100vw, 616px\" \/><figcaption>\u6ca1\u6709\u6cd5\u7ebf\u548c\u6709\u6cd5\u7ebf\u7684\u533a\u522b<\/figcaption><\/figure>\n\n\n\n<p>Consider deleting the back, or bottom, part of an object that is never seen from the camera POV.<br> However, this needs to be done carefully as it might limit the re-usability of the scene. For example, you delete the bottom part of a table mesh, as you think that it is never seen by the end user. Doing this would mean that you could no longer place that model upside down or reuse it for something different.<\/p>\n\n\n\n<p><strong>\u8003\u8651\u5220\u9664\u6444\u50cf\u673a\u770b\u4e0d\u5230\u7684\u80cc\u6216\u5e95\u90e8\u3002&nbsp;\u4f46\u8fd9\u8981\u5c0f\u5fc3\uff0c\u8fd9\u53ef\u80fd\u4f1a\u9650\u5236\u573a\u666f\u7684\u53ef\u91cd\u7528\u6027\u3002\u4f8b\u5982\u5220\u9664Mesh\u7684\u5e95\u90e8\uff0c\u6211\u4eec\u8ba4\u4e3a\u7528\u6237\u4e0d\u4f1a\u770b\u5230\u3002\u8fd9\u6837\u505a\u5c31\u4e0d\u80fd\u5c06\u6a21\u578b\u98a0\u5012\u4e86\u3002&nbsp;<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5.2.2-<strong>Why micro triangles are bad \u4e3a\u4ec0\u4e48\u5c0f\u4e09\u89d2\u5f62\u4e0d\u597d<\/strong><\/h2>\n\n\n\n<p>Micro triangles are tiny triangles that do not contribute much to the final look of an object or scene.When a 3D object with a large polygon count is moved further away from the camera, a micro triangles problem occurs. A micro triangle is often referred to as triangles that are between one and ten pixels in size on a device.<br><strong>\u5c0f\u4e09\u89d2\u5f62\u6bd4\u8f83\u5c0f\uff0c\u5bf9\u6700\u7ec8\u7269\u4f53\u6216\u573a\u666f\u7684\u5916\u89c2\u5f71\u54cd\u4e0d\u5927\u3002\u5f53\u591a\u8fb9\u5f62\u6570\u91cf\u8f83\u591a\u76843D\u6a21\u578b\u8fdc\u79bb\u76f8\u673a\u65f6\uff0c\u4f1a\u51fa\u73b0\u5c0f\u4e09\u89d2\u5f62\u7684\u95ee\u9898\u3002\u5c0f\u4e09\u89d2\u5f62\u4e00\u822c\u5728\u5c4f\u5e55\u4e0a\u5360\u75281~10\u50cf\u7d20\u3002<\/strong><\/p>\n\n\n\n<p>Micro triangles are bad because the GPU must process all of these triangles. But, they do not contribute much to the final image as they are too small to see. Remember, vertices are computationally expensive<br> to process, and lots of tiny triangles on-screen at the same time means more vertices to process.<br><strong>\u5c0f\u4e09\u89d2\u5f62\u5f88\u4e0d\u597d\uff0c\u56e0\u4e3aGPU\u5fc5\u987b\u5904\u7406\u6240\u6709\u7684\u5c0f\u4e09\u89d2\u5f62\u3002\u4f46\u662f\uff0c\u7531\u4e8e\u5b83\u4eec\u592a\u5c0f\u800c\u770b\u4e0d\u5230\uff0c\u5b83\u4eec\u5bf9\u6700\u7ec8\u8868\u73b0\u7684\u5f71\u54cd\u4e0d\u5927\u3002\u8c28\u8bb0\uff1a \u5904\u7406\u9876\u70b9\u662f\u9700\u8981\u6210\u672c\u7684\uff0c\u540c\u5c4f\u663e\u793a\u5927\u91cf\u7684\u5c0f\u4e09\u89d2\u5f62\u5219\u8981\u5904\u7406\u66f4\u591a\u7684\u9876\u70b9\uff01<\/strong><\/p>\n\n\n\n<p><br> The following two approaches cause micro triangles:<br><strong>\u4ee5\u4e0b\u4e24\u4e2a\u65b9\u6cd5\u4f1a\u5bfc\u81f4\u5c0f\u4e09\u89d2\u5f62\uff1a<\/strong><\/p>\n\n\n\n<p><br> \u2022 Details that are too small and consist of many triangles.<br><strong>\u7ec6\u8282\u8fc7\u5c0f\uff0c\u5bfc\u81f4\u8bb8\u591a\u5c0f\u4e09\u89d2\u5f62<\/strong><br><br> \u2022 Objects with many triangles that are further from the camera.<br><strong>\u6444\u50cf\u673a\u8f83\u8fdc\u7684\u7269\u4f53\u4e0a\u6709\u8bb8\u591a\u4e09\u89d2\u5f62<\/strong><br><br>The following image shows the number of triangles that are used when a 3D object is both near the camera, and further away. The left image uses fewer triangles, and the example on the right uses a normal map instead to display the same amount of visible detail:<br><strong>\u4e0b\u56fe\u663e\u793a\u4e86\u5f533D\u5bf9\u8c61\u65e2\u9760\u8fd1\u76f8\u673a\u53c8\u8fdc\u79bb\u76f8\u673a\u65f6\u4f7f\u7528\u7684\u4e09\u89d2\u5f62\u6570\u91cf\u3002\u5de6\u56fe\u4f7f\u7528\u66f4\u5c11\u7684\u4e09\u89d2\u5f62\uff0c\u53f3\u56fe\u793a\u4f8b\u4f7f\u7528\u6cd5\u7ebf\u8d34\u56fe\u663e\u793a\u76f8\u540c\u6570\u91cf\u7684\u53ef\u89c1\u7ec6\u8282\uff1a<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"295\" src=\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-17.png\" alt=\"\" class=\"wp-image-2498\" srcset=\"https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-17.png 620w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-17-300x143.png 300w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-17-70x33.png 70w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><figcaption>Figure 5-9 Micro triangles on an object that is far away from the camera<\/figcaption><\/figure>\n\n\n\n<p>For the following image, most of the triangles in the highlighted area are too small to be visible on a mobile device. Therefore, they are not contributing much to the final look:<br><strong>\u4e0b\u56fe\u6846\u4e2d\u533a\u57df\u5927\u90e8\u5206\u4e09\u89d2\u5f62\u592a\u5c0f\u800c\u65e0\u6cd5\u5728\u79fb\u52a8\u8bbe\u5907\u4e0a\u770b\u5230\u3002\u6240\u4ee5\u5b83\u4eec\u5bf9\u6700\u7ec8\u8868\u73b0\u6ca1\u5565\u7528\u3002<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"621\" height=\"415\" src=\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-18.png\" alt=\"\" class=\"wp-image-2499\" srcset=\"https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-18.png 621w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-18-300x200.png 300w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-18-70x47.png 70w\" sizes=\"(max-width: 621px) 100vw, 621px\" \/><figcaption>Figure 5-10 Micro triangles up close<\/figcaption><\/figure>\n\n\n\n<p>How to minimize this problem<br><strong>\u5982\u4f55\u4f18\u5316<\/strong><\/p>\n\n\n\n<p>Here are a few steps that you can take to mitigate this issue:<br><br> \u2022 For an object that changes its distance from the camera, use Level of Detail (LOD). Using the correct LOD simplifies an object when it is further away, with the object using fewer triangles.<br><strong>\u4e0e\u6444\u50cf\u673a\u8ddd\u79bb\u4e4b\u95f4\u8ddd\u79bb\u4f1a\u6539\u53d8\u7684\u6a21\u578b\uff0c\u53ef\u4f7f\u7528LOD\uff0c\u4f7f\u7528\u6b63\u5e38\u7684LOD\u53ef\u4ee5\u7b80\u5316\u8ddd\u79bb\u8f83\u8fdc\u7684\u6a21\u578b\uff0c\u5e76\u4f7f\u7528\u8f83\u5c11\u7684\u4e09\u89d2\u5f62<\/strong><br><br> \u2022 Use fewer triangles on background objects.<br><strong>\u5728\u80cc\u90e8\u4f7f\u7528\u8f83\u5c11\u7684\u9762<\/strong><\/p>\n\n\n\n<p>Avoid using polygons to create the finer details in a mode. Instead, use a combination of textures and a normal map instead.<br><strong>\u907f\u514d\u7528\u591a\u8fb9\u5f62\u521b\u5efa\u7cbe\u7ec6\u7684\u6a21\u578b\u7ec6\u8282\u3002\u8981\u4f7f\u7528\u7eb9\u7406\u548c\u6cd5\u7ebf\u8d34\u56fe\u66ff\u4ee3\u7ec6\u8282<\/strong><\/p>\n\n\n\n<p> \u2022 Merge any vertices or triangles that are either too small to see on-screen, or are not adding much value to the final image.<br><strong>\u5408\u5e76\u5c0f\u7684\u65e0\u6cd5\u5728\u5c4f\u5e55\u4e0a\u770b\u6e05\u7684\u9876\u70b9\u6216\u4e09\u89d2\u5f62\uff0c\u6216\u8005\u6ca1\u6709\u4e3a\u6700\u7ec8\u8868\u73b0\u5e26\u6765\u52a0\u5206\u9879\u7684\u9876\u70b9\u6216\u8005\u4e09\u89d2\u5f62<\/strong><\/p>\n\n\n\n<p> \u2022 Try to keep triangles above 10 pixels in area.<br><strong>\u8ba9\u5355\u4e2a\u4e09\u89d2\u5f62\u5c4f\u5e55\u663e\u793a10+\u50cf\u7d20<\/strong><\/p>\n\n\n\n<p>Why minimizing the use of micro triangles is important There are several reasons as to why minimizing the use of micro triangles. These are:<br><strong>\u4f18\u5316\u5c0f\u4e09\u89d2\u5f62\u5f88\u91cd\u8981\uff0c\u4e3a\u4ec0\u4e48\uff1a<\/strong><\/p>\n\n\n\n<p> \u2022 The GPU must process all of the triangles, and vertices. Even when they are not adding any value to the final scene on-screen.<br><strong>GPU\u8981\u5904\u7406\u6240\u6709\u7684\u4e09\u89d2\u5f62\uff0c\u5373\u4f7f\u4ed6\u6700\u7ec8\u6ca1\u7ed9\u8868\u73b0\u5e26\u6765\u4efb\u4f55\u5f71\u54cd<\/strong><\/p>\n\n\n\n<p> \u2022 Memory bandwidth is negatively affected as more data must be sent to the GPU for processing.<br><strong>\u6d88\u8017\u66f4\u5927\u7684\u5185\u5b58\u5e26\u5bbd\uff0c\u9700\u8981\u53d1\u9001\u66f4\u5927\u7684\u6570\u636e\u5230GPU\u4e0a\u5904\u7406\uff08\u5bfc\u81f4\u53d1\u70ed\uff09<\/strong><\/p>\n\n\n\n<p> \u2022 The amount of processing that is required directly impacts the battery life of a mobile device.<br><strong>\u8fd9\u4e9b\u5904\u7406\u5f71\u54cd\u7535\u6c60\u8017\u7535\u91cf<\/strong><\/p>\n\n\n\n<p>Therefore, the less data that the GPU must process, the longer the battery lasts.<br><strong>\u8d8a\u5c11\u7684GPU\u6570\u636e\u5904\u7406\u91cf\uff0c \u7535\u6c60\u7684\u5bff\u547d\u5c31\u66f4\u957f<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5.2.3-<strong>Why long and thin triangles are bad<\/strong>\uff08\u4e3a\u4ec0\u4e48\u7ec6\u957f\u7684\u4e09\u89d2\u5f62\u4e0d\u597d\uff09<\/h2>\n\n\n\n<p>Long, thin triangles are vertices that, when rendered in the final image, are smaller than ten pixels and span along the screen. Long, thin triangles are bad because they are more expensive to process on the GPU, when compared with normal triangles.<br><strong>\u7ec6\u957f\u7684\u4e09\u89d2\u5f62\u6307\u5728\u6700\u7ec8\u6e32\u67d3\u65f6\u9876\u70b9\u5c0f\u4e8e10\u50cf\u7d20\uff0c\u5728\u5c4f\u5e55\u8868\u73b0\u4e0a\u53c8\u7ec6\u53c8\u957f\u3002\u7ec6\u957f\u4e09\u89d2\u5f62\u4e0d\u597d\uff0c\u76f8\u8f83\u4e8e\u666e\u901a\u4e09\u89d2\u5f62\uff0cGPU\u7684\u5904\u7406\u6210\u672c\u66f4\u9ad8\u3002<\/strong><\/p>\n\n\n\n<p>The following screenshot shows an example of a long, thin triangle in use. The screenshot highlights the bevel on the pillar when it is viewed from a distance. However, the bevels are not a problem when seen close-up:<br><strong>\u4ee5\u4e0b\u4e3a\u7ec6\u957f\u4e09\u89d2\u5f62\u7684\u793a\u4f8b\u3002\u4ece\u8fdc\u5904\u89c2\u770b\u65f6\u652f\u67f1\u4e0a\u7684[\u659c\u89d2]\u3002\u4f46\u5728\u8fd1\u8ddd\u79bb\u89c2\u5bdf\u65f6\u659c\u89d2\u4e0d\u662f\u95ee\u9898<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"621\" height=\"345\" src=\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-19.png\" alt=\"\" class=\"wp-image-2507\" srcset=\"https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-19.png 621w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-19-300x167.png 300w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-19-70x39.png 70w\" sizes=\"(max-width: 621px) 100vw, 621px\" \/><figcaption>Figure 5-11 Long, thin triangle example<\/figcaption><\/figure>\n\n\n\n<p>How to minimize this problem<br><strong>\u600e\u4e48\u6539\u5584<\/strong><\/p>\n\n\n\n<p>Here are a few steps that you can take to mitigate this issue:<\/p>\n\n\n\n<p><br> \u2022 Remove any long, thin triangles that you see from all objects where it is possible. While there can be situations where this is not possible, the best solution is to remove the long, thin triangles completely.<br> <strong>\u5220\u9664\u7ec6\u957f\u4e09\u89d2\u5f62\uff0c\u5c3d\u7ba1\u5728\u67d0\u4e9b\u60c5\u51b5\u4e0b\u8fd9\u662f\u4e0d\u53ef\u80fd\u7684\u3002\u6700\u597d\u7684\u65b9\u6848\u662f\u5b8c\u5168\u5220\u9664\u7ec6\u957f\u4e09\u89d2\u5f62<\/strong><\/p>\n\n\n\n<p> \u2022 Avoid using shiny materials on an object with long thin triangles as it causes flickering.<br><strong> \u907f\u514d\u5728\u7ec6\u957f\u4e09\u89d2\u5f62\u6a21\u578b\u4e0a\u4f7f\u7528\u4eae\u7684\u6750\u8d28\uff0c\u56e0\u4e3a\u5b83\u4eec\u4f1a\u5f15\u8d77\u95ea\u70c1<\/strong><\/p>\n\n\n\n<p> \u2022 Use Level of Detail (LOD) and remove the long, thin triangles when they are further away on-screen.<br><strong>\u5f53\u6a21\u578b\u79bb\u6444\u50cf\u673a\u8fc7\u8fdc\u65f6\uff0c\u4f7f\u7528LOD<\/strong><\/p>\n\n\n\n<p> \u2022 Technically, it is better to keep triangles close to equilateral. Ensure that the triangles have more inside area, when compared to the edges.<br><strong>\u4ece\u6280\u672f\u4e0a\u8bb2\uff0c\u6700\u597d\u7528\u7b49\u8fb9\u4e09\u89d2\u5f62\uff0c\u8ba9\u4e09\u89d2\u5f62\u7684\u5185\u90e8\u533a\u57df\u5145\u5206\u5730\u5927<\/strong><\/p>\n\n\n\n<p><strong>\u6709\u5173\u4e8e\u6b64\u95ee\u9898\uff0c\u4e5f\u53ef\u4ee5\u53c2\u8003\uff1a<\/strong><br>http:\/\/www.humus.name\/index.php?page=News&amp;ID=228<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Smoothing groups \u5149\u6ed1\u7ec4<\/strong><\/h2>\n\n\n\n<p>Use smoothing groups, or custom vertex normals, to define the hardness of an edge and alter the look of a model. Smoothing groups helps to create better shading when the art direction intentionally uses a tiny polygon count.<br><strong>\u4f7f\u7528\u5149\u6ed1\u7ec4\u6216\u81ea\u5b9a\u4e49\u9876\u70b9\u6cd5\u7ebf\u6765\u5c55\u793a\u786c\u8fb9\u7f18\uff0c\u6539\u5584\u6a21\u578b\u5916\u89c2\u3002\u5f53\u7f8e\u672f\u6709\u610f\u4f7f\u7528\u5c11\u91cf\u591a\u8fb9\u5f62\u65f6\uff0c\u5149\u7ec4\u6709\u52a9\u4e8e\u521b\u5efa\u66f4\u597d\u7684\u5149\u5f71\u6548\u679c<\/strong><\/p>\n\n\n\n<p>Take extra care as smoothing groups affect the UV islands of a model, and also the quality of a normal map when you do baking. This is explained in further detail in our Texturing Best Practice chapter on page 6-73.<br><strong>\u5149\u6ed1\u7ec4\u4f1a\u5f71\u54cd\u6a21\u578b\u7684UV\u5c9b\u4ee5\u53ca\u8fdb\u884c\u70d8\u7119\u65f6\u6cd5\u7ebf\u8d34\u56fe\u7684\u8d28\u91cf\u65f6\uff0c\u8bf7\u683c\u5916\u5c0f\u5fc3\u3002\u5728\u7b2c6-73\u9875\u7684\u201c\u7eb9\u7406\u5316\u6700\u4f73\u5b9e\u8df5\u201d\u4e00\u7ae0\u4e2d\u5bf9\u6b64\u8fdb\u884c\u4e86\u8be6\u7ec6\u8bf4\u660e\u3002 <\/strong><\/p>\n\n\n\n<p> If smoothing is implemented on a 3D model, then it must be exported from the 3D software and get imported into the engine.<\/p>\n\n\n\n<p>The following image shows an example of how smoothing works when applied to an object:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"622\" height=\"246\" src=\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-20.png\" alt=\"\" class=\"wp-image-2515\" srcset=\"https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-20.png 622w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-20-300x119.png 300w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-20-70x28.png 70w\" sizes=\"(max-width: 622px) 100vw, 622px\" \/><figcaption>\u4f7f\u7528\u5149\u6ed1\u7ec4\u793a\u4f8b<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Mesh topology(\u6a21\u578b\u62d3\u6251\uff09<\/strong><\/h2>\n\n\n\n<p> Remember these tips when using mesh topology:<br><strong>\u5f53\u4f7f\u7528Mesh Topology\u65f6\uff1a<\/strong><\/p>\n\n\n\n<p> \u2022 When creating a 3D asset, do use a reasonably tidy and clean topology.<br><strong>\u4f7f\u7528\u5408\u7406\u7684\u62d3\u6251<\/strong><\/p>\n\n\n\n<p> \u2022 Clean topology is essential for characters, or other objects, that are deforming or animated.<br><strong>\u6e05\u6670\u7684\u62d3\u6251\u5bf9\u4e8e\u53d8\u5f62\u6216\u52a8\u753b\u7684\u89d2\u8272\u6216\u5176\u4ed6\u5bf9\u8c61\u975e\u5e38\u91cd\u8981 <\/strong><\/p>\n\n\n\n<p> \u2022 Do not be obsessed with having perfect topology on a 3D model. While not all objects need a perfect edge flow, try to keep the model tidy.<br><strong>\u4e0d\u8981\u75f4\u8ff7\u4e8e\u57283D\u6a21\u578b\u4e0a\u5177\u6709\u5b8c\u7f8e\u7684\u62d3\u6251\u3002\u5c3d\u7ba1\u5e76\u975e\u6240\u6709\u5bf9\u8c61\u90fd\u9700\u8981\u5b8c\u7f8e\u7684\u8fb9\u7f18\u6d41\uff0c\u4f46\u8bf7\u5c1d\u8bd5\u4f7f\u6a21\u578b\u4fdd\u6301\u6574\u6d01 <\/strong><\/p>\n\n\n\n<p><br> \u2014 The player, or end user, does not see the wireframe of a 3D model.<br> \u2014 The texture and material that is applied to the mesh have a bigger contribution to the look of a 3D model.<\/p>\n\n\n\n<p><br> The following image shows an example of a wireframe of the rock cliff mesh that uses simple geometry and topology. The rock cliff looks much better with the material that has been applied. Therefore, any issues with the topology have disappeared:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"767\" src=\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-21.png\" alt=\"\" class=\"wp-image-2516\" srcset=\"https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-21.png 618w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-21-242x300.png 242w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-21-40x50.png 40w\" sizes=\"(max-width: 618px) 100vw, 618px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Shape exaggeration<\/strong>\uff08\u5f62\u72b6\u653e\u5927\uff09<\/h2>\n\n\n\n<p>Shape exaggeration is a technique where certain parts and shapes are made bigger than normal to help with readability. However, whether this is the correct approach for your game depends on the type and style of the game that you are creating.<br><strong>\u5f62\u72b6\u653e\u5927\u662f\u5c06\u67d0\u4e9b\u90e8\u4ef6\u505a\u5f97\u66f4\u5927\uff0c\u4ee5\u63d0\u9ad8\u8868\u73b0\u6027\u3002\uff08\u4f46\u8fd9\u548c\u6e38\u620f\u98ce\u683c\u76f8\u5173\uff09<\/strong><\/p>\n\n\n\n<p> For example:<\/p>\n\n\n\n<p> \u2022 A mobile device screen is small and it is sometimes hard to capture certain shapes when they are tiny.<br><strong> \u79fb\u52a8\u8bbe\u5907\u7684\u5c4f\u5e55\u5f88\u5c0f\uff0c\u5f88\u96be\u770b\u5230\u5c0f\u5f62\u72b6 <\/strong><br><br>Exaggerating the shape helps to overcome this. For example, make the hands on a character larger so they are more easily seen on a small screen.<br> The following image shows how an exaggeration in the size of a hand could look. The hand, sword, and general body proportions are all emphasized in different ways. This was done to improve the visibility, while accounting for the lower polygon count that was used:<br><strong>\u5938\u5927\u7684\u5f62\u72b6\u6709\u52a9\u4e8e\u514b\u670d\u8fd9\u4e00\u95ee\u9898\u3002\u4f8b\u5982\uff0c\u5c06\u89d2\u8272\u4e0a\u7684\u624b\u53d8\u5927\uff0c\u4ee5\u4fbf\u5728\u5c0f\u5c4f\u5e55\u4e0a\u66f4\u5bb9\u6613\u770b\u5230\u5b83\u4eec\u3002&nbsp;<\/strong><\/p>\n\n\n\n<p><strong>\u4e0b\u56fe\u663e\u793a\u4e86\u624b\u7684\u5938\u5f20\u5916\u89c2\u3002\u624b\uff0c\u5251\u548c\u5168\u8eab\u7684\u6bd4\u4f8b\u90fd\u4ee5\u4e0d\u540c\u7684\u65b9\u5f0f\u5f3a\u8c03\u3002\u8fd9\u6837\u505a\u662f\u4e3a\u4e86\u63d0\u9ad8\u53ef\u89c1\u6027\uff0c\u540c\u65f6\u8003\u8651\u5230\u6240\u4f7f\u7528\u7684\u8f83\u4f4e\u7684\u591a\u8fb9\u5f62\u6570\u91cf<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"619\" height=\"232\" src=\"http:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-22.png\" alt=\"\" class=\"wp-image-2520\" srcset=\"https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-22.png 619w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-22-300x112.png 300w, https:\/\/blog.coolcoding.cn\/wp-content\/uploads\/2020\/09\/image-22-70x26.png 70w\" sizes=\"(max-width: 619px) 100vw, 619px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>5.2-Triangle and polygon usage \u539f\u6587\u6863\uff1aArm\u00ae Guide\u5f00\u53d1\u4eba\u5458\u6307\u5357 V4. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/posts\/2478"}],"collection":[{"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2478"}],"version-history":[{"count":33,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/posts\/2478\/revisions"}],"predecessor-version":[{"id":2525,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=\/wp\/v2\/posts\/2478\/revisions\/2525"}],"wp:attachment":[{"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.coolcoding.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}