34 |
12 |
18 |
19 |
20 |
21 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/web/js/threeVisualizer.js:
--------------------------------------------------------------------------------
1 | import * as THREE from 'three';
2 | import { api } from '../../../scripts/api.js'
3 |
4 | import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
5 | import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
6 |
7 | import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
8 |
9 | const visualizer = document.getElementById("visualizer");
10 | const container = document.getElementById( 'container' );
11 | const progressDialog = document.getElementById("progress-dialog");
12 | const progressIndicator = document.getElementById("progress-indicator");
13 |
14 | const renderer = new THREE.WebGLRenderer( { antialias: true } );
15 | renderer.setPixelRatio( window.devicePixelRatio );
16 | renderer.setSize( window.innerWidth, window.innerHeight );
17 | container.appendChild( renderer.domElement );
18 |
19 | const pmremGenerator = new THREE.PMREMGenerator( renderer );
20 |
21 | // scene
22 | const scene = new THREE.Scene();
23 | scene.background = new THREE.Color( 0x000000 );
24 | scene.environment = pmremGenerator.fromScene( new RoomEnvironment( renderer ), 0.04 ).texture;
25 |
26 | const ambientLight = new THREE.AmbientLight( 0xffffff );
27 |
28 | const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
29 | camera.position.set( 5, 2, 8 );
30 | const pointLight = new THREE.PointLight( 0xffffff, 15 );
31 | camera.add( pointLight );
32 |
33 | const controls = new OrbitControls( camera, renderer.domElement );
34 | controls.target.set( 0, 0.5, 0 );
35 | controls.update();
36 | controls.enablePan = true;
37 | controls.enableDamping = true;
38 |
39 | // Handle window reseize event
40 | window.onresize = function () {
41 |
42 | camera.aspect = window.innerWidth / window.innerHeight;
43 | camera.updateProjectionMatrix();
44 |
45 | renderer.setSize( window.innerWidth, window.innerHeight );
46 |
47 | };
48 |
49 |
50 | var lastFilepath = "";
51 | var needUpdate = false;
52 |
53 | function frameUpdate() {
54 |
55 | var filepath = visualizer.getAttribute("filepath");
56 | if (filepath == lastFilepath){
57 | if (needUpdate){
58 | controls.update();
59 | renderer.render( scene, camera );
60 | }
61 | requestAnimationFrame( frameUpdate );
62 | } else {
63 | needUpdate = false;
64 | scene.clear();
65 | progressDialog.open = true;
66 | lastFilepath = filepath;
67 | main(JSON.parse(lastFilepath));
68 | }
69 | }
70 |
71 | const onProgress = function ( xhr ) {
72 | if ( xhr.lengthComputable ) {
73 | progressIndicator.value = xhr.loaded / xhr.total * 100;
74 | }
75 | };
76 | const onError = function ( e ) {
77 | console.error( e );
78 | };
79 |
80 | async function main(params) {
81 | if(params?.filename){
82 | const url = api.apiURL('/view?' + new URLSearchParams(params)).replace(/extensions.*\//,"");
83 | const fileExt = params.filename.slice(params.filename.lastIndexOf(".")+1)
84 |
85 | if (fileExt == "obj"){
86 | const loader = new OBJLoader();
87 |
88 | loader.load( url, function ( obj ) {
89 | obj.scale.setScalar( 5 );
90 | console.log(obj)
91 | scene.add( obj );
92 | obj.traverse(node => {
93 | if (node.material && node.material.map == null) {
94 | node.material.vertexColors = true;
95 | }
96 | });
97 |
98 | }, onProgress, onError );
99 | }
100 |
101 | needUpdate = true;
102 | }
103 |
104 | scene.add( ambientLight );
105 | scene.add( camera );
106 |
107 | progressDialog.close();
108 |
109 | frameUpdate();
110 | }
111 |
112 | main();
--------------------------------------------------------------------------------
/web/style/progressStyle.css:
--------------------------------------------------------------------------------
1 | dialog {
2 | width: 100%;
3 | text-align: center;
4 | max-width: 20em;
5 | color: white;
6 | background-color: #000;
7 | border: none;
8 | position: relative;
9 | transform: translate(-50%, -50%);
10 | }
11 |
12 | #progress-container {
13 | position: absolute;
14 | top: 50%;
15 | left: 50%;
16 | }
17 |
18 | progress {
19 | width: 100%;
20 | height: 1em;
21 | border: none;
22 | background-color: #fff;
23 | color: #eee;
24 | }
25 |
26 | progress::-webkit-progress-bar {
27 | background-color: #333;
28 | }
29 |
30 | progress::-webkit-progress-value {
31 | background-color: #eee;
32 | }
33 |
34 | progress::-moz-progress-bar {
35 | background-color: #eee;
36 | }
--------------------------------------------------------------------------------
/web/style/threeStyle.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | background-color: #000;
4 | color: #fff;
5 | font-family: Monospace;
6 | font-size: 13px;
7 | line-height: 24px;
8 | overscroll-behavior: none;
9 | }
10 |
11 | a {
12 | color: #ff0;
13 | text-decoration: none;
14 | }
15 |
16 | a:hover {
17 | text-decoration: underline;
18 | }
19 |
20 | button {
21 | cursor: pointer;
22 | text-transform: uppercase;
23 | }
24 |
25 | #info {
26 | position: absolute;
27 | top: 0px;
28 | width: 100%;
29 | padding: 10px;
30 | box-sizing: border-box;
31 | text-align: center;
32 | -moz-user-select: none;
33 | -webkit-user-select: none;
34 | -ms-user-select: none;
35 | user-select: none;
36 | pointer-events: none;
37 | z-index: 1; /* TODO Solve this in HTML */
38 | }
39 |
40 | a, button, input, select {
41 | pointer-events: auto;
42 | }
43 |
44 | .lil-gui {
45 | z-index: 2 !important; /* TODO Solve this in HTML */
46 | }
47 |
48 | @media all and ( max-width: 640px ) {
49 | .lil-gui.root {
50 | right: auto;
51 | top: auto;
52 | max-height: 50%;
53 | max-width: 80%;
54 | bottom: 0;
55 | left: 0;
56 | }
57 | }
58 |
59 | #overlay {
60 | position: absolute;
61 | font-size: 16px;
62 | z-index: 2;
63 | top: 0;
64 | left: 0;
65 | width: 100%;
66 | height: 100%;
67 | display: flex;
68 | align-items: center;
69 | justify-content: center;
70 | flex-direction: column;
71 | background: rgba(0,0,0,0.7);
72 | }
73 |
74 | #overlay button {
75 | background: transparent;
76 | border: 0;
77 | border: 1px solid rgb(255, 255, 255);
78 | border-radius: 4px;
79 | color: #ffffff;
80 | padding: 12px 18px;
81 | text-transform: uppercase;
82 | cursor: pointer;
83 | }
84 |
85 | #notSupported {
86 | width: 50%;
87 | margin: auto;
88 | background-color: #f00;
89 | margin-top: 20px;
90 | padding: 10px;
91 | }
--------------------------------------------------------------------------------
/web/visualization.js:
--------------------------------------------------------------------------------
1 | import { app } from "../../scripts/app.js"
2 |
3 | class Visualizer {
4 | constructor(node, container, visualSrc) {
5 | this.node = node
6 |
7 | this.iframe = document.createElement('iframe')
8 | Object.assign(this.iframe, {
9 | scrolling: "no",
10 | overflow: "hidden",
11 | })
12 | this.iframe.src = "/extensions/ComfyUI-Flowty-TripoSR/html/" + visualSrc + ".html"
13 | container.appendChild(this.iframe)
14 | }
15 |
16 | updateVisual(params) {
17 | const iframeDocument = this.iframe.contentWindow.document
18 | const previewScript = iframeDocument.getElementById('visualizer')
19 | previewScript.setAttribute("filepath", JSON.stringify(params))
20 | }
21 |
22 | remove() {
23 | this.container.remove()
24 | }
25 | }
26 |
27 | function createVisualizer(node, inputName, typeName, inputData, app) {
28 | node.name = inputName
29 |
30 | const widget = {
31 | type: typeName,
32 | name: "preview3d",
33 | callback: () => {},
34 | draw : function(ctx, node, widgetWidth, widgetY, widgetHeight) {
35 | const margin = 10
36 | const top_offset = 5
37 | const visible = app.canvas.ds.scale > 0.5 && this.type === typeName
38 | const w = widgetWidth - margin * 4
39 | const clientRectBound = ctx.canvas.getBoundingClientRect()
40 | const transform = new DOMMatrix()
41 | .scaleSelf(
42 | clientRectBound.width / ctx.canvas.width,
43 | clientRectBound.height / ctx.canvas.height
44 | )
45 | .multiplySelf(ctx.getTransform())
46 | .translateSelf(margin, margin + widgetY)
47 |
48 | Object.assign(this.visualizer.style, {
49 | left: `${transform.a * margin + transform.e}px`,
50 | top: `${transform.d + transform.f + top_offset}px`,
51 | width: `${(w * transform.a)}px`,
52 | height: `${(w * transform.d - widgetHeight - (margin * 15) * transform.d)}px`,
53 | position: "absolute",
54 | overflow: "hidden",
55 | zIndex: app.graph._nodes.indexOf(node),
56 | })
57 |
58 | Object.assign(this.visualizer.children[0].style, {
59 | transformOrigin: "50% 50%",
60 | width: '100%',
61 | height: '100%',
62 | border: '0 none',
63 | })
64 |
65 | this.visualizer.hidden = !visible
66 | },
67 | }
68 |
69 | const container = document.createElement('div')
70 | container.id = `Comfy3D_${inputName}`
71 |
72 | node.visualizer = new Visualizer(node, container, typeName)
73 | widget.visualizer = container
74 | widget.parent = node
75 |
76 | document.body.appendChild(widget.visualizer)
77 |
78 | node.addCustomWidget(widget)
79 |
80 | node.updateParameters = (params) => {
81 | node.visualizer.updateVisual(params)
82 | }
83 |
84 | // Events for drawing backgound
85 | node.onDrawBackground = function (ctx) {
86 | if (!this.flags.collapsed) {
87 | node.visualizer.iframe.hidden = false
88 | } else {
89 | node.visualizer.iframe.hidden = true
90 | }
91 | }
92 |
93 | // Make sure visualization iframe is always inside the node when resize the node
94 | node.onResize = function () {
95 | let [w, h] = this.size
96 | if (w <= 600) w = 600
97 | if (h <= 500) h = 500
98 |
99 | if (w > 600) {
100 | h = w - 100
101 | }
102 |
103 | this.size = [w, h]
104 | }
105 |
106 | // Events for remove nodes
107 | node.onRemoved = () => {
108 | for (let w in node.widgets) {
109 | if (node.widgets[w].visualizer) {
110 | node.widgets[w].visualizer.remove()
111 | }
112 | }
113 | }
114 |
115 |
116 | return {
117 | widget: widget,
118 | }
119 | }
120 |
121 | function registerVisualizer(nodeType, nodeData, nodeClassName, typeName){
122 | if (nodeData.name == nodeClassName) {
123 | console.log("[3D Visualizer] Registering node: " + nodeData.name)
124 |
125 | const onNodeCreated = nodeType.prototype.onNodeCreated
126 |
127 | nodeType.prototype.onNodeCreated = async function() {
128 | const r = onNodeCreated
129 | ? onNodeCreated.apply(this, arguments)
130 | : undefined
131 |
132 | let Preview3DNode = app.graph._nodes.filter(
133 | (wi) => wi.type == nodeClassName
134 | )
135 | let nodeName = `Preview3DNode_${Preview3DNode.length}`
136 |
137 | console.log(`[Comfy3D] Create: ${nodeName}`)
138 |
139 | const result = await createVisualizer.apply(this, [this, nodeName, typeName, {}, app])
140 |
141 | this.setSize([600, 500])
142 |
143 | return r
144 | }
145 |
146 | nodeType.prototype.onExecuted = async function(message) {
147 | if (message?.mesh) {
148 | this.updateParameters(message.mesh[0])
149 | }
150 | }
151 | }
152 | }
153 |
154 | app.registerExtension({
155 | name: "Mr.ForExample.Visualizer.GS",
156 |
157 | async init (app) {
158 |
159 | },
160 |
161 | async beforeRegisterNodeDef(nodeType, nodeData, app) {
162 | registerVisualizer(nodeType, nodeData, "TripoSRViewer", "threeVisualizer")
163 | },
164 | })
--------------------------------------------------------------------------------
/workflow-sample.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flowtyone/ComfyUI-Flowty-TripoSR/a0c94ac60a7cc062604f61aeeea6d0d493521de3/workflow-sample.png
--------------------------------------------------------------------------------
/workflow_rembg.json:
--------------------------------------------------------------------------------
1 | {
2 | "last_node_id": 19,
3 | "last_link_id": 26,
4 | "nodes": [
5 | {
6 | "id": 17,
7 | "type": "ImageRemoveBackground+",
8 | "pos": [
9 | -457,
10 | 656
11 | ],
12 | "size": {
13 | "0": 241.79998779296875,
14 | "1": 46
15 | },
16 | "flags": {},
17 | "order": 3,
18 | "mode": 0,
19 | "inputs": [
20 | {
21 | "name": "rembg_session",
22 | "type": "REMBG_SESSION",
23 | "link": 22,
24 | "slot_index": 0
25 | },
26 | {
27 | "name": "image",
28 | "type": "IMAGE",
29 | "link": 21
30 | }
31 | ],
32 | "outputs": [
33 | {
34 | "name": "IMAGE",
35 | "type": "IMAGE",
36 | "links": [
37 | 23
38 | ],
39 | "shape": 3,
40 | "slot_index": 0
41 | },
42 | {
43 | "name": "MASK",
44 | "type": "MASK",
45 | "links": [
46 | 26
47 | ],
48 | "shape": 3,
49 | "slot_index": 1
50 | }
51 | ],
52 | "properties": {
53 | "Node name for S&R": "ImageRemoveBackground+"
54 | }
55 | },
56 | {
57 | "id": 14,
58 | "type": "TripoSRModelLoader",
59 | "pos": [
60 | -870,
61 | 421
62 | ],
63 | "size": {
64 | "0": 315,
65 | "1": 82
66 | },
67 | "flags": {},
68 | "order": 0,
69 | "mode": 0,
70 | "outputs": [
71 | {
72 | "name": "TRIPOSR_MODEL",
73 | "type": "TRIPOSR_MODEL",
74 | "links": [
75 | 16
76 | ],
77 | "shape": 3
78 | }
79 | ],
80 | "properties": {
81 | "Node name for S&R": "TripoSRModelLoader"
82 | },
83 | "widgets_values": [
84 | "model.ckpt",
85 | 8192
86 | ]
87 | },
88 | {
89 | "id": 18,
90 | "type": "RemBGSession+",
91 | "pos": [
92 | -868,
93 | 559
94 | ],
95 | "size": {
96 | "0": 315,
97 | "1": 82
98 | },
99 | "flags": {},
100 | "order": 1,
101 | "mode": 0,
102 | "outputs": [
103 | {
104 | "name": "REMBG_SESSION",
105 | "type": "REMBG_SESSION",
106 | "links": [
107 | 22
108 | ],
109 | "shape": 3
110 | }
111 | ],
112 | "properties": {
113 | "Node name for S&R": "RemBGSession+"
114 | },
115 | "widgets_values": [
116 | "u2net: general purpose",
117 | "CPU"
118 | ]
119 | },
120 | {
121 | "id": 12,
122 | "type": "TripoSRSampler",
123 | "pos": [
124 | -129,
125 | 598
126 | ],
127 | "size": {
128 | "0": 315,
129 | "1": 122
130 | },
131 | "flags": {},
132 | "order": 4,
133 | "mode": 0,
134 | "inputs": [
135 | {
136 | "name": "model",
137 | "type": "TRIPOSR_MODEL",
138 | "link": 16,
139 | "slot_index": 0
140 | },
141 | {
142 | "name": "reference_image",
143 | "type": "IMAGE",
144 | "link": 23,
145 | "slot_index": 1
146 | },
147 | {
148 | "name": "reference_mask",
149 | "type": "MASK",
150 | "link": 26
151 | }
152 | ],
153 | "outputs": [
154 | {
155 | "name": "MESH",
156 | "type": "MESH",
157 | "links": [
158 | 15
159 | ],
160 | "shape": 3
161 | }
162 | ],
163 | "properties": {
164 | "Node name for S&R": "TripoSRSampler"
165 | },
166 | "widgets_values": [
167 | 256,
168 | 25
169 | ]
170 | },
171 | {
172 | "id": 13,
173 | "type": "TripoSRViewer",
174 | "pos": [
175 | -128,
176 | 772
177 | ],
178 | "size": [
179 | 600,
180 | 500
181 | ],
182 | "flags": {},
183 | "order": 5,
184 | "mode": 0,
185 | "inputs": [
186 | {
187 | "name": "mesh",
188 | "type": "MESH",
189 | "link": 15,
190 | "slot_index": 0
191 | }
192 | ],
193 | "properties": {
194 | "Node name for S&R": "TripoSRViewer"
195 | },
196 | "widgets_values": [
197 | null
198 | ]
199 | },
200 | {
201 | "id": 15,
202 | "type": "LoadImage",
203 | "pos": [
204 | -869,
205 | 696
206 | ],
207 | "size": {
208 | "0": 315,
209 | "1": 314
210 | },
211 | "flags": {},
212 | "order": 2,
213 | "mode": 0,
214 | "outputs": [
215 | {
216 | "name": "IMAGE",
217 | "type": "IMAGE",
218 | "links": [
219 | 21
220 | ],
221 | "shape": 3,
222 | "slot_index": 0
223 | },
224 | {
225 | "name": "MASK",
226 | "type": "MASK",
227 | "links": [],
228 | "shape": 3,
229 | "slot_index": 1
230 | }
231 | ],
232 | "properties": {
233 | "Node name for S&R": "LoadImage"
234 | },
235 | "widgets_values": [
236 | "marble (1).png",
237 | "image"
238 | ]
239 | }
240 | ],
241 | "links": [
242 | [
243 | 15,
244 | 12,
245 | 0,
246 | 13,
247 | 0,
248 | "MESH"
249 | ],
250 | [
251 | 16,
252 | 14,
253 | 0,
254 | 12,
255 | 0,
256 | "TRIPOSR_MODEL"
257 | ],
258 | [
259 | 21,
260 | 15,
261 | 0,
262 | 17,
263 | 1,
264 | "IMAGE"
265 | ],
266 | [
267 | 22,
268 | 18,
269 | 0,
270 | 17,
271 | 0,
272 | "REMBG_SESSION"
273 | ],
274 | [
275 | 23,
276 | 17,
277 | 0,
278 | 12,
279 | 1,
280 | "IMAGE"
281 | ],
282 | [
283 | 26,
284 | 17,
285 | 1,
286 | 12,
287 | 2,
288 | "MASK"
289 | ]
290 | ],
291 | "groups": [],
292 | "config": {},
293 | "extra": {},
294 | "version": 0.4
295 | }
--------------------------------------------------------------------------------
/workflow_simple.json:
--------------------------------------------------------------------------------
1 | {
2 | "last_node_id": 16,
3 | "last_link_id": 20,
4 | "nodes": [
5 | {
6 | "id": 13,
7 | "type": "TripoSRViewer",
8 | "pos": [
9 | 103,
10 | 796
11 | ],
12 | "size": [
13 | 600,
14 | 500
15 | ],
16 | "flags": {},
17 | "order": 3,
18 | "mode": 0,
19 | "inputs": [
20 | {
21 | "name": "mesh",
22 | "type": "MESH",
23 | "link": 15,
24 | "slot_index": 0
25 | }
26 | ],
27 | "properties": {
28 | "Node name for S&R": "TripoSRViewer"
29 | },
30 | "widgets_values": [
31 | null
32 | ]
33 | },
34 | {
35 | "id": 14,
36 | "type": "TripoSRModelLoader",
37 | "pos": [
38 | -596,
39 | 464
40 | ],
41 | "size": {
42 | "0": 315,
43 | "1": 82
44 | },
45 | "flags": {},
46 | "order": 0,
47 | "mode": 0,
48 | "outputs": [
49 | {
50 | "name": "TRIPOSR_MODEL",
51 | "type": "TRIPOSR_MODEL",
52 | "links": [
53 | 16
54 | ],
55 | "shape": 3
56 | }
57 | ],
58 | "properties": {
59 | "Node name for S&R": "TripoSRModelLoader"
60 | },
61 | "widgets_values": [
62 | "model.ckpt",
63 | 8192
64 | ]
65 | },
66 | {
67 | "id": 15,
68 | "type": "LoadImage",
69 | "pos": [
70 | -869,
71 | 696
72 | ],
73 | "size": {
74 | "0": 315,
75 | "1": 314
76 | },
77 | "flags": {},
78 | "order": 1,
79 | "mode": 0,
80 | "outputs": [
81 | {
82 | "name": "IMAGE",
83 | "type": "IMAGE",
84 | "links": [
85 | 17
86 | ],
87 | "shape": 3
88 | },
89 | {
90 | "name": "MASK",
91 | "type": "MASK",
92 | "links": [],
93 | "shape": 3,
94 | "slot_index": 1
95 | }
96 | ],
97 | "properties": {
98 | "Node name for S&R": "LoadImage"
99 | },
100 | "widgets_values": [
101 | "robot.png",
102 | "image"
103 | ]
104 | },
105 | {
106 | "id": 12,
107 | "type": "TripoSRSampler",
108 | "pos": [
109 | -103,
110 | 592
111 | ],
112 | "size": {
113 | "0": 315,
114 | "1": 122
115 | },
116 | "flags": {},
117 | "order": 2,
118 | "mode": 0,
119 | "inputs": [
120 | {
121 | "name": "model",
122 | "type": "TRIPOSR_MODEL",
123 | "link": 16,
124 | "slot_index": 0
125 | },
126 | {
127 | "name": "reference_image",
128 | "type": "IMAGE",
129 | "link": 17,
130 | "slot_index": 1
131 | },
132 | {
133 | "name": "reference_mask",
134 | "type": "MASK",
135 | "link": null
136 | }
137 | ],
138 | "outputs": [
139 | {
140 | "name": "MESH",
141 | "type": "MESH",
142 | "links": [
143 | 15
144 | ],
145 | "shape": 3
146 | }
147 | ],
148 | "properties": {
149 | "Node name for S&R": "TripoSRSampler"
150 | },
151 | "widgets_values": [
152 | 256,
153 | 25
154 | ]
155 | }
156 | ],
157 | "links": [
158 | [
159 | 15,
160 | 12,
161 | 0,
162 | 13,
163 | 0,
164 | "MESH"
165 | ],
166 | [
167 | 16,
168 | 14,
169 | 0,
170 | 12,
171 | 0,
172 | "TRIPOSR_MODEL"
173 | ],
174 | [
175 | 17,
176 | 15,
177 | 0,
178 | 12,
179 | 1,
180 | "IMAGE"
181 | ]
182 | ],
183 | "groups": [],
184 | "config": {},
185 | "extra": {},
186 | "version": 0.4
187 | }
--------------------------------------------------------------------------------