Added WebMMD Model Viewer Based on Babylon.js

model: YYB Hatsune Miku_10th

As an additional MMD studio for DollRoom, we have implemented the "Studio Babylon."

In this article, I would like to introduce this "Studio Babylon."

What is Babylon?

Babylon, as mentioned in the studio's name, refers to Babylon.js, a technology that allows for the display and manipulation of 3D models within a web browser.

I won't go into technical details here, but if you're interested, please check out the official website.

Babylon-MMD

The previous studio was developed using another technology called Three.js, which also handles 3D in web browsers.

However, when working with large MMD model files, older generations of iPhones would crash, so as a temporary solution, we reduced the resolution of texture image files and trimmed morph data to lighten the load.

But I was looking for a more permanent solution, and that's when I discovered Babylon.js.

With Babylon.js, even large files are displayed quickly, and I was able to load them on older iPhones without needing to apply the above adjustments.

It felt like the perfect fit for the Web MMD model viewer I was looking for, so I decided to add this new studio.

What You Can Do with Studio Babylon

At this point, it is implemented as a beta version, so its capabilities are limited compared to the previous studio.

I believe there will be many cases where things don’t work smoothly.

However, I plan to gradually improve it and increase what it can do, so please be patient.

Uploading Models

To upload models from a PC, simply upload a folder containing the PMX file and texture files.

Uploading models from a smartphone requires an extra step. Here are the instructions:

1. Upload the folder containing the PMX file from your PC.
2. Download the BPMX file.
3. Transfer the downloaded BPMX file to your smartphone.
4. Upload the BPMX file from your smartphone.

Think of the BPMX file as a specially optimized PMX file for use with Babylon.

A PMX to BPMX Converter is also available, so feel free to use it to create BPMX files.

Displaying Models

Once a model has been uploaded, it can be selected from the list, just like in the previous studio.

You can choose your favorite model from the list and display it in the studio.

Motion Settings

The VMD files you have uploaded to the previous studio will be shared.

Just like before, you can apply motion to models using the same steps.

Once the motion is applied, playback and pause controllers will appear at the bottom of the screen.

Setting Motion for Camera

By setting the motion target to "Camera", you can apply VMD for the camera.

The application method is the same as when applying to a model.

Setting Pose

The upload status of VPD files is shared with the previous studio.

As with the previous studio, you can apply poses to the model with the same operation.

Add Audio to Studio

You can upload MP3 files and apply the audio to your studio.

Once an MP3 file is uploaded, it will be saved in the browser, so you can select it from the list without having to upload it again.

Morph Manipulation

As with the previous studio, you can manipulate morphs using sliders.

Material Transparency Adjustment

As with the previous studio, you can adjust material transparency using sliders.

Enabling/Disabling Studio Physics

Physics is enabled by default, but if you don’t need it, you can disable it.

Currently in Beta Testing

Many features are still in the testing phase, so things may not work as expected in many cases.

I plan to continue development as time allows and will update DollRoom regularly!