From db9cbfc625a57e8b8a526a94bedb436079f58d97 Mon Sep 17 00:00:00 2001 From: memelotsqui Date: Mon, 13 Nov 2023 23:15:37 -0600 Subject: [PATCH 01/10] extract merge options into new component --- src/components/MergeOptions.jsx | 169 +++++++++++++++++++++++++ src/components/MergeOptions.module.css | 113 +++++++++++++++++ 2 files changed, 282 insertions(+) create mode 100644 src/components/MergeOptions.jsx create mode 100644 src/components/MergeOptions.module.css diff --git a/src/components/MergeOptions.jsx b/src/components/MergeOptions.jsx new file mode 100644 index 00000000..f13bec7b --- /dev/null +++ b/src/components/MergeOptions.jsx @@ -0,0 +1,169 @@ +import React, { useState } from "react" +import styles from "./MergeOptions.module.css" +import MenuTitle from "../components/MenuTitle" +import Slider from "../components/Slider" +import { local } from "../library/store" +import { getAtlasSize } from "../library/utils" + +function MergeOptions({showDropToDownload}) { + + + const [atlasStd, setAtlasStd] = useState(local["mergeOptions_atlas_std_size"] || 6); + const [atlasStdTransp, setAtlasStdTransp] = useState(local["mergeOptions_atlas_std_transp_size"] || 6); + const [atlasMtoon, setAtlasMtoon] = useState(local["mergeOptions_atlas_mtoon_size"] || 6); + const [atlasMtoonTransp, setAtlasMtoonTransp] = useState(local["mergeOptions_atlas_mtoon_transp_size"] || 6); + const [downloadOnDrop, setDownloadOnDrop] = useState(local["mergeOptions_drop_download"] || false) + const [currentOption, setCurrentOption] = useState(local["mergeOptions_sel_option"] || 0); + const [options] = useState(["Merge to Standard", "Merge to MToon", "Keep Both"]) + + const handleDropDownloadEnable = (event) => { + setDownloadOnDrop(event.target.checked); + local["mergeOptions_drop_download"] = event.target.checked; + } + + const prevOption = () => { + let cur = currentOption; + if (currentOption <= 0) + cur = options.length-1 + else + cur -= 1 + + setCurrentOption(cur); + local["mergeOptions_sel_option"] = cur; + } + + const nextOption = () => { + let cur = currentOption; + if (currentOption >= options.length - 1) + cur = 0; + else + cur +=1; + + setCurrentOption(cur); + local["mergeOptions_sel_option"] = cur; + } + + const handleChangeAtlasSize = async (event, type) => { + let val = parseInt(event.target.value); + if (val > 8) + val = 8; + else if (val < 0) + val = 0; + + const setAtlasSize = (size) => { + switch (type){ + case 'standard opaque': + // save to user prefs + setAtlasStd(size); + local["mergeOptions_atlas_std_size"] = size; + break; + case 'standard transparent': + setAtlasStdTransp(size); + local["mergeOptions_atlas_std_transp_size"] = size; + break; + case 'mtoon opaque': + setAtlasMtoon(size); + local["mergeOptions_atlas_mtoon_size"] = size; + break; + case 'mtoon transparent': + setAtlasMtoonTransp(size); + local["mergeOptions_atlas_mtoon_transp_size"] = size; + break; + } + } + setAtlasSize(val) + } + + return ( +
+ +
+ +
+ Merge Atlas Type +
+
+
+
+
{options[currentOption]}
+
+
+


+ + {(currentOption === 0 || currentOption == 2)&&( + <> +
+ Standard Atlas Size +
+
+
+ Opaque: {getAtlasSize(atlasStd) + " x " + getAtlasSize(atlasStd)} +
+ + handleChangeAtlasSize(value, 'standard opaque')} min={1} max={8} step={1}/> +
+
+ Transparent: {getAtlasSize(atlasStdTransp) + " x " + getAtlasSize(atlasStdTransp)} +
+ handleChangeAtlasSize(value, 'standard transparent')} min={1} max={8} step={1}/> +


+ + )} + + {(currentOption === 1 || currentOption == 2)&&( + <> +
+ MToon Atlas Size +
+
+
+ Opaque: {getAtlasSize(atlasMtoon) + " x " + getAtlasSize(atlasMtoon)} +
+ + handleChangeAtlasSize(value, 'mtoon opaque')} min={1} max={8} step={1}/> +
+
+ Transparent: {getAtlasSize(atlasMtoonTransp) + " x " + getAtlasSize(atlasMtoonTransp)} +
+ handleChangeAtlasSize(value, 'mtoon transparent')} min={1} max={8} step={1}/> +


+ + )} + {showDropToDownload && ( + <> +
+ Drag Drop - Download +
+
+
+
+
+ + +
+ {downloadOnDrop ? "True": "False"} + +
+
+ + )} +
+
+ ) +} + +export default MergeOptions diff --git a/src/components/MergeOptions.module.css b/src/components/MergeOptions.module.css new file mode 100644 index 00000000..bdd2e1ed --- /dev/null +++ b/src/components/MergeOptions.module.css @@ -0,0 +1,113 @@ +.InformationContainerPos { + position: fixed; + left: 32px; + top: 98px; + width:350px; + height: -webkit-calc(100vh - 176px); + height: calc(100vh - 176px); + backdrop-filter: blur(22.5px); + background: rgba(5, 11, 14, 0.8); + z-index: 1000; + user-select: none; +} +.traitInfoTitle { + color: white; + text-transform: uppercase; + text-shadow: 1px 1px 2px black; + font-size: 16px; + word-spacing: 2px; + margin-bottom: 10px; +} +.traitInfoText { + color: rgb(179, 179, 179); + /* text-transform: uppercase; */ + text-shadow: 1px 1px 2px black; + font-size: 16px; + word-spacing: 2px; + margin-bottom: 10px; +} + +.flexSelect{ + display: flex; + justify-content: space-between; + width: 90%; + height:40px; + align-items: center; +} +.arrow-button { + cursor: pointer; + overflow: hidden; + opacity: 0.8; + width: 32px; + height: 32px; + margin: 2px; + text-align: center; + outline-color: #3b434f; + outline-width: 2px; + outline-style: solid; + align-items: center; + background-color: #1e2530; +} +.left-button{ + background: url('/ui/backButton_small.png'); + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.right-button{ + background: url('/ui/nextButton_small.png'); + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.scrollContainer { + height: 100%; + width: 80%; + overflow-y: scroll; + position: relative; + overflow-x: hidden !important; + margin: 30px; + height: -webkit-calc(100% - 40px); + height: calc(100% - 40px); +} +/* Hide the default checkbox */ +.custom-checkbox input[type="checkbox"] { + display: none; + } + + /* Style the custom checkbox */ + .custom-checkbox .checkbox-container { + display: inline-block; + width: 20px; + height: 20px; + border: 2px solid #284b39; /* Change border color as needed */ + border-radius: 5px; + cursor: pointer; + } + + .custom-checkbox .checkbox-container.checked { + background-color: #5eb086; /* Change background color when checked */ + } + + .custom-checkbox .checkbox-container .checkmark { + display: none; + } + + /* Style the checkmark when the checkbox is checked */ + .custom-checkbox input[type="checkbox"]:checked + .checkbox-container { + background-color: #5eb086; /* Change background color when checked */ + } + + .custom-checkbox input[type="checkbox"]:checked + .checkbox-container .checkmark { + display: block; + } + + .checkboxHolder { + display: flex; + gap: 5px; + align-items: center; + justify-content: left; + height: 40px; + } \ No newline at end of file From 4efac6f1bb98bd6e2396cb36cd52cd4dcc6f1255 Mon Sep 17 00:00:00 2001 From: memelotsqui Date: Mon, 13 Nov 2023 23:16:00 -0600 Subject: [PATCH 02/10] update optimizer to use new mergeOptions component --- src/pages/Optimizer.jsx | 209 ++++------------------------------------ 1 file changed, 19 insertions(+), 190 deletions(-) diff --git a/src/pages/Optimizer.jsx b/src/pages/Optimizer.jsx index e6568629..48503d83 100644 --- a/src/pages/Optimizer.jsx +++ b/src/pages/Optimizer.jsx @@ -7,12 +7,11 @@ import { LanguageContext } from "../context/LanguageContext" import { SoundContext } from "../context/SoundContext" import { AudioContext } from "../context/AudioContext" import FileDropComponent from "../components/FileDropComponent" -import { getFileNameWithoutExtension, disposeVRM } from "../library/utils" +import { getFileNameWithoutExtension, disposeVRM, getAtlasSize } from "../library/utils" import { loadVRM, addVRMToScene } from "../library/load-utils" import { downloadVRM } from "../library/download-utils" import ModelInformation from "../components/ModelInformation" -import MenuTitle from "../components/MenuTitle" -import Slider from "../components/Slider" +import MergeOptions from "../components/MergeOptions" import { local } from "../library/store" function Optimizer({ @@ -26,13 +25,6 @@ function Optimizer({ const [currentVRM, setCurrentVRM] = useState(null); const [lastVRM, setLastVRM] = useState(null); const [nameVRM, setNameVRM] = useState(""); - const [atlasStd, setAtlasStd] = useState(local["optimizer_atlas_std_size"] || 6); - const [atlasStdTransp, setAtlasStdTransp] = useState(local["optimizer_atlas_std_transp_size"] || 6); - const [atlasMtoon, setAtlasMtoon] = useState(local["optimizer_atlas_mtoon_size"] || 6); - const [atlasMtoonTransp, setAtlasMtoonTransp] = useState(local["optimizer_atlas_mtoon_transp_size"] || 6); - const [downloadOnDrop, setDownloadOnDrop] = useState(false) - const [currentOption, setCurrentOption] = useState(local["optimizer_sel_option"] || 0); - const [options] = useState(["Merge to Standard", "Merge to MToon", "Keep Both"]) const { playSound } = React.useContext(SoundContext) const { isMute } = React.useContext(AudioContext) @@ -42,20 +34,23 @@ function Optimizer({ setViewMode(ViewMode.LANDING) } - const download = () => { - const vrmData = currentVRM.userData.vrm - const options = { - atlasSize : 4096, + const getOptions = () =>{ + const currentOption = local["mergeOptions_sel_option"] || 0; + return { isVrm0 : true, createTextureAtlas : true, - mToonAtlasSize:getAtlasSize(atlasMtoon), - mToonAtlasSizeTransp:getAtlasSize(atlasMtoonTransp), - stdAtlasSize:getAtlasSize(atlasStd), - stdAtlasSizeTransp:getAtlasSize(atlasStdTransp), + mToonAtlasSize:getAtlasSize(local["mergeOptions_atlas_mtoon_size"] || 6), + mToonAtlasSizeTransp:getAtlasSize(local["mergeOptions_atlas_mtoon_transp_size"] || 6), + stdAtlasSize:getAtlasSize(local["mergeOptions_atlas_std_size"] || 6), + stdAtlasSizeTransp:getAtlasSize(local["mergeOptions_atlas_std_transp_size"] || 6), exportStdAtlas:(currentOption === 0 || currentOption == 2), exportMtoonAtlas:(currentOption === 1 || currentOption == 2) } - downloadVRM(model, vrmData,nameVRM + "_merged", options) + } + + const download = () => { + const vrmData = currentVRM.userData.vrm + downloadVRM(model, vrmData,nameVRM + "_merged", getOptions()) } useEffect(() => { @@ -65,10 +60,9 @@ function Optimizer({ } if (currentVRM != null){ addVRMToScene(currentVRM, model) - - if (downloadOnDrop){ + if (local["mergeOptions_drop_download"]){ const vrmData = currentVRM.userData.vrm - await downloadVRM(model, vrmData,nameVRM + "_merged",null,atlasSize,1,true, null, true) + await downloadVRM(model, vrmData,nameVRM + "_merged",getOptions()) disposeVRM(currentVRM); setCurrentVRM(null); } @@ -91,86 +85,6 @@ function Optimizer({ await animationManager.loadAnimation(path, true, "", animName); } - const handleDropDownloadEnable = (event) => { - setDownloadOnDrop(event.target.checked); - } - - const prevOption = () => { - let cur = currentOption; - if (currentOption <= 0) - cur = options.length-1 - else - cur -= 1 - - setCurrentOption(cur); - local["optimizer_sel_option"] = cur; - } - - const nextOption = () => { - let cur = currentOption; - if (currentOption >= options.length - 1) - cur = 0; - else - cur +=1; - - setCurrentOption(cur); - local["optimizer_sel_option"] = cur; - } - - const getAtlasSize = (value) =>{ - switch (value){ - case 1: - return 128; - case 2: - return 256; - case 3: - return 512; - case 4: - return 1024; - case 5: - return 2048; - case 6: - return 4096; - case 7: - return 8192; - case 8: - return 16384; - default: - return 4096; - } - } - - const handleChangeAtlasSize = async (event, type) => { - let val = parseInt(event.target.value); - if (val > 8) - val = 8; - else if (val < 0) - val = 0; - - const setAtlasSize = (size) => { - switch (type){ - case 'standard opaque': - // save to user prefs - setAtlasStd(size); - local["optimizer_atlas_std_size"] = size; - break; - case 'standard transparent': - setAtlasStdTransp(size); - local["optimizer_atlas_std_transp_size"] = size; - break; - case 'mtoon opaque': - setAtlasMtoon(size); - local["optimizer_atlas_mtoon_size"] = size; - break; - case 'mtoon transparent': - setAtlasMtoonTransp(size); - local["optimizer_atlas_mtoon_transp_size"] = size; - break; - } - } - setAtlasSize(val) - } - const handleVRMDrop = async (file) =>{ const path = URL.createObjectURL(file); const vrm = await loadVRM(path); @@ -201,94 +115,9 @@ function Optimizer({ -
- -
- -
- Merge Atlas Type -
-
-
-
-
{options[currentOption]}
-
-
-


- - {(currentOption === 0 || currentOption == 2)&&( - <> -
- Standard Atlas Size -
-
-
- Opaque: {getAtlasSize(atlasStd) + " x " + getAtlasSize(atlasStd)} -
- - handleChangeAtlasSize(value, 'standard opaque')} min={1} max={8} step={1}/> -
-
- Transparent: {getAtlasSize(atlasStdTransp) + " x " + getAtlasSize(atlasStdTransp)} -
- handleChangeAtlasSize(value, 'standard transparent')} min={1} max={8} step={1}/> -


- - )} - - {(currentOption === 1 || currentOption == 2)&&( - <> -
- MToon Atlas Size -
-
-
- Opaque: {getAtlasSize(atlasMtoon) + " x " + getAtlasSize(atlasMtoon)} -
- - handleChangeAtlasSize(value, 'mtoon opaque')} min={1} max={8} step={1}/> -
-
- Transparent: {getAtlasSize(atlasMtoonTransp) + " x " + getAtlasSize(atlasMtoonTransp)} -
- handleChangeAtlasSize(value, 'mtoon transparent')} min={1} max={8} step={1}/> -


- - )} -
- Drag Drop - Download -
- - -
-
-
-
- - -
- {downloadOnDrop ? "True": "False"} - -
-
- -
- -
+ From 9b41d86f0fabac4f8e5b575b66add2bfcae88d71 Mon Sep 17 00:00:00 2001 From: memelotsqui Date: Mon, 13 Nov 2023 23:16:27 -0600 Subject: [PATCH 03/10] extract atlas size function --- src/library/utils.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/library/utils.js b/src/library/utils.js index 6eeb1e1f..6787b197 100644 --- a/src/library/utils.js +++ b/src/library/utils.js @@ -368,6 +368,29 @@ function getModelProperty(model, property) { return model.data[property]; } +export function getAtlasSize(value){ + switch (value){ + case 1: + return 128; + case 2: + return 256; + case 3: + return 512; + case 4: + return 1024; + case 5: + return 2048; + case 6: + return 4096; + case 7: + return 8192; + case 8: + return 16384; + default: + return 4096; + } +} + export function disposeVRM(vrm) { const model = vrm.scene; const animationControl = (getModelProperty(vrm, "animationControl")); From 024c1c6c35616dd28e3c841d1e8e178adf9c1389 Mon Sep 17 00:00:00 2001 From: memelotsqui Date: Mon, 13 Nov 2023 23:35:16 -0600 Subject: [PATCH 04/10] update css to reduce left menu size --- src/components/MergeOptions.module.css | 4 ++-- src/components/Slider.module.css | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/MergeOptions.module.css b/src/components/MergeOptions.module.css index bdd2e1ed..88064def 100644 --- a/src/components/MergeOptions.module.css +++ b/src/components/MergeOptions.module.css @@ -2,7 +2,7 @@ position: fixed; left: 32px; top: 98px; - width:350px; + width:300px; height: -webkit-calc(100vh - 176px); height: calc(100vh - 176px); backdrop-filter: blur(22.5px); @@ -30,7 +30,7 @@ .flexSelect{ display: flex; justify-content: space-between; - width: 90%; + width: 100%; height:40px; align-items: center; } diff --git a/src/components/Slider.module.css b/src/components/Slider.module.css index 522157a7..2d0cf416 100644 --- a/src/components/Slider.module.css +++ b/src/components/Slider.module.css @@ -1,11 +1,13 @@ .slider-container { display: flex; align-items: center; + text-align: center; } .slider { - width: 80%; /* Adjust as needed */ + width: 100%; /* Adjust as needed */ margin-right: 10px; + } .input-box { From b6e4c0925ceb47c26255de4fcb59ebe62491e9a9 Mon Sep 17 00:00:00 2001 From: memelotsqui Date: Mon, 13 Nov 2023 23:35:38 -0600 Subject: [PATCH 05/10] add merge options to save page --- src/pages/Save.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/Save.jsx b/src/pages/Save.jsx index 828d42aa..874ccdb5 100644 --- a/src/pages/Save.jsx +++ b/src/pages/Save.jsx @@ -7,6 +7,7 @@ import CustomButton from "../components/custom-button" import { LanguageContext } from "../context/LanguageContext" import { SoundContext } from "../context/SoundContext" import { AudioContext } from "../context/AudioContext" +import MergeOptions from "../components/MergeOptions" function Save({getFaceScreenshot}) { @@ -43,7 +44,9 @@ function Save({getFaceScreenshot}) { className={styles.buttonLeft} onClick={back} /> - + From 12651f959b6d0c8fb005e9fd8d06f9136fb8d22e Mon Sep 17 00:00:00 2001 From: memelotsqui Date: Tue, 14 Nov 2023 00:08:00 -0600 Subject: [PATCH 06/10] add atlas download and update css --- src/components/MergeOptions.jsx | 45 ++++++++++++++++++++++++-- src/components/MergeOptions.module.css | 3 ++ 2 files changed, 46 insertions(+), 2 deletions(-) diff --git a/src/components/MergeOptions.jsx b/src/components/MergeOptions.jsx index f13bec7b..4495d5aa 100644 --- a/src/components/MergeOptions.jsx +++ b/src/components/MergeOptions.jsx @@ -5,22 +5,33 @@ import Slider from "../components/Slider" import { local } from "../library/store" import { getAtlasSize } from "../library/utils" -function MergeOptions({showDropToDownload}) { +function MergeOptions({showDropToDownload, showCreateAtlas}) { const [atlasStd, setAtlasStd] = useState(local["mergeOptions_atlas_std_size"] || 6); const [atlasStdTransp, setAtlasStdTransp] = useState(local["mergeOptions_atlas_std_transp_size"] || 6); const [atlasMtoon, setAtlasMtoon] = useState(local["mergeOptions_atlas_mtoon_size"] || 6); const [atlasMtoonTransp, setAtlasMtoonTransp] = useState(local["mergeOptions_atlas_mtoon_transp_size"] || 6); - const [downloadOnDrop, setDownloadOnDrop] = useState(local["mergeOptions_drop_download"] || false) const [currentOption, setCurrentOption] = useState(local["mergeOptions_sel_option"] || 0); const [options] = useState(["Merge to Standard", "Merge to MToon", "Keep Both"]) + // optimizer + const [downloadOnDrop, setDownloadOnDrop] = useState(local["mergeOptions_drop_download"] || false) + + // creator + const [createAtlas, setCreateAtlas] = useState(local["mergeOptions_create_atlas"] || true) + const handleDropDownloadEnable = (event) => { setDownloadOnDrop(event.target.checked); local["mergeOptions_drop_download"] = event.target.checked; } + const handleCreateAtlas = (event) => { + setCreateAtlas(event.target.checked) + local["mergeOptions_create_atlas"] = event.target.checked; + } + + const prevOption = () => { let cur = currentOption; if (currentOption <= 0) @@ -75,10 +86,39 @@ function MergeOptions({showDropToDownload}) { } return ( +
+
+ {showCreateAtlas && ( + <> +
+ Create Atlas +
+
+
+
+
+ + +
+ {createAtlas ? "True": "False"} + +
+
+

+ + )} + {(showCreateAtlas == false || createAtlas)&&(<>
Merge Atlas Type
@@ -161,6 +201,7 @@ function MergeOptions({showDropToDownload}) {
)} + )}
) diff --git a/src/components/MergeOptions.module.css b/src/components/MergeOptions.module.css index 88064def..33f0d290 100644 --- a/src/components/MergeOptions.module.css +++ b/src/components/MergeOptions.module.css @@ -17,6 +17,7 @@ font-size: 16px; word-spacing: 2px; margin-bottom: 10px; + text-align: center; } .traitInfoText { color: rgb(179, 179, 179); @@ -25,6 +26,8 @@ font-size: 16px; word-spacing: 2px; margin-bottom: 10px; + display: flex; + justify-content: center; } .flexSelect{ From 46b7fb4b3bda4ea57b38d68df60d694cc75ca2c6 Mon Sep 17 00:00:00 2001 From: memelotsqui Date: Tue, 14 Nov 2023 00:35:47 -0600 Subject: [PATCH 07/10] update export menu to send options as parameters --- src/components/ExportMenu.jsx | 47 +++++++++++++++++++++-------------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/src/components/ExportMenu.jsx b/src/components/ExportMenu.jsx index 30e556c9..6abd558e 100644 --- a/src/components/ExportMenu.jsx +++ b/src/components/ExportMenu.jsx @@ -3,6 +3,7 @@ import { SceneContext } from "../context/SceneContext" import CustomButton from "./custom-button" import { downloadGLB, downloadVRMWithAvatar } from "../library/download-utils" +import { getAtlasSize } from "../library/utils" import styles from "./ExportMenu.module.css" import { local } from "../library/store" @@ -16,6 +17,32 @@ export const ExportMenu = ({getFaceScreenshot}) => { const [name] = React.useState(localStorage.getItem("name") || defaultName) const { model, avatar,templateInfo } = useContext(SceneContext) + const getOptions = () =>{ + const currentOption = local["mergeOptions_sel_option"] || 0; + const screenshot = getFaceScreenshot(); + console.log(local["mergeOptions_create_atlas"]); + const createTextureAtlas = local["mergeOptions_create_atlas"] == null ? true:local["mergeOptions_create_atlas"] + return { + isVrm0 : true, + createTextureAtlas : createTextureAtlas, + mToonAtlasSize:getAtlasSize(local["mergeOptions_atlas_mtoon_size"] || 6), + mToonAtlasSizeTransp:getAtlasSize(local["mergeOptions_atlas_mtoon_transp_size"] || 6), + stdAtlasSize:getAtlasSize(local["mergeOptions_atlas_std_size"] || 6), + stdAtlasSizeTransp:getAtlasSize(local["mergeOptions_atlas_std_transp_size"] || 6), + exportStdAtlas:(currentOption === 0 || currentOption == 2), + exportMtoonAtlas:(currentOption === 1 || currentOption == 2), + screenshot:screenshot, + scale:templateInfo.exportScale||1, + vrmMeta:templateInfo.vrmMeta + } + } + + const downloadModel = () =>{ + const options = getOptions(); + console.log(options) + downloadVRMWithAvatar(model, avatar, name, options) + } + return ( { /> { - const screenshot = getFaceScreenshot(); - const options = {screenshot:screenshot, atlasSize: 4096, scale:templateInfo.exportScale||1, isVrm0:true, vrmMeta:templateInfo.vrmMeta,createTextureAtlas:false} - downloadVRMWithAvatar(model, avatar, name, options) - }} - /> - { - const screenshot = getFaceScreenshot(); - const options = {screenshot:screenshot, atlasSize: 4096, scale:templateInfo.exportScale||1, isVrm0:true, vrmMeta:templateInfo.vrmMeta,createTextureAtlas:true} - downloadVRMWithAvatar(model, avatar, name, options) - }} + onClick={downloadModel} /> ) From f20eab7e38cdef6affe85c12f93a920f87682105 Mon Sep 17 00:00:00 2001 From: memelotsqui Date: Tue, 14 Nov 2023 00:36:26 -0600 Subject: [PATCH 08/10] update mergeoptions to explicitly detect if local variables is null --- src/components/MergeOptions.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MergeOptions.jsx b/src/components/MergeOptions.jsx index 4495d5aa..301a89e4 100644 --- a/src/components/MergeOptions.jsx +++ b/src/components/MergeOptions.jsx @@ -19,7 +19,7 @@ function MergeOptions({showDropToDownload, showCreateAtlas}) { const [downloadOnDrop, setDownloadOnDrop] = useState(local["mergeOptions_drop_download"] || false) // creator - const [createAtlas, setCreateAtlas] = useState(local["mergeOptions_create_atlas"] || true) + const [createAtlas, setCreateAtlas] = useState(local["mergeOptions_create_atlas"] == null ? true : local["mergeOptions_create_atlas"]) const handleDropDownloadEnable = (event) => { setDownloadOnDrop(event.target.checked); From 05a1cda1f96929ec1c2885d7bcd704a7c498b75e Mon Sep 17 00:00:00 2001 From: memelotsqui Date: Tue, 14 Nov 2023 00:36:47 -0600 Subject: [PATCH 09/10] add merge component to save page --- src/pages/Save.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Save.jsx b/src/pages/Save.jsx index 874ccdb5..8b616f51 100644 --- a/src/pages/Save.jsx +++ b/src/pages/Save.jsx @@ -45,7 +45,7 @@ function Save({getFaceScreenshot}) { onClick={back} /> Date: Tue, 14 Nov 2023 00:37:08 -0600 Subject: [PATCH 10/10] remove log --- src/components/ExportMenu.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ExportMenu.jsx b/src/components/ExportMenu.jsx index 6abd558e..872e4cca 100644 --- a/src/components/ExportMenu.jsx +++ b/src/components/ExportMenu.jsx @@ -39,7 +39,6 @@ export const ExportMenu = ({getFaceScreenshot}) => { const downloadModel = () =>{ const options = getOptions(); - console.log(options) downloadVRMWithAvatar(model, avatar, name, options) }