Zenn
📖

3Dモデリングソフト「Murairo」を公開しました

2025/02/11に公開

3Dモデリングソフト「Murairo」をMicrosoft Storeにて公開しました。使いたい方は下記のページからダウンロードしてください。

https://apps.microsoft.com/detail/9n23jw7v6tfw?hl=ja-JP&gl=JP

Murairoは高速のモデリングを可能とし、下記のようなモデルを3分で作ることができます。

ここでは技術的な事柄について執筆し、それ以外の基本的なことはNoteにて公開するとします。

https://note.com/murairo/m/mf9ff3a5c191f

名前の由来

単にSNSの一つであるMisskey.io管理人である村上さんにこれまたMisskey開発者であるしゅいろ氏(通称:しゅいろママ)の名前の一部をくっつけただけです。

https://misskey.io/

https://ja.wikipedia.org/wiki/Misskey

使用したアルゴリズム

ざっくり言うと
「Signed Distance Field(SDF)を使用したモデリングソフト。SDFのメッシュ化にはDual Contouring法を使用し、テクスチャリングにはTri Planar Texture Mappingを使用」というものです。

3DCGプログラムの開発者やゲーム開発者でない限り聞きなれない単語ばかりだと思いますので、簡潔にですが「Signed Distance Field」、「Dual Countouring」、「Tri Planar Texture Mapping」と一つ一つ解説し、同時にQiitaの記事など関連した技術解説のページのURLを紹介していきます。後で更なる詳細はZenn内で説明しようと思います。

Signed Distance Field(SDF)

簡潔に述べると従来のポリゴンに代わる新しい3DCGのデータ構造です。
「物体の表面からどれだけ離れているか」という距離を表す浮動点小数型の3次元配列を使って3DCGを表現します。
マインクラフトの発展形みたいな方法で、立方体だけでなく球体や四角推など、様々な種類の立体も使えるようになったと思えばイメージしやすいです。
これを使うとデータ量を多く使う代わりに3Dのブーリアン演算、つまり「物体同士を合体させる」「物体を削る」という表現が簡単にできます。

このSDFは様々に応用が利く技術で他にもフォントで作られた文字を綺麗に表示する、3Dモデルをセルルックに描画する際に使うなどの目的で使用されています。

関連した記事

https://zenn.dev/posita33/books/ue5_shader_book_001/viewer/chap_0c_01_01_about_sdf

https://qiita.com/uctakeoff/items/387f2271befb81734d18

https://qiita.com/quittardis/items/e470ee6ce9e2db9dea5b

https://note.com/rid_316/n/ne967527e86ff

Dual Contouring法

上で紹介したSDFをポリゴンに変換する方法の一つです。
基本的に現代のGPUはポリゴンを前提としており、そのままの形でSigned Distance Fieldを表示できません。(全くできないというわけではない)
なので、一回SDFをポリゴンに変換してから表示しています。

関連記事

https://www.4gamer.net/games/269/G026934/20170406111/

Tri Planar Texture Mapping

テクスチャを3Dモデルの位置と法線から投影するように貼り付ける方法です。境目なくテクスチャを貼ることができます。

現在のアプリは単色のテクスチャなので、効果はほぼありませんが後々そうではないテクスチャを使用するため、この方法を用いました。

関連記事

https://zenn.dev/reputeless/books/siv3d-documentation/viewer/tutorial-3d-2

https://qiita.com/edo_m18/items/c8995fe91778895c875e

使用したライブラリ

主にBevyとElectronを組み合わせて作りました。他にMaterial UIとNext.jsを
用いています・

Bevy

Rust製のゲームエンジンです。使用するAPIは主にWebGPUとWebGLを用いています。WASMへの変換も出来ます。なので、Electronとの連携が非常にしやすいという利点があります。

Electron

WebブラウザであるChromiumの技術を使ってPCアプリを作るフレームワークです。

Next.js

ReactとNode.jsを用いてウェブサイトのフロントサーバーを作るフレームワークです。Electronの中でGUIを作成する際に個人的にこれが一番使いやすいので採用しました。

Discussion

ログインするとコメントできます