nodes/MrForExample-ComfyUI-3D-Pack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update preview nodes

Browse Source 
- Support custom background color in preview node
- Fix Preview node does not update automatically with same mesh name
- Add system config file that allow custom clients IP address
This commit is contained in:
MrForExample
2024-03-10 20:25:05 +01:00
parent f442e095f9
commit b4e136aa55
14 changed files with 195 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/html/gsVisualizer.html
+40 -11
View File
@@ -4,19 +4,20 @@
<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/progressStyle.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/sharedStyle.css">
</head>
<body>
<div id="root">
<div id="progress-container">
<dialog open id="progress-dialog">
<p>
<label for="progress-indicator">Loading scene...</label>
</p>
<progress max="100" id="progress-indicator"></progress>
</dialog>
</div>
<div id="progress-container">
<dialog open id="progress-dialog">
<p>
<label for="progress-indicator">Loading scene...</label>
</p>
<progress max="100" id="progress-indicator"></progress>
</dialog>
</div>
<div id="container">
<canvas id="canvas"></canvas>
<script type="importmap">
{
@@ -25,7 +26,35 @@
}
}
</script>
<script id="visualizer" type="module" filepath="" crossorigin src="/extensions/ComfyUI-3D-Pack/js/gsVisualizer.js"></script>
<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>
Coloris({
el: '.coloris',
theme: 'polaroid',
themeMode: 'dark',
format: 'rgb',
alpha: false,
swatches: [
'rgb(0, 0, 0)',
'rgb(128, 128, 128)',
'rgb(255, 255, 255)',
'rgb(132, 188, 218)',
'rgb(128, 227, 119)',
'rgb(213, 96, 98)'
]
});
const canvas = document.getElementById("canvas");
const handleClick = () => {
Coloris.close();
document.activeElement.blur();
};
canvas.addEventListener('click', handleClick);
</script>
<input type="text" id="color-picker" class="coloris" value="rgb(0, 0, 0)"></input>
</body>
</html>
web/html/threeVisualizer.html
+33 -11
View File
@@ -4,10 +4,11 @@
<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/progressStyle.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/sharedStyle.css">
</head>
<body>
<body>
<div id="progress-container">
<dialog open id="progress-dialog">
<p>
@@ -17,16 +18,37 @@
</dialog>
</div>
<div id="container"></div>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@latest/build/three.module.js",
"three/addons/": "https://unpkg.com/three@latest/examples/jsm/"
}
}
<div id="container">
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@latest/build/three.module.js",
"three/addons/": "https://unpkg.com/three@latest/examples/jsm/"
}
}
</script>
<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>
Coloris({
el: '.coloris',
theme: 'polaroid',
themeMode: 'dark',
format: 'rgb',
alpha: false,
swatches: [
'rgb(0, 0, 0)',
'rgb(128, 128, 128)',
'rgb(255, 255, 255)',
'rgb(132, 188, 218)',
'rgb(128, 227, 119)',
'rgb(213, 96, 98)'
]
});
</script>
<script id="visualizer" type="module" filepath="" crossorigin src="/extensions/ComfyUI-3D-Pack/js/threeVisualizer.js"></script>
<input type="text" id="color-picker" class="coloris" value="rgb(0, 0, 0)"></input>
</body>
</html>
web/js/LittlestTokyo.glb
BIN
View File
Binary file not shown.
web/js/gsVisualizer.js
+12 -5
View File
@@ -1,10 +1,12 @@
import * as SPLAT from 'gsplat';
import { api } from '/scripts/api.js'
import {getRGBValue} from '/extensions/ComfyUI-3D-Pack/js/sharedFunctions.js';
const visualizer = document.getElementById("visualizer");
const canvas = document.getElementById("canvas");
const progressDialog = document.getElementById("progress-dialog");
const progressIndicator = document.getElementById("progress-indicator");
const colorPicker = document.getElementById("color-picker");
const renderer = new SPLAT.WebGLRenderer(canvas);
const scene = new SPLAT.Scene();
@@ -19,14 +21,14 @@ const handleResize = () => {
handleResize();
window.addEventListener("resize", handleResize);
var lastFilepath = "";
var lastTimestamp = "";
var needUpdate = false;
function frameUpdate() {
var filepath = visualizer.getAttribute("filepath");
if (filepath == lastFilepath){
var timestamp = visualizer.getAttribute("timestamp");
if (timestamp == lastTimestamp){
if (needUpdate){
controls.update();
renderer.render( scene, camera );
@@ -36,8 +38,13 @@ function frameUpdate() {
needUpdate = false;
scene.reset();
progressDialog.open = true;
lastFilepath = filepath;
main(lastFilepath);
lastTimestamp = timestamp;
main(filepath);
}
var color = getRGBValue(colorPicker.value);
if (color[0] != renderer.backgroundColor.r || color[1] != renderer.backgroundColor.g || color[2] != renderer.backgroundColor.b){
renderer.backgroundColor = new SPLAT.Color32(color[0], color[1], color[2], 255); // It will automatically update background color in preview scene
}
};
web/js/libs/coloris.min.js
Vendored
+6
View File
File diff suppressed because one or more lines are too long
web/js/sharedFunctions.js
+14
View File
@@ -0,0 +1,14 @@
export function getRGBValue(colorString="rgb(0, 0, 0)", scale01=false) {
var color = colorString.split(/[\D]+/).filter(Boolean)
for (let index = 0; index < color.length; index++) {
color[index] = Number(color[index]);
}
if (scale01) {
for (let index = 0; index < color.length; index++) {
color[index] = color[index] / 255;
}
}
return color;
}
web/js/threeVisualizer.js
+14 -5
View File
@@ -1,5 +1,6 @@
import * as THREE from 'three';
import { api } from '/scripts/api.js'
import { api } from '/scripts/api.js';
import {getRGBValue} from '/extensions/ComfyUI-3D-Pack/js/sharedFunctions.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
@@ -13,6 +14,7 @@ const visualizer = document.getElementById("visualizer");
const container = document.getElementById( 'container' );
const progressDialog = document.getElementById("progress-dialog");
const progressIndicator = document.getElementById("progress-indicator");
const colorPicker = document.getElementById("color-picker");
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
@@ -50,13 +52,14 @@ window.onresize = function () {
};
var lastFilepath = "";
var lastTimestamp = "";
var needUpdate = false;
function frameUpdate() {
var filepath = visualizer.getAttribute("filepath");
if (filepath == lastFilepath){
var timestamp = visualizer.getAttribute("timestamp");
if (timestamp == lastTimestamp){
if (needUpdate){
controls.update();
renderer.render( scene, camera );
@@ -66,8 +69,14 @@ function frameUpdate() {
needUpdate = false;
scene.clear();
progressDialog.open = true;
lastFilepath = filepath;
main(lastFilepath);
lastTimestamp = timestamp;
main(filepath);
}
var color = getRGBValue(colorPicker.value, true);
if (color[0] != scene.background.r || color[1] != scene.background.g || color[2] != scene.background.b){
scene.background.setStyle(colorPicker.value);
renderer.render( scene, camera ); // Force update background color in preview scene
}
}
web/style/libs/coloris.min.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
web/style/progressStyle.css → web/style/sharedStyle.css
+30
View File
@@ -33,4 +33,34 @@ progress::-webkit-progress-value {
progress::-moz-progress-bar {
background-color: #eee;
}
#container {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}
.clr-field {
margin-left: 5px;
margin-top: 5px;
}
.clr-field button {
width: 20px;
height: 20px;
left: 5px;
right: auto;
border-radius: 5px;
}
.clr-field input {
padding-left: 36px;
width: 120px;
height: 24px;
border: 2px solid #aaa;
border-radius: 5px;
}
web/visualization.js
+4 -1
View File
@@ -17,6 +17,9 @@ class Visualizer {
const iframeDocument = this.iframe.contentWindow.document
const previewScript = iframeDocument.getElementById('visualizer')
previewScript.setAttribute("filepath", filepath)
const timestamp = Date.now().toString()
previewScript.setAttribute("timestamp", timestamp)
}
remove() {
@@ -132,7 +135,7 @@ function registerVisualizer(nodeType, nodeData, nodeClassName, typeName){
let Preview3DNode = app.graph._nodes.filter(
(wi) => wi.type == nodeClassName
)
let nodeName = `Preview3DNode_${Preview3DNode.length}`
let nodeName = `Preview3DNode_${nodeClassName}`
console.log(`[Comfy3D] Create: ${nodeName}`)