CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

2020-01-01から1年間の記事一覧

東京ジョイポリスで自由移動ができるVRゲーム「Zero Latency VR」の最新版体験会に参加しました

お台場にある室内型遊園地「東京ジョイポリス」では、ゲームセンターにある普通のゲームだけでなく、ここでしかできない専用アトラクションがあり、中にはVRを使ったゲームもいくつか入っています。 その中の1つ「Zero LatecnyVR」というゲームが、2020年12…

東京ジョイポリスで未就学児も遊べるアトラクションとVRゲームについて

先日、6歳と4歳の子どもと一緒に東京ジョイポリスに行きました。子連れでできるものは少ないのですが、未就学児とも一緒にできたゲームを紹介します。 また、7歳または13歳以上の子どもと一緒でないとできないですが、このブログ自体VR関係のことをよく書い…

UnityでARコンテンツがオーサリングできる「UnityMARS」の解説記事をUnityProTipsに寄稿しました

先日、ARコンテンツを作るオーサリングツールの紹介をしました。 www.crossroad-tech.com これらを調べる中で、UnityMARSについても調べていたのですが、先日その内容がUnity Pro Tipsに掲載されたので、簡単に紹介したいと思います。 1. Unity Pro Tipsとは…

「日本をバーチャルで盛り上げる」を語るイベント「VRカタリアウ」(一部)の概要をまとめてみました

タイトルにひかれて参加してみました。どの発表もとても勉強になることが多く、発表内容に関連情報を追記しながらまとめてみました。 ※諸事情で途中から参加できなかったので、参加できたところまでを書いております。 以下の方の記事では全発表が書かれてい…

Babylon.js Editor v4.0でノードベースで処理を描いていくGraph Editorを試してみました

このブログでも何度か紹介しているBabylon.js Editorは、UnityのようなGUIとオブジェクトへのスクリプトアタッチができる仕組みです。それだけでなく、ノードベースで処理を描いていくGraph Editorという仕組みも入っていました。 まだPreviewとあって機能は…

ARコンテンツの開発方法を色々調べてみました

最近、色々な事情もあって、ARコンテンツを作る方法を調べています。AR/VRコンテンツ開発といえばUnityを使うことが多いかと思いますが、探してみるとUnity以外にも色々あることがわかりました。 思ったよりも多かったので、備忘録も兼ねて整理しました。 1.…

【2021/10/31追記】【開発者向け】プライベートのFacebookアカウントを使わずにOculus Quest2を開発用端末として使う方法

HMD

Oculus Quest2など、Facebook製のVRヘッドセットを使う場合、Facebookアカウントでログインすることが推奨されています。 とくに、最近発売したOculus Quest2では、Facebookアカウントでログインしないと初期設定を完了させることができません。 VRヘッドセ…

Babylon.jsv4.2のリリースに合わせて公式ドキュメントが大幅アップデートされているので解説します

2020/11/12にBabylon.jsがv4.2に上がりました。これからはCDNなどで使うときはBabylon.jsはv4.2になります。 Today we are incredibly proud to introduce the latest evolution of the Babylon Platform, the amazingly #simple Babylon.js 4.2https://t.co…

WebXR Tech Tokyo #3 の全講演をまとめてみました

前回に続き、参加させていただきました。いつも通り、全講演の内容を紹介します。 1. WebXR Tech Tokyoとは? 2. 講演 2.1 最近の WebXR の動向 2.2 Quest単体で動く、WebXRベースの没入型開発・管理環境 2.3 WebXRに対応したbabylon.jsをOculus Quest2で動…

【2021/5/16追記】WebXR対応のbabylon.jsでVRアプリを開発するときのTipsやサンプルコード

以前WebXRの書き方でbabylon.jsでARを試した例をまとめたことがあります。 www.crossroad-tech.com 今回は、Oculus Quest2が届いたこともあり、VRを試してみました。検証に使ったPlayGroundのbabylon.jsのバージョンは、4.2.0-beta17です。 1. WebXRとは? 2…

はじめてのVR!の方に向けた、Oculus Quest2のセットアップ方法や困ったときの解決方法について

2020年10月13日、Facebookより「Oculus Quest2」という機種が発売されました。家電量販店でも取り扱いが始まっていることもあり、以前よりも認知度が上がったかと思います。 この記事では、はじめてOculus Quest2を使ってみようという方向けに、購入後に使う…

An introduction of a powerful development tool for Web applications: Babylon.js Editor

There are a lot of methods for developing 3DCG based applications. Unity and Unreal Engine are good tools for applications on Windows, MacOS, Linux, iOS, Android and so on. three.js and a-frame are also useful frameworks on web application…

プロトタイピングツール「AdobeXD」で絵コンテが作成できるプラグイン「Storyboard Editor Plugin」を試してみました

昨日、AdobeXD User Festival 2020というカンファレンスがありました。その中でとくに気になった「Storyboard Editor Plugin」について、このプラグインを使って、実際に絵コンテ、動画を作ってみました。 今回は「Storyboard Editor Plugin」の環境構築、使…

Babylon.js Editor v4.0でGSAPのアニメーション表現を試してみました

偶然見つけた下記のサイトで、WebGLのアニメーションができることを知りました。 ics.media このサイトではThree.jsを使った例を紹介しているのですが、Babylon.jsでも動かすことができます。今回は最近紹介しているBabylon.js Editor v4.0を使って動かして…

Microsoft Edgeブラウザで「このページには問題があります」「エラーコード:6」と表示されて使えなくなった時の対処方法

本日、突然タイトルのようなエラーメッセージが出てMicrosoft Edgeブラウザが使えなくなりました。最終的にPC再起動で直ったのですが、この事例について少し調べてみました。 今回の環境は以下の通りです。 ・MacOSX10.15.6 ・Microsoft Edge 85.0.564.51 1.…

Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.6(サーバに格納して実行)

前回に引き続き、Babylon.js Editor v4.0.0を使ってブロック崩しゲームを作ります。これまでの記事は以下を参照ください。 www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com 今回は、…

Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.5(得点加算、ライフ変更、テキスト表示)

前回に引き続き、Babylon.js Editor v4.0.0を使ってブロック崩しゲームを作ります。これまでの記事は以下を参照ください。 www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com 今回は、ブロックを崩したときにス…

Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.4(GUIの追加)

前回に引き続き、Babylon.js Editor v4.0.0を使ってブロック崩しゲームを作ります。これまでの記事は以下を参照ください。 www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com 今回は、ブロックに当てた数、ライフの数を表示させるGUI関…

WebXR Tech Tokyo #2 の全講演をまとめてみました

前回に続き、参加させていただきました。いつも通り、全講演の内容を紹介します。 1. WebXR Tech Tokyoとは? 2. 講演 2.1 Three.jsで大学をVR化した 2.2 xRブラウザを作っている話 2.3 2か月で軽率にWebARフェイスフィルターを作ってみた 2.4 WebXR Hand In…

Surface Duo エミュレータの環境構築とUnityのサンプルアプリを実行する方法

2020/8/12 21:10追記 この記事を書いた数時間後、MicrosoftよりSurface Duoについて発表がありました。 techcommunity.microsoft.com この記事によると、$1399で9/10より販売開始、MDM、Enterprise、Surface Duo experience for employees and protect work …

Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.3(衝突判定)

前回に引き続き、Babylon.js Editor v4.0.0を使ってブロック崩しゲームを作ります。これまでの記事は以下を参照ください。 www.crossroad-tech.com www.crossroad-tech.com 今回は、飛ばしたボールがブロックとぶつかったとき、ブロックが消えるまでを作りま…

Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.2(物理エンジン)

前回に引き続き、Babylon.js Editor v4.0.0を使ってブロック崩しゲームを作ります。前回の記事は以下を参照ください。 www.crossroad-tech.com 今回は、プレーヤーのブロックからボールを飛ばす処理を作ります。 使用した環境 ・Mac OS 10.15.5 ・Node.js 12…

Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.1(ステージ作成、操作)

前回紹介したBabylon.js Editorは最低限の使い方以外は情報がありません。そこで、簡単なゲームを作りながら使い方を調べることにしました。 作るゲームはブロック崩しです。今回はステージ作成とキーボード操作について解説します。 使用した環境 ・Mac OS …

【2020/11/29追記】UnityのようにBabylon.jsコンテンツが作れる「Babylon.js Editor」が大幅アップデートしていたので使い方を調べてみました

以前何度か紹介したBabylon.js Editorですが、GitHubリポジトリをみたら、見た目や操作方法が大きく変わっていました。 このアップデートにより、操作感がかなりUnityに近づきました。Unityに近い使い方でWebコンテンツを作れるとJavaScriptに不慣れな人でも…

ソースコードを1000年保存する「GitHub Archive Program」の概要を調べてみました

昨日くらいから「GitHub Action Program」という言葉をTwitterで見るようになりました。どんなものかちゃんと見てなかったのですが、自分のGithub プロフィールをみたら自分も対象になっていました。 よい機会なので、Github Archive Programとは何か、どん…

de:code夏まつり #3の参加レポート

de:code夏まつりというオンラインイベントに参加したので、内容をざっとまとめました。 1. de:codeとは? 2. de:code夏まつりとは? 3. 講演 3.1 楽しいだけじゃなくてためになるMS Techクイズまつり! 3.2 AzureとSDKとGoと私 3.3 Microsoft のチャットボッ…

WebXR Tech Tokyo #1 の全講演をまとめてみました

先月に続いて、clusterでの勉強会に参加して発表させていただきました。いつも通り、全講演の内容を紹介していきます。 1. WebXR Tech Tokyoとは? 2. 講演 2.1 3D作品をスピード公開!Three.jsとGatsbyで作るポートフォリオ作成方法 2.2 WebXR と Bot Compo…

Build2020で紹介されたBabylon.js (TypeScript) 製ミニゲーム「SnakeVR」のソースコードを調べてみました

先月、米国Microsoftによるテクニカルカンファレンス「Build2020」がオンライン開催されました。 この中では、Babylon.jsを使って簡単なゲームを作る方法の講演がありました。Babylon.jsでゲームを作る方法についてはあまり情報がないのと、この講演自体が英…

Edgeブラウザ (Chronium版) をリモートデバッグする方法

Edgeブラウザでデバッグをするために開発者ツールを表示すると、このようにEdge開発者チームによる新着情報が表示されます。 ここにある「Windows10デバイスのMicrosoft Edgeをリモートでデバッグする」がどのようなものか気になったので、今回は概要、設定…

AR.jsによるARをコーディングなしで作れる「AR.js Studio」を試してみました

先日、以下のようなツイートがありました。 AR.js Studio is a web-based tool that allows you to easily create, deploy, and share custom AR projects with the world! Supports images, videos and 3D models.All without coding. All free and Open So…