基於Babylon.js的WebMMD模型檢視器已新增

投稿日: 2024/09/10

model: YYB Hatsune Miku_10th

作為DollRoom的另一個MMD工作室,我們新增了「Studio Babylon」。

在本文中,我將介紹這個「Studio Babylon」。

什麼是Babylon?

工作室名稱中的Babylon指的是Babylon.js,這是一種可以在Web瀏覽器中顯示和操作3D模型的技術。

這裡不涉及技術細節,有興趣的朋友可以查看官方網站

Babylon-MMD

之前的工作室是使用Three.js開發的,Three.js也是一種在Web瀏覽器中處理3D的技術。

但是,當處理較大的MMD模型文件時,老款iPhone會出現崩潰現象。作為暫時的改善措施,我們通過降低紋理圖片文件的解析度或刪減morph數據來減輕文件負擔。

然而,尋找長期解決方案時,我發現了Babylon.js

使用Babylon.js時,即使是較大的文件也能快速顯示,而且無需採用上述對策,老款iPhone也能正常加載。

這讓我覺得這正是我理想中的Web MMD模型檢視器,於是決定增加這個新工作室。

在Babylon工作室中可以做什麼?

目前,該工作室以β測試版形式實施,因此與之前的工作室相比,功能有所限制。

另外,可能會有許多無法正常運行的情況。

但我們會逐步改進,並增加更多功能,希望大家耐心等待。

上傳模型

從PC上傳模型時,只需將包含PMX文件和紋理文件的文件夾直接上傳即可。

從智能手機上傳模型時,需要一些額外步驟。具體步驟如下:

  1. 從PC上傳包含PMX文件的文件夾
  2. 下載BPMX文件
  3. 將下載的BPMX文件傳送至智能手機
  4. 從智能手機上傳BPMX文件

BPMX文件是Babylon PMX,這是一種為Babylon操作優化的特殊PMX文件。

我們也提供了PMX to BPMX Converter的官方轉換工具,使用它生成BPMX文件也完全沒問題。

顯示模型

與之前的工作室一樣,已上傳的模型可以從列表中選擇。

選擇你喜歡的模型後,它將顯示在工作室中。

注意:目前僅支持測試顯示單個模型。請等待後續支持多個模型的功能實現。

設置動作

之前上傳的VMD文件在此工作室中依然可以使用。

同樣,可以像以前一樣將動作應用於模型。

動作應用後,播放和停止控制器將顯示在屏幕底部。

設定攝影機的動作

通過將動作應用對象設為「攝影機」,可以應用攝影機用的VMD。

應用方法與模型相同。

設定姿勢

VPD文件的上傳狀態與之前的工作室共享。

與之前的工作室相同,您可以通過相同的操作為模型設置姿勢。

添加音頻到工作室

您可以上傳MP3文件並將音頻應用到工作室。

上傳一次MP3文件後,它將保存在瀏覽器中,以後無需重新上傳,您可以從列表中選擇它。

操作morph

與之前的工作室一樣,可以通過滑塊調整morph。

調整材質透明度

與之前的工作室一樣,材質透明度可以通過滑塊調整。

啟用或禁用物理運算

默認情況下,物理運算是啟用的,但如果不需要,可以禁用。

目前處於β測試階段

目前,許多功能處於測試階段,可能會有很多無法正常運行的情況。

未來會繼續開發,並隨時更新DollRoom!