Skip to content
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.

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

Babylon update for model3D #10847

Open
wants to merge 29 commits into
base: main
Choose a base branch
from

Conversation

CedricGuillemet
Copy link

Description

Update Babylon.js dependency from 7.25.1 to 7.54.0. Use Babylon viewer as a ES module to reduce .js size.
No change to supported file formats (obj, gtlf,...)

Closes: #10846

Changes

  • Replace Babylon.js core and loader with Babylon Viewer
  • Use engine version 7.54.0 instead of 7.25.1
  • Use viewer properties for right hand coordinate, autorotate,...
  • Replace point cloud system with points rendering

Improvements

Current Canvas3D size : 4.6Mb
Updated Canvas3D size: 1.2Mb

Viewer will try to use WebGPU when available for faster rendering and lower CPU usage

Known limitations

Wireframe and points rendering use triangles and vertices color. It's not using a plain solid one (see screenshot). If this is a problem, I can update Babylon.js code to support a solid color and expose it as a property.

image

@dawoodkhan82 dawoodkhan82 self-requested a review March 21, 2025 22:35
@dawoodkhan82
Copy link
Collaborator

It doesn't seem like the "reset camera position" button on the input component works anymore.
Untitled-2025-03-21-1856

@dawoodkhan82
Copy link
Collaborator

Thanks for the PR @CedricGuillemet. Left a few comments, but overall looks great when testing!

@dawoodkhan82
Copy link
Collaborator

dawoodkhan82 commented Mar 21, 2025

@CedricGuillemet Also we've recevied a few requests for other file types, specifically fbx, and usdz. Is there any update on adding support for those in babylon?

@gradio-pr-bot
Copy link
Collaborator

gradio-pr-bot commented Mar 21, 2025

🪼 branch checks and previews

Name Status URL
Spaces ready! Spaces preview
Website ready! Website preview
Storybook ready! Storybook preview
🦄 Changes detected! Details

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/2092735748c525e53e71dcace7c684171a079020/gradio-5.23.1-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@2092735748c525e53e71dcace7c684171a079020#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/2092735748c525e53e71dcace7c684171a079020/gradio-client-1.14.0.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/2092735748c525e53e71dcace7c684171a079020/dist/lite.js""></script>

@gradio-pr-bot
Copy link
Collaborator

gradio-pr-bot commented Mar 21, 2025

🦄 change detected

This Pull Request includes changes to the following packages.

Package Version
@gradio/image patch
@gradio/model3d patch
gradio patch
  • Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Babylon update for model3D

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

  • Maintainers can change the version label to modify the version bump.
  • If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

@ryantrem
Copy link

ryantrem commented Mar 23, 2025

Viewer will try to use WebGPU when available for faster rendering and lower CPU usage

The Babylon Viewer has a handful of other features that are probably also useful in gradio:

  • Support for additional model formats
  • Automatically pausing rendering if the viewer is scrolled out of view
  • Automatically pausing rendering if nothing is changing in the scene
  • Robust camera framing, even for models with morph target and/or skeletal animation, and automatic camera animation when reframing
  • Retargeting specific points on the model (double click on a point on a mesh)

If anyone is curious, there is more info on the Babylon Viewer here: https://babylonjs.com/viewer/

@ryantrem
Copy link

@CedricGuillemet Also we've recevied a few requests for other file types, specifically fbx, and usdz. Is there any update on adding support for those in babylon?

No for fbx, @CedricGuillemet can comment on usdz. Other formats that are already supported (beyond gltf/blg) are: obj, stl, splat, spz.

@CedricGuillemet
Copy link
Author

usdz in still on my radar. I have a working branch to add its support in Babylon that I will re-open after Babylon 8.0 release. No plan for .fbx format. .usdz support is possible thanks to https://github.com/lighttransport/tinyusdz and its wasm build. I guess a wasm fbx I/O is possible too.

@CedricGuillemet
Copy link
Author

It doesn't seem like the "reset camera position" button on the input component works anymore.

It should be fixed now.

@dawoodkhan82 dawoodkhan82 self-requested a review March 24, 2025 18:12
@dawoodkhan82 dawoodkhan82 enabled auto-merge (squash) March 24, 2025 18:13
@dawoodkhan82 dawoodkhan82 self-requested a review March 24, 2025 18:32
@abidlabs abidlabs added the v: patch A change that requires a patch release label Mar 25, 2025
@dawoodkhan82
Copy link
Collaborator

@CedricGuillemet Seems like the reset camera button doesn't work again.

@CedricGuillemet
Copy link
Author

@CedricGuillemet Seems like the reset camera button doesn't work again.

On it! Sorry for the inconvenience.

@CedricGuillemet
Copy link
Author

@CedricGuillemet Seems like the reset camera button doesn't work again.

I can reset the camera: I run the sample from demo/model3D, open the url then click duck.glb, move the model and click the undo top right button. The camera view is properly interpolated to default orientation. I guess I'm missing something.

@dawoodkhan82
Copy link
Collaborator

@CedricGuillemet Sorry just tested again, and seems to work fine!

@dawoodkhan82 dawoodkhan82 enabled auto-merge (squash) March 25, 2025 16:49
@dawoodkhan82 dawoodkhan82 disabled auto-merge March 25, 2025 19:45
@dawoodkhan82 dawoodkhan82 self-requested a review March 25, 2025 20:03
Copy link
Collaborator

@dawoodkhan82 dawoodkhan82 left a comment

Choose a reason for hiding this comment

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

Looks like some tests are failing. After looking into it a bit I noticed that providing a default value to model3D doesn't work anymore.

ex: inputs=gr.Model3D(value="files/Bunny.obj")

Repro:
demo/model3D

import gradio as gr
import os

def load_mesh(mesh_file_name):
    return mesh_file_name

demo = gr.Interface(
    fn=load_mesh,
    inputs=gr.Model3D(value="files/Bunny.obj"),
    outputs=gr.Model3D(
            clear_color=(0.0, 0.0, 0.0, 0.0),  label="3D Model", display_mode="wireframe"),
    examples=[
        [os.path.join(os.path.dirname(__file__), "files/Bunny.obj")],
        [os.path.join(os.path.dirname(__file__), "files/Duck.glb")],
        [os.path.join(os.path.dirname(__file__), "files/Fox.gltf")],
        [os.path.join(os.path.dirname(__file__), "files/face.obj")],
        [os.path.join(os.path.dirname(__file__), "files/sofia.stl")],
        ["https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/bonsai/bonsai-7k-mini.splat"],
        ["https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/luigi/luigi.ply"],
    ],
    cache_examples=True
)

if __name__ == "__main__":
    demo.launch()

@CedricGuillemet
Copy link
Author

Looks like some tests are failing. After looking into it a bit I noticed that providing a default value to model3D doesn't work anymore.

I'm on it! Thanks for the repro.

@dawoodkhan82
Copy link
Collaborator

dawoodkhan82 commented Mar 25, 2025

@CedricGuillemet Looks like its only happening on dev mode/SSR (pnpm dev) and I'm getting this error:
Looks like babylonviewer is trying to access some browser specific API and in SSR mode this breaks.

[vite] Error when evaluating SSR module /@fs/Users/dawoodkhan/Desktop/Developer/gradio/js/model3D/shared/Canvas3D.svelte: failed to import "@babylonjs/viewer"
|- ReferenceError: HTMLElement is not defined
    at file:///Users/dawoodkhan/Desktop/Developer/gradio/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected]_iqbf3x6e4dma5jonf3jqhdffyy/node_modules/@babylonjs/viewer/lib/index.js:1301:757
    at ModuleJob.run (node:internal/modules/esm/module_job:272:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:580:26)
    at async nodeImport (file:///Users/dawoodkhan/Desktop/Developer/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55096:17)
    at async ssrImport (file:///Users/dawoodkhan/Desktop/Developer/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:54998:24)
    at async eval (/Users/dawoodkhan/Desktop/Developer/gradio/js/model3D/shared/Canvas3D.svelte:5:31)
    at async instantiateModule (file:///Users/dawoodkhan/Desktop/Developer/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)

node:internal/process/promises:394
    triggerUncaughtException(err, true /* fromPromise */);
    ^

ReferenceError: HTMLElement is not defined
    at file:///Users/dawoodkhan/Desktop/Developer/gradio/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected]_iqbf3x6e4dma5jonf3jqhdffyy/node_modules/@babylonjs/viewer/lib/index.js:1301:757
    at ModuleJob.run (node:internal/modules/esm/module_job:272:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:580:26)
    at async nodeImport (file:///Users/dawoodkhan/Desktop/Developer/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55096:17)
    at async ssrImport (file:///Users/dawoodkhan/Desktop/Developer/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:54998:24)
    at async eval (/Users/dawoodkhan/Desktop/Developer/gradio/js/model3D/shared/Canvas3D.svelte:5:31)
    at async instantiateModule (file:///Users/dawoodkhan/Desktop/Developer/gradio/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected]_/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)

Node.js v23.6.0
/Users/dawoodkhan/Desktop/Developer/gradio/js/app:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  @self/[email protected] dev: `vite dev`
Exit status 1
 ELIFECYCLE  Command failed with exit code 1.

@dawoodkhan82 dawoodkhan82 self-requested a review March 31, 2025 22:01
Copy link
Collaborator

@dawoodkhan82 dawoodkhan82 left a comment

Choose a reason for hiding this comment

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

Fixed the ssr Issue.

Copy link
Member

@abidlabs abidlabs left a comment

Choose a reason for hiding this comment

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

lgtm thanks folks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
v: patch A change that requires a patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Model3D: Use Babylon Viewer ESM
5 participants