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

Update README.md #57

Merged
merged 1 commit into from
Aug 8, 2019
Merged

Update README.md #57

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 2 additions & 75 deletions README.md
View file
Open in desktop
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)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems redundant as people already know that they could just use issues for that, so better remove


# 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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could leave this type of explanations for the article instead


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>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just for the sake of making the example shorter, even if the file doesn't exist people could get the sense on how the example looks that is the main point

</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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we will include in the article too that there will be more elements to come if this is successful somehow, also it could be nice to include a roadmap.md with the ideas in there


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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again I believe this is better to move to an article, and it could be hard to keep track of new cameras, new recommendations so this will be incomplete, so prefer to remove. Also if we include other elements, like models or so, for consistency we need to create a similar section explaining that, so I prefer to remove also because of that


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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to make it explicit to avoid comparison


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

## License

Mozilla Public License Version 2.0