CrossRoad

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

トップ > イベントレポートなど > A report of Babylon.js meetup Vol.2

A report of Babylon.js meetup Vol.2

イベントレポートなど babylonjs

We organized second meetup of Babylon.js. The post shows the meetup reports.

1. What is Babylon.js Japan?

It is the community that not only organizes meetups regarding Babylon.js, but also provides relationship opportunity for community members. It has been established on April 2022.

babylonjs.connpass.com

You can see the meetup in the following YouTube. Around 110 members (including onsite/offsite) participated the meetup.

www.youtube.com

"かーでぃ", "Ricky", "nagauta", and "Yamayu"(one of organizers) who are attendees and presenter, kindly published clear reports (only in Japanese).

note.com

note.com

qiita.com

www.infiniteloop.co.jp

Babylon.js勉強会 vol.2 まとめました！ - Togetter

2. Preesntations

2.1 Opening

MC: イワケン@XRコミュニティのキーマン/Microsoft MVP (@iwaken71) / Twitter

@iwaken71 hosted the event. He considered how to get excited hall.
I could not go to the real space (Microsoft Japan office) due to sudden my child's getting sick. Therefore I could not take pictures of him. See the YouTube Live above.

2.2 Introducing Babylon.js 6 -What's new with it-

Presenter: Limes (@limes2018) / Twitter

speakerdeck.com

Here is my presentation. Babylon.js will contains not only new feature but also performance improvements. Initial v6.0 release date was March 30th but was postponed to April 20th. (The meetup was scheduled for original release date)

In this presentation, I introduced possible new features of v6.0 with using official BJS twitter, documentations, GitHub histories.

  • WebGPU based performance optimization
  • Collaboration with GUI Editor and Playground
  • Fluid Renderer
  • Screen Reader
  • Texture Decal
  • Screen Space Reflections (SSR) Rendering Pipeline

My presentation materials introduces them in detail.

I also introduced a sample BJS work based on "Screen Space Reflection", "Post Process", "WaterMaterial", and "LensFlare"

youtu.be

2.3 A year activities of Babylon.js JAPAN

Presenter: ちょまど🎤今夜28(火)福岡登壇 (@chomado) / Twitter & やまゆ💝💯 (@akai_inu) / Twitter

They kindly introduced activities as Babylon.js JAPAN. Let me share contents they shared during their presentation.

babylonjs.connpass.com

scrapbox.io

babylonjs.connpass.com

techbookfest.org

nextpublishing.jp

2.4 Case study of Babylon.js 1

Presenter: やまゆ💝💯 (@akai_inu) / Twitter / Affiliation: VirtualCast, Inc.

The presenter has tackled with Babylon.js for several years. One of his great contribution is babylon-vrm-loader.

github.com

He is a creator of the loader. We can check his contribution in this official Babylon.js document.

https://doc.babylonjs.com/extensions/Babylon.js+ExternalLibraries/BabylonJS_and_VRM

In this presentation, he showed why he selected Babylon.js for VRM playback feature and issues for implementations.

Why he selected Babylon.js
Why Yamayu selected Babylon.js for VRM?

Advantage of Babylon.js
Advantage of Babylon.js adaption

Issues for implementations
Port MToon Material→Eventually he made it by himself.

Why Yamayu developed his custom materials for Babylon-vrm-loader

2.5 Case study of Babylon.js 2

Presenter: Shogo Hiruma / Affiliation: Hitachi R&D

He introduced industrial metaverse concept on his company.
There were several reaction on Twitter. All of them within my observation were positive and contain curiosity.

2.6 LT1 A peti digital twin

Presenters: かーでぃ@Babylon.jsレシピ集発売中 (@_0447222690292) / Twitter

docs.google.com

His definition of digital twin
- With using sensing technologies, reproduce physical state in virtual world.
- Forecast near future vision based on sensing data.
- Based on the results, they can act with best move.

This presentation's Topic:
- Mapping the temperature data of my room to a space created on Babylon.js
How to make sensing data with Python, Razpi and babylon.js

Issues
Future issues

2.7 LT2「Try to make an app that converts 2D images into 3D models and displays them」

Preesnter: nagauta (@nagauta_jp) / Twitter

I have not used Babylon.js yet, but I am interested in it, so I joined this LT session.

  • What I want to try: Convert a 2D image selected by the user into a 3D model. Display the converted 3D model with Babylon.js.

  • It's a new fiscal year, so I want to try new technologies.

  • I want to test if it can be used for a hair catalog related app that I am planning to develop with my friend.

・2D images to 3D models : To generate AI based Model, utilized Global-Local Path Networks(GLPN)

Done to generate 3Dmodel from a picture.

Several comments.

His next goal : Understand more and try to generate hair model from hair style images.

2.8 LT3「Implemented a WebXR Feature on Babylon.js and established to commit on OSS 」

Presenter: にー兄さん (@ninisan_drumath) / Twitter

speakerdeck.com

Main contents in this presentation
presentation's main topic by ninisan_drumath

  • I proceeded while complying with the WebXR Device API specification, understanding the contents of the Docs, and discussing with the maintainer.

  • His PR has been merged on Babylon.js v5.49.1

  • Tips：We should not implement a feature that just returning a raw data of WebAPI in this PR.

  • If the PR returns ArrayBuffer and WebGL Texture, the PR is meaningless, he guess.

  • He start to work at HoloLab, Inc. since today!

2.9 LT4「Try Babylon.js」

Presenter: Ricky (@N1809031125) / Twitter

Goal: He try to know what he can do on Babylon.js

  • Generated 3D model with "Scaniverse" app.
  • Exported the models as glb format and show them on Babylon.js
  • Actually, it is not easy to play these 3D models for VR with Unity
    (Fit Unity version, take care of various settings, building time...)
    ・Without uploading data on cluster and VRChat, we can realize VR environment with Babylon.js. It's fantastic!!

・On the other hand, Unity is better in regard with particle settings. Pros and Cons.

・If we use Babylon.js, just typing several lines and save 3D model folders is enough.

Scaniverse - 3D Scanner

Scaniverse - 3D Scanner

  • Toolbox AI
  • 写真／ビデオ
  • 無料
apps.apple.com

2.10 LT5「 Tried to make WebAR contents with Babylon.js x 8thwall」

Presenter: Yuki Tanabe (@tanabee_8) / Twitter / Affiliation : Dentsu Craft Tokyo

speakerdeck.com

  • He is a front dev engineer.
  • three.js is one of his main program language. He is a beginner of BJS.
  • Organizes a WebGL meetup

  • What he did: A WebAR content on an advertisement article. If users see the article through their smartphone camera, huge number of rabbits are showed and run around.
  • The advertisement was showed in multiple common newspaper in Japan.
  • The app was developet on Babylon.js x 8thWall.

We can see his company's content in this article.

mag.sendenkaigi.com

  • Why they adopted Babylon.js?
  • One of their main requirements were showing huge number of animated rabbits. It was equal to realize instancing 3D models with bone animation.
  • three.js was not compatible with such fature but BJS was.

  • Furthermore, a simple trial app could establish 60fps.

  • What were difficulty of Babylon.js from the point of view of a three.js user?

  • There were a few reference info in regard with Babylon.js.

  • His company looks for front dev engineers.

3. Conclusion

Iwaken-san, who is a MC of this event, kindly shared a photo on Twitter.

In this meetup, new technical words such as digital twin and 2Dimages to 3Dmodels were showed. Such new story made me feel a new possibility of Babylon.js. Most of attendees on this meetup were new to Babylon.js. If you have interested in BJS, let's join discord of Babylon.js JAPAN!!