mirror of
https://github.com/Nighthawk42/mmd-to-vrm.git
synced 2026-08-30 00:30:16 +00:00
465 lines
17 KiB
HTML
465 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Converting MMD Models to VRM Models</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<style>
|
||
/* Reset */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
font-family: 'Helvetica Neue', sans-serif;
|
||
background-color: #f5f7fa;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
padding-bottom: 80px;
|
||
}
|
||
/* Header */
|
||
header {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
padding: 40px 20px;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
header h1 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 10px;
|
||
}
|
||
header p {
|
||
font-size: 1.2rem;
|
||
}
|
||
/* Navigation */
|
||
nav {
|
||
display: flex;
|
||
justify-content: center;
|
||
background-color: #fff;
|
||
padding: 10px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
nav a {
|
||
margin: 0 15px;
|
||
color: #667eea;
|
||
text-decoration: none;
|
||
font-weight: bold;
|
||
transition: color 0.3s;
|
||
}
|
||
nav a:hover, nav a.active {
|
||
color: #764ba2;
|
||
}
|
||
/* Main Content */
|
||
main {
|
||
max-width: 1200px; /* Expanded width */
|
||
margin: 40px auto; /* Centered */
|
||
padding: 0 40px; /* Extra horizontal padding */
|
||
}
|
||
section {
|
||
background-color: #fff;
|
||
margin-bottom: 30px;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||
text-align: center; /* Center all text */
|
||
}
|
||
section h2 {
|
||
margin-bottom: 10px;
|
||
color: #764ba2;
|
||
}
|
||
section h3 {
|
||
margin: 20px 0 10px;
|
||
color: #3e4a5e;
|
||
}
|
||
section p, section li {
|
||
margin-bottom: 10px;
|
||
font-size: 1.0rem;
|
||
text-align: center;
|
||
}
|
||
section img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
margin: 10px auto;
|
||
border-radius: 4px;
|
||
display: block;
|
||
}
|
||
ul, ol {
|
||
margin: 20px auto;
|
||
padding: 0;
|
||
list-style-position: inside;
|
||
text-align: center;
|
||
}
|
||
/* Side-by-side download options */
|
||
.download-options {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
margin-top: 10px;
|
||
justify-content: center;
|
||
}
|
||
.download-options a {
|
||
flex: 1 1 45%;
|
||
background: #eef2fb;
|
||
padding: 10px;
|
||
text-align: center;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
text-decoration: none;
|
||
color: #667eea;
|
||
transition: background 0.3s, border-color 0.3s;
|
||
}
|
||
.download-options a:hover {
|
||
background: #dce4fa;
|
||
border-color: #667eea;
|
||
}
|
||
/* Toggle Video */
|
||
.video-container {
|
||
margin: 20px 0;
|
||
}
|
||
.toggle-btn {
|
||
background-color: #667eea;
|
||
color: #fff;
|
||
border: none;
|
||
padding: 10px 15px;
|
||
cursor: pointer;
|
||
border-radius: 5px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.toggle-btn:hover {
|
||
background-color: #764ba2;
|
||
}
|
||
.video-content {
|
||
display: none;
|
||
transition: max-height 0.3s ease;
|
||
}
|
||
/* Footer */
|
||
footer {
|
||
text-align: center;
|
||
padding: 20px;
|
||
background-color: #fff;
|
||
border-top: 1px solid #eaeaea;
|
||
font-size: 0.9rem;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<h1>Converting MMD Models to VRM Models</h1>
|
||
<p>Your step-by-step guide to model conversion</p>
|
||
</header>
|
||
|
||
<nav id="main-nav">
|
||
<a href="#introduction" class="active">Introduction</a>
|
||
<a href="#requirements">What You Need</a>
|
||
<a href="#conversion-process">Conversion Process</a>
|
||
<a href="#additional-resources">Additional Resources</a>
|
||
<a href="#conclusion">Conclusion</a>
|
||
</nav>
|
||
|
||
<main>
|
||
<!-- Introduction Section -->
|
||
<section id="introduction">
|
||
<h2>Introduction</h2>
|
||
<p>
|
||
This guide will hopefully help people learn the basics of converting MMD models (.pmx) into VRM models for use with Desktop Mate.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- Requirements Section -->
|
||
<section id="requirements">
|
||
<h2>What You Need</h2>
|
||
<ul>
|
||
<li>
|
||
<strong>Blender</strong> (You only need one of the options below)
|
||
<div class="download-options">
|
||
<a href="https://store.steampowered.com/app/365670/Blender/" target="_blank">Steam Download</a>
|
||
<a href="https://download.blender.org/release/Blender4.2/" target="_blank">
|
||
Blender Releases Index
|
||
</a>
|
||
</div>
|
||
<p>
|
||
Note: If using the Steam version, once installed go to properties and select the Blender 4.2 – Stable – LTS Beta.
|
||
<br>
|
||
Otherwise, download and install the 4.2.5 MSI file.
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<strong>Unofficial Cats Blender Plugin</strong><br>
|
||
<a href="https://github.com/teamneoneko/Cats-Blender-Plugin-Unofficial-" target="_blank">
|
||
Github Download
|
||
</a>
|
||
<p>
|
||
Follow the instructions on the page to download and install the plugin in Blender.
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<strong>MMDTools</strong><br>
|
||
<a href="https://extensions.blender.org/add-ons/mmd-tools/" target="_blank">
|
||
Blender.org Download
|
||
</a>
|
||
<p>
|
||
Download and install as a plugin for Blender.
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<strong>Material Combiner Addon</strong><br>
|
||
<a href="https://github.com/Grim-es/material-combiner-addon/" target="_blank">
|
||
Github Download
|
||
</a>
|
||
<p>
|
||
Download and install as a plugin for Blender.
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<strong>Unity</strong><br>
|
||
<a href="https://unity.com/download" target="_blank">
|
||
Unity Hub Download
|
||
</a>
|
||
<p>
|
||
Open Unity Hub, go to installs, click install editor, and install the Unity 2022.3.55f1 editor.
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<strong>UniVRM</strong><br>
|
||
<a href="https://github.com/vrm-c/UniVRM/releases" target="_blank">
|
||
Github Download
|
||
</a>
|
||
<p>
|
||
Download the latest 0.x Import/Export unitypackage. Once you've created a Unity project, drag and drop the unitypackage into the project to install the plugin.
|
||
</p>
|
||
</li>
|
||
</ul>
|
||
<p>Reminder: Make sure to save your progress so you don't lose it. :D</p>
|
||
</section>
|
||
|
||
<!-- Conversion Process Section -->
|
||
<section id="conversion-process">
|
||
<h2>Conversion Process</h2>
|
||
|
||
<!-- Step 1 -->
|
||
<h3>1. Open Blender</h3>
|
||
<p>
|
||
Make sure to delete the default cube! It's the most important step. :P
|
||
</p>
|
||
<img src="images/image6.png" alt="Blender Interface">
|
||
<p>
|
||
Now that Blender is open, locate the Cats Blender Plugin tools by clicking the small arrow in the side of the hierarchy area (beneath Options).
|
||
</p>
|
||
|
||
<!-- Step 2 -->
|
||
<h3>2. Import MMD Model</h3>
|
||
<p>
|
||
Click the area circled in red, or simple hit N on your keyboard.
|
||
<br>
|
||
With CATS selected on the toolbar, click "Import Model" and choose your .pmx file.
|
||
</p>
|
||
<img src="images/image29.png" alt="Import Model">
|
||
<img src="images/image9.png" alt="Model in Blender">
|
||
<p>
|
||
Now the model is imported into Blender!
|
||
</p>
|
||
|
||
<!-- Step 3 -->
|
||
<h3>3. Verify Textures</h3>
|
||
<p>
|
||
Check if the textures imported correctly by clicking on the right two "balls" (render mode buttons) in the top right area of Blender. Give some time for shaders to compile.
|
||
</p>
|
||
<img src="images/image11.png" alt="View Textures">
|
||
<p>
|
||
If everything looks good, press the "Fix MMD Model" button found under the MMD Options section of the Cats Blender Plugin.
|
||
</p>
|
||
<img src="images/image7.png" alt="Fix MMD Model">
|
||
|
||
<!-- Step 4 -->
|
||
<h3>4. Generate Texture Atlas</h3>
|
||
<p>
|
||
Generate a material list by going to the Optimizations section of the Cats Blender Plugin and clicking "Generate Material List."
|
||
</p>
|
||
<img src="images/image19.png" alt="Generate Material List">
|
||
<p>
|
||
Select the files you want to use for the atlas. (Note: Some models may require you to deselect certain materials if they do not work well with an atlas.) Once ready, click "Save Atlas To..." and save it in a designated folder.
|
||
</p>
|
||
<img src="images/image15.png" alt="Select Materials">
|
||
|
||
<!-- Step 5 -->
|
||
<h3>5. Export Model</h3>
|
||
<p>
|
||
Once the texture atlas is generated and the model looks good, go to "Quick Access" in the Cats Blender Plugin and click "Export." Ignore any warnings and export the <code>.fbx</code> file. It’s best to save this in the same folder as your texture atlas.
|
||
</p>
|
||
<img src="images/image20.png" alt="Export Model">
|
||
<img src="images/image26.png" alt="Export Confirmation">
|
||
<img src="images/image4.png" alt="Export FBX">
|
||
|
||
<!-- Step 6 -->
|
||
<h3>6. Unity Setup</h3>
|
||
<p>
|
||
Open Unity Hub and create a new project using the appropriate template.
|
||
</p>
|
||
<img src="images/image28.png" alt="Create Unity Project">
|
||
<p>
|
||
Once the project is created and opened, drag the UniVRM unitypackage into the project. If installed correctly, you’ll see two new tabs on the top bar.
|
||
</p>
|
||
<img src="images/image1.png" alt="UniVRM Tabs">
|
||
|
||
<!-- Step 7 -->
|
||
<h3>7. Organize Project Assets</h3>
|
||
<p>
|
||
Create folders within your <code>Assets</code> directory to organize your files (for example, <strong>Assets > [File Type] > [Model Name] > Materials and Textures</strong>). This keeps your project tidy, especially if you convert many models.
|
||
</p>
|
||
<img src="images/image14.png" alt="Organize Assets">
|
||
|
||
<!-- Step 8 -->
|
||
<h3>8. Import Assets into Unity</h3>
|
||
<p>
|
||
Drag the exported <code>.fbx</code> file and the texture atlas (or original textures if atlas generation failed) into the corresponding folder. Then, right-click in the character folder, select <code>Create > Material</code>, and configure the material.
|
||
</p>
|
||
<img src="images/image27.png" alt="Create Material">
|
||
<p>
|
||
Rename the material (e.g., after the texture atlas), change the shader type to <code>VRM/MToon</code>, and set the rendering mode to <code>Cutout</code>.
|
||
</p>
|
||
<img src="images/image25.png" alt="Set Shader">
|
||
<img src="images/image22.png" alt="Set Rendering Mode">
|
||
<p>
|
||
Drag the texture atlas onto the appropriate texture slots in the material, then apply it to the <code>.fbx</code> file.
|
||
</p>
|
||
<img src="images/image21.png" alt="Apply Texture">
|
||
<img src="images/image13.png" alt="Locked Material Example">
|
||
<p>
|
||
Finally, drag the <code>.fbx</code> file into the hierarchy to see your model in the scene.
|
||
</p>
|
||
<img src="images/image18.png" alt="Model in Unity">
|
||
<img src="images/image12.png" alt="Final Model">
|
||
|
||
<!-- Step 9 -->
|
||
<h3>9. Configure Rigging</h3>
|
||
<p>
|
||
Select the <code>.fbx</code> file in Unity, go to the Rig tab, choose <code>Humanoid</code> as the animation type, and click Apply.
|
||
</p>
|
||
<img src="images/image2.png" alt="Configure Rig">
|
||
<p>
|
||
Click "Configure" (unlock the window by clicking the lock icon if needed). Then, under the Head settings, select "None" for the Jaw bone (unless your model has a proper jaw bone). Finally, click "Apply" and "Done."
|
||
</p>
|
||
<img src="images/image23.png" alt="Configure Jaw Bone">
|
||
|
||
<!-- Step 10 -->
|
||
<h3>10. Export VRM Model</h3>
|
||
<p>
|
||
In Unity, select your model, then click on the VRM 0.x tab and click "VRM 0.x Freeze T-Pose." After that, click "Export VRM 0.x."
|
||
</p>
|
||
<p>
|
||
It is recommended to create a temporary folder inside your Unity project to save the VRM (or you can drag and drop it from your file explorer into the project).
|
||
</p>
|
||
<img src="images/image30.png" alt="VRM Freeze T-Pose">
|
||
<img src="images/image5.png" alt="Export VRM">
|
||
|
||
<!-- Additional Unity steps -->
|
||
<h3>Additional Unity Steps</h3>
|
||
<p>
|
||
After importing the VRM into Unity, the project folder should contain the VRM files (for example, a .Prefab file). Drag the .Prefab file (which looks like a 3D model) into your hierarchy and hide the original .fbx file.
|
||
</p>
|
||
<img src="images/image8.png" alt="VRM Project Folder">
|
||
<p>
|
||
Next, add spring bones, colliders, and configure blendshapes to improve the model’s appearance. These steps are optional but highly recommended – spring bones add hair/clothes physics, colliders prevent clipping, and blendshapes enable facial expressions.
|
||
</p>
|
||
<p>
|
||
For details on setting these up, see the video links below.
|
||
</p>
|
||
|
||
<!-- Video Tutorials -->
|
||
<p>
|
||
<a class="toggle-btn" onclick="toggleVideo('video1')" style="display:inline-block;">HOW TO CONVERT FBX FROM BLENDER TO VRM</a>
|
||
</p>
|
||
<div id="video1" class="video-content">
|
||
<iframe width="560" height="315" src="https://www.youtube.com/embed/sSBFUj-D0U4?start=322" frameborder="0" allowfullscreen></iframe>
|
||
</div>
|
||
<p>
|
||
<a class="toggle-btn" onclick="toggleVideo('video2')" style="display:inline-block;">ASK LIZZY - HOW TO PUT COLLIDERS TO A VRM AND SPRING BONES</a>
|
||
</p>
|
||
<div id="video2" class="video-content">
|
||
<iframe width="560" height="315" src="https://www.youtube.com/embed/3c60Uu5cawI?start=0" frameborder="0" allowfullscreen></iframe>
|
||
</div>
|
||
<p>
|
||
Once spring bones, colliders, and blendshapes are set up, export your finished <code>.vrm</code> model. This will be your final VRM that can be used in any compatible application.
|
||
</p>
|
||
<img src="images/image10.png" alt="Final VRM Preview">
|
||
</section>
|
||
|
||
<!-- Additional Resources Section -->
|
||
<section id="additional-resources">
|
||
<h2>Additional Resources</h2>
|
||
<p>
|
||
Below are some helpful video tutorials:
|
||
</p>
|
||
<ul>
|
||
<li>
|
||
<a href="https://youtu.be/sSBFUj-D0U4?si=opG0IMFe91NrJ1W1&t=322" target="_blank">
|
||
HOW TO CONVERT FBX FROM BLENDER TO VRM
|
||
</a>
|
||
- Starts at 5:22; covers spring bones, blendshapes, and earlier Unity setup.
|
||
</li>
|
||
<li>
|
||
<a href="https://youtu.be/3c60Uu5cawI?si=IjZ7ujZ4rlcMV-_5" target="_blank">
|
||
ASK LIZZY - HOW TO PUT COLLIDERS TO A VRM AND SPRING BONES
|
||
</a>
|
||
- Explains how to configure spring bones and colliders.
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- Conclusion Section -->
|
||
<section id="conclusion">
|
||
<h2>Conclusion</h2>
|
||
<p>
|
||
Thank you for reading this guide! Most models should work with this method. Some models have unconventional file structures for textures, which may cause the generated atlas to be incorrect. In those cases, you may need to manually apply textures to numerous materials in Unity.
|
||
</p>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>
|
||
Guide written by QuestionableArachne<br>
|
||
Webguide created by Nighthawk<br>
|
||
Crafted with love for the Desktop Mate Modding Community
|
||
</p>
|
||
<p>
|
||
<a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a>
|
||
</p>
|
||
<p id="copyright"></p>
|
||
</footer>
|
||
|
||
<script>
|
||
// Toggle video functionality
|
||
function toggleVideo(id) {
|
||
var video = document.getElementById(id);
|
||
video.style.display = (video.style.display === "block") ? "none" : "block";
|
||
}
|
||
// Set dynamic copyright
|
||
document.getElementById('copyright').textContent = `© ${new Date().getFullYear()}`;
|
||
|
||
// Active nav link highlighting on scroll
|
||
const sections = document.querySelectorAll('section');
|
||
const navLinks = document.querySelectorAll('nav a');
|
||
window.addEventListener('scroll', () => {
|
||
let current = '';
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop - 100;
|
||
if (pageYOffset >= sectionTop) {
|
||
current = section.getAttribute('id');
|
||
}
|
||
});
|
||
navLinks.forEach(link => {
|
||
link.classList.remove('active');
|
||
if (link.getAttribute('href') === '#' + current) {
|
||
link.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|