Skip to content
This repository has been archived by the owner on Jul 22, 2024. It is now read-only.

Commit

Permalink
Merge pull request #57 from MozillaReality/fernandojsg-patch-1
Browse files Browse the repository at this point in the history
Update README.md
  • Loading branch information
takahirox authored Aug 8, 2019
2 parents c1fe782 + 8f12deb commit a74da72
Showing 1 changed file with 2 additions and 75 deletions.
77 changes: 2 additions & 75 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
Status: In development. [Any feedback is very welcome.](https://github.com/MozillaReality/immersive-custom-elements/issues)

# Immersive Custom Elements

`immersive-custom-elements` is a set of web components to embed immersive (VR & AR) content into
Expand All @@ -12,18 +10,6 @@ your web page by using custom element tags. It currently includes components for

[Demo](https://rawcdn.githack.com/MozillaReality/immersive-custom-elements/v0.1.0/examples/index.html)

## Background

Creating immersive content directly with WebGL and WebXR(VR) requires deep knowledge of 3D graphics.
Tools which address this problem tend to be very rich and take time to learn.

We think there are a lot of simple use cases where content creators want very simple
interactions but they don't have the knowledge or time to create and maintain a custom application
built on top of WebXR frameworks.

The `immersive-custom-elements` project provides a standard way to create *exmples* without detailed knowledge of 3D, WebXR or
even Javascript.

## Usage

### Sample code
Expand All @@ -36,7 +22,7 @@ Add the link to `immersive-custom-elements.js` with `<script>` tag. You can down
<script src="https://rawcdn.githack.com/MozillaReality/immersive-custom-elements/v0.1.0/build/immersive-custom-elements.js"></script>
</head>
<body>
<img-360 src="https://rawcdn.githack.com/MozillaReality/immersive-custom-elements/v0.1.0/assets/img-360/landscape-3531355_1920.jpg" width="640" height="360"></img-360>
<img-360 src="360-landscape.jpg" width="640" height="360"></img-360>
</body>
</html>
```
Expand All @@ -45,10 +31,6 @@ Add the link to `immersive-custom-elements.js` with `<script>` tag. You can down

- \<img-360\>
- \<video-360\>
<!-- - \<img-360-tour\> -->
- other new elements coming later

If you have any new custom element tag ideas, join [this brainstorming thread](https://github.com/MozillaReality/immersive-custom-elements/issues/9)!

### \<img-360\>

Expand Down Expand Up @@ -85,62 +67,12 @@ Plays an interactive 360 degree video. Click video to start playing.

![GitHub Logo](screenshots/video-360.gif)

<!--
### \<img-360-tour\>
Displays a set of interactive 360 degree photos. You can switch between photos by gazing at white plane for three seconds.
```javascript
<img-360-tour width="640" height="360">
<img-360-tour-item src="imagefile1.jpg"></img-360-tour-item>
<img-360-tour-item src="imagefile2.jpg"></img-360-tour-item>
<img-360-tour-item src="imagefile3.jpg"></img-360-tour-item>
</img-360-tour-item>
```
\<img-360-tour\>
| attribute | type | description |
| ---- | ---- | ---- |
| width | number | element width |
| height | number | element height |
\<img-360-tour-item\>
| attribute | type | description |
| ---- | ---- | ---- |
| src | strings | Path to image file |
![GitHub Logo](screenshots/img-360-tour.gif)
-->

## Immersive (VR) mode

You can enter immersive mode by clicking "ENTER VR" button if you have a HMD.
You can enter immersive mode by clicking "ENTER VR" button if you have a VR headset.

![GitHub Logo](screenshots/immersive.gif)

## 360 degree photo/video

360 degree photo/video is an interactive panoramic image/video.

You will need a special camera or application to take 360 degree photos and videos.

### 360 degree Cameras

- [RICOH THETA](https://theta360.com/)
- [INSTA360](https://www.insta360.com/)
- [GoPro FUSION](https://shop.gopro.com/EMEA/cameras/fusion/CHDHZ-103-master.html)

## Browsers and headsets

Currently we test this project on the latest version of the following platforms.

- Firefox/Chrome on Desktop
- Firefox Reality/Oculus Browser on Oculus Go/Quest

[Feedback from other platforms are very welcome.](https://github.com/MozillaReality/immersive-custom-elements/issues)

## Development

### How to build
Expand All @@ -159,11 +91,6 @@ $ npm run start
# local server boots up. Access http://localhost:8080/examples/index.html on your browser.
```

## Similar projects

- [model-viewer](https://github.com/GoogleWebComponents/model-viewer)
- [A-Frame](https://aframe.io/)

## License

Mozilla Public License Version 2.0

0 comments on commit a74da72

Please sign in to comment.