Viewer api and javascript development

(Miekeroth) #1

Hi @shaderbytes, @klaasnienhuis and @bartv,

Klaas, as you might know, Ian and I are part of the Sketchfab masters group. We discussed the topic about the viewer api there to and we thought it was nice to have a dedicated tread for it. Since you aren't part of the Sketchfab masters group, I think it is best to keep the tread on the most appropriate place, namely the Development and API section.

I offered to write the texts so a layman can understand it (and I know exactly what you are doing :wink: ), similar to my tutorial about the annotations app I made earlier (of which I now know that I am going to change the code drastically) and prepare the models for the examples.

For now I am preparing my rat skeleton so it can be used in the viewer api, but I am also working on more elaborate models similar to that with which I want to show and hide stuff and use for animation once that is incorporated into the viewer api.

Agreed that this tread belongs here?
If not, @bartv can you move it?

Editable Textures on Models Embeded in Website?
Additional function for professional
Looking to using Sketchfab API to make a custom builder
Configurator Workflow and FBX export settings
Applying a multi-texture - including on-screen menu
How to detach house model and plate (grass) from each other?
Copy the same value material setting,
(Klaasnienhuis) #2

Hey @miekeroth, I'm not exactly sure what the question is here. But having the discussion about the viewer API publicly accessible seems to benefit most people.

(Miekeroth) #3

Hi @klaasnienhuis, no question, I just made a tread so we can keep all the info in one place.

(Shaderbytes) #4

HI @miekeroth

Cool to choose the rat model , excellent subject for the api model. In hindsight of the previous model we assisted you with , both the colored bones and the white bones seem to be exactly the same shaped object ,right?

This means it would be perfectly fine to only have one set of bones and we can just alter the material colour. Obviously you need a unique material for each bone type but you already have this happening with the colored bones. So basically you can leave out the white bone set.

We do want to build examples of hiding and showing objects but in this case its not the optimal solution when a material change can achive the same effect , and 50% less geometry in the scene.

For the examples where we hide and show geometry it would be better to have a model where the things been switched out have different shapes , like different hats on a head etc.. you get what I mean.

(Miekeroth) #5

Hi @shaderbytes,
Yes, they are (exactly the same). I was hoping for something like that, could mean a much quicker page. I do have models within this same subject that I want to show/hide with:
Here I would like for example the muscles hidden, so you would be able to see the skeleton.
Another example that would be great is to switch genders :wink:. Sounds a little bit more bizar than it actually is: I have a male rat model and I would like to show the difference between that model and a female version of it. That means changing reproductive organs.. just a moment, I will show you an image of the male parts (it is actually very beautiful)

(Miekeroth) #6

(Shaderbytes) #7

haha , Im not a science / biology expert so I cant even say I know what im looking at here .. I see some kidneys I think LOL

but yes this would be a great target for show and hide. Please do still prepare the other model for just material color changing as discussed, so basically leave the white bone set out , only include the coloured bones , each with its own material ( could you perhaps make the naming convention use some form of "left" and "right" like somebone.L - somebone.R for example as it would make for easier comprehension of the code for novice users. )

(Miekeroth) #8

:smile: yep, you are right, those are kidneys!
The model with show and hide will take a while, the model I already did is very easily changes into only the coloured bones: I have the two models on separate layers and I already added distinct materials. I will upload it momentarily, so you can work with it.

(Miekeroth) #9

Forgot one thing: all bone pairs had the same material, need to adjust that. will take 10 minutes or so.

(Miekeroth) #10

8 minutes :wink:

Frontpaws of the Rat. materials by Mieke Roth on Sketchfab

Everything is the same exept for the materials: they are now named after the bone with a .L or .R behind it. So: Clavicle.L for example. I see that I was not completely consistent with the capital at the start of the name, if needed I can change that too. but they haven't changed since the other model.

(Shaderbytes) #11

Thanks I will take a look at it tomorrow morning, I have a urgent job waiting to happen with the new iphone event today so I busy preparing for that. Yes good you thought to make unique materials for left and right otherwise both sides would highlight.

Just thinking for start up of the model , we want all those materials the same white color obviously. I can do it in code but maybe it would be better if you just set them all to white in the editor? What do you think? Then you can just send me the list of colors you used for each bone type..

(Shaderbytes) #12

Of coarse you dont have to do it that way , I guess because maybe then the model is not in a good display state for outside the use of the API example .. so never mind if that is the case , I will do it via code on start up

(Shaderbytes) #13

@bartv and @james ,

Looking at current examples , it not exactly clear what version number a user is expected to pass into the constructor of the Sketchfab object. Currently the code snippets all use "1.0.0" .

Questions a developer like myself immediately think when seeing this is :

• Is "1.0.0" the latest version?
• Where do I find out what the latest version is?
• Where do I find out what the difference is between versions? Why use one version instead of another etc..

(Miekeroth) #14

I will also reply tomorrow: rush hour over here :wink:


@shaderbytes Sorry it's a bit misleading at the moment. There is currently only v1.0.0 and when we make changes we just replace it.

(Shaderbytes) #16

ah I see , it is rather redundant then to have the constructor accept a version number.. :wink:

I looked at the javascript code you linked , it is possible to pass null as well and it will default to "1.0.0"

this._version = version || '1.0.0';

Only thing is I wish the two arguments were switched around now , because then you could just pass in the target , currently you will have to specify null and then the target..


Yes, that would be better :wink: @cedric

(Shaderbytes) #18

of coarse switching the arguments around is not backward compatible ..

EDIT , well it can be made backward compatible but it will then require adding logic checking the data types of the arguments..

How to add an additional layer that shows on hover
(Shaderbytes) #19

ok first update is ready ,

I have started to develop an additional javascript object named SketchfabAPIUtility. As mentioned this is simply to try abstract calls into the API even further.

As I code more examples this object will be updated with more features.

So for this first example I have a materialhash , I also created some properties for all the channel names , so its a "constant" and easy to reference from code without typing a string name.

I have a function to set color easily for any channel property and it also caches the original color in the process so I added a reset function as well.

I added some conditional error reports if you try access a material name that does not exist etc..

here have a look :

new url :smile:

(Shaderbytes) #20

Next update is ready :wink:

I Added an optional attribute to the constructor to pass in an object for api init params.

Added all logic for getting nodes and abstracting much to make it easy to hide show objects.

I create two different functions for this , one to set visibility specifically and another to just toggle the current visibility

setNodeVisibility(nodeName, makeVisible)

Additionally I did add something more for materials , A setAlpha function. I also implemented the same caching logic here as with my previous colors function so there is a reset function to get back to the original value.

setAlpha(materialName, factor);