New Features of the Web MMD Model Viewer

A new viewer has been added to DollRoom, a web app for viewing MMD models that supports smartphones.

If you’re not too familiar with MMD but just want to easily display your favorite models and apply motions or poses, this app is designed to be as intuitive as possible.

In a previous article, we introduced the app in general, but this time, let's dive into the new features.

Upload and Display Models

Uploading Models from a PC

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

Upon upload, the files will be automatically converted into a format optimized for the studio (BPMX), and added to the model list.

Once uploaded, the data will be saved in the browser, so you won't need to re-upload the files in the future.

You can select the uploaded model from the list and load it into the studio by clicking the load button.

Uploading Models from a Smartphone

Uploading models from a smartphone is a bit more involved compared to a PC. You will need to create the BPMX file using one of the following two methods:

⚫︎1. Create the BPMX file by accessing DollRoom on your PC

Follow the PC upload instructions to upload the model files. After uploading, there will be a button to download the BPMX file. Click this button to download it.

⚫︎2. Use the official PMX to BPMX Converter

You can also create BPMX files using the official PMX to BPMX Converter.

Uploading BPMX Files from a Smartphone

Send the created BPMX file to your smartphone (using Google Drive or similar). Open DollRoom on your smartphone and upload the BPMX file.

Applying Motion and Pose to Models

How to Apply

You can upload VMD motion files and VPD pose files. Like the model files, these are also saved in the browser, so there's no need to re-upload them later.

Once uploaded, motion and pose files will be selectable from a list. Choose the model or camera you want to apply the motion to and select the motion from the list.

Similarly, poses and audio can also be applied in this manner.

Playing Motions

After applying a motion, a controller will appear at the bottom of the screen. Press the play button to start the motion.

You can also move the slider to skip to a specific scene. The controller can be toggled on and off with a double-click.

Model Controls

Camera Angles, Position, and Rotation

After loading a model, the following icons will appear below the menu button.

Adjust the camera angle.

Move the model's position. For PC, you can move along the Z-axis (forward/backward) using the scroll wheel, while on smartphones, use pinch gestures.

Rotate the model. The visibility of the buttons can be toggled with a double-click.

Morph Controls

Once a model is loaded, its morphs will be displayed in a list. You can adjust the sliders to modify the morph settings.

Adjusting Material Transparency

After loading a model, its materials will be listed. Adjusting the slider will change the transparency. The more you move the slider to the left, the more transparent the model becomes, until it’s completely invisible.

This is a useful feature when you want to hide specific parts of the model.

Studio Settings

Setting a Background Image

You can upload your own image to use as the background in the studio. Feel free to use your favorite images!

Toggle Floor Display

By default, the floor is displayed when a model is loaded. If you don’t need it, you can hide it in the studio settings.