[3d] add output preview screen for load3d node

Comfy-Org · Feb 8, 2025 · 84c5f7b · 84c5f7b
1 parent a914456
commit 84c5f7b
Show file tree

Hide file tree

Showing 4 changed files with 500 additions and 88 deletions.
diff --git a/src/extensions/core/load3d.ts b/src/extensions/core/load3d.ts
@@ -25,7 +25,7 @@ app.registerExtension({
         container.id = `comfy-load-3d-${load3dNode.length}`
         container.classList.add('comfy-load-3d')
 
-        const load3d = new Load3d(container)
+        const load3d = new Load3d(container, true)
 
         containerToLoad3D.set(container.id, load3d)
 
@@ -129,40 +129,34 @@ app.registerExtension({
 
     const material = node.widgets.find((w: IWidget) => w.name === 'material')
 
-    const lightIntensity = node.widgets.find(
-      (w: IWidget) => w.name === 'light_intensity'
-    )
-
     const upDirection = node.widgets.find(
       (w: IWidget) => w.name === 'up_direction'
     )
 
-    const fov = node.widgets.find((w: IWidget) => w.name === 'fov')
-
     let cameraState = node.properties['Camera Info']
 
+    const width = node.widgets.find((w: IWidget) => w.name === 'width')
+    const height = node.widgets.find((w: IWidget) => w.name === 'height')
+
     const config = new Load3DConfiguration(load3d)
 
     config.configure(
       'input',
       modelWidget,
       material,
-      lightIntensity,
       upDirection,
-      fov,
-      cameraState
+      cameraState,
+      width,
+      height
     )
 
-    const w = node.widgets.find((w: IWidget) => w.name === 'width')
-    const h = node.widgets.find((w: IWidget) => w.name === 'height')
-
     // @ts-expect-error hacky override
     sceneWidget.serializeValue = async () => {
       node.properties['Camera Info'] = load3d.getCameraState()
 
       const { scene: imageData, mask: maskData } = await load3d.captureScene(
-        w.value,
-        h.value
+        width.value,
+        height.value
       )
 
       const [data, dataMask] = await Promise.all([
@@ -194,7 +188,7 @@ app.registerExtension({
         container.id = `comfy-load-3d-animation-${load3dNode.length}`
         container.classList.add('comfy-load-3d-animation')
 
-        const load3d = new Load3dAnimation(container)
+        const load3d = new Load3dAnimation(container, true)
 
         containerToLoad3D.set(container.id, load3d)
 
@@ -298,42 +292,36 @@ app.registerExtension({
 
     const material = node.widgets.find((w: IWidget) => w.name === 'material')
 
-    const lightIntensity = node.widgets.find(
-      (w: IWidget) => w.name === 'light_intensity'
-    )
-
     const upDirection = node.widgets.find(
       (w: IWidget) => w.name === 'up_direction'
     )
 
-    const fov = node.widgets.find((w: IWidget) => w.name === 'fov')
-
     let cameraState = node.properties['Camera Info']
 
+    const width = node.widgets.find((w: IWidget) => w.name === 'width')
+    const height = node.widgets.find((w: IWidget) => w.name === 'height')
+
     const config = new Load3DConfiguration(load3d)
 
     config.configure(
       'input',
       modelWidget,
       material,
-      lightIntensity,
       upDirection,
-      fov,
-      cameraState
+      cameraState,
+      width,
+      height
     )
 
-    const w = node.widgets.find((w: IWidget) => w.name === 'width')
-    const h = node.widgets.find((w: IWidget) => w.name === 'height')
-
     // @ts-expect-error hacky override
     sceneWidget.serializeValue = async () => {
       node.properties['Camera Info'] = load3d.getCameraState()
 
       load3d.toggleAnimation(false)
 
       const { scene: imageData, mask: maskData } = await load3d.captureScene(
-        w.value,
-        h.value
+        width.value,
+        height.value
       )
 
       const [data, dataMask] = await Promise.all([
@@ -432,16 +420,10 @@ app.registerExtension({
 
     const material = node.widgets.find((w: IWidget) => w.name === 'material')
 
-    const lightIntensity = node.widgets.find(
-      (w: IWidget) => w.name === 'light_intensity'
-    )
-
     const upDirection = node.widgets.find(
       (w: IWidget) => w.name === 'up_direction'
     )
 
-    const fov = node.widgets.find((w: IWidget) => w.name === 'fov')
-
     const onExecuted = node.onExecuted
 
     node.onExecuted = function (message: any) {
@@ -461,14 +443,7 @@ app.registerExtension({
 
       const config = new Load3DConfiguration(load3d)
 
-      config.configure(
-        'output',
-        modelWidget,
-        material,
-        lightIntensity,
-        upDirection,
-        fov
-      )
+      config.configure('output', modelWidget, material, upDirection)
     }
   }
 })
@@ -562,16 +537,10 @@ app.registerExtension({
 
     const material = node.widgets.find((w: IWidget) => w.name === 'material')
 
-    const lightIntensity = node.widgets.find(
-      (w: IWidget) => w.name === 'light_intensity'
-    )
-
     const upDirection = node.widgets.find(
       (w: IWidget) => w.name === 'up_direction'
     )
 
-    const fov = node.widgets.find((w: IWidget) => w.name === 'fov')
-
     const onExecuted = node.onExecuted
 
     node.onExecuted = function (message: any) {
@@ -591,14 +560,7 @@ app.registerExtension({
 
       const config = new Load3DConfiguration(load3d)
 
-      config.configure(
-        'output',
-        modelWidget,
-        material,
-        lightIntensity,
-        upDirection,
-        fov
-      )
+      config.configure('output', modelWidget, material, upDirection)
     }
   }
 })
diff --git a/src/extensions/core/load3d/Load3DConfiguration.ts b/src/extensions/core/load3d/Load3DConfiguration.ts
@@ -11,10 +11,10 @@ class Load3DConfiguration {
     loadFolder: 'input' | 'output',
     modelWidget: IWidget,
     material: IWidget,
-    lightIntensity: IWidget,
     upDirection: IWidget,
-    fov: IWidget,
     cameraState?: any,
+    width: IWidget | null = null,
+    height: IWidget | null = null,
     postModelUpdateFunc?: (load3d: Load3d) => void
   ) {
     this.setupModelHandling(
@@ -24,9 +24,8 @@ class Load3DConfiguration {
       postModelUpdateFunc
     )
     this.setupMaterial(material)
-    this.setupLighting(lightIntensity)
     this.setupDirection(upDirection)
-    this.setupCamera(fov)
+    this.setupTargetSize(width, height)
     this.setupDefaultProperties()
   }
 
@@ -56,13 +55,6 @@ class Load3DConfiguration {
     )
   }
 
-  private setupLighting(lightIntensity: IWidget) {
-    lightIntensity.callback = (value: number) => {
-      this.load3d.setLightIntensity(value)
-    }
-    this.load3d.setLightIntensity(lightIntensity.value as number)
-  }
-
   private setupDirection(upDirection: IWidget) {
     upDirection.callback = (
       value: 'original' | '-x' | '+x' | '-y' | '+y' | '-z' | '+z'
@@ -74,11 +66,18 @@ class Load3DConfiguration {
     )
   }
 
-  private setupCamera(fov: IWidget) {
-    fov.callback = (value: number) => {
-      this.load3d.setFOV(value)
+  private setupTargetSize(width: IWidget | null, height: IWidget | null) {
+    if (width && height) {
+      this.load3d.setTargetSize(width.value as number, height.value as number)
+
+      width.callback = (value: number) => {
+        this.load3d.setTargetSize(value, height.value as number)
+      }
+
+      height.callback = (value: number) => {
+        this.load3d.setTargetSize(width.value as number, value)
+      }
     }
-    this.load3d.setFOV(fov.value as number)
   }
 
   private setupDefaultProperties() {
@@ -94,6 +93,21 @@ class Load3DConfiguration {
     const bgColor = this.load3d.loadNodeProperty('Background Color', '#282828')
 
     this.load3d.setBackgroundColor(bgColor)
+
+    const fov = this.load3d.loadNodeProperty('FOV', '75')
+
+    this.load3d.setFOV(fov)
+
+    const lightIntensity = this.load3d.loadNodeProperty('Light Intensity', '5')
+
+    this.load3d.setLightIntensity(lightIntensity)
+
+    const previewVisible = this.load3d.loadNodeProperty(
+      'Preview Visible',
+      false
+    )
+
+    this.load3d.setPreviewVisible(previewVisible)
   }
 
   private createModelUpdateHandler(