{"id":23095014,"url":"https://github.com/akbartus/360-depth-in-webxr","last_synced_at":"2025-05-05T03:45:02.815Z","repository":{"id":264748277,"uuid":"894283529","full_name":"akbartus/360-Depth-in-WebXR","owner":"akbartus","description":"The repository demonstrates implementation of immersive 360 depth (image and video) in WebXR powered by A-Frame, Three.js and Depth Anywhere.","archived":false,"fork":false,"pushed_at":"2024-11-26T15:11:02.000Z","size":554,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-05T03:44:51.570Z","etag":null,"topics":["360-depth-estimation","aframe","aframe-vr","depth","threejs"],"latest_commit_sha":null,"homepage":"https://depth360-component.glitch.me/","language":"JavaScript","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/akbartus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-26T04:46:41.000Z","updated_at":"2025-02-21T16:28:28.000Z","dependencies_parsed_at":"2024-11-26T05:28:04.347Z","dependency_job_id":"3b2bcff0-89be-49a1-89d0-7865669fefe2","html_url":"https://github.com/akbartus/360-Depth-in-WebXR","commit_stats":null,"previous_names":["akbartus/360-depth-in-webxr"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2F360-Depth-in-WebXR","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2F360-Depth-in-WebXR/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2F360-Depth-in-WebXR/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2F360-Depth-in-WebXR/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akbartus","download_url":"https://codeload.github.com/akbartus/360-Depth-in-WebXR/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252436240,"owners_count":21747467,"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":["360-depth-estimation","aframe","aframe-vr","depth","threejs"],"created_at":"2024-12-16T22:19:13.619Z","updated_at":"2025-05-05T03:45:02.800Z","avatar_url":"https://github.com/akbartus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 360 Depth in WebXR\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/screenshot.jpg\" /\u003e\n\u003c/p\u003e\n\n### Description/Rationale\nThe 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: \n1. A-Frame component.\n2. Three.js example implementation.\n\n### Instructions\nA-Frame component can be found in \u003cb\u003e\"a-frame-component\"\u003c/b\u003e folder. Usage example of the component is given below:\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eA-Frame Depth 360 Component\u003c/title\u003e\n    \u003cscript src=\"https://aframe.io/releases/1.6.0/aframe.min.js\"\u003e\u003c/script\u003e\n \u003cscript src=\"https://cdn.jsdelivr.net/gh/akbartus/360-Depth-in-WebXR/a-frame-component/depth-360-component.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ca-scene\u003e     \n        \u003ca-entity rotation=\"90 0 0\" depth-360=\"colorImageURL: https://cdn.glitch.global/35f43dae-1ed9-4eff-b068-3100ca885bb4/1.jpg; depthImageURL: https://cdn.glitch.global/35f43dae-1ed9-4eff-b068-3100ca885bb4/1depth.jpg; spread: 10; pointSize: 10; skip: 1; colored: true\"\u003e\n            \u003ca-entity camera=\"fov: 75\" wasd-controls look-controls position=\"0 0 1\"\u003e\u003c/a-entity\u003e\n            \u003ca-box color=\"orange\" position=\"0 0 -5\"\u003e\u003c/a-box\u003e\n        \u003c/a-entity\u003e\n        \u003ca-sky color=\"#000\"\u003e\u003c/a-sky\u003e\n    \u003c/a-scene\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\nIn order to use the component, make sure to include \u003cb\u003edepth-360\u003c/b\u003e attribute.\u003cbr\u003e\u003cbr\u003e \n\u003cb\u003eThe component has the following schema:\u003c/b\u003e\n* colorImageURL (string): URL of the 360 RGB color image.\n* depthImageURL (string): URL of the corresponding 360 depth map image.\n* pointSize (integer): Size of the rendered points. (Default: 6)\n* spread (integer): Depth multiplier for rendering points. (Default: 100, Range: 10–300)\n* skip (integer): Number of points to skip when processing the images for optimization. (Default: 0, Range: 0–10)\n* colored (boolean): Determines whether to show point cloud as colored or white. (Default: true)\n\nThree.js example implementation can be found in \u003cb\u003e\"threejs\"\u003c/b\u003e folder.\n\n### Getting 360 Depth\nThe example 360 image and 360 depth both were taken from \u003ca href=\"https://albert100121.github.io/Depth-Anywhere/\"\u003e\"Depth Anywhere: Enhancing 360 Monocular Depth Estimation via Perspective Distillation and Unlabeled Data Augmentation - Neurips 2024\" project\u003c/a\u003e.\u003cbr\u003e\nIn 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) \n\u003cbr\u003e\u003cb\u003ePlease note:\u003c/b\u003e Make sure original image and generated depth both have the same size.\n\n### 360 Depth Video\nTo be added soon.\n\n### Tech Stack\nThe project is powered by A-Frame, Three.js and Depth Anywhere project.\n\n### Demo\nTo see the component in action, visit the following page: https://depth360-component.glitch.me/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakbartus%2F360-depth-in-webxr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakbartus%2F360-depth-in-webxr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakbartus%2F360-depth-in-webxr/lists"}