Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/akbartus/360-depth-in-webxr
The repository demonstrates implementation of immersive 360 depth (image and video) in WebXR powered by A-Frame, Three.js and Depth Anywhere.
https://github.com/akbartus/360-depth-in-webxr
360-depth-estimation aframe aframe-vr depth threejs
Last synced: 5 days ago
JSON representation
The repository demonstrates implementation of immersive 360 depth (image and video) in WebXR powered by A-Frame, Three.js and Depth Anywhere.
- Host: GitHub
- URL: https://github.com/akbartus/360-depth-in-webxr
- Owner: akbartus
- License: mit
- Created: 2024-11-26T04:46:41.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-11-26T15:11:02.000Z (3 months ago)
- Last Synced: 2024-12-16T22:19:12.731Z (about 2 months ago)
- Topics: 360-depth-estimation, aframe, aframe-vr, depth, threejs
- Language: JavaScript
- Homepage: https://depth360-component.glitch.me/
- Size: 541 KB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 360 Depth in WebXR
### Description/Rationale
The repository demonstrates the implementation of immersive 360 depth (image and video) in WebXR powered by **A-Frame**, **Three.js** and **Depth Anywhere**. It has the following:
1. A-Frame component.
2. Three.js example implementation.
### Instructions
A-Frame component can be found in "a-frame-component" folder. Usage example of the component is given below:
```html
A-Frame Depth 360 Component
```
In order to use the component, make sure to include depth-360 attribute.
The component has the following schema:
* colorImageURL (string): URL of the 360 RGB color image.
* depthImageURL (string): URL of the corresponding 360 depth map image.
* pointSize (integer): Size of the rendered points. (Default: 6)
* spread (integer): Depth multiplier for rendering points. (Default: 100, Range: 10–300)
* skip (integer): Number of points to skip when processing the images for optimization. (Default: 0, Range: 0–10)
* colored (boolean): Determines whether to show point cloud as colored or white. (Default: true)
Three.js example implementation can be found in "threejs" folder.
### Getting 360 Depth
The example 360 image and 360 depth both were taken from "Depth Anywhere: Enhancing 360 Monocular Depth Estimation via Perspective Distillation and Unlabeled Data Augmentation - Neurips 2024" project.
In order to generate own 360 depth for 360 image, please visit: [ https://albert100121.github.io/Depth-Anywhere/](https://huggingface.co/spaces/Albert-NHWang/Depth-Anywhere-App)
Please note: Make sure original image and generated depth both have the same size.
### 360 Depth Video
To be added soon.
### Tech Stack
The project is powered by A-Frame, Three.js and Depth Anywhere project.
### Demo
To see the component in action, visit the following page: https://depth360-component.glitch.me/