Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/equinor/videx-3d
React 3D component library designed for sub surface visualizations in the browser
https://github.com/equinor/videx-3d
3d react subsurface threejs visualization
Last synced: 1 day ago
JSON representation
React 3D component library designed for sub surface visualizations in the browser
- Host: GitHub
- URL: https://github.com/equinor/videx-3d
- Owner: equinor
- License: mit
- Created: 2025-02-06T10:02:43.000Z (7 days ago)
- Default Branch: main
- Last Pushed: 2025-02-11T15:13:15.000Z (2 days ago)
- Last Synced: 2025-02-11T16:24:03.776Z (2 days ago)
- Topics: 3d, react, subsurface, threejs, visualization
- Language: TypeScript
- Homepage: https://equinor.github.io/videx-3d/
- Size: 11 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Security: SECURITY.md
Awesome Lists containing this project
README
[](https://scm-compliance-api.radix.equinor.com/repos/equinor/videx-wellog/badge)
# Introduction
The purpose of this library is to help you add 3D visualizations of sub surface data to your web applications. It offers a paradigm for connecting data to React components, utilizing Three js and React Three Fiber.
The library includes a variety of components, both for visualizing and managing data, including:
- Wellbore trajectories
- Wellbore data (such as casings, completion tools, picks, shoes etc.)
- Horizons/surfaces
- Generic support for pointer events (click, move, enter, exit)
- A flexible point-feature label system
- HTML well map schematic
## Overview
This library contains multiple exports:
- `videx-3d` main export containing the components
- `videx-3d/sdk` shared code and declarations
- `videx-3d/generators` generator functions required by the included components
### Dependencies
This library has dependencies to the following libs:
- React and react-dom
- THREE js (javascript 3d rendering library using WebGL)
- React Three Fiber (bridge React and THREE js)
- Comlink (simplifies working with web workers)
## Install
```
npm i videx-3d
```
You also need to install the peer-dependicies:
```
// react
npm i react react-dom
// three js
npm i three
// react three fiber
npm i @react-three/fiber
// comlink
npm i comlink
```
## Configure
Rendering complex scenes in the browser (single threaded) can quickly become bottlenecked, degrading user experience. For this reason, components are generally dependant on external data management and processing, which can be offloaded to web workers (but not required).
The recommended setup is to run the data store implementation and generator registry in seperate web workers, and then pass a proxy for these instances to the respective providers. You need to use [Comlink](https://github.com/GoogleChromeLabs/comlink) for this to work.
For example, assuming you have created a class `DataStore` (implementing the `Store` interface) you can _expose_ an instance of this class so that it can be run in isolation by a web worker:
```ts
// set up worker endpoint: remote-store.ts
import { expose } from 'comlink'
import { MyStore } from './DataStore'
const store = new DataStore()
expose(store)
```
Then we do the same exercise for the `GeneratorRegistry`:
```ts
// set up registry endpoint: remote-registry.ts
const registry = new GeneratorRegistry()
// add all the ganerators you need
registry.add('generatorName', generatorFunction)
expose(registry)
```
We then need to create the workers and point them to the scripts we exposed using Comlink. Using the `wrap` function will do this for us and return a proxy class instance that we can pass to the respective providers:
```tsx
import { DataProvider, Store } from 'videx3d/sdk'
import { Remote, wrap } from 'comlink'
const store: Remote = wrap(new Worker(new URL('workers/remote-store.ts', import.meta.url), { type: 'module'}))
const registry: Remote = wrap(new Worker(new URL('workers/remote-registry.ts', import.meta.url), { type: 'module'}))
const ExampleApp = () => (
<>
{ ... }
{ ... }
{ ... }
<>
)
```
If instead you want to run the data store and/or registry on the main thread, simply create and pass an instance directly to the provider.
For more information see the API docs.
## Documentation
- [Storybooks](https://equinor.github.io/videx-3d/)
- [API docs](https://equinor.github.io/videx-3d/docs)