A bunch of fix for new UI

- [x] Fix preview 3DGS UI - [x] Fix preview UI position - [x] Fix Error occurred when executing [Comfy3D] Era3D MVDiffusion Model
2024-10-17 17:56:31 -06:00
parent 7d25fbea6e
commit 46a933b5ee
24 changed files with 3710 additions and 45 deletions
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3c63c3d2e7b7f18788aca8a5a0e766ad4633f631d49192602d8532b6b0df7615
+size 559
@@ -8,7 +8,7 @@ These instructions are based on the assumption that you have Docker installed on

 All tests were performed using Docker version 26.1.3 and Docker Compose version 2.27.0 under Ubuntu 22.04.

-These instructions are focused on running the Unique3D workflows, you can use the same steps to run the other workflows, but you need to check the model requirements for each workflow at the [README.md](../README.md) file.
+These instructions are focused on running the Unique3D workflows, you can use the same steps to run the other workflows, but you need to check the model requirements for each workflow at the [README.md](./README.md) file.

 ### Requirements

@@ -18,3 +18,10 @@
 13106	13198	7445113325278709	_slangtorch_texture_baker_44136fa355b3678a.pyd	9b21a5c60eb03f2c
 22	11857	7445113444318882	texture_baker.o	d2552713bf2b5a12
 11859	11938	7445113445275668	_slangtorch_texture_baker_44136fa355b3678a.pyd	9b21a5c60eb03f2c
+24	20146	7509048038891258	texture_baker.o	d2552713bf2b5a12
+20147	20305	7509048040563846	_slangtorch_texture_baker_44136fa355b3678a.pyd	9b21a5c60eb03f2c
+29	12060	7509048161816250	texture_baker.o	d2552713bf2b5a12
+12061	12140	7509048162781653	_slangtorch_texture_baker_44136fa355b3678a.pyd	9b21a5c60eb03f2c
+34	3236	7509048217212053	texture_baker_cuda.cuda.o	ce8c20f9bf2876fd
+30	14859	7509048333313026	texture_baker.o	fada63e2f1da810b
+14878	14995	7509048334862300	_slangtorch_texture_baker_44136fa355b3678a.pyd	f7f598e558c5da34
@@ -2,12 +2,12 @@ ninja_required_version = 1.3
 cxx = cl
 nvcc = C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v12.1\bin\nvcc

-cflags = -DTORCH_EXTENSION_NAME=_slangtorch_texture_baker_44136fa355b3678a -DTORCH_API_INCLUDE_EXTENSION_H -IC:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\_Projects\stable-fast-3d\sf3d -IC:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\Lib\site-packages\torch\include -IC:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\Lib\site-packages\torch\include\torch\csrc\api\include -IC:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\Lib\site-packages\torch\include\TH -IC:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\Lib\site-packages\torch\include\THC "-IC:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v12.1\include" -IC:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\Include -D_GLIBCXX_USE_CXX11_ABI=0 /MD /wd4819 /wd4251 /wd4244 /wd4267 /wd4275 /wd4018 /wd4190 /wd4624 /wd4067 /wd4068 /EHsc /std:c++17 /std:c++17
+cflags = -DTORCH_EXTENSION_NAME=_slangtorch_texture_baker_44136fa355b3678a -DTORCH_API_INCLUDE_EXTENSION_H -IC:\Users\reall\Softwares\ComfyUI_windows_portable\ComfyUI\custom_nodes\ComfyUI-3D-Pack\Gen_3D_Modules\StableFast3D\sf3d -IC:\Users\reall\Softwares\ComfyUI_windows_portable\python_embeded\Lib\site-packages\torch\include -IC:\Users\reall\Softwares\ComfyUI_windows_portable\python_embeded\Lib\site-packages\torch\include\torch\csrc\api\include -IC:\Users\reall\Softwares\ComfyUI_windows_portable\python_embeded\Lib\site-packages\torch\include\TH -IC:\Users\reall\Softwares\ComfyUI_windows_portable\python_embeded\Lib\site-packages\torch\include\THC "-IC:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v12.1\include" -IC:\Users\reall\Softwares\ComfyUI_windows_portable\python_embeded\Include -D_GLIBCXX_USE_CXX11_ABI=0 /MD /wd4819 /wd4251 /wd4244 /wd4267 /wd4275 /wd4018 /wd4190 /wd4624 /wd4067 /wd4068 /EHsc /std:c++17 /std:c++17
 post_cflags = 
-cuda_cflags = -Xcudafe --diag_suppress=dll_interface_conflict_dllexport_assumed -Xcudafe --diag_suppress=dll_interface_conflict_none_assumed -Xcudafe --diag_suppress=field_without_dll_interface -Xcudafe --diag_suppress=base_class_has_different_dll_interface -Xcompiler /EHsc -Xcompiler /wd4068 -Xcompiler /wd4067 -Xcompiler /wd4624 -Xcompiler /wd4190 -Xcompiler /wd4018 -Xcompiler /wd4275 -Xcompiler /wd4267 -Xcompiler /wd4244 -Xcompiler /wd4251 -Xcompiler /wd4819 -Xcompiler /MD -DTORCH_EXTENSION_NAME=_slangtorch_texture_baker_44136fa355b3678a -DTORCH_API_INCLUDE_EXTENSION_H -IC:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\_Projects\stable-fast-3d\sf3d -IC:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\Lib\site-packages\torch\include -IC:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\Lib\site-packages\torch\include\torch\csrc\api\include -IC:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\Lib\site-packages\torch\include\TH -IC:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\Lib\site-packages\torch\include\THC "-IC:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v12.1\include" -IC:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\Include -D_GLIBCXX_USE_CXX11_ABI=0 -D__CUDA_NO_HALF_OPERATORS__ -D__CUDA_NO_HALF_CONVERSIONS__ -D__CUDA_NO_BFLOAT16_CONVERSIONS__ -D__CUDA_NO_HALF2_OPERATORS__ --expt-relaxed-constexpr -gencode=arch=compute_89,code=compute_89 -gencode=arch=compute_89,code=sm_89 -std=c++17 --std=c++17 -U__CUDA_NO_HALF_OPERATORS__ -U__CUDA_NO_HALF_CONVERSIONS__ -U__CUDA_NO_HALF2_OPERATORS__ -U__CUDA_NO_BFLOAT16_CONVERSIONS__ -DSLANG_CUDA_ENABLE_HALF=1
+cuda_cflags = -Xcudafe --diag_suppress=dll_interface_conflict_dllexport_assumed -Xcudafe --diag_suppress=dll_interface_conflict_none_assumed -Xcudafe --diag_suppress=field_without_dll_interface -Xcudafe --diag_suppress=base_class_has_different_dll_interface -Xcompiler /EHsc -Xcompiler /wd4068 -Xcompiler /wd4067 -Xcompiler /wd4624 -Xcompiler /wd4190 -Xcompiler /wd4018 -Xcompiler /wd4275 -Xcompiler /wd4267 -Xcompiler /wd4244 -Xcompiler /wd4251 -Xcompiler /wd4819 -Xcompiler /MD -DTORCH_EXTENSION_NAME=_slangtorch_texture_baker_44136fa355b3678a -DTORCH_API_INCLUDE_EXTENSION_H -IC:\Users\reall\Softwares\ComfyUI_windows_portable\ComfyUI\custom_nodes\ComfyUI-3D-Pack\Gen_3D_Modules\StableFast3D\sf3d -IC:\Users\reall\Softwares\ComfyUI_windows_portable\python_embeded\Lib\site-packages\torch\include -IC:\Users\reall\Softwares\ComfyUI_windows_portable\python_embeded\Lib\site-packages\torch\include\torch\csrc\api\include -IC:\Users\reall\Softwares\ComfyUI_windows_portable\python_embeded\Lib\site-packages\torch\include\TH -IC:\Users\reall\Softwares\ComfyUI_windows_portable\python_embeded\Lib\site-packages\torch\include\THC "-IC:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v12.1\include" -IC:\Users\reall\Softwares\ComfyUI_windows_portable\python_embeded\Include -D_GLIBCXX_USE_CXX11_ABI=0 -D__CUDA_NO_HALF_OPERATORS__ -D__CUDA_NO_HALF_CONVERSIONS__ -D__CUDA_NO_BFLOAT16_CONVERSIONS__ -D__CUDA_NO_HALF2_OPERATORS__ --expt-relaxed-constexpr -gencode=arch=compute_89,code=compute_89 -gencode=arch=compute_89,code=sm_89 -std=c++17 --std=c++17 -U__CUDA_NO_HALF_OPERATORS__ -U__CUDA_NO_HALF_CONVERSIONS__ -U__CUDA_NO_HALF2_OPERATORS__ -U__CUDA_NO_BFLOAT16_CONVERSIONS__ -DSLANG_CUDA_ENABLE_HALF=1
 cuda_post_cflags = 
 cuda_dlink_post_cflags = 
-ldflags = /DLL c10.lib c10_cuda.lib torch_cpu.lib torch_cuda.lib -INCLUDE:?warp_size@cuda@at@@YAHXZ torch.lib /LIBPATH:C:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\Lib\site-packages\torch\lib torch_python.lib /LIBPATH:C:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\libs "/LIBPATH:C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v12.1\lib\x64" cudart.lib
+ldflags = /DLL c10.lib c10_cuda.lib torch_cpu.lib torch_cuda.lib -INCLUDE:?warp_size@cuda@at@@YAHXZ torch.lib /LIBPATH:C:\Users\reall\Softwares\ComfyUI_windows_portable\python_embeded\Lib\site-packages\torch\lib torch_python.lib /LIBPATH:C:\Users\reall\Softwares\ComfyUI_windows_portable\python_embeded\libs "/LIBPATH:C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v12.1\lib\x64" cudart.lib

 rule compile
  command = cl /showIncludes $cflags -c $in /Fo$out $post_cflags
@@ -23,8 +23,8 @@ rule cuda_compile
 rule link
  command = "C$:\Program Files\Microsoft Visual Studio\2022\Community\VC\Tools\MSVC\14.40.33807\bin\Hostx64\x64/link.exe" $in /nologo $ldflags /out:$out

-build texture_baker.o: compile C$:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\_Projects\stable-fast-3d\sf3d\.slangtorch_cache\texture_baker\44136fa355b3678a\texture_baker.cpp
-build texture_baker_cuda.cuda.o: cuda_compile C$:\Users\reall\Softwares\Miniconda\envs\AI3D_Exp\_Projects\stable-fast-3d\sf3d\.slangtorch_cache\texture_baker\44136fa355b3678a\texture_baker_cuda.cu
+build texture_baker.o: compile C$:\Users\reall\Softwares\ComfyUI_windows_portable\ComfyUI\custom_nodes\ComfyUI-3D-Pack\Gen_3D_Modules\StableFast3D\sf3d\.slangtorch_cache\texture_baker\44136fa355b3678a\texture_baker.cpp
+build texture_baker_cuda.cuda.o: cuda_compile C$:\Users\reall\Softwares\ComfyUI_windows_portable\ComfyUI\custom_nodes\ComfyUI-3D-Pack\Gen_3D_Modules\StableFast3D\sf3d\.slangtorch_cache\texture_baker\44136fa355b3678a\texture_baker_cuda.cu



@@ -38,5 +38,5 @@
        "includePaths": []
    },
    "moduleName": "_slangtorch_texture_baker_44136fa355b3678a",
-    "moduleBinary": "C:\\Users\\reall\\Softwares\\Miniconda\\envs\\AI3D_Exp\\_Projects\\stable-fast-3d\\sf3d\\.slangtorch_cache\\texture_baker\\44136fa355b3678a\\0\\_slangtorch_texture_baker_44136fa355b3678a.pyd"
+    "moduleBinary": "C:\\Users\\reall\\Softwares\\ComfyUI_windows_portable\\ComfyUI\\custom_nodes\\ComfyUI-3D-Pack\\Gen_3D_Modules\\StableFast3D\\sf3d\\.slangtorch_cache\\texture_baker\\44136fa355b3678a\\0\\_slangtorch_texture_baker_44136fa355b3678a.pyd"
 }
@@ -2562,11 +2562,11 @@ class Era3D_MVDiffusion_Model:
        # Get input data
        img_batch = dataset.__getitem__(0)

-        imgs_in = torch.cat([img_batch['imgs_in']]*2, dim=0).to(DEVICE).to(WEIGHT_DTYPE)    # (B*Nv, 3, H, W) B==1
+        imgs_in = torch.cat([img_batch['imgs_in']]*2, dim=0).to(DEVICE, dtype=WEIGHT_DTYPE)    # (B*Nv, 3, H, W) B==1
        #num_views = imgs_in.shape[1]

        normal_prompt_embeddings, clr_prompt_embeddings = img_batch['normal_prompt_embeddings'], img_batch['color_prompt_embeddings'] 
-        prompt_embeddings = torch.cat([normal_prompt_embeddings, clr_prompt_embeddings], dim=0).to(DEVICE).to(WEIGHT_DTYPE)    # (B*Nv, N, C) B==1
+        prompt_embeddings = torch.cat([normal_prompt_embeddings, clr_prompt_embeddings], dim=0).to(DEVICE, dtype=WEIGHT_DTYPE)    # (B*Nv, N, C) B==1

        generator = torch.Generator(device=era3d_pipe.unet.device).manual_seed(seed)

@@ -2586,8 +2586,8 @@ class Era3D_MVDiffusion_Model:
        images_pred = out[bsz:] 
        
        # [N, 3, H, W] -> [N, H, W, 3]
-        multiview_images = images_pred.permute(0, 2, 3, 1).to(reference_image.dtype, reference_image.device)   
-        multiview_normals = normals_pred.permute(0, 2, 3, 1).to(reference_image.dtype, reference_image.device)
+        multiview_images = images_pred.permute(0, 2, 3, 1).to(reference_image.dtype, dtype=reference_image.device)   
+        multiview_normals = normals_pred.permute(0, 2, 3, 1).to(reference_image.dtype, dtype=reference_image.device)
        
        azimuths = [0, 45, 90, 180, -90, -45]
        elevations = [0.0] * 6
@@ -3449,7 +3449,7 @@ class Load_CRM_T2I_V2_Models:
        
        crm_mvdiffusion_model.clip_model = crm_mvdiffusion_model.clip_model.to(DEVICE, dtype=WEIGHT_DTYPE)
        crm_mvdiffusion_model.vae_model = crm_mvdiffusion_model.vae_model.to(DEVICE, dtype=WEIGHT_DTYPE)
-        crm_mvdiffusion_model = crm_mvdiffusion_model.to(DEVICE).to(WEIGHT_DTYPE)
+        crm_mvdiffusion_model = crm_mvdiffusion_model.to(DEVICE, dtype=WEIGHT_DTYPE)
        
        crm_mvdiffusion_sampler_v2 = get_obj_from_str(crm_config.sampler.target)(
            crm_mvdiffusion_model, device=DEVICE, dtype=WEIGHT_DTYPE, **crm_config.sampler.params
@@ -3545,7 +3545,7 @@ class Load_CRM_T2I_V3_Models:
    crm_checkpoints_dir = "CRM"
    crm_t2i_v3_checkpoints_dir = "CRM_T2I_V3"
    t2i_v2_checkpoints_dir = "T2I_V2"
-    default_crm_t2i_v3_ckpt_name = ["pixel-diffusion_lora_80k_Hyper.pth"]
+    default_crm_t2i_v3_ckpt_name = ["pixel-diffusion_lora_80k_rank_60_Hyper.pth", "pixel-diffusion_dora_90k_rank_128_Hyper.pth"]
    default_crm_ckpt_name = ["pixel-diffusion_Hyper.pth"]
    default_crm_conf_name = ["sd_v2_base_ipmv_zero_SNR_Hyper.yaml"]
    default_crm_repo_id = "Zhengyi/CRM"
@@ -3610,7 +3610,7 @@ class Load_CRM_T2I_V3_Models:
        
        crm_mvdiffusion_model.clip_model = crm_mvdiffusion_model.clip_model.to(DEVICE, dtype=WEIGHT_DTYPE)
        crm_mvdiffusion_model.vae_model = crm_mvdiffusion_model.vae_model.to(DEVICE, dtype=WEIGHT_DTYPE)
-        crm_mvdiffusion_model = crm_mvdiffusion_model.to(DEVICE).to(WEIGHT_DTYPE)
+        crm_mvdiffusion_model = crm_mvdiffusion_model.to(DEVICE, dtype=WEIGHT_DTYPE)
        
        crm_mvdiffusion_sampler_v3 = get_obj_from_str(crm_config.sampler.target)(
            crm_mvdiffusion_model, device=DEVICE, dtype=WEIGHT_DTYPE, **crm_config.sampler.params
@@ -1,9 +1,11 @@
 [project]
 name = "comfyui-3d-pack"
 description = "Make ComfyUI generates 3D assets as good & convenient as it generates image/video!"
-version = "0.1.0"
+version = "0.1.1"
 license = { file = "LICENSE" }
-dependencies = ["cmake", "ninja", "PyGithub", "requests", "numpy", "einops", "scipy", "kornia", "opencv-python", "pillow", "roma", "nerfacc>=0.5.3", "PyMCubes", "diffusers>=0.26.1", "transformers>=4.36.2", "safetensors", "open_clip_torch", "torchmetrics", "pytorch_msssim", "pytorch-lightning", "imageio", "imageio-ffmpeg", "matplotlib", "trimesh", "plyfile", "pygltflib", "xatlas", "pymeshlab", "torchtyping", "tqdm", "jaxtyping", "packaging", "OmegaConf", "pyhocon"]
+dynamic = ["dependencies"]
+[tool.setuptools.dynamic]
+dependencies = {file = ["requirements.txt"]}

 [project.urls]
 Repository = "https://github.com/MrForExample/ComfyUI-3D-Pack"
@@ -4,7 +4,7 @@
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="/extensions/ComfyUI-3D-Pack/style/gsStyle.css">
-  <link type="text/css" rel="stylesheet" href="/extensions/ComfyUI-3D-Pack/style/libs/coloris.min.css">
+  <link type="text/css" rel="stylesheet" href="/extensions/ComfyUI-3D-Pack/style/coloris.min.css">
  <link type="text/css" rel="stylesheet" href="/extensions/ComfyUI-3D-Pack/style/sharedStyle.css">
 </head>
 <body>
@@ -29,7 +29,7 @@
    <script id="visualizer" type="module" filepath="" timestamp="" crossorigin src="/extensions/ComfyUI-3D-Pack/js/gsVisualizer.js"></script>
  </div>

-  <script src="/extensions/ComfyUI-3D-Pack/js/libs/coloris.min.js"></script>
+  <script src="/extensions/ComfyUI-3D-Pack/js/coloris.js"></script>
  <script>
    Coloris({
      el: '.coloris',
@@ -4,7 +4,7 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="/extensions/ComfyUI-3D-Pack/style/threeStyle.css">
-		<link type="text/css" rel="stylesheet" href="/extensions/ComfyUI-3D-Pack/style/libs/coloris.min.css">
+		<link type="text/css" rel="stylesheet" href="/extensions/ComfyUI-3D-Pack/style/coloris.css">
 		<link type="text/css" rel="stylesheet" href="/extensions/ComfyUI-3D-Pack/style/sharedStyle.css">
 	</head>

@@ -30,7 +30,7 @@
 			<script id="visualizer" type="module" filepath="" timestamp="" crossorigin src="/extensions/ComfyUI-3D-Pack/js/threeVisualizer.js"></script>
 		</div>

-		<script src="/extensions/ComfyUI-3D-Pack/js/libs/coloris.min.js"></script>
+		<script src="/extensions/ComfyUI-3D-Pack/js/coloris.js"></script>
 		<script>
 			Coloris({
 				el: '.coloris',
@@ -1,5 +1,5 @@
 import * as SPLAT from 'gsplat';
-import { api } from '/scripts/api.js'
+//import { api } from '/scripts/api.js'
 import {getRGBValue} from '/extensions/ComfyUI-3D-Pack/js/sharedFunctions.js';

 const visualizer = document.getElementById("visualizer");
@@ -0,0 +1,577 @@
+.clr-picker {
+  display: none;
+  flex-wrap: wrap;
+  position: absolute;
+  width: 200px;
+  z-index: 1000;
+  border-radius: 10px;
+  background-color: #fff;
+  justify-content: flex-end;
+  direction: ltr;
+  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.clr-picker.clr-open,
+.clr-picker[data-inline="true"] {
+  display: flex;
+}
+
+.clr-picker[data-inline="true"] {
+  position: relative;
+}
+
+.clr-gradient {
+  position: relative;
+  width: 100%;
+  height: 100px;
+  margin-bottom: 15px;
+  border-radius: 3px 3px 0 0;
+  background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);
+  cursor: pointer;
+}
+
+.clr-marker {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  margin: -6px 0 0 -6px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  background-color: currentColor;
+  cursor: pointer;
+}
+
+.clr-picker input[type="range"]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 16px;
+}
+
+.clr-picker input[type="range"]::-webkit-slider-thumb {
+  width: 16px;
+  height: 16px;
+  -webkit-appearance: none;
+}
+
+.clr-picker input[type="range"]::-moz-range-track {
+  width: 100%;
+  height: 16px;
+  border: 0;
+}
+
+.clr-picker input[type="range"]::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border: 0;
+}
+
+.clr-hue {
+  background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
+}
+
+.clr-hue,
+.clr-alpha {
+  position: relative;
+  width: calc(100% - 40px);
+  height: 8px;
+  margin: 5px 20px;
+  border-radius: 4px;
+}
+
+.clr-alpha span {
+  display: block;
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);
+}
+
+.clr-hue input[type="range"],
+.clr-alpha input[type="range"] {
+  position: absolute;
+  width: calc(100% + 32px);
+  height: 16px;
+  left: -16px;
+  top: -4px;
+  margin: 0;
+  background-color: transparent;
+  opacity: 0;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.clr-hue div,
+.clr-alpha div {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 0;
+  top: 50%;
+  margin-left: -8px;
+  transform: translateY(-50%);
+  border: 2px solid #fff;
+  border-radius: 50%;
+  background-color: currentColor;
+  box-shadow: 0 0 1px #888;
+  pointer-events: none;
+}
+
+.clr-alpha div:before {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+
+.clr-format {
+  display: none;
+  order: 1;
+  width: calc(100% - 40px);
+  margin: 0 20px 20px;
+}
+
+.clr-segmented {
+  display: flex;
+  position: relative;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #ddd;
+  border-radius: 15px;
+  box-sizing: border-box;
+  color: #999;
+  font-size: 12px;
+}
+
+.clr-segmented input,
+.clr-segmented legend {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.clr-segmented label {
+  flex-grow: 1;
+  margin: 0;
+  padding: 4px 0;
+  font-size: inherit;
+  font-weight: normal;
+  line-height: initial;
+  text-align: center;
+  cursor: pointer;
+}
+
+.clr-segmented label:first-of-type {
+  border-radius: 10px 0 0 10px;
+}
+
+.clr-segmented label:last-of-type {
+  border-radius: 0 10px 10px 0;
+}
+
+.clr-segmented input:checked + label {
+  color: #fff;
+  background-color: #666;
+}
+
+.clr-swatches {
+  order: 2;
+  width: calc(100% - 32px);
+  margin: 0 16px;
+}
+
+.clr-swatches div {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 12px;
+  justify-content: center;
+}
+
+.clr-swatches button {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  margin: 0 4px 6px 4px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  color: inherit;
+  text-indent: -1000px;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.clr-swatches button:after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border-radius: inherit;
+  background-color: currentColor;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
+}
+
+input.clr-color {
+  order: 1;
+  width: calc(100% - 80px);
+  height: 32px;
+  margin: 15px 20px 20px auto;
+  padding: 0 10px;
+  border: 1px solid #ddd;
+  border-radius: 16px;
+  color: #444;
+  background-color: #fff;
+  font-family: sans-serif;
+  font-size: 14px;
+  text-align: center;
+  box-shadow: none;
+}
+
+input.clr-color:focus {
+  outline: none;
+  border: 1px solid #1e90ff;
+}
+
+.clr-close,
+.clr-clear {
+  display: none;
+  order: 2;
+  height: 24px;
+  margin: 0 20px 20px;
+  padding: 0 20px;
+  border: 0;
+  border-radius: 12px;
+  color: #fff;
+  background-color: #666;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.clr-close {
+  display: block;
+  margin: 0 20px 20px auto;
+}
+
+.clr-preview {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  margin: 15px 0 20px 20px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.clr-preview:before,
+.clr-preview:after {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  border: 1px solid #fff;
+  border-radius: 50%;
+}
+
+.clr-preview:after {
+  border: 0;
+  background-color: currentColor;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
+}
+
+.clr-preview button {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  outline-offset: -2px;
+  background-color: transparent;
+  text-indent: -9999px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.clr-marker,
+.clr-hue div,
+.clr-alpha div,
+.clr-color {
+  box-sizing: border-box;
+}
+
+.clr-field {
+  display: inline-block;
+  position: relative;
+  color: transparent;
+}
+
+.clr-field input {
+  margin: 0;
+  direction: ltr;
+}
+
+.clr-field.clr-rtl input {
+  text-align: right;
+}
+
+.clr-field button {
+  position: absolute;
+  width: 30px;
+  height: 100%;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  text-indent: -1000px;
+  white-space: nowrap;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.clr-field.clr-rtl button {
+  right: auto;
+  left: 0;
+}
+
+.clr-field button:after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  border-radius: inherit;
+  background-color: currentColor;
+  box-shadow: inset 0 0 1px rgba(0,0,0,.5);
+}
+
+.clr-alpha,
+.clr-alpha div,
+.clr-swatches button,
+.clr-preview:before,
+.clr-field button {
+  background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
+  background-position: 0 0, 4px 4px;
+  background-size: 8px 8px;
+}
+
+.clr-marker:focus {
+  outline: none;
+}
+
+.clr-keyboard-nav .clr-marker:focus,
+.clr-keyboard-nav .clr-hue input:focus + div,
+.clr-keyboard-nav .clr-alpha input:focus + div,
+.clr-keyboard-nav .clr-segmented input:focus + label {
+  outline: none;
+  box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;
+}
+
+.clr-picker[data-alpha="false"] .clr-alpha {
+  display: none;
+}
+
+.clr-picker[data-minimal="true"] {
+  padding-top: 16px;
+}
+
+.clr-picker[data-minimal="true"] .clr-gradient,
+.clr-picker[data-minimal="true"] .clr-hue,
+.clr-picker[data-minimal="true"] .clr-alpha,
+.clr-picker[data-minimal="true"] .clr-color,
+.clr-picker[data-minimal="true"] .clr-preview {
+  display: none;
+}
+
+/** Dark theme **/
+
+.clr-dark {
+  background-color: #444;
+}
+
+.clr-dark .clr-segmented {
+  border-color: #777;
+}
+
+.clr-dark .clr-swatches button:after {
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
+}
+
+.clr-dark input.clr-color {
+  color: #fff;
+  border-color: #777;
+  background-color: #555;
+}
+
+.clr-dark input.clr-color:focus {
+  border-color: #1e90ff;
+}
+
+.clr-dark .clr-preview:after {
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
+}
+
+.clr-dark .clr-alpha,
+.clr-dark .clr-alpha div,
+.clr-dark .clr-swatches button,
+.clr-dark .clr-preview:before {
+  background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);
+}
+
+/** Polaroid theme **/
+
+.clr-picker.clr-polaroid {
+  border-radius: 6px;
+  box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2);
+}
+
+.clr-picker.clr-polaroid:before {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 16px;
+  height: 10px;
+  left: 20px;
+  top: -10px;
+  border: solid transparent;
+  border-width: 0 8px 10px 8px;
+  border-bottom-color: currentColor;
+  box-sizing: border-box;
+  color: #fff;
+  filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));
+  pointer-events: none;
+}
+
+.clr-picker.clr-polaroid.clr-dark:before {
+  color: #444;
+}
+
+.clr-picker.clr-polaroid.clr-left:before {
+  left: auto;
+  right: 20px;
+}
+
+.clr-picker.clr-polaroid.clr-top:before {
+  top: auto;
+  bottom: -10px;
+  transform: rotateZ(180deg);
+}
+
+.clr-polaroid .clr-gradient {
+  width: calc(100% - 20px);
+  height: 120px;
+  margin: 10px;
+  border-radius: 3px;
+}
+
+.clr-polaroid .clr-hue,
+.clr-polaroid .clr-alpha {
+  width: calc(100% - 30px);
+  height: 10px;
+  margin: 6px 15px;
+  border-radius: 5px;
+}
+
+.clr-polaroid .clr-hue div,
+.clr-polaroid .clr-alpha div {
+  box-shadow: 0 0 5px rgba(0,0,0,.2);
+}
+
+.clr-polaroid .clr-format {
+  width: calc(100% - 20px);
+  margin: 0 10px 15px;
+}
+
+.clr-polaroid .clr-swatches {
+  width: calc(100% - 12px);
+  margin: 0 6px;
+}
+.clr-polaroid .clr-swatches div {
+  padding-bottom: 10px;
+}
+
+.clr-polaroid .clr-swatches button {
+  width: 22px;
+  height: 22px;
+}
+
+.clr-polaroid input.clr-color {
+  width: calc(100% - 60px);
+  margin: 10px 10px 15px auto;
+}
+
+.clr-polaroid .clr-clear {
+  margin: 0 10px 15px 10px;
+}
+
+.clr-polaroid .clr-close {
+  margin: 0 10px 15px auto;
+}
+
+.clr-polaroid .clr-preview {
+  margin: 10px 0 15px 10px;
+}
+
+/** Large theme **/
+
+.clr-picker.clr-large {
+  width: 275px;
+}
+
+.clr-large .clr-gradient {
+  height: 150px;
+}
+
+.clr-large .clr-swatches button {
+  width: 22px;
+  height: 22px;
+}
+
+/** Pill (horizontal) theme **/
+
+.clr-picker.clr-pill {
+  width: 380px;
+  padding-left: 180px;
+  box-sizing: border-box;
+}
+
+.clr-pill .clr-gradient {
+  position: absolute;
+  width: 180px;
+  height: 100%;
+  left: 0;
+  top: 0;
+  margin-bottom: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+.clr-pill .clr-hue {
+  margin-top: 20px;
+}
@@ -35,27 +35,22 @@ function createVisualizer(node, inputName, typeName, inputData, app) {
        name: "preview3d",
        callback: () => {},
        draw : function(ctx, node, widgetWidth, widgetY, widgetHeight) {
-            const margin = 10
-            const top_offset = 5
+            const margin = 30
+            const top_offset = LiteGraph.NODE_TITLE_HEIGHT+margin
            const visible = app.canvas.ds.scale > 0.5 && this.type === typeName
-            const w = widgetWidth - margin * 4
-            const clientRectBound = ctx.canvas.getBoundingClientRect()
-            const transform = new DOMMatrix()
-                .scaleSelf(
-                    clientRectBound.width / ctx.canvas.width,
-                    clientRectBound.height / ctx.canvas.height
-                )
-                .multiplySelf(ctx.getTransform())
-                .translateSelf(margin, margin + widgetY)
-            
+
+            const [x, y] = node.getBounding();
+            const [left, top] = app.canvasPosToClientPos([x, y]);
+            const width = node.width * app.canvas.ds.scale;
+            const height = (node.height - top_offset ) * app.canvas.ds.scale;
+
            Object.assign(this.visualizer.style, {
-                left: `${transform.a * margin + transform.e}px`,
-                top: `${transform.d + transform.f + top_offset}px`,
-                width: `${(w * transform.a)}px`,
-                height: `${(w * transform.d - widgetHeight - (margin * 15) * transform.d)}px`,
+                left: `${left}px`,
+                top: `${top+(top_offset * app.canvas.ds.scale)}px`,
+                width: `${width}px`,
+                height: `${height}px`,
                position: "absolute",
                overflow: "hidden",
-                zIndex: app.graph._nodes.indexOf(node),
            })

            Object.assign(this.visualizer.children[0].style, {