-
Notifications
You must be signed in to change notification settings - Fork 2
/
blog_full_precision_geometry.html
391 lines (331 loc) · 21.3 KB
/
blog_full_precision_geometry.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="xeokit - SDK for Browser-Based 3D BIM Visualization">
<meta name="author" content="Lindsay Kay">
<meta name="keywords" content="BIM,IFC,WebGL,JavaScript,Browser,BCF,Web,BIMServer,xeolabs,3D,3D Viewer,Lindsay Kay,xeokit,MedViz,ArchViz,Open Source,Browser,Viewer">
<title>xeokit - 3D Web Programming Toolkit for BIM and Engineering Visualization</title>
<link href="./vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="./css/business-frontpage.css" rel="stylesheet">
<!--<script src="vendor/jquery/jquery.slim.min.js"></script>-->
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap core JavaScript -->
<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ">
<!-- <div class="container">-->
<span style="color: #ffffff;"><a class="navbar-home" href="http://xeolabs.com">xeolabs</a>/<a
class="navbar-brand" href="./index.html">xeokit SDK</a></span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="./index.html?foo=0">Home</a>
</li>
<li class="nav-item dropdown">
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownLearn">
<a class="dropdown-item" href="./demo.html?projectId=RevitSamples&tab=models">Revit Sample IFC
Model</a>
<a class="dropdown-item" href="./demo.html?projectId=MAPPointCloud">1.6M Point Cloud Model</a>
<a class="dropdown-item" href="./demo.html?projectId=MAP&tab=objects">Full-Precision IFC Model</a>
<a class="dropdown-item" href="./demo.html?projectId=OTCConferenceCenter&tab=storeys">Conference
Center Model</a>
<a class="dropdown-item" href="./demo.html?projectId=Schependomlaan&tab=storeys">Schependomlaan
Model</a>
<a class="dropdown-item" href="./demo.html?projectId=Schependomlaan_selectedStorey&tab=storeys">Schependomlaan
Ground Floor</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./index.html?foo=1#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./index.html?foo=1#faq">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./blog.html">Blog</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownExamples" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Examples
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownExamples">
<a class="dropdown-item" href="https://xeokit.github.io/xeokit-sdk/examples/index.html">SDK Examples</a>
<a class="dropdown-item" href="https://xeokit.github.io/xeokit-sdk/examples/bimviewer.html" target="_examples">BIMViewer Examples</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLearn" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Developers
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownLearn">
<a class="dropdown-item"
href="https://www.notion.so/xeokit/xeokit-Documentation-4598591fcedb4889bf8896750651f74e">Documentation</a>
<a class="dropdown-item" href="https://xeokit.github.io/xeokit-sdk/examples/index.html">SDK Examples</a>
<a class="dropdown-item" href="https://xeokit.github.io/xeokit-sdk/examples/bimviewer.html" target="_examples">BIMViewer Examples</a>
<a class="dropdown-item" href="https://xeokit.github.io/xeokit-sdk/docs/" target="_docs">API
Reference</a>
<a class="dropdown-item" href="https://github.com/xeokit" target="_code">Source Code</a>
<a class="dropdown-item" href="https://xeokit.github.io/xeokit-model-conversion-tests/index.html">Model
Conversion</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./index.html?foo=2#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./download.html">Download</a>
</li>
<!-- <li class="nav-item">-->
<!-- <a class="nav-link" href="./index.html?foo=3#connect">Connect</a>-->
<!-- </li>-->
</ul>
</div>
<!-- </div>-->
</nav>
<div class="container">
<div class="row mt-5 mb-4">
<div class="col-md-12">
<h1><a href="./blog.html">Blog</a> / Double-Precision Model Geometry in xeokit 1.4.8</h1>
<hr>
<p>Oct 30, 2020</p>
<hr>
<p class="lead">This week, <a
href="http://xeolabs.com">xeolabs</a> released <a
href="https://github.com/xeokit/xeokit-sdk"><code>xeokit-sdk 1.4.8</code></a> and <a
href="https://github.com/xeokit/xeokit-gltf-to-xkt"><code>xeokit-gltf-to-xkt 0.5.0</code></a>, which
allow us to accurately view BIM models at their original IFC global coordinate locations within xeokit's
browser-based viewer, without rounding errors. In this post, we'll describe the problem this update solves, and how
to upgrade your xeokit application to use this update.<br>
</p>
<hr>
<img class="img-responsive rounded no-padding"
src="./img/xeokit-viewer-jitter.png"
alt="">
</div>
</div>
<hr>
<div class="row mt-4 mb-4">
<div class="col-md-12">
<h2>Why is my Model Jittering?</h2>
<p>Sometimes, xeokit users would report that certain models would "jitter" as they moved. </p>
<p>The screen capture below shows the problem, using a model of
the Marc Antoine Petit apartment complex in Lyon, provided by <a href="https://bimdata.io">BIMData</a>. The IFC geometry for this model is in
IFC
global coordinates. Notice the way the model "shivers" as we rotate it.</p>
<a href="https://xeokit.github.io/xeokit-sdk/examples/#loading_XKT_jitter_singlePrecision_MAP"> <img
src="./img/gifs/jitter.gif" class="img-fluid rounded mx-auto d-block" alt="..."></a><br>
<p class="text-center"><b>Figure 1. Rounding Jitter on WebGL</b><br>[<a
href="https://xeokit.github.io/xeokit-sdk/examples/#loading_XKT_jitter_singlePrecision_MAP">Run
this example</a>]</p>
<p>After some investigation, it turned out that:</p>
<ul>
<li><p><b>The models had geometry that relied on double-precision values.</b> This was either because the
models were geographically
large with fine details, or because their geometries were positioned far from the origin of the IFC
global coordinate system
(BIMData's model happens to be positioned at <code>[1842022, 10, -5173301]</code>, which is
somewhere in Lyon, France).</p>
</li>
<li><p><b>WebGL can only support single-precision values to ~7 decimal places of accuracy.</b> Using graphics APIs such
as
WebGL, OpenGL and
Direct3D, graphics processing units (GPUs) internally operate on single precision 32-bit
floating-point numbers. Therefore, the jittering turned out to be rounding error within WebGL
shaders, as each vertex position
continually snapped to its nearest available single-precision value.</p>
</li>
</ul>
<p>So far, we've managed to avoid rounding jitter by using certain <a
href="https://github.com/xeokit/xeokit-sdk/wiki/Creating-Files-for-Offline-BIM#42-ifcconvert-options-to-mitigate-precision-loss"><code>IfcConvert</code>
options</a>, or
<a href="https://github.com/xeokit/xeokit-sdk/wiki/Creating-Files-for-Offline-BIM#431-a-python-script-using-ifcopenshell"><code>python
scripts on IfcOpenShell</code></a>, to "center"
the geometries within our IFC models (see: <a
href="https://github.com/xeokit/xeokit-sdk/wiki/Creating-Files-for-Offline-BIM">Creating
Files for Offline BIM</a>). These workarounds work by transforming the geometries from IFC global
coordinates to IFC local coordinates, which are (hopefully) small enough to be accurately represented by
WebGL.</p>
<p>The problem with these workarounds is that we lose the original global placement of our models. This
means
that we cannot
load multiple models belonging to the same site and have them positioned correctly with respect to each
other. Instead,
they would all be in their local IFC coordinate system, and once loaded into xeokit, would be positioned
right on top of
each other.</p>
<p>Furthermore, if the model is geographically huge, with fine details (eg. a 10km long roadworks that
relies on 1cm
accuracy), then
centering doesn't help anyway, because the geometry will still have huge coordinate values.</p>
</div>
</div>
<div class="row mt-4 mb-4">
<div class="col-md-12">
<h2>Solution: double-Precision Emulation</h2>
<p>The solution was to extend <a href="https://github.com/xeokit/xeokit-sdk"><code>xeokit-sdk</code></a> and
<a href="https://github.com/xeokit/xeokit-gltf-to-xkt"><code>xeokit-gltf-to-xkt</code></a> with the
ability to emulate double-precision geometry rendering on WebGL, as a robust way to eliminate rounding
jitter with IFC models that contain
large geometry coordinates.</p>
<p>The screen capture below shows how this solution completely eliminates rounding jitter with BIMData's
model,
without needing to convert it to IFC local coordinates. Within xeokit's viewer, the model actually
retains its full IFC global
coordinate precision, and is still centered at <code>[1842022, 10, -5173301]</code> (somewhere Lyon, France).</p>
<a href="https://xeokit.github.io/xeokit-sdk/examples/#loading_XKT_jitter_fullPrecision_MAP"> <img
src="./img/gifs/no_jitter.gif" class="img-fluid rounded mx-auto d-block" alt="..."></a><br>
<p class="text-center"><b>Figure 2. double-Precision Emulation in xeokit</b><br>[<a
href="https://xeokit.github.io/xeokit-sdk/examples/#loading_XKT_jitter_fullPrecision_MAP">Run
this example</a>]</p>
<p>We can even load a second model, with IFC global coordinates centered at, say. <code>[-104567655, 10,
231000000]</code>, and
xeokit would happily have both of these models in the viewer, situated <code>259038312.73</code> units
away from each other. </p>
<p>Our jitter elimination uses a technique known as <b>relative-to-center (RTC) geometry coordinates</b>,
which is used in flight simulators and geospatial visualization applications to accurately render very
large models on single-precision GPUs. We won't describe the RTC technique here, but you can read all about it in the book <a
href="https://www.amazon.com/3D-Engine-Design-Virtual-Globes/dp/1568817118">3D Engine Design for
Virtual Globes</a>, which was a valuable resource during the development of this release.</p>
</div>
</div>
<div class="row mt-4 mb-4">
<div class="col-md-12">
<h2>Upgrading your App to double-Precision</h2>
<p>We'll now describe how to upgrade your xeokit application to work with double-precision models. You
can also
find more information in the GitHub <a href="https://github.com/xeokit/xeokit-sdk/pull/456">pull
request</a>
for this update.</p>
<h4>1. Update xeokit-gltf-to-xkt</h4>
<p>First, update your version of <a
href="https://github.com/xeokit/xeokit-gltf-to-xkt"><code>xeokit-gltf-to-xkt</code></a> to <code>0.5.0</code>
or
later, assuming
that you're using that within your model conversion pipeline to convert glTF models to xeokit's
optimized <code>.XKT</code> native geometry format.</p>
<p>Then add the new <code>-f 6</code> option when you invoke <code>xeokit-gltf-to-xkt</code>'s <code>gltf2xkt</code>
executable. This will cause the executable to output the new <code>.XKT 6</code> format, which preserves
double model precision, using the RTC technique mentioned earlier.</p>
<pre><code>
$ ./gltf2xkt -f 6 -s scene.gltf -o scene.xkt
</code></pre>
<h4>2. Reconfigure IfcConvert</h4>
<p>If you're using <code>IfcConvert</code> with option <code>--center-model</code>,
<code>--site-local-placement</code> or <code>--building-local-placement</code>
to center your models to avoid rounding jitter, then you can now remove that option.</p>
<p>Likewise, if you're using <code>IfcOpenShell</code> scripts to center your models
to avoid jitter, you can now remove those script invocations from your conversion pipeline.</p>
<h4>3. Update xeokit-sdk</h4>
<p>Lastly, update your version of <a
href="https://github.com/xeokit/xeokit-sdk"><code>xeokit-sdk</code></a> to <code>1.4.8</code> or
later. This version is
a backwardly-compatible drop-in replacement for 1.4.7, which does not emulate double-precision.</p>
<p>Now you can convert double-precision IFC models to <code>.xkt 6</code> and load them into your xeokit
application, to accurately view them in the browser.</p>
</div>
</div>
<div class="row mt-4 mb-4">
<div class="col-md-12">
<h2>More Resources</h2>
<p>As mentioned, <b><a href="https://github.com/xeokit/xeokit-sdk/pull/456">pull request #456</a></b> has
info on what code has been updated in <a
href="https://github.com/xeokit/xeokit-sdk">xeokit-sdk 1.4.8</a>.</p>
<p>For improved maintenance and QA, the converter logic in <a
href="https://github.com/xeokit/xeokit-gltf-to-xkt"><code>xeokit-gltf-to-xkt</code></a>, used for
generating <code>.XKT 6</code> format, has been
factored out into its own library, <b><a href="https://github.com/xeokit/xeokit-convert">
<code>xeokit-convert</code></a></b>. This allows us to more easily document and unit test the
converter logic, and to more clearly use it as a reference implementation for developers wanting
to build their own
tools to generate <code>.XKT 6</code> format. Take a look at that library's repository for more
insight into <code>.XKT 6</code> and RTC.</p>
</div>
</div>
<br><br>
</div>
<footer class="py-5 bg-dark xeokit-footer">
<div class="container pt-5">
<div class="row">
<div class="col-md-4 col-sm-12 mb-3 text-left">
<h2>xeokit SDK</h2>
<p>Powering Engineering Graphics on the Web</p>
<img src="./img/xeokitLogoAlphaBG.png">
</div>
<div class="col-md-8 col-sm-12">
<div class="col-md-4 col-sm-6 col-6 p-0 float-left mb-3">
<h5 class="mb-4 font-weight-bold text-uppercase ">Learn</h5>
<ul class="list-group">
<li class="list-group-item bg-transparent border-0 p-0 mb-2"><a
href="./index.html#features">Features</a></li>
<li class="list-group-item bg-transparent border-0 p-0 mb-2 "><a
href="./demo.html?projectId=OTCConferenceCenter&tab=storeys">Demo</a></li>
<li class="list-group-item bg-transparent border-0 p-0 mb-2 "><a
href="./blog.html">Blog</a></li>
<li class="list-group-item bg-transparent border-0 p-0 mb-2"><a
href="./index.html#pricing">Pricing</a></li>
<li class="list-group-item bg-transparent border-0 p-0 mb-2"><a
href="./index.html#faq">FAQ</a></li>
</ul>
</div>
<div class="col-md-4 col-sm-6 col-6 p-0 mb-3 float-left">
<h5 class="mb-4 font-weight-bold text-uppercase ">Develop</h5>
<ul class="list-group">
<li class="list-group-item bg-transparent border-0 p-0 mb-2"><a
href="./download.html">Download</a></li>
<li class="list-group-item bg-transparent border-0 p-0 mb-2"><a
href="https://xeokit.github.io/xeokit-sdk/examples/">Examples</a></li>
<li class="list-group-item bg-transparent border-0 p-0 mb-2"><a
href="https://xeokit.github.io/xeokit-sdk/docs/">API Docs</a></li>
<li class="list-group-item bg-transparent border-0 p-0 mb-2"><a
href="https://github.com/xeokit">Source Code</a></li>
<li class="list-group-item bg-transparent border-0 p-0 mb-2"><a
href="https://www.notion.so/xeokit">Tutorials</a></li>
<li class="list-group-item bg-transparent border-0 p-0 mb-2"><a
href="https://xeokit.github.io/xeokit-model-conversion-tests/index.html">Model
Conversion</a></li>
<li class="list-group-item bg-transparent border-0 p-0 mb-2"><a
href="https://github.com/xeokit/xeokit-sdk/issues">Issues</a></li>
</ul>
</div>
<div class="col-md-4 col-sm-6 col-6 mb-3 p-0 float-left">
<h5 class="mb-4 font-weight-bold text-uppercase ">Connect</h5>
<ul class="list-group">
<li class="list-group-item bg-transparent border-0 p-0 mb-2">
<a href="http://www.xeolabs.com"><i class="fa fa-globe mr-1"></i>
xeolabs.com</a>
</li>
<li class="list-group-item bg-transparent border-0 p-0 mb-2">
<a href="https://www.linkedin.com/company/xeolabs"><i class="fa fa-linkedin mr-1"></i>
LinkedIn</a>
</li>
<li class="list-group-item bg-transparent border-0 p-0 mb-2">
<a href="https://twitter.com/xeolabs"><i class="fa fa-twitter mr-1"></i> Twitter</a>
</li>
<li class="list-group-item bg-transparent border-0 p-0 mb-2">
<a href="https://github.com/xeolabs" target="_code"><i class="fa fa-github mr-1"></i>
Github</a>
</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div class="py-4 d-flex justify-content-center align-items-center">
<p class="m-0 text-center">Copyright © <a href="http://xeolabs.com">xeolabs</a> 2021</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>