Skip to content

[3d] add output preview screen for load3d node #2464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jtydhr88 wants to merge 1 commit into from
Closed

[3d] add output preview screen for load3d node #2464

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 20 additions & 58 deletions src/extensions/core/load3d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Copy link
Contributor

@huchenlei huchenlei Feb 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using kwargs here. A boolean true second param will make reader confused.


containerToLoad3D.set(container.id, load3d)

Expand Down Expand Up @@ -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([
Expand Down Expand Up @@ -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)
Copy link
Contributor

@huchenlei huchenlei Feb 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer using kwargs here. A boolean true second param will make reader confused.


containerToLoad3D.set(container.id, load3d)

Expand Down Expand Up @@ -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([
Expand Down Expand Up @@ -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) {
Expand All @@ -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)
}
}
})
Expand Down Expand Up @@ -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) {
Expand All @@ -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)
}
}
})
44 changes: 29 additions & 15 deletions src/extensions/core/load3d/Load3DConfiguration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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()
}

Expand Down Expand Up @@ -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'
Expand All @@ -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() {
Expand All @@ -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(
Expand Down
Loading