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.

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.

• Introduction
• xeokit-xkt-utils
• xeokit-gltf-to-xkt
• xeokit-sdk
• PerformanceModel
• XKTLoaderPlugin

Introduction

On a triangle mesh geometry, backfaces are those faces which are oriented away from the viewpoint. Whenever possible, the xeokit viewer tries to avoid drawing backfaces, in order to reduce work done by the graphics hardware and speed up interactivity.

One of a commonly used features of a BIM viewer is displaying a 2D overlay (e.g. a floor plan) within the 3D model. This article demonstrates how such an overlay can be implemented with xeokit, by using general purpose abstractions provided by the SDK.

• 1. Scene setup
• 2. Overlay image loading
• 3. Overlay mesh creation
• 4. Floor plan adjustment
• 5. Complete example
• 6. Interactive Overlay fitting (advanced)

See also: Textures in XKT Model Format

• Introduction
• Building VBOSceneModels Containing Textures
• Loading KTX2 files into a VBOSceneModel
• Loading KTX2 ArrayBuffers into a VBOSceneModel

Introduction

In this tutorial, we'll use xeokit's convert2xkt CLI tool to convert a binary glTF model with textures into xeokit's native XKT geometry format, which we'll then view in the browser using a xeokit Viewer.

The XKT format compresses models into a compact payload from which xeokit can load large numbers of objects over the Web in seconds, at full geometric precision.

XKT stores textures in such a way that, as they are loaded, they are transcoded within the browser straight to the optimal compressed format that’s supported by the user’s GPU. Transcoding consumes minimal browser resources, and the GPU footprint of the compressed textures is also minimal. This gives us a minimal memory spike while loading textures, and the ability to pack more more them onto our GPU.

To achieve this, XKT stores each texture in the KTX 2.0 Container Format (.ktx2) . Within each KTX2 container, the texture’s pixel data is is encoded in the UASTC Transmission Format. The UASTC format is designed to be efficiently transcoded into the optimal compressed format for the target GPU.

Internally, convert2xkt uses the Basis Universal Transcoder to convert the glTF textures into XKT textures. Likewise, XKTLoaderPlugin uses the Basis Transcoder to transcode the XKT textures to the GPU’s optimal format.

For our glTF model, we'll use an architectural model from Sketchfab. When that's converted and loaded into our viewer, it will look like the example below.

This model contains 571 visible objects, with 139642 triangles and 14 textures, and a xeokit Viewer can usually load it over a good Internet connection in ~2 seconds.

This guide provides a step-by-step process for creating and modifying a minimap for your 3D model using the Xeokit SDK. The minimap enhances the user's navigation experience by providing an overhead view of different floors (storeys) and enabling first-person navigation within the 3D model.

In xeokit v2.4, we have added the ability to dynamically reposition a model within xeokit's double-precision coordinate system. This means that once a model is loaded, it can be moved to any location within the full extents of xeokit’s double-precision coordinate system. This feature allows us to load a BIM model from an XKT file and a point cloud from an LAZ file, and then reposition either model to align them with each other.

A model can be dynamically translated and rotated, but cannot be scaled. Disallowing scaling of models is necessary for this mechanism to work efficiently within xeokit’s double-precision coordinate system.

In this guide, we'll introduce how to localize xeokit, so that we can dynamically it between different languages. Specifically, we'll show how to localize xeokit's core Viewer component and plugins, and how to localize xeokit's bundled BIM viewer application.