Mesh model

Chart3D includes a feature for rendering 3D models and objects. These objects can be colored dynamically based on data in real-time.

// Creation of mesh model series
const modelSeries = chart.addMeshModel()

Loading model geometry

Model geometry is supplied using setModelGeometry method. The format is triangulated 3D model geometry as separate lists of vertices, indices and optionally normals.

The recommended way to use this is to prepare model geometry in .obj file format and parse it to vertices, indices and normals using a parser library - for example, webgl-obj-loader

// npm i webgl-obj-loader
import { Mesh } from 'webgl-obj-loader'

fetch('model.obj')
    .then(r => r.text())
    .then(objText => {
        const modelParsed = new Mesh(objText)
        modelSeries.setModelGeometry({
            vertices: modelParsed.vertices,
            indices: modelParsed.indices,
            normals: modelParsed.vertexNormals,
        })
    })

To remove the extra processing from application load up, you can pre-parse the OBJ file and save as JSON which you can directly supply to setModelGeometry.

Model positioning

Mesh model positioning is controlled using a number of different methods:

// Example, scale model to 0.1x size, position the models bottom at { x: 0, y: 0, z: 0 }, centered along X and Z axes. 
modelSeries
    .setScale(0.1)
    .setModelLocation({ x: 0, y: 0, z: 0 })
    .setModelAlignment({ x: 0, y: -1, z: 0 })
    .setModelRotation({ x: 0, y: 0, z: 0 })

Model color

modelSeries.setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

Color by data

The primary use case of LightningChart mesh models is to dynamically color different parts of the model based on an external data set. For example, imagine an airplane model colored by readings from temperature sensors.

// 1) enable coloring based on vertex values
modelSeries.setFillStyle(new PalettedFill({
    lut: new LUT({
        interpolate: true,
        steps: [
            { value: 0, color: ColorRGBA(255, 0, 0) },
            { value: 10, color: ColorRGBA(0, 255, 0) },
        ],
    }),
}))

// 2) load number values associated with every vertex of the model
modelSeries.setVertexValues((vertexWorldLocations) => {
    // Example, return random value for every model vertex
    return vertexWorldLocations.map((locationWorld) => Math.random() * 10)
})

Usually, in real applications the model is placed in a 3D chart where a varying number of "sensors" that generate the data for coloring are situated. The application code then assigns every sensor an axis coordinate (X,Y,Z) and number value (e.g. temperature). Then setVertexValues is used to iterate over every model vertex - for each one, the application finds how close that vertex is to the sensors and interpolates a value for it.

You can find practical examples of this in our online examples:

• Airplane temperature example
• EEG brain activity example

Textured models

LightningChart JS mesh models do not currently support displaying textured models. If your use case would require this, please let us know.

3D color shading

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Depth testing

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line