Use different model in one scene using Viewer API

I need to prepare white background furniture product photos for 100 products. I am using the Viewer API to automate the process.

To get the quality, I might need to apply lighting intensity, shadows, and post-processing to a particular scene.

I have created a scene and loaded one product and set up the scene to download photos. It’s workable and gives accurate output.

To make it workable for 100 products,

  1. Can we use the prepared scene with lighting and apply it to all 100 products to download the screenshot?
  • After removing the existing model and uploading a new model & material with the same lighting, shadow, and post-processing settings. Is this possible?

Hi @poly9, you’re running into a well know limitation of the Sketchfab API. You cannot apply viewer settings (post processing, materials, lighting) to a scene and save those settings in the scene.

What you can do however, is to build a small webapp that embeds one of your models and apply all the settings you need with the Sketchfab viewer API. You can then use the screenshot function of Sketchfab to make a rendering. When you load a different model in this webapp, all those settings would be applied to that other scene too.

A second option is to set up one scene with all the settings that you need on Sketchfab.com (like you have now), then duplicate that 100 times and use the reupload function. If you reupload a model into an existing scene, Sketchfab tries to retain as much of the settings that exist in the scene.
This second option does work, but becomes a hassle when you want to tweak the background color for instance on all 100 scenes.

I recommend making a small webapp. That’s the most flexible solution.

Thanks for your reply.

I like your idea to develop a webapp and build a small webapp that embeds one of your models and apply all the settings you need with the Sketchfab viewer API.

The problem with that is: post processing, materials, lighting settings are not available via API. So we can’t get the quality of screenshot. Screenshot looks fake.

What do you suggest?

Hi @poly9,
Post, materials, lighting and environment are all available through the viewer API. In fact, most of my configurator projects work like that. I don’t bother setting up a nice scene in Sketchfab, I just do it in my code.
You should have all the settings available to you when you create a webapp to apply these settings on the fly to your models. The only caveat is that these settings won’t be stored in the model. So you’ll only be able to see the “nice” model in your webapp, not on Sketchfab.com.

Hi @klaasnienhuis , Thank you for your reply

As per your suggestions, I have prepared one web app to take screenshot in white background.

Here is what I have prepared so far.

  • I have upload all 100 products via Sketchfab Data API, as I do NOT want to do any manual work on sketchfab.
  • Using uuid, load model in webapp using viewer API.
  • Try to apply textures via viewer API, but getting undefined error with uid.
  • Setup lighting, environment and enable post processing
  • Download the texture.

Demo URL : https://customer.polynine.com/sketchfabdemo/2.html

Question:

  1. While trying to apply texture on the model, but it gives error. Please open above URL and check console for this error.
    Uncaught TypeError: Cannot set properties of undefined (setting ‘uid’)

Can you help me to solve this error?

Hi @poly9,
I can’t load the demo. It says the 3D model hasn’t been published yet.

Would you please check it now? I just published it.

nope, not yet. It’s this model, isn’t it: Log in to your Sketchfab account - Sketchfab
I can’t access it

Would you please check it now?

It works!
The issue is that you’re assigning a uid to material.texture.uid. But the material does not have a texture property yet. You should assign an object to the material.texture instead, like so:

material.texture = {uid: "your new uid"}

The texture object has more options (similar to what you find in the sketchfab editor). Most of them are listed here: Targeting uv sets via the api? - #5 by shaderbytes

I’ve put your code in a codepen and added a function makeTexture to illustrate this.
You’ll see that the albedo map is applied correctly, but the other one are ignored. This is caused by the fact that these operations happen async. You’re using the api.setMaterial methods four times in a row on an increasingly outdated material definition.
I recommend adding the 4 textures first, then applying that to a single mateiral object and calling api.setMaterial once.

1 Like

Hi @klaasnienhuis

Thank you for your help. I did it
Demo: Document

I need your another help. As, I am trying to apply shadow to the model, In the Sketchfab editor, there is an option to apply ground shadow to the model.

image

But I could not find any viewer API to apply shadow on the floor, how can I apply ground shadow?

That’s looking great! Congratulations.

There is no API control over those shadow settings I’m afraid :worried:

Hello @klaasnienhuis ,

Thanks for the confirmation. It’s super helpful.

Is there any alternative to get shadow on the floor, like using lights / setup the scene differently?

Apart from this, to achieve our goal to take screenshot of 100 products. We need to upload all the 100 models via Data API and load them via uuid in this app and take screenshots. Right?

Is there any better way to load model and take screenshot?

Hi @poly9,

I’m glad I can help.

Lights and the environment can also cast shadows. You’d need to include a ground plane in each of your models to catch that shadow.

Indeed I recommend uploading the models with the data API. I don’t know any other way to get your models into sketchfab at this scale.