はてなブックマーク

初めまして、今年の１月よりVR室にインターン生としてお世話になっている takapikoX です。 今回、UnityとA-Frameで作ったWebGLによる3Dコンテンツについて、簡単な性能比較を行いました。 目次 今週のお題「私の沼」 目次 ブラウザ上で3次元コンピュータグラフィックスを扱うには 対応状況 A-Frame と Unity を比べる意味 実行環境 今回作ったサンプル サンプル１ サンプル２ サンプル３ 何を比較するのか 読み込み時間の比較 FPSの比較 実際の比較 サンプル１での比較 サンプル２での比較 サンプル３での比較 結果 モバイル端末での利用を見据えて ブラウザ上で3次元コンピュータグラフィックスを扱うには ブラウザ上で3Dグラフィックスを実装するには、WebGLというJavaScript APIによって、ブラウザを通してデバイスのGPUにアクセスする必要があります

こんばんは。 腰がバグってるやつもうgood nightな @daybysay です。 関係ないですがSuchmos格好いいですね。 @jujunjun110に紹介してもらってからヘビロテです。聞いてるとお洒落な生き物になった気持ちになれるのでおすすめです。 さて、今回はUnity5.6で追加された VideoPlayerを利用する方法の紹介です。 ※Unity5.6はベータリリースであり、こちらで紹介する内容は将来的に変更される可能性があります。 今回作業したリポジトリはこちら github.com 目次 目次 Unityで全天球動画を再生する方法について Unity5.6の VideoPlayer Video Player を利用した全天球動画プレイヤーの実装 全天球動画の再生機能を実装 動画再生用の球体を用意する Video Playerの設定 動画を再生してみる 動的なファイルを読

こんにちは。 最近の推し漫画はジャンプで連載中の鬼滅の刃なjujunjun110です。基本的に展開はシリアスでよくできているし、その中に突如ぶっこまれるシュールギャグがまた良い。まだ4巻しか出ていないのでぜひ。 さて、先日VRをやっている方を集めた飲み会を開催しまして、参加者の皆様から事前に集めた話題を選ぶために、勉強も兼ねてWebVRフレームワークA-Frameで簡単なサイコロWebアプリを作成したので、その技術について書いてみます。 ↑こんな感じで、おはようからおやすみまで暮らしを見つめてくれそうなテイストのアプリケーションです。 目次 目次 物理演算コンポーネントaframe-physics-system インストール 基本的な使い方 サイコロをころがす サイコロの面を追加する まとめとお知らせ 物理演算コンポーネントaframe-physics-system まず、A-Frameの

あけましておめでとうございます。jujunjun110 です。 去年はいろいろな方とお会いして、ある程度ビジネスのタネを仕込むことができたと思うので、今年はVOYAGE GROUP VR室を世にアピールして、「名を挙げる」年にしていければと思っています。 今回はそれほど技術ネタもないので、VR界隈で話題の「怪文書」2つに乗っかる形で、VRの家庭普及について僕のぼんやり思っている所をメモとして書いていこうかなと思います。 「怪文書」とは 以下の2記事です。 2017年VR幻滅期の話と、2018年復活の話 by ところてん氏 2017年VR幻滅期の話と、2018年復活の話(2) by Shibukawa氏 VR機器が家庭にどのように普及していくかという予想で、どちらも「2017年にはVRは幻滅されるが、2018年には動画の形で普及が進むのではないか」という大筋で一致しています。 なお、怪文書と

こんばんは。古くて重いMacBook Proを背負って腰が崩壊した@daybysay です。 腰に課題を感じるエンジニアの皆様におかれましてはぜひ軽めのMacBookを背負ってご活動をお勧めいたします。 さて、今回はは複数人で同期しながら遊べるタイプのVRコンテンツ開発を試してみました。 内容としては、A-FrameとWebSocketを使ったリアルタイムマルバツゲームの実装です！ 出来上がりはこんな感じです。 リポジトリはこちら github.com そして今回出来上がったマルバツゲームへのリンクがこちらです。 目次 目次 アプリの構想 環境構築 アプリケーション実装 クライアントサイドの実装 マス目を置く プレイヤー（カメラ）を用意 クリックできるようにする プレイヤー名表示 サーバサイドの実装 Socket.IOを使う準備をする 別々のプレイヤーとして接続できるようにする マス目のク

年の瀬ですね。jujunjun110です！ VR元年と呼ばれた今年、みなさんはどのような年を過ごされたでしょうか。 今回は、一年を振り返る意味も込めて今年の流行語を駆使しながら、開発したA-Frameのコンポーネントをライブラリとして公開する方法について書いていきたいと思います。 目次 目次 A-Frameにコンポーネントを公開しよう！ A-Frameにおけるコンポーネント コンポーネントの公開方法 環境を整える 公開用Githubリポジトリの作成とクローン aframe-component-boilerplate のダウンロード npm の初期設定 コンポーネントの実装とデモページの作成 index.js の実装 デモ用のjsをビルドする 実装した内容の確認 README.md の記述 npmモジュールとしての公開 公開用モジュールのビルド npmへのサインアップ 公開ッ！！ Githu

こんにちは。カイロプラクティックに行ったら顔の歪みと猫背とランナー膝が治って人生変わったjujunjun110です。これはみんなまじで行ったほうがいい。 LT登壇してきました 昨日、ドリコムさんで開催された、A-Framer MeetupにてLT登壇してきました。 こんな風に動く実写コンテンツ×3Dモデルで立体感を感じるA-Frameアプリケーションについてお話しました！ ↑ぐりぐりできます。 フルスクリーンでページを閲覧する githubでソースコードを見る 実装方法 ↓実装方法は発表資料に詳しく書いてあるので、こちらをご覧ください。 実写コンテンツ×3Dモデルで立体感を感じるA-Frameアプリケーション 簡単に言うと、こんな感じで、全天球画像の内側に透明な3Dモデルを配置するという方法で実現しています。 過去3回くらいのブログ記事内容の合わせ技なので、お時間のある方はぜひこちらも読ん

Google Earth VRで世界中を旅行中の@daybysayです。 Google Earth、中にはいれたら楽しいのに〜とずっと思っていましたがそのまんまきましたね！友達とワイワイしながら色々めぐるの楽しすぎワロタって感じです。 さて、今回は開発話ではなくVRコンテンツのデザインについての記事になります。 といってもGoogleのVRチームが作ったガイドラインをつたない英語力でさせていただいただけです！ 原文はこちらです。(2016/11/23 時点の内容で翻訳しています) A new dimension - Designing for Google Cardboard - VR design guidelines この文章自体は割りと前から存在していますが、体系的にまとまっており内容も陳腐化しづらいものになってます。 また、すべてのプラットフォームに通じる内容も多く含まれているので

こんにちは。家のMacのOSをうっかりSierraに上げた結果、アホほどカスタマイズしてたKarabinerが機能しなくなって生産性が半分くらいになったjujunjun110です。 開発者のみなさんがSierra用に作り直しているようなので、ただただ早期復活を祈るばかり...！頑張れ！ さて、今回もA-Frameの小ネタを紹介していきます。 目次 目次 A-Frameにおけるテキスト HTML Shaderとhtml2canvasのインストールと読み込み HTML Shaderの使い方 ぼやけ・にじみを直す方法 A-Frameにおけるテキスト 実は、A-Frameにおいて、デフォルトのままでテキストを表示するコンポーネント要素は用意されていません。 ただし、有志によっていくつかテキスト表示用のプラグインが作成されておりまして、以下のように公式FAQにまとめられています。 これによると、以下

こんにちは。買って2週間で壊れたBluetoothイヤホンがメーカー交換となり、新品を送ってもらったもののそれも1週間で壊れた jujunjun110 です。 きっと耳から怪電波が出てるんだと思います。 最近はA-Frameの勉強をしながら、3D空間・VR空間ではどういった表現が使いやすいのか研究する日々です。今回は、壁に沿う視線カーソルを作ってみたので、それについて書いていきます。 目次 目次 壁に沿うカーソルとは raycaster（視線）と他のオブジェクトの交点情報を取得する カーソルの位置と向きを適切な方向に揃える cursorの位置 cursorの向き 実物 イベントのお知らせ 壁に沿うカーソルとは A-Frameのデフォルトの視線カーソルがこんな感じで画面中央に固定されているのに対し、 こんな感じでオブジェクトに沿って動くカーソルのことです。 （ちなみに今回はこちらのフリーのモ

糖質制限を始めてから生活習慣が改善され体調がすこぶるよくなったVR室の@daybysayです。 さて、今回も懲りずにHTC Vive向けのコンテンツ開発について勉強したいと思います。 今回紹介するのは VRTK というOSSのVRコンテンツ開発用ライブラリです。 開発したアプリは↓で公開しています。 github.com 目次 目次 VRTKとは VRTKの使い方 サンプルを動作させる 使ってみる まとめ VRTKとは VRTKは、VRコンテンツ開発を支援するコンポーネント、およびサンプルを多数備えたライブラリです。 SteamVRのSDKに依存しており、現状はHTC Viveのみ対応です。 が、現状でもGearVR対応のPRが出ていたり、今後ほかのプラットフォームに対応していこうという姿勢も伺えます。 github.com また、ドキュメントあるのと、各所に動画で説明が入っているので初心

こんにちは。買ったBluetoothイヤホンがわずか2週間で壊れた、VGの破壊王ことjujunjun110です。 今回はA-Frameについてのニッチ情報について更新します！ 目次 目次 A-Frameにおける3Dモデル読み込み Blenderからの書き出し A-Frame への読み込み A-Frameにおける3Dモデル読み込み Mozilaが中心となって開発するWeb-VRフレームワーク、A-Frame。 DOMベースで、ちょちょっと記述するだけで簡単にブラウザでVRコンテンツが作成できる、なかなかすごいやつです。 さて、3Dアプリケーションを作る際の一番の基本といえば3Dモデル。 Box や Sphere などのPrimitive 図形を利用することも多いですが、モデリングした3Dオブジェクトを読み込んで使うこともできます。 HTMLに3Dモデルを読み込む日がとうとう来たかとなかなか胸

こんにちは、隣の家でリノベが始まり、騒音によって休日の安穏が脅かされているjujunjun110です。 先日、とあるイベントでご一緒させていただいたアマナさんのご好意によって、昨年11月に完成したスーパースキャンスタジオという3D撮影専門のスタジオで全身スキャンを体験させてもらってきました。 その時の体験があまりに感動的だったので今回はそれについて書きます！ 続きを読む こんにちは！VOYAGE GROUPでのインターンがもうすぐ終わることとなり、今までVR室でやってきたことをしみじみと思い出しているtakapikoXです。秋みたいな物悲しい気分です。まだ夏ですけど。 今回は、IndexedDBを使って動画や3Dモデルのダウンロードを工夫できないか試してみたので、皆さんにお伝えしたいと思います。 続きを読む 初めまして、今年の１月よりVR室にインターン生としてお世話になっている takap

最近糖質制限を始めたVR室の@daybysayです。 明日はPSVRの発売日！弊社ももちろん購入しているので、到着が楽しみです！ さて、今回は前回の続きとして、HTC Vive向けのアプリにインタラクションの機能を追加したいと思います。 やはりVRコンテンツは、プレイヤーの身体を用いたインタラクションでVRの世界に影響を与える体験が楽しいですよね。 ということで今回はコントローラを用いたインタラクションの実装についてご紹介します。 ちなみに今回開発したアプリは下記にあげてあります。 github.com 目次 目次 Viveコントローラについて Viveコントローラのイベントを利用する SteamVR_TrackedControllerクラスの解説 物をつかむスクリプトの実装 つかむオブジェクトを見つける オブジェクトをつかむ 物を投げてみる まとめ Viveコントローラについて コントロ

こんにちは。VR室長の jujunjun110です。 突然ですが、いま世に出ている「VRコンテンツ」*1は、3DCGをベースに作られているものがほとんどです。*2 実空間やオブジェクトをスキャンするのに対して、3DCGをモデリングするほうがクオリティが高く、コストが低くなりやすいというのが最大の理由でしょうか。 けれど！ やっぱり、実際の空間もVRにして訪れたいじゃないですか。 家にいながらにして海外旅行したりしたいじゃないですか。 全天球動画という選択肢もあるけれど、移動やインタラクションができないのはもの足りない！ そんな課題を解決すべく、実空間を3Dスキャンできるカメラ Matterport を購入して使ってみたので、今回は紹介とレビューをしていきたいと思います。 目次 目次 Matterportとは 入手する 開封する 撮影する モデルを構築する モデルを確認する ビューワーから確

みなさん初めまして。 VOYAGE GROUP VR室、エンジニアの @DayBySay です。 私は現在VR室で、VR関連の技術調査とコンテンツ開発に携わっています。 このブログでは、調査内容や実際に利用した技術、開発方法についてをまとめて発信できていければと思っています。 VRコンテンツ開発（というか3Dコンテンツ開発自体）初学者のためで色々と突っ込みどころがあると思いますので、ガンガン突っ込んで頂ければ幸いです。 目次 目次 開発環境 HTC Viveを利用したアプリケーション開発 HTC Viveの機能を利用したアプリをUnityで実装する Unityでプロジェクトを作る SteamVRをインポートする シーンにカメラとコントローラを設置する 再生してみる Windows向けのアプリとしてビルドする ビルド設定を確認 出力する 遊んでみる まとめ 開発環境 さて、VR室でのコンテン