Merge pull request #22 from memelotsqui/main

Add Debug Mode
M3-org · Oct 3, 2023 · 154c2f3 · 154c2f3
2 parents a478910 + b20f666
commit 154c2f3
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 1 deletion.
diff --git a/src/components/Selector.jsx b/src/components/Selector.jsx
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from "react"
 import * as THREE from "three"
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
-import { VRMLoaderPlugin } from "@pixiv/three-vrm"
+import { MToonMaterial, VRMLoaderPlugin } from "@pixiv/three-vrm"
 import cancel from "../../public/ui/selector/cancel.png"
 import { addModelData, disposeVRM } from "../library/utils"
 import { computeBoundsTree, disposeBoundsTree, acceleratedRaycast, SAH } from 'three-mesh-bvh';
@@ -42,6 +42,7 @@ export default function Selector({confirmDialog, templateInfo, animationManager,
     removeOption,
     saveUserSelection,
     setIsChangingWholeAvatar,
+    debugMode
   } = useContext(SceneContext)
   const {
     playSound
@@ -523,9 +524,50 @@ export default function Selector({confirmDialog, templateInfo, animationManager,
         // basic setup
         child.frustumCulled = false
         if (child.isMesh) {
+
+          // XXX Setup MToonMaterial for shader
+
+          // Set Wireframe material with random colors for each material the object has
+          child.origMat = child.material;
+
+          const getRandomColor = ()  => {
+            const minRGBValue = 0.1; // Minimum RGB value to ensure colorful colors
+            const r = minRGBValue + Math.random() * (1 - minRGBValue);
+            const g = minRGBValue + Math.random() * (1 - minRGBValue);
+            const b = minRGBValue + Math.random() * (1 - minRGBValue);
+            return new THREE.Color(r, g, b);
+          }
+
+          const debugMat = new THREE.MeshBasicMaterial( {
+						color: getRandomColor(),
+						wireframe: true,
+            wireframeLinewidth:0.2
+					} );
+
+          const origMat = child.material;
+          child.setDebugMode = (debug) => { 
+            if (debug){
+              if (child.material.length){
+                child.material[0] = debugMat;
+                child.material[1] = debugMat;
+              }
+              else{
+                child.material = debugMat;
+              }
+            }
+            else{
+              child.material = origMat;
+            }
+          }
+
+          if (debugMode){
+            child.setDebugMode(true);
+          }
           if (child.material.length){
             effectManager.setCustomShader(child.material[0]);
             effectManager.setCustomShader(child.material[1]);
+
+
           }
           else{
             effectManager.setCustomShader(child.material);

diff --git a/src/context/SceneContext.jsx b/src/context/SceneContext.jsx
@@ -56,10 +56,25 @@ export const SceneProvider = (props) => {
 
   const [isChangingWholeAvatar, setIsChangingWholeAvatar] = useState(false)
 
+  const [debugMode, setDebugMode] = useState(false);
+
   const setAvatar = (state) => {
     _setAvatar(state)
   }
 
+  const toggleDebugMNode = (isDebug) => {
+    if (isDebug == null)
+      isDebug = !debugMode;
+
+    setDebugMode(isDebug);
+    scene.traverse((child) => {
+      if (child.isMesh) {
+        if (child.setDebugMode){
+          child.setDebugMode(isDebug);
+        }
+      }
+    });
+  }
   const loadAvatar = (avatarData) =>{
     const data = getOptionsFromAvatarData(avatarData,manifest)
     if (data != null){
@@ -203,6 +218,9 @@ export const SceneProvider = (props) => {
         saveAvatarToLocalStorage,
         loadAvatarFromLocalStorage,
 
+        debugMode,
+        toggleDebugMNode,
+
         setCurrentOptions,
         setSelectedOptions,
         getRandomCharacter,

diff --git a/src/library/effectManager.js b/src/library/effectManager.js
@@ -20,6 +20,7 @@ import {
   transitionEffectTypeNumber,
 
 } from "./constants.js";
+import { MToonMaterial } from "@pixiv/three-vrm";
 
 
 const textureLoader = new THREE.TextureLoader()

diff --git a/src/pages/Appearance.jsx b/src/pages/Appearance.jsx
@@ -21,6 +21,7 @@ function Appearance({
     getRandomCharacter,
     isChangingWholeAvatar,
     setIsChangingWholeAvatar,
+    toggleDebugMNode
   } = React.useContext(SceneContext)
 
   const { playSound } = React.useContext(SoundContext)
@@ -30,6 +31,7 @@ function Appearance({
     resetAvatar()
     setViewMode(ViewMode.CREATE)
   }
+
 
   const next = () => {
     !isMute && playSound('backNextButton');
@@ -43,6 +45,10 @@ function Appearance({
     }
   }
 
+  const debugMode = () =>{
+    toggleDebugMNode()
+  }
+
   useEffect(() => {
     const setIsChangingWholeAvatarFalse = () => setIsChangingWholeAvatar(false)
 
@@ -104,6 +110,13 @@ function Appearance({
           className={styles.buttonCenter}
           onClick={randomize}
         />
+        <CustomButton
+          theme="light"
+          text={"debug"}
+          size={14}
+          className={styles.buttonCenter}
+          onClick={debugMode}
+        />
       </div>
     </div>
   )