I've started an experiment with AI. It reignited the discussion about our position on AI within the xeokit team. Do we use and accept AI? For what? How?

Below are my personal thoughts on the topic.

In the context of xeokit-sdk, metadata provides information about models beyond their geometrical shapes.
It includes data like names, identifiers, hierarchical graphs, properties etc.

One of the most common uses of metadata with xeokit-sdk has been the TreeViewPlugin.
The plugin renders metadata in a form of DOM trees, where nodes correspond to geometrical shapes or their collections, organized by different hierarchies.
TreeViewPlugin provides a lot of features that help customize its form and function.
It's not uncommon however for users to find uses and requirements for a DOM tree that exceed customizability of the TreeViewPlugin.

This is the first part in a series of articles that demonstrates how metadata can be used directly in an application layer to present it in more user-specific ways.
The article demonstrates how to render a custom DOM tree in a browser, based on xeoRvt output.

xeoMeetup is our live event series where web-based 3D rendering meets real-world AECO engineering challenges.

Introduction​

To visualize the external 3D model inside the Xeokit, we have to convert it into Xeokit Scene Model.

There are various different conversion methods, some of them are fully open-source, some of them are proprietary. Some of them are super simple to use, while others are a bit more complex.

In this article I'd like to go through most of them, to make it easier to understand what are the possible options for now.

In the ever-evolving landscape of web technologies, WebAssembly (WASM) has emerged as a powerful tool for enhancing performance and capabilities in web applications. At xeokit, we are excited to announce the integration of cxConverter and a new WASM loader into our ecosystem, aimed at improving the handling of large BIM and CAD models.

Integrating 3D models into web applications can be a complex task, often requiring extensive knowledge of WebGL

In this blog post, we'll explore how to get started with @xeokit/xeokit-webcomponents and create a basic 3D model viewer.

This guide demonstrates how to use xeoServices in a Node.js project, using the xeoservices-example repository as a reference. The project provides a simple CLI built with yargs to interact with xeoServices APIs for 3D model conversion and storage.

Introduction​

dotbim is a minimalist file format for BIM. It was created to simplify the description of BIM models as much as possible. Thanks to open-source community many different connectors and apps started to support this file format. You will find the whole list of supporting apps here: https://github.com/paireks/dotbim?tab=readme-ov-file#apps-supporting-bim

xeo.vision is an online 3D BIM Viewer. Once you drag & drop your model into xeo.vision it will display it, but also it will instantly make it possible to share this model via link or by QR code. Once you shared the model with your friend, he will be able to not only see it, but also to download it into their own computer. xeo.vision already supports .bim files, but also .ifc, .glb, .xkt, .las/.laz, .obj, .stl.

This combination makes it possible to share your geometry + metadata with your colleagues as simple as possible.

Let's take a look on the examples below.

In this blog, you’ll be learning how to add hatching to sliced models using our powerful BIM xeokit SDK. Whether you’re creating architectural visualisations or complex engineering models, adding hatching to sliced sections can greatly enhance the clarity and visual appeal of your viewer.

We will walk you through the process of setting up your project, slicing the models, and applying hatching effects to those slices.

By the end of this guide, you’ll be able to:

• Set up a basic BIM viewer using xeokit SDK.
• Slice models dynamically to reveal internal structures.
• Apply solid hatching to the sliced surfaces for improved visual representation.

Let’s dive right in and start with setting up the basic HTML structure for our example.

Introduction​

Mobile devices offer exciting possibilities for immersive 3D experiences through their built-in sensors. In this tutorial, we'll explore how to control the xeokit camera using device orientation data, creating a virtual reality-like experience where users can look around a 3D model by simply moving their mobile device.

Important Requirements: This example only works on mobile devices and requires a secure HTTPS connection to access device orientation data. If you're testing locally, you can set up a secure context using http-server with SSL:

npm install -g http-server
http-server -S -C cert.pem -K key.pem

You'll need to generate SSL certificates for local testing to meet the browser's security requirements.