CrossRoad

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

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 …

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…

Babylon.jsを使ってWebXRのARモードを試す方法

このブログで時々紹介しているBabylon.jsについてネットや公式フォーラムで調べると、2D画面上での表現、あるいはVRモードの使用例がほとんどです。一方、あまり知られていませんが、WebXRにも対応していてARも使えます。 そこで、今回はBabylon.jsのWebXR対…

Babylon.jsのパーティクルをGUIで設定できるParticle Editorを使って、いくつかエフェクトをつくってみました

Babylon.jsにParticle Editorという仕組みができたので、いろいろと試してみました。 以下の環境で確認しています。 Babylon.js 4.2.0-alpha.17 1. Particle Editorとは? 2. Particle Editorを使うための準備 2.1 PlaygroundからInspectorを起動して使う 2.…

VR空間共有サービス「AltspaceVR」の基本的な使い方について

ここ最近、オンラインでのイベント参加や、リモートでのコミュニケーションの機会が増えているので、それに合わせて色々なサービスの使い方を解説しました。 www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com www.crossroad-tech.com …

ES6以降の仕様でthreejsのコードを記述する方法について

前回、Babylon.jsをES6以降の仕様で書く方法をまとめました。 www.crossroad-tech.com 引き続きES6に慣れるため、Babylon.jsと似ているthree.jsについても書き方を調べてみました。ただ、three.jsを初めて使ったためか、うまく動かず情報を探すことができな…

Mozilla Hubsを使った勉強会で発表するときの事前準備Tips一覧

先週、Mozilla Hubs(VR空間でイベント体験ができる仕組み)を使ったオンライン勉強会で発表をしました。 www.crossroad-tech.com Hubsの体験はほぼ初めてで、発表をしたのは初めてでした。最近参加したclusterとも異なる点が多かったです。 そこで、Hubsで…

Hubs Scrum ミートアップの概要と講演をまとめました

xR Tech Nagoyaが主催するオンラインイベント「Hubs Scrum」に参加、登壇してきましたので内容をまとめました。 1. Hubs Scrumとは? 2. ライトニングトーク (LT) 2.1 Mozilla Hubsが拓く新世代WebVRのススメ 2.2 AWSを使わずにVR空間共有ができるnetworked-…

AWSを使わないでVR空間の共有ができる「networked-aframe」の概要と環境構築方法

オンライン勉強会が増えたことによって、VR空間を使ったイベントの需要が増えています。そのため、Mozillaの「Mozilla Hubs」にも注目が集まっています。 今回は、Mozilla Hubsを調べるうちに見つけた「networked-aframe」の概要について説明いたします。 以…

ES6以降の仕様でBabylon.jsのコードを記述する方法について

JavaScriptは、ECMAという言語仕様のバージョンによって書き方が変わります。いろいろ調べたところ、2015年に策定されたES2015 (ES6) で大きく変化し、Mozilla Hubsなど、JavaScriptのOSSの多くはES6以降の仕様で書かれている印象です。 一方、Babylon.js公…

clusterを使った勉強会で発表するときの事前準備Tips一覧

先週、cluster(VR空間でイベント体験ができる仕組み)を使ったオンライン勉強会で発表をしました。 WebXR Tech Tokyo #0 の全講演をまとめてみました - CrossRoad clusterでの発表はかなり久しぶりで、だいぶ変化も多く少し準備に手間取ったところがありま…

VMagicMirrorを使って、アバターとしてZoomやTeams会議に参加する方法をまとめました

最近、打ち合わせや飲み会をオンラインで行うことが増えている方が多いと思います。ネットで探すと、それらのやり方も多数見つかります。 テレワークに必須!有料・無料のWEB会議アプリおすすめ8選(Zoom以外で) | ライフハッカー[日本版] 今、話題の「オ…

【2020/5/5追記】WebXR Tech Tokyo #0 の全講演をまとめてみました

先週に引き続き、clusterでの勉強会に参加しました。今回は聴講者だけでなく発表も行いました。 いつも通り、全講演の内容を紹介していきます。 1. WebXR Tech Tokyoとは? 2. 講演 2.1 Aframeで日本語フォントを自在にする 2.2 [8thWall x three.js] お家で…

【2020/5/5追記】HoloLens ミートアップ @ cluster vol.1の講演内容をまとめてみました

HoloLensに関するイベントとしては、おそらくHoloLensミートアップが日本最大級だと思います。これまではオフラインで開催されていましたが、昨今の事情により今回はVR空間で開催されることになりました。 今回のイベントは、VR空間で300人近くの人が参加す…

expressを使ってLAN環境向けhttpsサーバを構築する方法

npmで提供されているexpressを使うと、簡単なコードでWebサーバを作ることができます。 expressでWebサーバを作るためのサンプルコードを使うと、大抵はhttp://localhost:8080のURLで実行できるサーバになります。しかし、検証したいサービスによっては、htt…

【2020/6/5 Blender2.83の動作結果追記】Blender2.83αで使用可能になったVR表示機能の環境構築方法をまとめました

先日、以下のツイートを見かけました。 blenderが先月openXRに対応してViewportをHMD内で見られるようになったらしいので、誰か日本語で解説のQiita書いたら良いのではないだろうか(他力本願) https://t.co/VYH1gsumdJ— にしかわ@IntoFree代表 (@MiyuWestr…

Githubから来た"A new security advisory on minimist affects"に対応するときに出たエラーと対処方法

Githubにリポジトリを公開していると、"A new security advisory on minimist affects"というタイトルの警告メールが来ることがあります。 私の場合、npmとyarnを使っているリポジトリでセキュリティの脆弱性があるライブラリが入っていることが原因でした。…

【2020/5/17追記】Microsoft Teamsにあまり慣れていないときのTips一覧

昨今の事情でTeamsやSlackのユーザ数が急増しているようです。 cloud.watch.impress.co.jp japan.zdnet.com これだけ急に増えると、これらのチャットツールに慣れてないが急遽使うことになった方もいるかもしれません。 そこで、今回はTeamsを取り上げて、使…

はてなブログでads.txtに対応するために、Azureでhttps対応のWebサイトを作る方法

はてなブログでアドセンスを使っていると、ルートドメインにads.txtを入れてくださいという警告が出ることがあります。 「はてなブログ アドセンス ads.txt」などで調べると色々情報が出ており、はてなブログ単体では対応できないことが知られています。 対…

(4-1-2020 updated) A new 3D VR180 sci-fi action film "GEIMU"

3-28 (1) : Added Ep3 youtube link (Chp1) 3-29 (2) : Added additional information about official site (Chp3) 4-1 (3) : Added canceling crowd funding (Chp3) VR180 is expected to be a new standard VR photo/movie format. The "GEIMU" is one of …

Noodl v2.0.2でa-frameを表示させる方法について

以前、Noodlというプロトタイピングツールについて紹介しました。 www.crossroad-tech.com NoodlはHTML5をベースとしていることもあり、Babylon.js、a-frameなどのWebGLラッパーも使うことができます。 www.crossroad-tech.com www.crossroad-tech.com これ…

JapanVR Fest開発者会でプロトタイピングについて登壇しました

先日、Japan VR Fest主催の開発者会がありました。7時間近くで約40人が発表、参加者も100人以上というかなり大規模なものでした。 様々な方面で真面目に取り組んでおられる方々の発表なので、どれも大変勉強になりました。 ついでに私も少し発表してますので…

Microsoft DocsのContribution License Agreementを確認してプルリクエストを出す手順をまとめました

Microsoftは、様々な技術情報をMicrosoft Docsというサイトでまとめています。 ドキュメントの紹介範囲は広く、Microsoft製の技術のみとは限りません。また、このドキュメントはGithubで管理されており、だれでも修正依頼 (プルリクエスト)を出すことができ…