Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

  • 1.Vue+Three.js基础

  • 2.场景搭建Three+Blender

  • 3.渲染效果提升(材质光照)

  • 4.渲染性能、模型压缩

    • 1. Stats查看渲染帧率
    • 2. threejs三角形、顶点概念
    • 3. Blender三角形、顶点
    • 4. 渲染性能(顶点、显卡)
    • 5. Blender模型减面
      • 6. 模型数量与性能
      • 7. 减少模型加载时间(压缩)
      • 8. Blender设置纹理贴图
      • 9. Blender打包、解包文件
      • 10. 纹理贴图大小(性能优化)
      • 11. 共享几何体,减小模型文件
    • 5.封装、进度条、切视角

    • js 3D可视化
    • 4.渲染性能、模型压缩
    郭隆邦
    2024-03-20
    目录

    5. Blender模型减面

    # Blender模型减面

    美术三维建模的时候,为了提升渲染性能,首先要注意的就是三角形数量或者说顶点数量。

    如果3D建模师,绘图的时候,没有注意减少面数,可能同样一个三维场景,顶点数量可能会多出来几倍。

    # 删除不必要的面

    一个面不会被渲染,是被遮挡的,建模的时候,可以不绘制。比如一个箱子放在地面固定不动,底部平面就可以不绘制。

    # 平面删除多余的顶点

    比如一个矩形平面,一般四个顶点就可以了,从视觉上看,多了也没什么用,除非说特殊情况。

    # 曲面控制顶点数量

    曲面在不影响光滑程度的情况下,尽量减少面数。

    一般来说,距离相机越远,对表面细分程度要求越低,你可以Blender生成一个球体,同样细分程度,距离相机位置不同,然后在threejs测试对比。

    # 从别的地方下载的模型:查看、减面

    如果你从别的地方下载gltf、3dmax等不同格式模型,可以使用Blender对模型进行优化、减面。

    比如你下载了一个3dmax文件,可以转fbx,然后Blender打开fbx模型,减面优化,然后导出gltf

    可以tab进入编辑模式,查看模型三角形细分程度,可以适当减少面数。

    # 独立显卡选配

    一般来说,大部分物联网、数字孪生相关3D可视化的后台项目,需要配置一个独立显卡,以免渲染性能太低。

    通过Blender优化模型,减面之后,threejs渲染仍然卡顿,这时候可以考虑升级显卡。

    一般来说从游戏卡选择就行。

    4. 渲染性能(顶点、显卡)
    6. 模型数量与性能

    ← 4. 渲染性能(顶点、显卡) 6. 模型数量与性能→

    Theme by Vdoing | Copyright © 2016-2025 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式