{"id":8128759,"url":"https://github.com/c-frame/aframe-stereo-component","last_synced_at":"2025-07-25T05:31:02.552Z","repository":{"id":43464430,"uuid":"52749135","full_name":"c-frame/aframe-stereo-component","owner":"c-frame","description":"aframe.io component to enable separate eye rendering of objects, plus stereo video rendering (full 360 or half dome)","archived":false,"fork":false,"pushed_at":"2024-04-03T12:14:17.000Z","size":72697,"stargazers_count":135,"open_issues_count":19,"forks_count":52,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-10-22T16:55:21.071Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://c-frame.github.io/aframe-stereo-component/","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/c-frame.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}},"created_at":"2016-02-28T22:55:13.000Z","updated_at":"2024-08-07T19:38:02.000Z","dependencies_parsed_at":"2024-03-04T00:34:25.312Z","dependency_job_id":"0c86f448-9d91-40d1-9206-2b828e401e41","html_url":"https://github.com/c-frame/aframe-stereo-component","commit_stats":{"total_commits":56,"total_committers":10,"mean_commits":5.6,"dds":0.6071428571428572,"last_synced_commit":"cb94d3a082e65f5d13c05f52a55a0578ae47f459"},"previous_names":["c-frame/aframe-stereo-component","oscarmarinmiro/aframe-stereo-component"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-frame%2Faframe-stereo-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-frame%2Faframe-stereo-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-frame%2Faframe-stereo-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-frame%2Faframe-stereo-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/c-frame","download_url":"https://codeload.github.com/c-frame/aframe-stereo-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227205636,"owners_count":17747588,"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":[],"created_at":"2024-04-18T02:02:45.580Z","updated_at":"2025-07-25T05:31:02.532Z","avatar_url":"https://github.com/c-frame.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## aframe-stereo-component\n\nA stereo component for [A-Frame](https://aframe.io) VR.\n\nThis component builds on the ['layer' concept of THREE.js] (https://github.com/mrdoob/three.js/issues/6437) and is really two components in one:\n- **'stereocam' component**, with tells an aframe camera which 'eye' to render in case of monoscopic display (without 'Entering VR'). The camera will render all entities without the stereo component, but if it encounters an entity with the 'stereo' component active, it will render only those in the same eye as defined here.\n- **'stereo' component**, which tells aframe to include an entity in either the 'right' eye or 'left' eye (you can also specify 'both', but this has the same effect as not using the 'stereo' component. *The component also enables stereoscopic video rendering projected on spheres*, so if a sphere (see example below) has the 'stereo' component enabled, if will only project half of the video texture (which one depends on the 'eye' property), so the result is stereoscopic video rendering, if you include two spheres. The component expects videos in side-by-side equirectangular projection (see the video example below).\n\nIf a video is used in a sphere with the 'stereo' component active, **the component will also enable playback in mobile devices, by attaching a 'click' event on the rendering canvas**. Thus, in mobile devices you must click on the screen (via cardboard v2.0 button or with your finger) for the video to start playing. This can be disabled by setting the `playOnClick` variable to false.\n\n**NOTE: for some reason (?) if the video element is put inside scene 'assets' tag, a cross-origin issue is raised **\n\nYou can see demos for both examples below [here] (http://oscarmarinmiro.github.io/aframe-stereo-component)\n\n### 'stereocam' component properties (only for camera)\n\n| Property | Description | Default Value |\n| -------- | ----------- | ------------- |\n| eye      |  which eye is enabled in monoscopic display ('left' or 'right')           | 'left               |\n\n### 'stereo' component properties (for other entities)\n| Property | Description | Default Value |\n| -------- | ----------- | ------------- |\n| eye      |  in which eye the entity is render VR mode ('left' or 'right')           | 'left               |\n| mode     | this property is for spheres holding a video texture. mode can be 'full' or 'half', depending if the original video is full 360 or only spans 180 degrees horizontally (half-dome)| 'full' |\n| split    | this property indicates whether to split the video texture horizontally (left and right hemispheres), or vertically, (top and bottom hemispheres) | 'horizontal'\n| playOnClick | this property indicates whether the video will automatically be played on clicking on the canvas | true\n\n### Usage\n\n![\"Stereoscopic video\"](/video_stereo.png?raw=true \"Stereoscopic video\")\n\n#### Browser Installation. 360 stereoscopic video example\n\nInstall and use by directly including the [browser files](dist):\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eMy A-Frame Scene\u003c/title\u003e\n  \u003cscript src=\"https://aframe.io/releases/1.7.0/aframe.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"aframe-stereo-component.js.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ca-scene\u003e\n\n\n\u003c!--\n      stereoscopic panoramic render by\n      http://pedrofe.com/rendering-for-oculus-rift-with-arnold/\n      http://www.meryproject.com/\n --\u003e\n      \u003c!-- side by side equirectangular projected video --\u003e\n      \u003cvideo id=\"Mary\" src=\"examples/basic_development/textures/MaryOculus.webm\" loop\u003e\u003c/video\u003e\n\n\n      \u003c!-- we tell here the camera to render (outside VR mode, in monoscopic mode) everything without the 'stereo' component active\n      and it it's active, only render those entities in the 'left' eye --\u003e\n\n      \u003ca-camera position=\"0 0 10\" stereocam=\"eye:left;\"\u003e\u003c/a-camera\u003e\n\n      \u003c!-- native sphere, will render on 'left' eye, and will take only the first half of the video for projection --\u003e\n\n      \u003ca-entity geometry=\"primitive: sphere;\n                      radius: 100;\n                      segmentsWidth: 64;\n                      segmentsHeight: 64;\"\n              material=\"shader: flat; src: #Mary; side:back;\"\n              scale=\"-1 1 1\" stereo=\"eye:left\"\u003e\n      \u003c/a-entity\u003e\n\n      \u003c!-- native sphere, will render on 'right' eye, and will take only the second half of the video for projection --\u003e\n\n      \u003ca-entity geometry=\"primitive: sphere;\n                      radius: 100;\n                      segmentsWidth: 64;\n                      segmentsHeight: 64;\"\n              material=\"shader: flat; src: #Mary; side:back;\"\n              scale=\"-1 1 1\" stereo=\"eye:right\"\u003e\n      \u003c/a-entity\u003e\n\n\n    \u003c/a-scene\u003e\n\n \u003c/body\u003e\n \u003c/html\u003e\n\n\n```\n![\"Stereoscopic images\"](/foto_stereo.png?raw=true \"Stereoscopic video\")\n#### Browser Installation. Stereoscopic panoramas (images)\n\nif you have an over/under stereo panorama file, you can follow [this instructions](http://bl.ocks.org/bryik/4bf77096d3af66b11739caaf01393837) to split it\n\nInstall and use by directly including the [browser files](dist):\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eMy A-Frame Scene\u003c/title\u003e\n    \u003cscript src=\"https://aframe.io/releases/1.7.0/aframe.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"aframe-stereo-component.js.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n\n    \u003ca-scene antialias=\"true\"\u003e\n      \u003c!-- Paths to left and right images --\u003e\n      \u003ca-assets\u003e\n        \u003cimg id=\"left\" src=\"http://i.imgur.com/YAaxpv6.jpg\"\u003e\n        \u003cimg id=\"right\" src=\"http://i.imgur.com/JUxTnzK.jpg\"\u003e\n      \u003c/a-assets\u003e\n\n      \u003c!-- Camera --\u003e\n      \u003ca-entity camera look-controls position=\"0 0 0\" stereocam=\"eye:left;\"\u003e\u003c/a-entity\u003e\n\n      \u003c!-- Sky sphere --\u003e\n      \u003ca-sky id=\"sky1\" src=\"#left\" stereo=\"eye:left\"\u003e\u003c/a-sky\u003e\n      \u003ca-sky id=\"sky2\" src=\"#right\" stereo=\"eye:right\"\u003e\u003c/a-sky\u003e\n\n      \u003c-- or alternatively --\u003e\n\n      \u003c!--\u003ca-sky id=\"sky1\" src=\"http://i.imgur.com/YAaxpv6.jpg\" stereo=\"eye:left\"\u003e\u003c/a-sky\u003e--\u003e\n      \u003c!--\u003ca-sky id=\"sky2\" src=\"http://i.imgur.com/JUxTnzK.jpg\" stereo=\"eye:right\"\u003e\u003c/a-sky\u003e--\u003e\n\n\n    \u003c/a-scene\u003e\n\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n![\"Two cubes in a scene, each one for each eye\"](/cubes_stereo.png?raw=true \"Two cubes in a scene, each one for each eye\")\n\n#### Browser Installation. Two cubes, each one for each eye\n\nInstall and use by directly including the [browser files](dist):\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eMy A-Frame Scene\u003c/title\u003e\n  \u003cscript src=\"https://aframe.io/releases/1.7.0/aframe.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"aframe-stereo-component.js.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ca-scene\u003e\n      \u003ca-sky color=\"#FFF\"\u003e\u003c/a-sky\u003e\n      \u003ca-light color=\"#333\" position=\"0 5 0\" type=\"ambient\" intensity=\"0.2\"\u003e\u003c/a-light\u003e\n      \u003ca-light type=\"point\" color=\"#EEE\" intensity=\"1.0\" position=\"3 3 10\"\u003e\u003c/a-light\u003e\n\n      \u003c!-- 'left' eye entities will pass trough the camera in non-VR mode --\u003e\n\n      \u003ca-camera position=\"0 0 10\" stereocam=\"eye:left;\"\u003e\n        \u003ca-cursor color=\"black\"\u003e\u003c/a-cursor\u003e\n      \u003c/a-camera\u003e\n\n      \u003c!-- in VR mode, the first box is displayed only in the left eye, the second one in the right eye --\u003e\n\n      \u003ca-entity geometry=\"primitive: box\" material=\"color: #C03546\" stereo=\"eye:left\"\u003e\u003c/a-entity\u003e\n      \u003ca-entity geometry=\"primitive: box\" material=\"color: #3546C0\" position=\"0 5 0\" stereo=\"eye: right\"\u003e\u003c/a-entity\u003e\n\n  \u003c/a-scene\u003e\n\n \u003c/body\u003e\n \u003c/html\u003e\n\n```\n\n#### Stereoscopic videos that are split vertically - Top and Bottom\n\nInstall and use by directly including the [browser files](dist):\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eMy A-Frame Scene\u003c/title\u003e\n  \u003cscript src=\"https://aframe.io/releases/1.7.0/aframe.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"aframe-stereo-component.js.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ca-scene\u003e\n  \u003c!-- top and bottom equirectangular projected video --\u003e\n  \u003cvideo id=\"video\" src=\"path/to/top-bottom/mp4\" loop\u003e\u003c/video\u003e\n\n\n    \u003c!-- here we tell the camera to render (outside VR mode, in monoscopic mode) everything without the 'stereo' component active\n    and if it's active, only render those entities in the 'left' eye --\u003e\n    \u003ca-camera position=\"0 0 10\" stereocam=\"eye:left;\"\u003e\u003c/a-camera\u003e\n\n    \u003c!-- native sphere, will render on 'left' eye, and will take only the first half (top) of the video for projection --\u003e\n    \u003ca-entity geometry=\"primitive: sphere; radius: 100; segmentsWidth: 64; segmentsHeight: 64;\"\n        material=\"shader: flat; src: #video; side:back;\"\n        scale=\"-1 1 1\" stereo=\"eye:left; split: vertical\"\u003e\n    \u003c/a-entity\u003e\n\n    \u003c!-- native sphere, will render on 'right' eye, and will take only the second half (bottom) of the video for projection --\u003e\n    \u003ca-entity geometry=\"primitive: sphere; radius: 100; segmentsWidth: 64; segmentsHeight: 64;\"\n        material=\"shader: flat; src: #video; side:back;\"\n        scale=\"-1 1 1\" stereo=\"eye:right; split: vertical\"\u003e\n    \u003c/a-entity\u003e\n  \u003c/a-scene\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n```\n\n\n#### NPM Installation\n\nInstall via NPM:\n\n```bash\nnpm install aframe-stereo-component\n```\n\nThen register and use.\n\n```js\nvar AFRAME = require('aframe');\nvar stereoComponent = require('aframe-stereo-component').stereo_component;\nvar stereocamComponent = require('aframe-stereo-component').stereocam_component;\n\nAFRAME.registerComponent('stereo', stereoComponent);\nAFRAME.registerComponent('stereocam', stereocamComponent);\n```\n\n#### Credits\n\nThe video used in the examples is from http://pedrofe.com/rendering-for-oculus-rift-with-arnold/, from the project http://www.meryproject.com/\n\nBoilerplate code from https://github.com/ngokevin/aframe-component-boilerplate\n\nCode for adjusting sphere face vertex is from https://github.com/mrdoob/three.js/blob/master/examples/webvr_video.html\n\nStereo images from [Dougstar02](https://www.reddit.com/r/oculus/comments/4yrmm2/i_took_some_360_ansel_stereo_screenshots_from_the/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc-frame%2Faframe-stereo-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fc-frame%2Faframe-stereo-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc-frame%2Faframe-stereo-component/lists"}