BIM轻量化和Web的应用

       大家好,我是小张同学,一个接触BIM有一段时间的人了,一直混迹在各大论坛学习的潜水党,收获众多。也很感慨与各种前辈们的无私奉献,在此也想分享一点自己一直以来的学习过程。如有理解不足或错误之处,请大家指点一下

1、关于BIM的轻量化

  •        首先关于模型的轻量化我个人认为只是为了减少对电脑硬件设备的依赖,便于模型的在各种场景下的使用和传播。如果说将revit导出成obj,IFC格式那就是轻量化那我认为是确实有一点不妥之处,只能说是把模型到处成为另一种格式。了解过计算机三维模型的渲染朋友们应该都知道最终都是点、线、面的组合。像obj这中3D格式存储的就是顶点、顶点索引、uv、法向量等数据,下方一个obj文件中一个组成一个正方体最少有8个顶点。12个三角形。36个组成三角形的索引。最终这些几何数据组合成了一个正方体。这就是最基本的曲面细分多面体。这种格式对计算机渲染出来是比较快的。而且obj还是一种文本格式,像一个球体那得多少数据把他描述出来啊。最终导出的数据比revit数据大太多了。这时候的轻量化数据变得越来越大了
g Cube
v -1 -1 -1
v -1 1 -1
v 1 -1 -1
v 1 1 -1
v -1 -1 1
v -1 1 1
v 1 -1 1
v 1 1 1
f 1 2 3
f 2 3 4
f 5 6 7
f 6 7 8
f 1 2 5
f 2 5 6
f 3 4 7
f 4 7 8
f 2 4 6
f 4 6 8
f 1 3 5
f 3 5 7

BIM轻量化和Web的应用_第1张图片

  •        此外还有IFC这种可以直接构造几何实体的方法,像下方例子一样用几何构造表示在(0,0,0)位置有一个长宽高都为2的正方体,这种方法最简单,还能直接修改,记录更少的数据,比较一下上方的obj,数据量大大减少,此外记录一个球体只要一个定位点,半径两个数据就能描述出来了,多爽啊!。不过也是有很大的不足的就是渲染时间比较长。这种直接构造几何实体的方法最后还是要我们把这个长宽高坐标信息重新计算几何顶点数据给GUP去渲染的。所以在revit中打开一个IFC就有点像revit重新计算绘制了一个模型一样。所以打开的时间相对来说慢慢慢…了。
#501= IFCCSGSOLID (#502);
#502= IFCBLOCK (#503,2.,2.,2.);
#503= IFCAXIS2PLACEMENT3D (#504,$,$);
#504= IFCCARTESIANPOINT ((0.,0.,0.))
  •        那我个人所理解的轻量化就是把模型的在最小的空间提取模型中我们所需要的数据,像我们只想简单的展示一个模型那肯定就是直接导出obj,gltf存储顶点几何数据的格式就可以了。我还想要属性信息那我就再导出属性信息,我还想导出模型后还能直接在原基础上修改模型那可以直接导出IFC。此外有人的想要revit的全部信息的,包括图纸,那就可以把图纸也直接导出。最终你导出的数据肯定对比一下revit的大小,那肯定是远远大于的。所以我认为在保留更多的数据下,revit本身以及是非常轻量化的了。在市场上没几种格能比得上。不过revit这种格式可不公开啊,想要打开还得下载他们的软件还得对应版本或者更高版本,这也太难了吧,所以我们就在考虑有没有一种格式能够更好的存储和分享BIM的数据,IFC是一种非常好的格式,不过如果只是为了显示模型就可以选择gltf,因为解析加载IFC确实比较麻烦也比较慢。

2、 web中模型的应用

  •        目前比较常用的三维格式是gltf,它的目标可大了,是想做到3D领域的JPEG,他主要是存储了三维数据中的几何信息,能够尽量提供可以直接传输给GUP渲染的数据,不再需要二次转换,这种格式非常适合展示模型。更重要的是有threejs这个大哥在支持他,现在还是互联网时代,想要分享一个模型直接分享一下链接就可以了,如下图所示,多好啊!!根本不需要安装下载任何软件,Nice。
    BIM轻量化和Web的应用_第2张图片

  •        作为一个有理想的程序员,单单展示模型对我们来说是远远不够,我们希望能像revit一样直接参数化修改模型(这不就是类型于做一个三维几何软件!!好家伙确实有理想!)。有了这个需求之后我们应该怎么办了……,渲染引擎有threejs了的支持了,但是几何图形算法库这可是个大问题!!这才是核心的东西,这时候单单对于gltf来说存储的顶点数据远远不能满足需求了,像一个墙体,我们这时候需要的是墙体的定位线,定位线偏移值,墙宽、墙高等信息,这时我们可以把这些参数化描述过程的信息也直接导出,也可以直接导出IFC作为中间存储信息的载体。

  •        获取参数化信息后,对于墙体这种简单的几何图形我们还能能够通过计算获取顶点信息的,但是一旦有曲线曲面的加入,我们想去寻找更多的几何算法,对于IFC来说可以使用xbim.geometry,像revit,cad的几何算法库主要是有ACIS内核,主是是基于边界表示法(BRep)还有CSG表示法,这个才是核心。但是ACIS并不开源,但是还是有无私的前辈们给我们编写了开源的OpenCASCADE(顺便说一下xbim.geometry是基于OpenCASCADE的编写的)。因此有需求的我们直接去学习和使用OpenCASCADE,github上有个开源的freecad就是用的OpenCASCADE内核,可以去下载学习!!可是OpenCASCADE都是C++写的,我们想要在前端直接调用就困难了啊,这时伟大的程序员们研究出来了webassembly,能够让C/C++,C#,Go等语言直接编译成wasm给前端调用,让wasm成为了web的继html,js,css后的第四种语言,打开了web的新天地!!此外还有基于node-occ和python-occ封装OpenCASCADE,建立web服务给前端显示,不过做的接口并不算多,我个人觉得远远没有webassmbly封装起来灵活好用,还能直接进行前端调用,代码也能接近原生运行速度。不过也是给我们提供了一个很好的思路。下面根据node-occ提供的接口尝试一下threejs渲染引擎和OpenCASCADE的结合。
           1、在threejs中参数化生成两个相交实体,显示的效果如下

  //创建一个BOX
  var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
  var cube = new THREE.Mesh(cubeGeometry,new THREE.MeshPhongMaterial({color: 0xff49,}));
  //cube添加到场景中
  scene.add(cube);
  cube.position.set(0,0,0);
  //创建一个Sphere
  var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
  var sphere = new THREE.Mesh(sphereGeometry,new THREE.MeshPhongMaterial({ color: 0x77ff,}));
  sphere.position.set(4,0,0);
  scene.add(sphere);

BIM轻量化和Web的应用_第3张图片
       2、node-occ帮我们封装了一个切割的方法,我们修改一下和球体相切,最后切割生成的效果如下图。BIM轻量化和Web的应用_第4张图片

  const occ= require("node-occ").occ;
  var box = occ.makeBox([-2, -2, -2], [2, 2, 2]);
  var Sphere = occ.makeSphere([4, 0, 0], 4);
  var cut = occ.cut(box, Sphere);

BIM轻量化和Web的应用_第5张图片
-       3、再来测试一个node-occ官方的参数建模源码例子。很nice,完美运行!!

var height = 20
var thickness = 1;
var radius =10.0;
var s1 = csg.makeCylinder([0,0,0],[0,0,height] , radius);
var s2 = csg.makeSphere([0,0,0], radius);
var s3 = csg.makeCylinder([0,0,-radius*0.7],[0,0,height], radius*2);
var s4 = csg.fuse(s1,s2);
var s5 = csg.common(s4,s3);
var smallRadius = radius-thickness;
var r1 = csg.makeCylinder([0,0,0],[0,0,height] , smallRadius);
var r2 = csg.makeSphere([0,0,0],smallRadius);
var r3 = csg.makeCylinder( [0,0,-radius*0.7 + thickness ],[0,0,height], radius*2);
var r4 = csg.fuse(r1,r2);
var r5 = csg.common(r4,r3);
var solid = csg.cut(s5,r5);

BIM轻量化和Web的应用_第6张图片
       综上所述。可以自己了解熟悉后自己添加一下几何图形接口,这个过程需要对threejs、c++和OpenCASCADE有一点的认识基于这些我们完全能做出一个在线直接修改绘制并且修改BIM模型的功能致敬伟大的程序员们!!

       以上是基于本人的理解,如有不对请提醒我一下啊。这篇文章到些先结束了。后面将会分篇详细讲解revit转化gltf,threejs加载,threejs参数化修改模型实现数模联动,再次致敬伟大的程序员们。

欢迎加入QQ群:835368069
包括BIM开发,Cad开发,threejs开发,python,webAssembly等等的。
大家喜欢可以加群一起卷起来!!卷卷卷卷!!!

你可能感兴趣的:(BIM在WEB的应用,bim,three.js)