@deck.gl/mesh-layers

What is @deck.gl/mesh-layers?

@deck.gl/mesh-layers is a part of the Deck.gl framework, which is a WebGL-powered framework for visual exploratory data analysis of large datasets. The @deck.gl/mesh-layers package specifically provides layers for rendering 3D meshes, which can be used for visualizing complex 3D geometries, models, and scenes.

What are @deck.gl/mesh-layers's main functionalities?

Simple Mesh Layer

This code demonstrates how to create a SimpleMeshLayer using the @deck.gl/mesh-layers package. It loads a 3D mesh from an OBJ file and renders it with a specified color.

const {Deck} = require('@deck.gl/core');
const {SimpleMeshLayer} = require('@deck.gl/mesh-layers');
const {OBJLoader} = require('@loaders.gl/obj');

const mesh = new OBJLoader().parse(objFileContent);

const layer = new SimpleMeshLayer({
  id: 'simple-mesh-layer',
  data: [{position: [0, 0, 0]}],
  mesh,
  getPosition: d => d.position,
  getColor: [255, 0, 0]
});

const deck = new Deck({
  initialViewState: {
    longitude: -122.45,
    latitude: 37.8,
    zoom: 14
  },
  controller: true,
  layers: [layer]
});

Scenegraph Layer

This code demonstrates how to create a ScenegraphLayer using the @deck.gl/mesh-layers package. It loads a 3D scenegraph from a GLTF file and renders it with specified position, orientation, and scale.

const {Deck} = require('@deck.gl/core');
const {ScenegraphLayer} = require('@deck.gl/mesh-layers');

const layer = new ScenegraphLayer({
  id: 'scenegraph-layer',
  data: [{position: [0, 0, 0]}],
  scenegraph: 'path/to/scenegraph.gltf',
  getPosition: d => d.position,
  getOrientation: [0, 0, 90],
  getScale: [1, 1, 1]
});

const deck = new Deck({
  initialViewState: {
    longitude: -122.45,
    latitude: 37.8,
    zoom: 14
  },
  controller: true,
  layers: [layer]
});

Other packages similar to @deck.gl/mesh-layers

three

Three.js is a popular JavaScript library for creating 3D graphics in the browser. It provides a comprehensive set of features for rendering 3D models, scenes, and animations. Compared to @deck.gl/mesh-layers, Three.js offers more low-level control and flexibility but requires more boilerplate code to set up and manage scenes.

babylonjs

Babylon.js is another powerful JavaScript framework for building 3D games and visualizations. It offers a rich set of features for rendering 3D content, including support for WebXR, physics, and advanced materials. Babylon.js is more feature-rich and game-oriented compared to @deck.gl/mesh-layers, which is more focused on data visualization.

aframe

A-Frame is a web framework for building virtual reality (VR) experiences. It is built on top of Three.js and provides an easy-to-use, declarative HTML-like syntax for creating 3D and VR content. A-Frame is more focused on VR and AR experiences, whereas @deck.gl/mesh-layers is geared towards data visualization and rendering 3D meshes.

README

The README file is missing

Changelog

deck.gl [v7.1.0-alpha.2] - May 30 2019

• fix normal projection (#3134)
• GPUGridAggregator: Add getData method (#3110)
• GPU GridLayer PART-4: Add support for picking (#3115)
• H3HexagonLayer: fix render bug cross the 180th meridian (#3133)
• support multiple ranges in attribute partial update (#3119)
• Fix scenegraph-layer attribute issue with static scenegraph (#3135)
• Support partial update in layer attribute updaters (#3122)
• Handle partial update in Tesselator (#3121)
• Add PBR & IBL lighting option to scenegraph-layer (#3116)
• Fix ColumnGeometry normals calculation (#3145)
• improve sun/shadow example to use effect rendering pipeline (#3142)
• Add billboard mode to PathLayer (#3140)
• Add h3 layer embedded demos (#3150)
• Improve PathLayer precision (#3141)
• GPU GridLayer PART 5: Add new color/elevation props to Grid and Hexagon layers (#3137)
• GPU GridLyer Part 6: GPUGridLayer fixes and docs. (#3143)
• Fix abnormal normals in scenegraph-layer-vertex shader (#3154)
• GPU GridLayer Part 7: Rename NewGridLayer to GridLayer. (#3149)
• GPU Aggregator : enable partial test (#3157)
• Improve react module test coverage (#3155)
• Bump luma.gl to v7.1.0-alpha.5