CrossRoad

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

Babylon.js 勉強会 Vol.1の概要をまとめました


2022/5/7 やまゆさん、ユスキィさん、「#BabylonJS5 の祭りの様子をレポート」のスライドを追加しました

2022/5/8 イワケンさんのスライドを追加しました


English version :

www.crossroad-tech.com

以前から情報発信を続けているBabylon.jsについて、何名かの方と協力してコミュニティ「Babylon.js Japan」を立ち上げました!

今回はBabylon.js Japanの概要と第一回目の勉強会の内容をお伝えします。

1. Babylon.js Japanとは?

2022年4月に立ち上げた、Babylon.jsに関する勉強会の開催、技術的な質問、交流ができるコミュニティです。

babylonjs.connpass.com

設立きっかけについては、共同ホストのイワケンさんのnoteに詳しく書かれています。ぜひご覧ください。

note.com

私もUnityからBabylon.jsに主軸を移してから、Babylon.jsについて日本の開発者の方と話せる機会がほとんどなかったので、このような形でコミュニティ設立につながってとても嬉しく思います。

conpassの参加登録者は333人、当日の最大視聴人数者は211名でした。

当日の内容はこちらのYou Tube Liveで配信しました。以下のリンクより視聴可能です。

www.youtube.com

なお、当日は「クラウドデベロッパーちゃんねる」の皆様に配信関係を中心に多大なご支援をいただきました。ありがとうございました。

2. 勉強会の内容

2.1 オープニング

発表者:イワケン@AR好き (@iwaken71) | Twitter & David Catuhe (Video レター)

まずはオープニングの挨拶です。設立経緯、設立メンバー紹介や行動規範、Babylon.jsの作者であるDavidさんがこの日のためにビデオレターを作ってくださったので紹介させていただきました。

また、この日にBabylon.jsの公式コミュニティから公開された動画も紹介いたしました。Babylon.js v5リリースを記念した動画です。

こちらにあるのでぜひご覧ください。

www.youtube.com

2.2 Babylon.js 超入門

発表者:やまゆ💝 (@akai_inu) | Twitter

docs.google.com

はじめての人のために向けたBabylon.jsの紹介です。

やまゆさんはかなり前からBabylon.jsについて取り組まれており、VRMをBabylon.jsで再生できるBabylon-vrm-loaderの作者でもあります。

github.com

以下は発表のメモです。

・Babylon.jsは面白い

・Babylon.jsは色々なことができる。解説すると広すぎるので、今回はWebGLに絞って解説

・WebGLはブラウザで3DCGを描画する。ただし、単純な三角形や四角形を描画するだけでも大変。四角形を1つ描画するだけで250行くらい必要。そのため、WebGLを抽象化するライブラリ=Babylon.jsが提供

・なぜBabylon.jsを使うのか?
Why you should use Babylon.js?

・Let's dive into Babylon.js world!

2.3 Babylon.js 5 新機能紹介

発表者:Limes (@limes2018) | Twitter

speakerdeck.com

私の発表です。
Babylon.js 5 では大きな追加機能が5つあり、それぞれについて簡単に解説しました。

その中の1つであるGUI Editorについては、少し詳しく解説した記事を別途用意しましたのでご覧ください。

www.crossroad-tech.com

www.crossroad-tech.com

2.4 #BabylonJS5 の祭りの様子をレポート ツイートまとめ

発表者:ちょまど🎀Madoka@Microsoft (@chomado) | Twitter & やまゆ💝 (@akai_inu) | Twitter

speakerdeck.com

Babylon.js v5を記念して、宇宙をテーマに何かゲームを作ってみんなで一斉に盛り上げよう!というイベント告知がフォーラムでありました。
何か作った人がPlayGroundで公開し、Twitterに "#BabylonJS5" でツイートしています。この発表ではこのイベントをきっかけに公開されたツイートを紹介しました。

What kind of demo/playground should you make?
That’s 100% up to you! Our theme for the release is “Space.” Babylon 5? Get it? If you’d like to create something Sci-Fi or Space themed, that would fit right in, but certainly isn’t required.

引用元:SHHH! It's a secret! Babylon.js 5.0 Is Here Early! - #25 by RaananW - Announcements - Babylon.js

紹介された内容の一例です。

こちらの開発者の方は、宇宙を移動しながら他の光?を飲み込み大きくしていくゲームを紹介されていました。

こちらはWebXRに対応しており、Quest2でプレイできるゲームです。

2.5 LT1「公式チュートリアル和訳したしている (WIP)」

発表者:ちょまど🎀Madoka@Microsoft (@chomado) | Twitter

Babylon.jsには丁寧かつ細かいドキュメントが公開されています。また、初めての方向けにチュートリアルまで提供されています。ただし、現時点では英語版しかありません。

doc.babylonjs.com

発表者のちょまどさんは、日本のBabylon.js初心者の方も入りやすいように、チュートリアル記事を和訳されています。

zenn.dev

特徴は単純な和訳だけでなく、随所で説明、画像、Playgroundを追加してわかりやすくされているところです。詳細は上記の記事をご覧ください。

2.6 LT2「Babylon.jsで3DViewerを作ってみた!」

発表者:イワケン@AR好き (@iwaken71) | Twitter

speakerdeck.com

Babylon.jsでglb形式のViewerを作る過程を説明されています。その中でBabylon.jsのInspetor機能の便利さについても解説されています。

・Inspectorは表示されているmeshの情報を確認できる

・さらに表示されたmeshのテクスチャ解像度、scalingを調整してglb出力もできる

・この機能のおかげでBlenderやMayaなどの3DCGモデリングツールを使わなくても3DCGモデルの調整ができた

発表では、PBR (Physical Based Rendering) にも対応してきれいな反射が入った壺の3DCGモデルを表示させるデモも実施されていました。

A 3D viewer screenshots created by Babylon.js

こちらで確認できます。

https://playground.babylonjs.com/#XNR46Q#11

2.7 LT3「Babylon.jsで簡単WebXR 」

発表者:ユスキィ (Yusuke Hara) (@ms_yuhara) | Twitter

speakerdeck.com

Babylon.jsはWebXRにも対応しており、AR、VR関係のWebコンテンツを作ることもできます。

WebXRについては公式のドキュメントでも解説されています。

doc.babylonjs.com

以下は発表内容のメモです。

・WebXR、WebXR Device APIについて説明

・Babylon.jsでWebXRを実現するのは簡単! How easy to use Babylon.js for WebXR (VR)

How easy to use Babylon.js for WebXR (AR)

・Babylon.jsのWebXRは、標準仕様であるWebXR Device APIに基づく→簡単にクロスブラウザ対応のWebXRコンテンツ作成が可能

・Babylon.js 5ではLight Estimation、Image Trackingなどにも対応

3. おわりに

Babylon.jsはあまり知られていなかったので、ここまで多くの方に参加いただけるとは思っていませんでした。
皆さんの興味が高いということで、今後も情報発信に努めていければと思います。