diff --git a/images/image1.png b/images/image1.png new file mode 100644 index 0000000..3d7b1b3 Binary files /dev/null and b/images/image1.png differ diff --git a/images/image10.png b/images/image10.png new file mode 100644 index 0000000..fce1727 Binary files /dev/null and b/images/image10.png differ diff --git a/images/image11.png b/images/image11.png new file mode 100644 index 0000000..09852b4 Binary files /dev/null and b/images/image11.png differ diff --git a/images/image12.png b/images/image12.png new file mode 100644 index 0000000..bc94329 Binary files /dev/null and b/images/image12.png differ diff --git a/images/image13.png b/images/image13.png new file mode 100644 index 0000000..da2034a Binary files /dev/null and b/images/image13.png differ diff --git a/images/image14.png b/images/image14.png new file mode 100644 index 0000000..600942e Binary files /dev/null and b/images/image14.png differ diff --git a/images/image15.png b/images/image15.png new file mode 100644 index 0000000..f942c46 Binary files /dev/null and b/images/image15.png differ diff --git a/images/image16.png b/images/image16.png new file mode 100644 index 0000000..55e9de0 Binary files /dev/null and b/images/image16.png differ diff --git a/images/image17.png b/images/image17.png new file mode 100644 index 0000000..1a81679 Binary files /dev/null and b/images/image17.png differ diff --git a/images/image18.png b/images/image18.png new file mode 100644 index 0000000..ff78f6e Binary files /dev/null and b/images/image18.png differ diff --git a/images/image19.png b/images/image19.png new file mode 100644 index 0000000..5f340ea Binary files /dev/null and b/images/image19.png differ diff --git a/images/image2.png b/images/image2.png new file mode 100644 index 0000000..5195674 Binary files /dev/null and b/images/image2.png differ diff --git a/images/image20.png b/images/image20.png new file mode 100644 index 0000000..40f8146 Binary files /dev/null and b/images/image20.png differ diff --git a/images/image21.png b/images/image21.png new file mode 100644 index 0000000..3e9a124 Binary files /dev/null and b/images/image21.png differ diff --git a/images/image22.png b/images/image22.png new file mode 100644 index 0000000..8546973 Binary files /dev/null and b/images/image22.png differ diff --git a/images/image23.png b/images/image23.png new file mode 100644 index 0000000..3d964ee Binary files /dev/null and b/images/image23.png differ diff --git a/images/image24.png b/images/image24.png new file mode 100644 index 0000000..65cbaa1 Binary files /dev/null and b/images/image24.png differ diff --git a/images/image25.png b/images/image25.png new file mode 100644 index 0000000..37d562b Binary files /dev/null and b/images/image25.png differ diff --git a/images/image26.png b/images/image26.png new file mode 100644 index 0000000..05a67b5 Binary files /dev/null and b/images/image26.png differ diff --git a/images/image27.png b/images/image27.png new file mode 100644 index 0000000..189246c Binary files /dev/null and b/images/image27.png differ diff --git a/images/image28.png b/images/image28.png new file mode 100644 index 0000000..1683781 Binary files /dev/null and b/images/image28.png differ diff --git a/images/image29.png b/images/image29.png new file mode 100644 index 0000000..c02247f Binary files /dev/null and b/images/image29.png differ diff --git a/images/image3.png b/images/image3.png new file mode 100644 index 0000000..ce016e6 Binary files /dev/null and b/images/image3.png differ diff --git a/images/image30.png b/images/image30.png new file mode 100644 index 0000000..915911f Binary files /dev/null and b/images/image30.png differ diff --git a/images/image4.png b/images/image4.png new file mode 100644 index 0000000..e20768b Binary files /dev/null and b/images/image4.png differ diff --git a/images/image5.png b/images/image5.png new file mode 100644 index 0000000..109de38 Binary files /dev/null and b/images/image5.png differ diff --git a/images/image6.png b/images/image6.png new file mode 100644 index 0000000..e98f6d9 Binary files /dev/null and b/images/image6.png differ diff --git a/images/image7.png b/images/image7.png new file mode 100644 index 0000000..22bb99b Binary files /dev/null and b/images/image7.png differ diff --git a/images/image8.png b/images/image8.png new file mode 100644 index 0000000..fa6c323 Binary files /dev/null and b/images/image8.png differ diff --git a/images/image9.png b/images/image9.png new file mode 100644 index 0000000..703f7c1 Binary files /dev/null and b/images/image9.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..174f85d --- /dev/null +++ b/index.html @@ -0,0 +1,240 @@ + + + + + + Converting MMD (.pmx) to VRM Models Guide + + + + + + +
+
+

Converting MMD (.pmx) to VRM Models

+

This guide will help you learn the basics of converting MMD models (.pmx) into VRM models.

+ +
+ + +
+

What You Need

+ +
+ Reminder: Make sure to save your progress so you don’t lose any work. +
+
+ + +
+

Conversion Process in Blender

+ +
+

1. Open Blender and Prepare the Scene

+

Open Blender and delete the default cube. This is an important step!

+ Blender open window +
+ +
+

2. Open the Cats Blender Plugin Tools

+

Click on the small arrow on the side of the hierarchy area (below options) to open the Cats Plugin tools.

+
+ +
+

3. Import the MMD Model (.pmx)

+

Select the CATS toolbar, click Import Model, and choose the desired MMD model.

+ Import MMD Model +
+ +
+

4. Check Textures

+

Click the two sphere icons in the top-right area to verify that textures have imported correctly. Allow time for shaders to compile.

+
+ +
+

5. Fix the MMD Model

+

If the model appears correct, press the Fix MMD Model button under the MMD Options section.

+ Fix MMD Model +
+ +
+

6. Generate a Texture Atlas

+

+ To simplify material application in Unity, generate a texture atlas: +

+
    +
  1. Go to the Optimizations section in the Cats Blender Plugin.
    2. +
  2. Click Generate Material List.
    3. +
  3. Select the files to use (you may need to deselect some if issues occur).
    4. +
  4. Click Save Atlas and choose a dedicated folder.
    5. +
+ Generate Texture Atlas +
+ +
+

7. Export the Model

+

+ Go to Quick Access in the Cats Blender Plugin and click Export. Ignore any warnings (click Continue to Export) and save the file as an .fbx in the same folder as your texture atlas. +

+ Export FBX +
+
+ + +
+

Conversion Process in Unity

+ +
+

1. Set Up Your Unity Project

+

Open Unity Hub and create (or open) a project using an appropriate template.

+

+ Once inside the project, drag the UniVRM unitypackage into the project. If installed correctly, two new tabs will appear on the top bar. +

+ 
+Assets/
+└── [file type]/
+    └── [model name]/
+        ├── Materials
+        └── Textures
+
+
+ +
+

2. Import Assets

+

+ Drag your exported .fbx file and the texture atlas (or individual textures) into your model’s folder. Then create a new material (right-click > Create > Material), rename it, set its shader to VRM/MToon, and change its rendering mode to Cutout. +

+
+ +
+

3. Apply Materials to the FBX

+

+ Select the .fbx file, navigate to its materials section, and drag the texture atlas onto its material slot. (Tip: Click the lock icon to keep the .fbx file selected.) +

+
+ +
+

4. Configure the Rig

+

+ Select the .fbx file, go to the Rig tab, choose Humanoid as the animation type, and click Apply. +

+

+ Then click Configure, unlock the window if necessary, and set the Jaw bone to None (unless your model has a dedicated jaw bone). +

+ Configure Rig +
+ +
+

5. Freeze T-Pose and Export VRM

+

+ Select your model in the hierarchy, go to the VRM0 tab, and click VRM 0.x Freeze T-Pose. Then click Export VRM 0.x. +

+

+ Save the VRM in a temporary folder within your Unity project. If you save it externally, drag the VRM file into the project. Once imported, the folder will contain a .Prefab along with its assets. Drag the .Prefab into your scene and hide the original .fbx file. +

+
+
+ + +
+

Optional: Adding Spring Bones, Colliders, and Blendshapes

+

+ These additional features add realism: +

+ +

+ For detailed instructions, view the video guides below. +

+ + + +
+ +
+ + + +
+ +
+ +

+ After adding the optional features, select your model and click Export VRM to generate the final VRM model. +

+
+ + +
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..e0b952d --- /dev/null +++ b/script.js @@ -0,0 +1,21 @@ +// Function to toggle the display of the video container +function toggleVideo(containerId, btnId) { + var container = document.getElementById(containerId); + var btn = document.getElementById(btnId); + if (container.style.display === "none" || container.style.display === "") { + container.style.display = "block"; + btn.textContent = "Hide Video"; + } else { + container.style.display = "none"; + btn.textContent = "Show Video"; + } + } + + // Set dynamic copyright date + document.addEventListener("DOMContentLoaded", function () { + var currentYear = new Date().getFullYear(); + var copyrightText = + "© " + currentYear + " Your Name or Company. All rights reserved."; + document.getElementById("copyright").textContent = copyrightText; + }); + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..b43251d --- /dev/null +++ b/style.css @@ -0,0 +1,104 @@ +/* Reset some elements */ +body, h1, h2, h3, p, ul, ol, pre { + margin: 0; + padding: 0; + } + body { + font-family: 'Open Sans', sans-serif; + line-height: 1.6; + background-color: #f8f9fa; + color: #333; + padding: 20px; + } + a { + color: #007bff; + text-decoration: none; + } + a:hover { + text-decoration: underline; + } + .container { + max-width: 900px; + margin: 0 auto; + background-color: #fff; + padding: 30px; + border: 1px solid #e5e5e5; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + header { + border-bottom: 1px solid #e5e5e5; + margin-bottom: 20px; + padding-bottom: 10px; + } + header h1 { + font-size: 2.2em; + margin-bottom: 5px; + } + nav { + margin-top: 10px; + font-size: 0.9em; + } + nav a { + margin-right: 15px; + } + h2 { + font-size: 1.8em; + margin: 20px 0 10px; + } + h3 { + font-size: 1.4em; + margin: 15px 0 8px; + } + p, li { + margin-bottom: 10px; + } + ul, ol { + margin-left: 20px; + margin-bottom: 15px; + } + pre { + background: #f1f1f1; + padding: 10px; + overflow-x: auto; + } + .reminder { + border-left: 4px solid #ffc107; + background: #fff3cd; + padding: 10px 15px; + margin: 20px 0; + } + .screenshot { + display: block; + margin: 10px 0; + max-width: 100%; + border: 1px solid #ddd; + padding: 5px; + background: #fafafa; + } + .step { + margin-bottom: 20px; + } + footer { + margin-top: 30px; + border-top: 1px solid #e5e5e5; + padding-top: 15px; + font-size: 0.9em; + } + + /* Video container styles */ + .video-container { + display: none; /* hidden by default */ + margin: 10px 0; + } + .toggle-btn { + background-color: #007bff; + color: #fff; + border: none; + padding: 8px 12px; + cursor: pointer; + font-size: 0.9em; + } + .toggle-btn:hover { + background-color: #0056b3; + } + \ No newline at end of file