Creating a GLB file with a black background

So that’s like Verge3D viewer?

Ohhhh, I better understand and in this case I am not sure you can unfortunately, it probably requires some setup on the shopify front ???

1 Like

Well in theory, you could create something like a sphere, that will wrap the model in the scene. Then you create a black material for that sphere.

So the logic is that the model is in the center of the huge sphere that has black material on it. Sphere acts as a “background”, all you need is to make sure that you don’t allow zooming out too much so you don’t exit the sphere.

You could wrap each model the same way, and it should look as you wish.

So something like this

result

1 Like

Hi there,

sorry i didn´t answer before…i´m restricted in the amount of answers at this time, because i´m new to this forum.

to msDestiny14…you proposed:

So the viewer is not going to save the bg color when you export as a glb file again. You can save the playground scene to snippet server for example that will save that.

i have no idea what you mean by that?

to nogalo:

i did try that as well.
but the bybylon exporter always creates a new default camara which is ouside of all the 3D modells

any ideas?

You can create your own standard camera in the scene, and exporter will export it.
This camera will not be the default active camera though. The default camera that exporter creates will still exist. But you can access the camera you created and set it as an active one.

scene.cameras => will contain cameras in the scene, including yours
scene.activeCamera = yourCamera will set your camera as active.

Now, as I don’t know how you are implementing everything, this might not be helpful for you.

1 Like

During export it says that it actually sets activeCamera to be your exported one. But I cannot see that effect in sandbox, nor in other gltf viewers. So I am not sure how it works exactly

image

Seems that both sandbox and other viewers create their own default camera and use it (because camera is “must be”, without it, nothing will work) But the file itself contains only one camera, as you can see from the export log. So depending on your implementation, it might work.

yes you are right…but still when exporting it again…and viewing it in any viewer or in shopify…
the default camara and not the scene camera is stated as activ again…even when i delete the default camera and exporting as glb it creates a new one…and in shopify i have no possibility to set the scene camera as activ…another thing is that the scene camera is not rotating through its target…it behaves as a free camera…or when i define a clear color as black and activ…disable or delete the skybox…this is also there again after exporting as a glb file…its really strange

Adding @Guillaume_Pelletier the king of exporters

hi sebavan…do you think i should contact this guy?

Nope, he will answer on the thread as I pinged him so that the answer might hep the rest of the community.

ok…thanks

I´m off for today…see you guys later and thanks for the help and advice

Hey guy’s,
Thanks for the invit into this discussion.
I understand that this thread evolve from background color question (which is related to viewer or scene design) onto camera setup (which is also related to viewer ). For the reference, there is no “default” camera for a glTF/GLB asset. Instead, the client application has to keep track of the currently active camera. So no matter the camera is defined into GLTF, the client application will finally decide of the active camera, and 99% of the time define their own as default.
So i will not have a clear add value onto the conversation, but ready to help if you have any exporter related question.

2 Likes

There is a lot of confusion going on in this thread. I think the ask to create a glTF model such that it will show up in shopify (which uses model-viewer, three.js based) to render. This is not an ask about rendering in Babylon.js.

glTF does not have official support for setting the background or setting the environment at the moment (though some extensions are in the works). You might be able to trick it by placing a camera in the glTF with a black skybox/sphere as @nogalo suggests and perhaps shopify will use that camera, but this is a hack and I would not recommend it.

Long story short, unless you can change how shopify deals with its environment, skybox, etc., there isn’t a sanctioned way to do this.

3 Likes

One thought. Perhaps you can add a back drop to your model that is black? You wouldn’t be able to rotate to the back to see the object, but would that be at least better?

Hi there everybody…

thanks for thinking about my “problem”…

At the moment itrealy seems to be a “shopfy” problem…
My customer is checking this…
Loading the GLB file in shopify it shows a white background…
Using the preview function in shopify it shows a black background,
which indicates there is actualy no physical background…

It is probably a thing related the “theme” my customer picked in shopify.
we are checking this…
If that is the thing i will inform you about it.
But anyway…thanks a lot for trying to help.

Greets

Ger

1 Like

Hey, I know this is years later but I found a solution! You can add the background directly from Shopify after you upload your .glb. Click on your media after uploading then click “edit file” near the top, scroll down and unclick the box that says “use transparent background” and you should then be able to select a custom background color.