未验证 提交 f186c286 编写于 作者: K Kazuki Matsumoto 提交者: GitHub

[DOCS] Added Documentation (#51)

* add doc

* updated tutorial doc

* Updated manual

* added overview documentation
上级 4ab34954
......@@ -337,4 +337,7 @@ MigrationBackup/
[Ll]ibrary/
[Tt]emp/
[Oo]bj/
[Bb]uild/
\ No newline at end of file
[Bb]uild/
# Exclude Documentation folder
!Documentation~
\ No newline at end of file
# Unity Render Streaming
- [Japanese](jp/index.md)
**Unity Render Streaming** は、ブラウザ上で Unity の高品位なレンダリングを実現するためのソリューションです。カーコンフィギュレータや建築モデルをスマートデバイスで閲覧するニーズを想定しています。
ストリーミング技術には [WebRTC](https://webrtc.org/) というテクノロジを用いて実現しています。デベロッパーがソリューションをカスタマイズすることで、様々なソリューションを構築することができます。
<img src="./images/multitouch.gif" width=500 align=center>
## Guide
* [Tutorial](en/tutorial.md)
* [Input](en/input.md)
* [Web Server](en/webserver.md)
* [FAQ](en/faq.md)
## Requirements
This version of Render Streaming is compatible with the following versions of the Unity Editor:
- 2019.1 and later (recommended)
> [!NOTE]
> <`Unity 2018.3` is not supported.>
Currently the software support `windows64` only.
### Browser
- Desktop Chrome
- Desktop Firefox
- Desktop Safari
- Android Chrome
- iOS Safari
\ No newline at end of file
# Render Streaming クラス
**Render Streaming** は以下の機能を含みます。
- シグナリングサーバとの通信
- カメラからの入力をストリームとして送信
- ブラウザからの入力とイベントとの関連付け
<img src="/Users/kazuki/UnityRenderStreaming/Packages/com.unity.template.renderstreaming/Documentation~/images/renderstreaming_inspector.png" width=400 align=center>
## プロパティー
| パラメータ | 説明 | デフォルト |
| ------------------------ | -------------------------------------------------------- | -------------------------------- |
| URL Signaling | シグナリングサーバのURLを指定します | http://localhost |
| URLs Ice Server | STUN/TURN サーバをリストで指定します | \[stun:stun.l.google.com:19302\] |
| Interval | シグナリングサーバへのポーリング頻度を秒単位で指定します | 5 |
| Capture Camera | ストリーミング用のカメラを指定します | |
| Array Button Click Event | ブラウザ上のボタンクリックイベントを登録します | |
## 詳細
# Unity Render Streaming
- [English](../index.md)
**Unity Render Streaming** は、ブラウザ上で Unity の高品位なレンダリングを実現するためのソリューションです。カーコンフィギュレータや建築モデルをスマートデバイスで閲覧するニーズを想定しています。
ストリーミング技術には [WebRTC](https://webrtc.org/) というテクノロジを用いて実現しています。デベロッパーがソリューションをカスタマイズすることで、様々なソリューションを構築することができます。
<img src="../images/multitouch.gif" width=500 align=center>
## ガイド
* [概要](overview.md)
* [チュートリアル](tutorial.md)
* [ブラウザ入力](input.md)
* [Web サーバ](webserver.md)
* [クラスリファレンス](class-renderstreaming.md)
* [FAQ](faq.md)
## 動作環境
Unity 2019.1 で動作を確認しています。現在は Windows 64bit 環境でのみ動作を確認しています。
> [!NOTE]
> <`Unity 2018.3` はサポートされていません。>
### 対応ブラウザ
利用可能なブラウザについては、ブラウザ毎の WebRTC への対応状況に依存しています。
- Desktop Chrome
- Desktop Firefox
- Desktop Safari
- Android Chrome
- iOS Safari
\ No newline at end of file
## ブラウザ入力処理
ブラウザからの入力は以下をサポートしています。
- マウスイベント
- キーボードイベント
- タッチイベント
- ボタンイベント
ブラウザからバイト列を送信し、Unity 側で `New Input System` を利用しています。
### マウスイベント
|index|value|size|
|-------|-----|-----|
|0|0|1|
|1|position x|2|
|3|position y|2|
|5|button|1|
### キーボードイベント
|index|value|size|
|-------|-----|-----|
|0|1|1|
|1|key code|1|
### タッチイベント
|index|value|size|
|-------|-----|-----|
|0|2|1|
|1|phase|1|
|2|length|1|
|3|position x|2|
|5|position y|2|
|7|force|4|
## HTML UI
HTML UI のイベントはのボタンコンポーネントにのみ対応しています。
### Button
|index|value|size|
|-------|-----|-----|
|0|16|1|
|1|id|1|
\ No newline at end of file
# Render Streaming 概要
## 処理の流れ
TODO
##パッケージ構成
Render Steraming パッケージには以下の内容が含まれています。
- WebRTC パッケージ
- サンプルコード / アセット
- ウェブアプリケーション
<img src="../images/package_renderstreaming.png" width=300 align=center>
### WebRTC パッケージ
TODO
### サンプルコード / アセット
TODO
### ウェブアプリケーション
TODO
\ No newline at end of file
# 利用を開始するには
### パッケージのダウンロード
RenderStreaming の利用を開始するためには、以下の2つの方法があります。
- [Github リポジトリ](https://github.com/Unity-Technologies/UnityRenderStreaming) から最新のソースコードをダウンロードする
- [Github Release](https://github.com/Unity-Technologies/UnityRenderStreaming/releases) からパッケージをダウンロードする
パッケージをダウンロードする場合、2つのパッケージをダウンロードしてください。
- com.unity.webrtc.tgz
- com.unity.template.renderstreaming.tgz
ダウンロードしたパッケージを所定のフォルダに移動することで、プロジェクトテンプレートとして利用することが可能です。
### プロジェクトテンプレート (Experimental)
プロジェクトテンプレートは、Unity で新規プロジェクトを作成するときにテンプレートとして選択することができます。
<img src="../images/template_in_unityhub.png" width=600 align=center>
テンプレートパッケージを利用する際は、2つの tgz ファイルをそれぞれ以下のフォルダに配置します。
`com.unity.template.renderstreaming.tgz` を以下のフォルダに移動
```
<Unity Editor Root>/Data/Resources/PackageManager/ProjectTemplates
```
<img src="../images/install_renderstreaming_package.png" width=600 align=center>
`com.unity.webrtc.tgz` を以下のフォルダに移動
```&lt;Unity Editor Root&gt;/Data/Resources/PackageManager/Editor
<Unity Editor Root>/Data/Resources/PackageManager/Editor
```
<img src="../images/install_webrtc_package.png" width=600 align=center>
パッケージを移動後、Unity Hub を起動し新規プロジェクトを作成します。テンプレートに `Render Streaming` が追加されていることを確認してください。
### Web サーバの起動
Webサーバの実行ファイルは `Assets/~bin/` 以下に配置しています。ファイルを実行すると、コマンドプロンプトが起動します。
<img src="../images/launch_webserver_explorer.png" width=500 align=center>
コマンドプロンプトに以下のようなログが表示されていることを確認してください。 Web サーバのアドレスが表示されます。Web サーバのコマンドオプションの詳細は [Web サーバ](webserver.md)のページを参照してください。
<img src="../images/launch_webserver_cmd.png" width=400 align=center>
Webサーバのソースコードは [WebApp](WebApp) に配置しています。なお、ソースコードを実行するためには [Node.js](https://nodejs.org) をインストールする必要があります。公式サイトからインストーラをダウンロードしてインストールしてください。
### Unity 側の設定
サンプルシーン `Assets/Scenes/HDRPScene.unity` を開きます。
<img src="../images/hdrpscene.png" width=600 align=center>
ヒエラルキービューの `RenderStreaming` を選択してください。インスペクタビューの `Render Streaming` コンポーネントを確認してください。
<img src="../images/renderstreaming_inspector.png" width=300 align=center>
`URL Signaling` パラメータには、先ほど起動した Web サーバのアドレスを指定してください。インスペクタの各設定については Render Streaming クラスの[リファレンス](class-renderstreaming.md)を参照してください。
### Webページへのアクセス
[対応ブラウザ]()のリストに含まれているブラウザを起動します。
Web サーバのアドレスにアクセスしてください。以下のようにウェブページが表示されます。
<img src="../images/browser_hdrpscene.png" width=600 align=center>
動作が確認できない場合、ブラウザのバージョンが古い可能性があります。最新のバージョンをインストールしてください。
## Web サーバ
Web サーバのソースコードは [WebApp](WebApp) フォルダに配置しています。
### コマンドオプション
|オプション|説明|デフォルト|
|-------|-----|-------|
|-h --help|ヘルプを表示します||
|-p —port \<number\>|ポート番号を指定します|80|
|-s --secure|https を使用します||
|-k —keyfile \<path\>|https で使用する秘密鍵ファイルを指定します|server.key|
|-c —certfile \<path\>|https で使用する証明書ファイルを指定します|server.cert|
### 例
以下のコマンドを実行すると http として起動します。ポートは80番を利用します。
```shell
npm run start
```
以下のコマンドを実行すると https として起動します。ポートは443番を利用します。
```shell
npm run start -- -s -p 443
```
以下のコマンドを実行するとヘルプを表示します。
```shell
npm run start -- -h
```
`ts-node` を利用してサーバを起動する場合は `dev` を使用します。
```shell
npm run dev
```
### Web API の確認
Unity Render Streaming のシグナリングは、HTTP プロトコルで実現しています。シグナリングとは、P2Pの通信経路確立のためにピア同士の情報をやりとりする仕組みです。
Web API の確認には [Postman](https://www.getpostman.com/) を利用することができます。Postman を開き、 `WebApp/test/renderstreaming.postman_collection.json` をインポートしてください。
<img src="../images/postman_example.png" width=600 align=center>
\ No newline at end of file
>>>
**_Project Template Documentation_**
Use this template to create preliminary, high-level documentation meant to introduce users to the feature and the sample files included in this project template. When writing your documentation, do the following:
1. Follow instructions in blockquotes.
2. Replace angle brackets with the appropriate text. For example, replace "&lt;template name&gt;" with the official name of the project template.
3. Delete sections that do not apply to your project template. For example, a template containing only sample files does not have a "Using &lt;template name&gt;" section, so this section can be removed.
4. After documentation is completed, make sure you delete all instructions and examples in blockquotes including this preamble and its title:
```
>>>
Delete all of the text between pairs of blockquote markdown.
>>>
```
>>>
# About &lt;template name&gt;
>>>
Name the heading of the first topic after the **displayName** of the project template as it appears in the template's manifest. Check with your Product Manager to ensure that the template is named correctly.
This first topic includes a brief, high-level explanation of the project template and, if applicable, provides links to Unity Manual topics.
>>>
**_Example:_**
>>>
Here is an example for reference only. Do not include this in the final documentation file:
*The First Persion Shooter project template includes examples of First Person Shooter assets, First Person Shooter Instances, animation, GameObjects, game mechanics and scripts that will help you get started quickly with creating your own first person shooter game.*
>>>
<a name="UsingProjectTemplate"></a>
# Using &lt;template name&gt;
>>>
The contents of this section depends on the type of project template.
* At a minimum, this section should include reference documentation that describes the assets, structure, and properties that makes up the project template's content. This reference documentation should include screen grabs (see how to add screens below), a list of assets or settings, an explanation of what each asset or setting does, and the default values of each asset or setting.
* Ideally, this section should also include a workflow: a list of steps that the user can easily follow that demonstrates how to use the project template. This list of steps should include screen grabs (see how to add screens below) to better describe how to use the feature.
For project templates that include sample files, this section may include detailed information on how the user can use these sample files. Workflow diagrams or illustrations could be included if deemed appropriate.
## How to add images
*(This section is for reference. Do not include in the final documentation file)*
If the [Using &lt;template name&gt;](#UsingProjectTemplate) section includes screen grabs or diagrams, a link to the image must be added to this MD file, before or after the paragraph with the instruction or description that references the image. In addition, a caption should be added to the image link that includes the name of the screen or diagram. All images must be PNG files with underscores for spaces. No animated GIFs.
An example is included below:
![A cinematic in the Timeline Editor window.](images/example.png)
Notice that the example screen shot is included in the images folder. All screen grabs and/or diagrams must be added and referenced from the images folder.
For more on the Unity documentation standards for creating and adding screen grabs, see this confluence page: https://confluence.hq.unity3d.com/pages/viewpage.action?pageId=13500715
>>>
# Technical details
## Requirements
>>>
This subtopic includes a bullet list with the compatible versions of Unity. This subtopic may also include additional requirements or recommendations for 3rd party software or hardware. If you need to include references to non-Unity products, make sure you refer to these products correctly and that all references include the proper trademarks (tm or r)
>>>
This version of &lt;template name&gt; is compatible with the following versions of the Unity Editor:
* 2018.3 and later (recommended)
To use this project template, you must have the following 3rd party products:
* &lt;product name and version with trademark or registered trademark.&gt;
* &lt;product name and version with trademark or registered trademark.&gt;
* &lt;product name and version with trademark or registered trademark.&gt;
## Known limitations
>>>
This section lists the known limitations with this version of the project template. If there are no known limitations, or if the limitations are trivial, exclude this section. An example is provided.
>>>
&lt;template name&gt; template version &lt;template version&gt; includes the following known limitations:
* &lt;brief one-line description of first limitation.&gt;
* &lt;brief one-line description of second limitation.&gt;
* &lt;and so on&gt;
>>>
*Example (For reference. Do not include in the final documentation file):*
The First Person Shoot template version 1.0 has the following limitations:*
* The First Person Shooter template does not support sound.
* The First Person Shooter template's Recorder properties are not available in standalone players.
* MP4 encoding is only available on Windows.
>>>
## Project template contents
>>>
This section includes the location of important files you want the user to know about. For example, if this project template containing user interface, models, and materials separated by groups, you may want to provide the folder location of each group.
>>>
The following table indicates the &lt;describe the breakdown you used here&gt;:
|Location|Description|
|---|---|
|`<folder>`|Contains &lt;describe what the folder contains&gt;.|
|`<file>`|Contains &lt;describe what the file represents or implements&gt;.|
>>>
*Example (For reference. Do not include in the final documentation file):*
The following table indicates the root folder of each type of sample in this project template. Each sample's root folder contains its own folders:
|Folder Location|Description|
|---|---|
|`WoodenCrate_Orange`|Root folder containing the assets for the orange crates.|
|`Characters`|Root folder containing the assets and animators for the characters.|
|`Levels`|Root folder containing scenes for the sample game's levels.|
>>>
## Document revision history
>>>
This section includes the revision history of the document. The revision history tracks when a document is created, edited, and updated. If you create or update a document, you must add a new row describing the revision. The Documentation Team also uses this table to track when a document is edited and its editing level. An example is provided:
|Date|Reason|
|---|---|
|Sept 12, 2017|Unedited. Published to production.|
|Sept 10, 2017|Document updated for project template version 1.1.<br>New features: <li>audio support for capturing MP4s.<li>Instructions on saving Recorder prefabs|
|Sept 5, 2017|Limited edit by Documentation Team. Published to production.|
|Aug 25, 2017|Document created. Matches project template version 1.0.|
>>>
# Quality Report
Use this file to outline the test strategy for this project template.
## Version tested: [*package version*]
## QA Owner: [*Add Name*]
## UX Owner: [*Add Name*]
## Test strategy
*Use this section to describe how this feature was tested.*
* A link to the Test Plan (Test Rails, other)
* Results from the project template's editor and runtime test suite.
* Link to automated test results (if any)
* Manual test Results, [here's an example](https://docs.google.com/spreadsheets/d/12A76U5Gf969w10KL4Ik0wC1oFIBDUoRrqIvQgD18TFo/edit#gid=0)
* Scenario test week outcome
* etc.
## Package Status
Use this section to describe:
* UX status/evaluation results
* package stability
* known bugs, issues
* performance metrics,
* etc
In other words, a general feeling on the health of this project template.
fileFormatVersion: 2
guid: 38e03a401f2e04237aa2d319d824266c
TextScriptImporter:
externalObjects: {}
userData:
assetBundleName:
assetBundleVariant:
# Unity Render Streaming Template
\ No newline at end of file
# Unity Render Streaming
<img src="https://img.shields.io/badge/unity-2019.1-green.svg?style=flat-square" alt="unity 2019.1">
## Documentation
- [English](./Documentation~/en/index.md)
- [Japanese]( ./Documentation~/jp/index.md)
## Package Structure
```
.
└── Documentation~
├── en
├── images
└── jp
```
\ No newline at end of file
# About Unity Render Streaming
# WebRTC for Unity
Use the &lt;package name&gt; package to &lt;list of the main uses for the package&gt;. For example, use &lt;package name&gt; to create/generate/extend/capture &lt;mention major use case, or a good example of what the package can be used for&gt;. The &lt;package name&gt; package also includes &lt;other relevant features or uses&gt;.
- [Japanese](jp/index.md)
# Installing Unity Render Streaming
To install this package, follow the instructions in the [Package Manager documentation](https://docs.unity3d.com/Packages/com.unity.package-manager-ui@latest/index.html).
WebRTC for Unity は、 [WebRTC](https://webrtc.org) を Unity で利用可能にするためのパッケージです。
## Guide
In addition, you need to install the following resources:
- [Tutorial](en/tutorial.md)
- &lt;name of resource&gt;: To install, open *Window > &lt;name of menu item&gt;*. The resource appears &lt;at this location&gt;.
- &lt;name of sample&gt;: To install, open *Window > &lt;name of menu item&gt;*. The new sample folder appears &lt;at this location&gt;.
## Install
# Using Unity Render Streaming
For packages that augment the Unity Editor with additional features, this section should include workflow and/or reference documentation:
パッケージをインストールするためには、パッケージマネージャから `WebRTC` を検索しインストールします。パッケージマネージャの利用方法は[ドキュメント](https://docs.unity3d.com/Packages/com.unity.package-manager-ui@latest/index.html)を参照してください。
* At a minimum, this section should include reference documentation that describes the windows, editors, and properties that the package adds to Unity. This reference documentation should include screen grabs (see how to add screens below), a list of settings, an explanation of what each setting does, and the default values of each setting.
* Ideally, this section should also include a workflow: a list of steps that the user can easily follow that demonstrates how to use the feature. This list of steps should include screen grabs (see how to add screens below) to better describe how to use the feature.
<img src="./images/webrtc_package_manager.png" width=600 align=center>
For packages that include sample files, this section may include detailed information on how the user can use these sample files in their projects and scenes. However, workflow diagrams or illustrations could be included if deemed appropriate.
## Sample
パッケージでは以下の3つのサンプルを用意しています。
| シーン名 | 説明 |
|----------------|-------------------------------------|
| PeerConnection | ピアを接続する手続きを確認するシーン |
| DataChannel | テキスト送受信を確認するシーン |
| MediaStream | ビデオ/音声送受信を確認するシーン |
## How to add images
## Limitation
If the [Using &lt;package name&gt;](#UsingPackageName) section includes screen grabs or diagrams, a link to the image must be added to this MD file, before or after the paragraph with the instruction or description that references the image. In addition, a caption should be added to the image link that includes the name of the screen or diagram. All images must be PNG files with underscores for spaces. No animated GIFs.
ビデオエンコーディングにGPUハードウェアアクセラレーションを使用しているため、NVCodec 対応のグラフィックボードにのみ動作しています。
An example is included below:
## 更新履歴
![A cinematic in the Timeline Editor window.](images/example.png)