PageSourceSearch

https://xeolabs.github.io/portfolio/bimdata

html xeolabs.github.io collected 2026-10-03 10:11:21 UTC 22,658 bytes, 434 lines download raw bytes

1<!doctype html>
2<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
4<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
5<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
6<head>
7<meta charset="utf-8">
8<title>BIMData.IO Online 3D BIM Viewer &#8211; xeolabs</title>
9<meta name="description" content="Built the 3D BIM viewer for <b>BIMData.io</b>, a cutting-edge platform to manage your construction projects that provides an all-in-one solution to visualize, check, edit and share building information.">
10<meta name="keywords" content="xeogl, bimdata, BIM, IFC, webgl">
11<!-- Twitter Cards -->
12<meta name="twitter:card" content="summary">
13<meta name="twitter:image" content="http://xeolabs.com/images/">
14<meta name="twitter:title" content="BIMData.IO Online 3D BIM Viewer">
15<meta name="twitter:description" content="Built the 3D BIM viewer for <b>BIMData.io</b>, a cutting-edge platform to manage your construction projects that provides an all-in-one solution to visualize, check, edit and share building information.">
16<meta name="twitter:creator" content="@xeolabs">
17
18<!-- Open Graph -->
19<meta property="og:locale" content="en_US">
20<meta property="og:type" content="article">
21<meta property="og:title" content="BIMData.IO Online 3D BIM Viewer">
22<meta property="og:description" content="Built the 3D BIM viewer for <b>BIMData.io</b>, a cutting-edge platform to manage your construction projects that provides an all-in-one solution to visualize, check, edit and share building information.">
23<meta property="og:url" content="http://xeolabs.com/portfolio/bimdata">
24<meta property="og:site_name" content="xeolabs">
25
26
27
28
29
30<link rel="canonical" href="http://xeolabs.com/portfolio/bimdata">
31<link href="http://xeolabs.com/feed.xml" type="application/atom+xml" rel="alternate" title="xeolabs Feed">
32
33
34<!-- http://t.co/dKP3o1e -->
35<meta name="HandheldFriendly" content="True">
36<meta name="MobileOptimized" content="320">
37<meta name="viewport" content="width=device-width, initial-scale=1.0">
38
39<!-- Google Webfonts -->
40<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|PT+Serif:400,700,400italic' rel='stylesheet' type='text/css'>
41<!-- For all browsers -->
42<link rel="stylesheet" href="http://xeolabs.com/assets/css/main.min.css">
43
44<!--[if (lt IE 9) & (!IEMobile)]>
45<link rel="stylesheet" href="http://xeolabs.com/assets/css/ie.min.css">
46<![endif]-->
47
48<meta http-equiv="cleartype" content="on">
49
50<!-- Load Modernizr -->
51<script src="http://xeolabs.com/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script>
51
52
53<!-- Icons -->
54<!-- 16x16 -->
55<link rel="shortcut icon" href="http://xeolabs.com/favicon.ico">
56<!-- 32x32 -->
57<link rel="shortcut icon" href="http://xeolabs.com/favicon-32x32.png">
58<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
59<link rel="apple-touch-icon-precomposed" href="http://xeolabs.com/images/apple-touch-icon-precomposed.png">
60<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
61<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://xeolabs.com/images/apple-touch-icon-72x72-precomposed.png">
62<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
63<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://xeolabs.com/images/apple-touch-icon-114x114-precomposed.png">
64<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
65<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://xeolabs.com/images/apple-touch-icon-144x144-precomposed.png">
66
67</head>
68
69<body class="article" itemscope itemtype="http://schema.org/WebPage">
70
71<!--[if lt IE 9]><div class="browser-upgrade alert alert-info">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div><![endif]-->
72
73<div class="navigation-wrapper">
74	<div class="site-name">
75		<a href="http://xeolabs.com/">xeolabs</a>
76	</div><!-- /.site-name -->
77	<div class="top-navigation">
78		<nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
79		    <ul>
80		        
81				<li><a href="http://xeolabs.com/index" >About</a></li>
82		        
83				<li><a href="http://xeolabs.com/articles" >Blog</a></li>
84		        
85				<li><a href="http://xeolabs.com/portfolio" >Portfolio</a></li>
86		        
87				<li><a href="http://xeolabs.com/pdfs/lindsaykay_resume_2019.pdf" >Resume</a></li>
88		        
89				<li><a href="http://linkedin.com/in/lindsaystanleykay" target="_blank">LinkedIn</a></li>
90		        
91				<li><a href="http://xeolabs.com/contact" >Contact</a></li>
92		        
93				<li><a href="http://xeogl.org" target="_blank">xeogl</a></li>
94		        
95				<li><a href="http://xeokit.io" target="_blank">xeokit</a></li>
96		        
97
98		    </ul>
99		</nav>
100	</div><!-- /.top-navigation -->
101</div><!-- /.navigation-wrapper -->
102
103
104
105<div id="main" role="main" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
106  <div class="article-author-top">
107    <img src="http://xeolabs.com/images/avatar.jpg" class="bio-photo" alt="xeolabs bio photo"></a>
108<h3><a href="http://xeolabs.com/about/">xeolabs</a></h3>
109<p><b>Lindsay Kay</b><br><br><i>3D Web Software Engineer</i></p>
110<a href="http://twitter.com/xeolabs" class="author-social" target="_blank"><i class="icon-twitter"></i> Twitter</a>
111<a href="http://linkedin.com/in/lindsaystanleykay" class="author-social" target="_blank"><i class="icon-linkedin"></i> LinkedIn</a>
112<a href="http://github.com/xeolabs" class="author-social" target="_blank"><i class="icon-github"></i> Github</a>
113<br>
114<hr>
115<p style="text-align: center;"><a href="http://xeolabs.com/pdfs/OpenGLInsights.pdf"><img style="text-align: center; width: 80%;" src="http://xeolabs.com/images/scenejs/OpenGLInsights2.jpg"></a><br>
116    <i>My chapter on <a href="http://scenejs.org">SceneJS</a> for OpenGL Insights is now <a href="http://xeolabs.com/pdfs/OpenGLInsights.pdf">free to download!</a></i></p>
117
118  </div>
119  <article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
120    <div class="headline-wrap">
121      <h1 itemprop="name">BIMData.IO Online 3D BIM Viewer</h1>
122        <p style="font-weight:bold; font-style:italic;"><time datetime="2018-06-28T00:00:00+00:00" itemprop="datePublished">June 28, 2018</time></p>
123    </div><!--/ .headline-wrap -->
124    <div class="article-wrap" itemprop="text">
125      <p>In 2018, I worked with <strong><a href="https://www.bimdata.io">BIMData</a></strong> in Lyon, France, to develop the WebGL-based 3D viewer within their browser-based building information modeling (BIM) platform.
126<br /><br />
127We developed the viewer on <strong><a href="http://xeogl.org">xeogl</a></strong>, an open source WebGL library I created for developing 
128browser-based 3D model viewers.
129<br /><br />
130In this article, I’ll describe some of the features that we created in BIMData’s viewer.</p>
131
132<hr />
133
134<p><strong>Update January 2019:</strong> BIMData have since migrated from xeogl to the <strong><a href="http://xeokit.io">xeokit SDK</a></strong>, an dual-licensed WebGL library I created more recently, which has more support for BIM and CAD, plus higher performance for large models. Check it out if you need a low-cost, high-performance way to get your IFC models on the Web, that allows you the freedom to convert and host your models on your own server or GitHub repository: <strong><a href="http://xeokit.io">http://xeokit.io</a></strong>.</p>
135
136<hr />
137
138<p><a href="http://www.bimdata.io/en/bim-data-en/"><img src="http://xeolabs.com/images/bimdata/bimdata.png" alt="" /></a></p>
139
140<h1 id="contents">Contents</h1>
141
142<ul>
143  <li><a href="#background">
143Background</a></li>
144  <li><a href="#the-client">The Client</a></li>
145  <li><a href="#requirements">Requirements</a></li>
146  <li><a href="#solution">Solution</a>
147    <ul>
148      <li><a href="#using-xeogl">Using xeogl</a></li>
149      <li><a href="#sub-contracting">Sub-contracting</a></li>
150      <li><a href="#application-architecture">Application architecture</a></li>
151      <li><a href="#gltf-geometry-pipeline">glTF geometry pipeline</a>
152        <ul>
153          <li><a href="#geometry-compression-and-batching">Geometry compression and batching</a></li>
154        </ul>
155      </li>
156      <li><a href="#user-annotations">User annotations</a></li>
157      <li><a href="#cross-section-views">Cross-section views</a></li>
158      <li><a href="#viewcube-camera-controller">ViewCube camera controller</a></li>
159      <li><a href="#isolated-object-view">Isolated object view</a></li>
160      <li><a href="#emphasis-effects">Emphasis effects</a></li>
161      <li><a href="#measurement-tools">Measurement tools</a>
162        <ul>
163          <li><a href="#simple-distance">Simple distance</a></li>
164        </ul>
165      </li>
166      <li><a href="#camera-navigation">Camera navigation</a></li>
167      <li><a href="#bcf">BCF</a></li>
168    </ul>
169  </li>
170  <li><a href="#conclusion">Conclusion</a></li>
171</ul>
172
173<h1 id="background">Background</h1>
174
175<p><strong>BIM</strong> is a process involving the generation and management of digital representations of physical and functional characteristics 
176of buildings, usually while constructing them.
177<br /><br /> 
178<strong>WebGL</strong> is is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser, without 
179the use of plug-ins. While IFC viewers are typically written as desktop applications, using the likes of OpenGL or DirectX, writing them
180 on WebGL gives us the advantage of being able to view them on the web. 
181 <br /><br />
182 With IFC visualization, the main challenge is how to engineer a WebGL-based viewer that’s able to render huge quantities 
183 of objects within the memory and execution constraints of the browser. After all, IFC models often contain an individual 
184 element for every single fire sprinkler, electrical fitting, light panel, and so on.</p>
185
186<h1 id="the-client">The Client</h1>
187
188<p><strong><a href="http://www.bimdata.io/en/bim-data-en/">BIMData</a></strong> is a company in Lyon, France that provides a cutting-edge online 
189BIM platform to manage your construction projects, including an all-in-one solution to visualize, check, edit and share 
190building information.
191<br /><br />
192One of the coolest things about this platform is that it’s continuously up-to-date with the latest
193version of IFC (IFC2x3, IFC4 and IFC4.1).</p>
194
195<h1 id="requirements">Requirements</h1>
196
197<ul>
198  <li>Implement a WebGL-based viewer in JavaScript, to view large 3D IFC models in Web browsers, without plugins</li>
199  <li>Load IFC models from glTF</li>
200  <li>Emphasise and reveal objects using ghosting, wireframing and highlighting</li>
201  <li>Ability to annotate models with 3D labels</li>
202  <li>Cross section views</li>
203  <li>Isolated object views</li>
204  <li>Measurement tools, to find areas and distances within models</li>
205  <li>A camera navigation gizmo similar to AutoDesk ViewCube</li>
206  <li>Orbit, first-person and walk-through navigation modes</li>
207  <li>Ability to capture and share views via BCF format</li>
208</ul>
209
210<h1 id="solution">Solution</h1>
211
212<h3 id="using-xeogl">Using xeogl</h3>
213
214<p>I implemented the BIMData viewer as a wrapper around <strong><a href="http://xeogl.org">xeogl</a></strong>, which is an open source library I created for WebGL-based visualization.
215 <br /><br />
216 xeogl is also used in other commercial projects and is starting to receive contributions from other developers. This means 
217 that improvements and optimizations that we make to xeogl for those projects will also benefit the BIMData platform.
218 <br /><br />
219Being geared to engineering visualization, xeogl supports many of this project’s requirements out-of-the-box. For the more 
220  application-specific requirements, I extended it with proprietary components, for things like custom camera 
221  controls and interaction widgets.</p>
222
223<h3 id="sub-contracting">Sub-contracting</h3>
224
225<p>For this job I sub-contracted <a href="http://www.derschmale.com/">David Lenaerts</a>, a freelance graphics programmer, to help out with 
226the math for 3D gizmo interactions. I’d recommend David to any developer who needs help with their WebGL projects.</p>
227
228<h3 id="application-architecture">Application architecture</h3>
229
230<p>Our viewer is a facade class that wraps xeogl in a set of application-specific functions, with a plugin architecture 
231 into which we can incrementally add tools and gizmos.
232 <br /><br />
233 <img src="http://xeolabs.com/images/bimdata/uml.png" alt="" />
234<br /><br />
235This plugin architecture enabled us to deploy the core functionality of the viewer as soon as it was ready, then deploy 
236 various tools and gizmos incrementally, as we developed them.</p>
237
238<h3 id="gltf-geometry-pipeline">glTF geometry pipeline</h3>
239
240<p>
240We’re using <a href="https://www.khronos.org/gltf/">glTF</a> as the file format for our IFC models.  Within the viewer, we’re 
241loading glTF into the 3D scene using xeogl’s <a href="http://xeogl.org/docs/classes/GLTFModel.html">GLTFModel</a> components.</p>
242
243<h4 id="geometry-compression-and-batching">Geometry compression and batching</h4>
244
245<p>glTF gives us options for geometry compression, such as attribute quantization, in which floating-point geometry arrays are 
246compressed into integers, then decompressed on-the-fly within the WebGL vertex shader. This gives us smaller glTF files, a smaller 
247viewer memory footprint and reduced usage of GPU bandwidth. 
248<br /><br />
249When the glTF geometry is not quantized, then xeogl automatically quantizes it while loading. At the same time, xeogl also 
250automatically combines geometries from multiple objects into the same vertex buffer objects (VBOs), in order to reduce the number of 
251VBO binds per frame. This enables us to render models up to around 200k+ objects.</p>
252
253<blockquote>
254  <p>For the next version of xeogl (v0.9), I’m currently adding geometry batching in combination with 
255instancing (using the ANGLE_instanced_arrays extension), which will enable BIMData to load millions of objects.</p>
256</blockquote>
257
258<h3 id="information-manager">Information Manager</h3>
259
260<p>The BIMData platform is a complete information management platform that’s able to provide specific
261information about any model elements that you select within the 3D view.
262<br /><br />
263Within the viewer, I integrated xeogl’s picking mechanism to get the ID of any object that you click on,
264which the information manager UI then uses to populate itself from the model’s IFC data.</p>
265
266<p><br /><br />
267<img src="http://xeolabs.com/images/bimdata/infoManager.png" alt="" /></p>
268
269<h3 id="user-annotations">User annotations</h3>
270
271<p>Annotations are notes that users pin to the surface of models. Our annotations are based on xeogl’s experimental 
272<a href="http://xeogl.org/docs/classes/Annotation.html">Annotation</a> components. 
273<br /><br />
274These are able to automatically hide themselves whenever something else occludes them in the 3D view. 
275<br /><br />
276<img src="http://xeolabs.com/images/bimdata/annotations.gif" alt="" /></p>
277
278<h3 id="cross-section-views">Cross-section views</h3>
279
280<p>Our users can create an unlimited number of cross-section planes, which they can arrange using mouse and touch input.
281<br /><br />
282Under the hood, our cross-section planes use xeogl’s <a href="http://xeogl.org/docs/classes/Clip.html">Clip</a> components, 
283which users can interactively arrange using our fancy repositioning gizmo. That was one of the bits 
284that <a href="http://www.derschmale.com/">David Lenaerts</a> helped out with.
285<br /><br />
286<img src="http://xeolabs.com/images/bimdata/clipping.gif" alt="" /></p>
287
288<h3 id="viewcube-camera-controller">ViewCube camera controller</h3>
289
290<p>Our <em>ViewCube</em> is a 3D camera orientation indicator and controller, which works the same as the 
291one by Autodesk Research. Ours is a 3D gizmo I implemented on xeogl, with clickable hotspots that fly the camera 
292to various vantage points. 
293<br /><br />
294<img src="http://xeolabs.com/images/bimdata/viewCube.gif" alt="" /></p>
295
296<h3 id="isolated-object-view">Isolated object view</h3>
297
298<p>WIP</p>
299
300<h3 id="emphasis-effects">Emphasis effects</h3>
301
302<p>xeogl has some built-in emphasis effects, such as ghosting and wireframe. We’re using those for highlighting and 
303revealing BIM objects. 
304<br /><br />
305<img src="http://xeolabs.com/images/bimdata/highlight.gif" alt="" />
306<br /><br />
307Edge emphasis and ghosting effects for X-ray view:
308<br /><br />
309<img src="http://xeolabs.com/images/bimdata/ghosting.gif" alt="" /></p>
310
311<h3 id="measurement-tools">Measurement tools</h3>
312
313<p>Our viewer has a bunch of tools to measure distances, angles and areas.</p>
314
315<h4 id="simple-distance">Simple distance</h4>
316
317<p>Using the distance measurement tool, users can select a pair of points on the surfaces of objects and get the direct 
318distance between them, as well as the distance on each of the X,Y and Z axis individually. Under the hood, this tool 
319uses xeogl’s 3D picking mechanism, while the distance tool itself is rendered using HTML elements layered over the WebGL canvas.
320<br /><br />
321<img src="http://xeolabs.com/images/bimdata/measureDistance.gif" alt="" /></p>
322
323<h3 id="camera-navigation">Camera navigation</h3>
324
325<p>Camera navigation uses a custom xeogl component that allows users to control the camera with mouse and touch input. With our 
326 navigation component, users can orbit a point-of-interest, fly to selected objects, navigate in first-person mode, and “walk” 
327 to a point that they click on.</p>
328
329<p>TODO: animated gif</p>
330
331<h3 id="bcf">BCF</h3>
332
333<p>The BIM Collaboration Format (BCF) is an open file format that supports workflow communication in BIM processes.
334<br /><br />
335Our BCF system captures the complete visual state of the viewer as a JSON BCF record, that contains all the 
336relevant viewer state, such as object visibilities and emphasis appearance, camera position, cross-section planes, 
337annotations, as well as PNG snapshot image of the canvas.
338<br /><br />
339Users can capture a BCF record of the viewer state, to indicate an issue within a model, then share that with other users, 
340 who can then load that view to see what the problem is.
341<br /><br />
342 <img src="http://xeolabs.com/images/bimdata/bcf.gif" alt="" /></p>
343
344
345      <hr />
346      <footer role="contentinfo">
347        <div class="article-author-bottom">
348          <img src="http://xeolabs.com/images/avatar.jpg" class="bio-photo" alt="xeolabs bio photo"></a>
349<h3><a href="http://xeolabs.com/about/">xeolabs</a></h3>
350<p><b>Lindsay Kay</b><br><br><i>3D Web Software Engineer</i></p>
351<a href="http://twitter.com/xeolabs" class="author-social" target="_blank"><i class="icon-twitter"></i> Twitter</a>
352<a href="http://linkedin.com/in/lindsaystanleykay" class="author-social" target="_blank"><i class="icon-linkedin"></i> LinkedIn</a>
353<a href="http://github.com/xeolabs" class="author-social" target="_blank"><i class="icon-github"></i> Github</a>
354<br>
355<hr>
356<p style="text-align: center;"><a href="http://xeolabs.com/pdfs/OpenGLInsights.pdf"><img style="text-align: center; width: 80%;" src="http://xeolabs.com/images/scenejs/OpenGLInsights2.jpg"></a><br>
357    <i>My chapter on <a href="http://scenejs.org">SceneJS</a> for OpenGL Insights is now <a href="http://xeolabs.com/pdfs/OpenGLInsights.pdf">free to download!</a></i></p>
358
359        </div>
360        <p class="byline"><strong>BIMData.IO Online 3D BIM Viewer</strong> was published on <time datetime="2018-06-28T00:00:00+00:00" itemprop="datePublished">June 28, 2018</time> and last modified on <time datetime="2018-19-09" itemprop="dateModified">2018-19-09</time> by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><a href="http://xeolabs.com/about" title="About xeolabs" itemprop="url">xeolabs</a></span></span>.</p>
361      </footer>
362
363        <!---->
364        <!--<br><br>-->
365        <!--<div id="disqus_thread"></div>-->
366        <!--
366<script type="text/javascript">-->
367            <!--/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */-->
368            <!--var disqus_shortname = 'xeographics'; // required: replace example with your forum shortname-->
369
370            <!--/* * * DON'T EDIT BELOW THIS LINE * * */-->
371            <!--(function() {-->
372                <!--var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;-->
373                <!--dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';-->
374                <!--(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);-->
375            <!--})();-->
376        <!--</script>
376-->
377        <!--<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>-->
378        <!--<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>-->
379        <!---->
380    </div><!-- /.article-wrap -->
381  </article>
382
383</div><!-- /#main -->
384
385
386<div class="footer-wrap">
387  <div class="related-articles">
388  <h4>You might also enjoy <small class="pull-right">(<a href="http://xeolabs.com/articles">View all articles</a>)</small></h4>
389    <ul>
390    
391      
392      
393      
394      <li><a href="http://xeolabs.com/portfolio/openproject" title="OpenProject BIM 10.4 Model Viewer">OpenProject BIM 10.4 Model Viewer</a></li>
395      
396    
397      
398      
399      
400      <li><a href="http://xeolabs.com/portfolio/xeokit" title="xeokit - 3D Web SDK for BIM and Engineering">xeokit - 3D Web SDK for BIM and Engineering</a></li>
401      
402    
403      
404      
405      
406      <li><a href="http://xeolabs.com/portfolio/biodigital-human" title="The BioDigital Human">The BioDigital Human</a></li>
407      
408    
409    </ul>
410    <hr />
411  </div><!-- /.related-articles -->
412  <footer>
413    <span>&copy; 2020 xeolabs. Powered by <a href="http://jekyllrb.com">Jekyll</a> using the <a href="http://mademistakes.com/">Minimal Mistakes</a> theme.</span>
414
415  </footer>
416</div><!-- /.footer-wrap -->
417
418<!--
418<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
418-->
419<!--
419<script src="http://xeolabs.com/assets/js/vendor/jquery-1.9.1.min.js"></script>
419-->
420<!--
420<script src="http://xeolabs.com/assets/js/vendor/jquery.gifplayer.js"></script>
420-->
421<!--<link rel="stylesheet" href="http://xeolabs.com/assets/css/gifplayer.css" />-->
422<!--
422<script src="http://xeolabs.com/assets/js/scripts.min.js"></script>
422-->
423
424
425<!--
425<script>-->
426    <!--$(document).ready( function(){-->
427        <!--$('.gifplayer').gifplayer();-->
428    <!--});-->
429<!--</script>
429-->
430
431
432
433</body>
434</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.