Skip to content

mganeko/THETA_GL

BranchesTags

Repository files navigation

THETA_GL

THETA WebGL Viewer using three.js (Javascript 3D library)

[Many thanks to mganeko for this useful repo! This English translation of the README.md file for mganeko’s THETA_GL repo provided by the RICOH THETA Unofficial Guide. Original Japanese language README.md file information is appended below. This is provided “as-is and unofficial." Comments and edits welcome. More information on useful GitHub repos for the RICOH THETA curatated by the RICOH THETA Unofficial Guide here]

Acknowledgments

  • In order to render WebGL, three.js is used

    • To show rendering of full photospheres, samples of panoramas / equirectangular are referenced
    • three.js is covered under the MIT license

  • In order to handle UV Mapping, the following data was utilized:

  • Using anzu-sdk.js from the WebRTC SFU as a Service called Anzu, a WebRTC distribution service

    • The Anzu WebRTC SFU as a Service is provided by the company Shiguredo, K.K. (Japan)
    • anzu-sdk.js is under the Apache License Version 2.0

Thank you, everyone.

Operating Environment

I have tested and confirmed the following operating environment:

  • Chrome 47.0.2526.106 (64-bit) for MacOS X
  • Firefox 43.0.3 for MacOS X
  • Chrome 47.0.2526.106 m for Windows
  • Firefox 43.0.2 for Windows
  • Chrome for Android
  • Firefox for Android

Maybe because Firefox for Android uses m4v format, playback for recorded video files is not possible.

Samples

Playback of prerecorded video file

Connecting to USB Camera

Using WebRTC SFU Distribution Video

[Translator’s Note: This section of links appears to need an account with this service, and this section of links do not appear to work.]

Usage

Prep

  • Load three.js and three.min.js in HTML
  • Load theta_gl.js in HTML
    • You must have the JSON file in the UV folder when you use it
  • When you use Anzu, anzu.js or anzu.min.js is required

Initialization

  • THETA_GL.init(divId, autoResuze, debugFlag)
    • string divId: It will be a Canvas container displaying WebGL, set the div element ID [REQUIRED]
    • bool autoResize: Comply with window resize or not (true/false) - default is true
    • bool debugFlag: For debugging, running video elements or displaying canvas elements, or displaying log information in the console - default is false

Starting WebGL Animation

  • THETA_GL.startAnimate()

Setting the source URL of videos

  • THETA_GL.setVideoSrc(url, loopFlag)
    • string url: URL for videos. Use a web URL or set a URL created with URL.createObjectURL() [REQUIRED]
    • bool loopFlag: Run the video in a loop or not (true/false) - default is false

Stopping Video

  • THETA_GL.stopVideoSrc()

Setting Device Orientation

  • THETA_GL.followOrientation(flag)
    • bool flag: Setting whether to follow the smart device orientation or not. [REQUIRED]

Code Samples

var url = 'http://yourserver.com/video.mp4';
THETA_GL.init('container', true, false);
THETA_GL.setVideoSrc(url, true);
THETA_GL.startAnimate();

License

THETA_GL is under the MIT license

[Original Japanese README starts here]

THETA_GL

THETA WebGL Viewer with three.js

RICHO THETA S の映像をWebGL(three.js)とUVマッピングを用いて、全天球動画としてブラウザで表示します。

謝辞

皆様、どうもありがとうございます。

動作環境

次の環境で動作確認しています

  • Mac OS X用 Chrome 47.0.2526.106 (64-bit)
  • Mac OS X用 Firefox 43.0.3
  • Windows用 Chrome 47.0.2526.106 m
  • Windows用 Firefox 43.0.2
  • Android用 Chrome
  • Android用 Firefox

※Android用Firefoxでは、m4v形式のためか録画した映像ファイルは再生できていません

サンプル

https://mganeko.github.io/THETA_GL/

録画した映像ファイルを再生

  • THETA Sで録画したファイルを表示するサンプルです
  • movie_360.html

USBカメラとして接続して利用

  • navigator.getUserMedia()を利用してカメラ映像を取り込んだものを表示するサンプルです
  • theta_360.html

WebRTC SFU 配信映像を利用

使い方

準備

  • HTMLでthree.js または trhee.min.js を読み込みます
  • HTMLでtheta_gl.jsを読み込みます
    • 利用にあたっては、uvフォルダの下のjsonファイルも必要になります
  • Anzuを利用する場合は、anzu.js または anzu.min.js も必要です

初期化

  • THETA_GL.init(divId, autoResuze, debugFlag)
    • string divId : WebGLを表示するCanvasのコンテナとなる、div要素のIDを指定 ※必須
    • bool autoResize : Windowのリサイズに追従するかどうか(true/false) ※省略時はtrue
    • bool debugFlag : デバッグ用に作業用のvideo要素、canvas要素を表示するか、ログ情報をconsoleに表示するか ※省略時はfalse

WebGLアニメーションの開始

  • THETA_GL.startAnimate()

映像ソースURLの指定

  • THETA_GL.setVideoSrc(url, loopFlag)
    • string url : 映像のURL。Web上のURLか、URL.createObjectURL()で生成したURLを指定 ※必須
    • bool loopFlag : 映像をループ再生するかどうか(true/false) ※省略時はfalse

映像の停止

  • THETA_GL.stopVideoSrc()

デバイスの方向に追従

  • THETA_GL.followOrientation(flag)
    • bool flag: スマートデバイスの方向に追従されるかどうかを指定 ※必須

コード例

var url = 'http://yourserver.com/video.mp4';
THETA_GL.init('container', true, false);
THETA_GL.setVideoSrc(url, true);
THETA_GL.startAnimate();

ライセンス

THETA_GLはMITランセンスで提供されます

Analytics

About

THETA WebGL Viewer with three.js

Resources

Readme

License

MIT license
Activity

Stars

26 stars

Watchers

4 watching

Forks

10 forks
Report repository

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages