-フォーメーションガールズ-」における3Dレンダリング技術解説』では、WebGLフレームワークBabylon.jsの採用事例を紹介しました。そのBabylon.jsの最新版(3.3.0)が2018年10月4日にリリースされましたので、最新機能をサンプルコンテンツ、ソースコードと合わせてお届けします。Toolkit(MRTK)の2つの機能が追加されました。3Dボタンを簡単に格子状に配置できる機能。空間上の座標を意識することなく、GUIを構築できます。格子形状のカスタマイズも可能です。button」がBabylon.js用に追加。MRTKと同様のAPIでコンテンツを構築できます。どれぐらい簡単かを感じていただくため、サンプルコードを載せておきます。Realityヘッドセットを対象としたアプリケーションを開発するためのスクリプトとコンポーネントの集まりです。RealityMixedRealityToolkit-UnityUnityによるHoloLensアプリケーション入門パーティクルシステムの機能向上Babylon.jsには炎や雨などを表現するパーティクルシステムが備わっています。shape」機能の向上、CPUパーティクルのレンダリングパフォーマンス向上(低スペック端末の場合に2倍以上の向上)をはじめ、28種類もの機能追加や更新がありました。上図の太陽のフレアのような複雑なエフェクトも作りやすくなりました。Babylon.jsの素晴らしいところは、OSSでありながらも新規に追加された機能には、しっかりとしたドキュメントとPlaygroundによるデモが付いている点です。Maxなどのソフトウェアでお馴染みの3Dオブジェクトに付随している目印のこと(上図の中心の、赤・緑・青の円形)。これを操作することで、3Dオブジェクトを操作できます。Babylon.jsで作成したコンテンツ内でも、ギズモを任意の3Dオブジェクトに取り付けることで、移動・回転・スケーリングの操作を簡単に実装できます。ギズモ機能とVRを組み合わせて、3Dメッシュの形状をユーザーがカスタマイズするようなコンテンツも作れるでしょう。環境テクスチャーが改善され、一般的なレイトレースによるレンダリング品質に近づいてきました。新たに追加された環境テクスチャツールにより、クオリティを保ったままテクスチャーサイズを圧縮でき、パフォーマンスの向上が計れます。サンプルコンテンツを開くPlaygroundでのTypeScriptサポートPlaygroundと呼ばれるサンドボックス環境でTypeScriptがサポートされました。ユーザーが自身のプロジェクトをTypeScriptで開発しながら、Playgroundを使ってコードを試しやすくなるでしょう。ドキュメントの強化ソースコードコメントのTypeDoc対応が行われ、API一覧をTypeDocのフォーマットで閲覧できます。コーディング中に表示されるドキュメントにも反映されますので、より効率的にコンテンツを開発できるでしょう。Recorder機能により、たった数行のコードでWebM形式のムービーを作成できます。3Dシーン内でユーザーが操作した内容を録画して保存したり、ゲームプレイの録画などに利用できるでしょう。APIを利用した機能のためブラウザ制限があります。use...)まとめ「これはおもしろい!」、オープンソースのフレームワークを使っていて、そう感じる瞬間があります。その分野の技術が、周辺の関連技術に波及していく瞬間です。Reality)の分野との橋渡しの存在になっていくでしょう。柔軟に変化を遂げようとするフレームワーク「Babylon.js」から、今後も目が離せません。気になる方はぜひチェックしてみてください。CanvasとWebGLでウェブフォントを扱う方法Sparticle徹底解説。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。