gr.Model3D viewer is dark/dull in opposite side of the light source

[firasvree]

• [yes] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
I am frustrated when using the gr.Model3D. My .glb model in the gradio viewer is too dark/dull in the opposite direction of the light source. I think the viewer have one light source placed in one specific cordinates , so in the opposite side we see dark places. it's good idea to see the model well in all the angles.

Describe the solution you'd like
Adding a Boolean parameter in the gr.Model3D that make light source from everywhere.

Additional context
Attached an example, in the right side you can see your Duck.glb in https://www.gradio.app/guides/how-to-use-3D-model-component how dark is it in one angle, versus how we should see it in the left.

[abidlabs]

Thanks @firasvree for creating this issue. We'll take a look and see if this is something that we can easily add to the gr.Model3D component or whether having control over lights is beyond scope and should be reserved for a custom cocomponent.

cc @dawoodkhan82 I'm leaning towards the latter given the level of customization that can potentially be applied to lights, meshes, and cameras: https://doc.babylonjs.com/features/featuresDeepDive/lights/lights_introduction

[firasvree]

Thanks @abidlabs !! appreciate a lot.

[dawoodkhan82]

@abidlabs I think we should change the default light source to be from everywhere. Haven't looked into it yet, but it should be easy.

[abidlabs]

Sounds good -- in case anyone wants to keep the previous behavior (and to allow for backwards compatibility), can we make this a parameter? I know we don't want to go too granular with the parameters, but I think its important that we allow for backwards compatibility

[firasvree]

Maybe if you prefer not to add another parameter (and maybe better usages of the feature), If you can add small checkbox in the top right of the 3D viewer. (or maybe small drop down list) called lightening and gives the options of (None, Neutral, One light). or even maybe light you put is too intense so we just see one side and the other is shaidy, maybe just playing with the config of the light might help without adding anything.

[abidlabs]

I don't see an option to set the lights from everywhere @dawoodkhan82 @firasvree

See babylon js docs: https://doc.babylonjs.com/features/featuresDeepDive/lights/lights_introduction

It is possible to register multiple light sources and adjust their positions, etc. but that definitely seems beyond the scope of the Model3D component. I'm inclined towards leaving this for custom components

[dawoodkhan82]

@abidlabs Yeah after taking a look at the docs. I agree!

[A-pril]

I don't see an option to set the lights from everywhere @dawoodkhan82 @firasvree

See babylon js docs: https://doc.babylonjs.com/features/featuresDeepDive/lights/lights_introduction

It is possible to register multiple light sources and adjust their positions, etc. but that definitely seems beyond the scope of the Model3D component. I'm inclined towards leaving this for custom components

Maybe you could give an example how to set the light please?

[abidlabs]

Hey! We've now made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps. Here are some examples of custom Gradio components:

• A "Rich Textbox" that allows you to write bold/italics/colored text
• A "Folium Map Viewer" component that allows you to use interactive maps

You can see the source code for those components by clicking the "Files" icon and then clicking "src". The complete source code for the backend and frontend is visible. In particular, its very fast if you want to build off an existing component. We've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help. Hopefully this will help address this issue.

[hannahblair]

Hi @firasvree! To follow up on @abidlabs' comment, I actually created a custom component based on Model3D which provides more control and allows you to add lights and cameras. Here’s the link. Feel free to let me know if you have any questions about it!

[firasvree]

Thanks a lott !! appreciate your work !

[Yzhbuaa]

Hi @hannahblair! The link which you provided has expired. I am really looking forward to trying this feature. Could you provide the component link again?

[hannahblair]

Hey @Yzhbuaa! Sorry I missed this comment. I think that link should still be working!

[xuxu116]

Hey @Yzhbuaa! Sorry I missed this comment. I think that link should still be working!

Hi @hannahblair , the link is 404 now, can you check it?