{"id":25244137,"url":"https://github.com/equinor/videx-3d","last_synced_at":"2026-04-29T07:05:58.788Z","repository":{"id":276999810,"uuid":"928242888","full_name":"equinor/videx-3d","owner":"equinor","description":"React 3D component library designed for sub surface visualizations in the browser","archived":false,"fork":false,"pushed_at":"2025-02-11T15:13:15.000Z","size":11508,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-11T16:24:03.776Z","etag":null,"topics":["3d","react","subsurface","threejs","visualization"],"latest_commit_sha":null,"homepage":"https://equinor.github.io/videx-3d/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/equinor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-06T10:02:43.000Z","updated_at":"2025-02-11T15:33:29.000Z","dependencies_parsed_at":"2025-02-11T16:34:18.663Z","dependency_job_id":null,"html_url":"https://github.com/equinor/videx-3d","commit_stats":null,"previous_names":["equinor/videx-3d"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/equinor%2Fvidex-3d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/equinor%2Fvidex-3d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/equinor%2Fvidex-3d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/equinor%2Fvidex-3d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/equinor","download_url":"https://codeload.github.com/equinor/videx-3d/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238394404,"owners_count":19464588,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","react","subsurface","threejs","visualization"],"created_at":"2025-02-12T01:17:48.652Z","updated_at":"2026-04-29T07:05:58.768Z","avatar_url":"https://github.com/equinor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![SCM Compliance](https://scm-compliance-api.radix.equinor.com/repos/equinor/videx-3d/badge)](https://scm-compliance-api.radix.equinor.com/repos/equinor/videx-3d/badge)\n![](https://img.shields.io/npm/v/@equinor/videx-3d)\n# Introduction\nThe 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.\n\n\u003cimg src=\"documents/videx-3d.png\" alt=\"\" width=\"800px\"\u003e\n\nThe library includes a variety of components, both for visualizing and managing data, including:\n- Wellbore trajectories\n- Wellbore data (such as casings, completion tools, formations, shoes etc.)\n- Horizons/surfaces\n- Generic support for pointer events (click, move, enter, exit)\n- A flexible point-feature label system\n- HTML well map schematic\n\n## Overview\nThis library contains multiple exports:\n- `@equinor/videx-3d` main export containing the components\n- `@equinor/videx-3d/sdk` shared code and declarations\n- `@equinor/videx-3d/generators` generator functions required by the included components\n\n### Dependencies\nThis library has dependencies to the following libs:\n- React and react-dom\n- THREE js (javascript 3d rendering library using WebGL)\n- React Three Fiber (bridge React and THREE js)\n- Comlink (simplifies working with web workers)\n\n## Install\n```\nnpm i @equinor/videx-3d\n```\n\nYou also need to install the required peer-dependencies. \n\nFirst, if not already installed, you'll need React version 18 or later:\n```\n// react\nnpm i react react-dom\n```\n\nReact Three Fiber (R3F):\n```\n// react three fiber \nnpm i @react-three/fiber\n```\nNote that if using React 18, you need `@react-three/fiber` version 8.\n\nDepending on your needs you might consider installing the following additional packages:\n```\n// three js\nnpm i three\n\n// drei \nnpm i @react-three/drei\n\n// comlink - if using web workers\nnpm i comlink\n```\nNote that if using React 18, you need `@react-three/drei` version 9.\n\n## Configure\nRendering complex scenes in the browser (single threaded) can quickly become bottlenecked, degrading user experience. For this reason, most of the components have been decoupled from data management and processing, by depending on a _store interface_ and _generator_ functions. This allows the heavy work to be offloaded to web workers (but not required).\n\nThe 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.\n\nFor 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:\n\n```ts\n// set up worker endpoint: remote-store.ts\nimport { expose } from 'comlink'\nimport { MyStore } from './DataStore'\n\nconst store = new DataStore()\n\nexpose(store)\n```\n\nThen we do the same exercise for the `GeneratorRegistry`:\n\n```ts\n// set up registry endpoint: remote-registry.ts\nconst registry = new GeneratorRegistry()\n\n// add all the ganerators you need\nregistry.add('generatorName', generatorFunction)\n\nexpose(registry)\n```\n\nWe 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:\n\n```tsx\nimport { DataProvider, Store } from 'videx3d/sdk'\nimport { Remote, wrap } from 'comlink'\n\nconst store: Remote\u003cStore\u003e = wrap(new Worker(new URL('workers/remote-store.ts', import.meta.url), { type: 'module'}))\n\nconst registry: Remote\u003cStore\u003e = wrap(new Worker(new URL('workers/remote-registry.ts', import.meta.url), { type: 'module'}))\n\nconst ExampleApp = () =\u003e (\n  \u003c\u003e\n    { ... }\n    \u003cDataProvider store={store}\u003e\n      \u003cRegistryProvider registry={registry}\u003e\n        { ... }   \n      \u003c/RegistryProvider\u003e\n    \u003c/DataProvider\u003e\n    { ... }\n  \u003c\u003e\n)\n```\nIf 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.\n\nFor more information see the documentation section below.\n\n## Documentation\n- [Getting Started](https://github.com/equinor/videx-3d/blob/main/documents/getting-started.md)\n- [Storybooks](https://equinor.github.io/videx-3d/)\n- [API docs](https://equinor.github.io/videx-3d/docs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fequinor%2Fvidex-3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fequinor%2Fvidex-3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fequinor%2Fvidex-3d/lists"}