Viewer api and javascript development


(Alex) #21

@shaderbytes Does it possible to use such approach for arbitrary model?
E.g. just recently I uploaded a quite complicated object with 7 materials (and meshes)

Octahedron 1457-Compound by ayvlasov on Sketchfab


and I would like to hide some meshes to produce something like that

Is it enough to simply change model number and material names in your examples?

(Miekeroth) #22

Hi @ayvlasov,

When @shaderbytes has completed all the examples I am going to write tutorials on how to use his code. I will write it so that anybody would be able to handle it and make their own applications.


(Shaderbytes) #23

The Utility is for use with any sketchfab object :wink:

I'm not creating any new functionality here. I'm simply abstracting the current usage of the Sketchfab API to be even more simple.

So you need to have the script imports in your header :

<script type="text/javascript" src="https://d2f25wgezub9nf.cloudfront.net/api/sketchfab-viewer-1.0.0.js"></script>
<script src="SketchfabAPIUtility.js"></script>

then in your body add some scripting with this one liner :

 var sketchfabAPIUtility = new SketchfabAPIUtility('d23739a4aaef4dc483fec21c7bbf1dba', document.getElementById('api-frame'), onSketchfabUtilityReady);

Obviously the model number must be what you are wanting to display , and the iframe can be whatever you created it as

the last parameter is a call back to know when everything is ready. You will see this function in the example script , you can rename it if you like

That is it!

So what I have abstracted here is a whole heap of stuff happening to make it easier to setup and use the api.

I have attached my utility to this post for you

Just look in the two examples how I call to change colors , hide or show objects set alpha etc. This is still a work in progress and more functionality will be added going forward.

SketchfabAPIUtility.js (10.4 KB)


(Miekeroth) #24

Totally agree with that @shaderbytes! It's easy and it's very doable. But if one isn't used to work with scripts it still can be too complicated. But if an explanation isn't needed it's even better I think :wink:


(Alex) #25

@shaderbytes, @miekeroth, thank you very much for explanations!
For me scripts was not much terrible than html5 itself :confused: . But there is more actual and simple question - how to find strings to name separate parts of model. I prepared model in Blender and there are at least three different methods: name of material, name of object, name of data inside object in edit mode.


(Shaderbytes) #26

Here you can use this :

http://sketchfab.github.io/experiments/model-inspector/index.html?urlid=31e4f851f9784a85955fc358fc475d28

So when the page loads click on "display graph"

But now thhat I've looked at your model I see a problem area in my Utility in that I need to include Geometry nodes as well and that unlike materials, names in scene nodes are not unique. I will have to make an update to my code and will let you know , I will build a sample for you as part of my development

chat soon


(Alex) #27

Looks like subdivision of big meshes on a few smaller. For example is simper earlier model there is no such a problem
http://sketchfab.github.io/experiments/model-inspector/index.html?urlid=d87741008973439b80848dff07988a62
and on a bigger model only last mesh is subdivided
http://sketchfab.github.io/experiments/model-inspector/index.html?urlid=d4e3365694d24da9820c47706eac16c0


(Shaderbytes) #28

Hey there , I updated the Utility to handle same name nodes and also include geometry nodes.

I included some output into the console ( use the browsers dev tools to see this output ) for the built material list and the built nodes list.

A small bit of extra complexity because of all this , but its been abstracted as well and has error handling with reports if you try use it incorrectly

for example :

setNodeVisibility(nodeName, makeVisible,nodeIndex)
toggleNodeVisibility(nodeName,nodeIndex)

nodeIndex is an optional argument , so if its a unique node dont pass anything for it BUT if there are nodes with a shared name and you call these functions without passing an index , it will tell you you are making an error and will even report the index range you can use for that name :wink:

http://www.shaderbytes.co.za/sketchfab/development/api/examples/example_2b.html

Im not going to attach the updated script again and again in this thread .. you can just grab the latest one directly via url :

http://www.shaderbytes.co.za/sketchfab/development/api/examples/SketchfabAPIUtility.js


(Alex) #29

@shaderbytes, O'K! It works. I checked the model again - originally it was single object with 7 materials, so few different materials with same name is some conversion artefact, the big meshes are divided into few parts.


(Shaderbytes) #30

why dont you separate the object by each material in your 3D modeling app. So you have one object for each material. Are you using Blender?


(Alex) #31

Usually I do separate the objects by materials - you may check two additional examples I mentioned above, but in such a case structure looks even more difficult and such Blender model currently may not properly use skeleton animations after conversion.
PS. The few materials with same name is also not my option - they appear only after conversion from Blender to sketchfab


(Shaderbytes) #33

..........I replied to myself first by mistake so deleted the post and copied it here.........

Are your objects separated in object mode? Im sure there should be a mix transform for each if this was the case. Then it wouldnt matter to much if sketchfab creates multiple sub meshes because you can target the mix transform. Are you using Blender perhaps , If so could you send me the file so I can do some testing. If not could you export an OBJ and send me that and i will import into blender and set it up how I presume it will work best. I cant say for sure just a hunch I would like to investigate from my side as well.


(Alex) #34

@shaderbytes - the model (and the other two) may be downloaded directly from sketchfab, I tested that myself, but I almost sure that subdivision is due to mesh optimization in sketchfab itself. BTW I checked you script with model with single material for the mesh - it has some additional problem and rendering artefact.

Are your objects separated in object mode?

The initial model used in your example has only one object and 7 materials
two other smaller models I mentioned later has one material in each object.

PS I used blender exporter, so "true" versions of all models are on sketchfab rather than on my local disk
The model with single object and 7 materials has ID 31e4f851f9784a85955fc358fc475d28
the two already mentioned smaller model have ID
d87741008973439b80848dff07988a62
d4e3365694d24da9820c47706eac16c0


(Shaderbytes) #35

Ok I did my tests , and my hunch was spot on. Firstly lets just clear one thing up first : There are never multiple materials with the same name , only nodes can exist like this. Materials are always unique. Many objects can share a material though. Just pointing that out so you are not confusing nodes and materials in sketchfab.

So it seems sketchfab does split up objects with a high poly count, although as my hunch revealed this can be totally managed if you just set up your object correctly in blender. The nodes which are split are geometry nodes , if you set up your objects better then each collection of split geometry nodes will have a MatrixTransform parent.

I downloaded this model of yours :

The model with single object and 7 materials has ID 31e4f851f9784a85955fc358fc475d28

In blender I then separated the model by materials and named each object :

https://sketchfab.com/models/1d0c9e132b6145f4ab04a2cd2d34fcc1

I made the model downloadable so you can see the setup . Now if you view this in the model explorer :

http://sketchfab.github.io/experiments/model-inspector/index.html?urlid=1d0c9e132b6145f4ab04a2cd2d34fcc1

You will see there is a MartixTransform for each object as I expected and it has the exact same name used in blender. So with this set up you just target hiding and showing those matrix nodes and by proxy all child geometry nodes are obviously hidden or revealed as well.

eg :

http://www.shaderbytes.co.za/sketchfab/development/api/examples/example_2c.html

(ps.. I decided to create a flag within the Utility object for users to set to include/exclude listing geometry type nodes. I set it to false in this example because I'm looping the nodeshash to build the dropdown dynamically and wanted to show it works as intended and lists all the expected MatrixTransform nodes , one for each object with the exact name used in blender)


Setting node names
(Shaderbytes) #36

Splitting mesh objects happens in Unity Engine as well BTW , they have a ~64k limit vertices per single mesh object , if an imported mesh exceeds this then it is also split.

Anyway the point here is to separate your objects in blender so you can target the parent with ease regardless of the splits.

I understand this might get tricky with Skinned mesh models , I will need to look at the pattern for what happens with skinned models in different setups and see if I need to adjust or add code to the Utility to handle it gracefully.

You mentioned a problem with some other test you did , could you show me what model and explain what went wrong?


(Alex) #37

Thank you @shaderbytes! I just tested your solution with my own animated version of the model, it also works
http://ayvlasov.neocities.org/sketchfab/test2/rot_oct.html


(Shaderbytes) #38

Awesome good to know..

(ps where did you get these awesome underwater environment maps? I want one :wink: )


(Alex) #39

Map is generated by POV-Ray using as a guideline this advice
http://news.povray.org/povray.general/message/%3C3e1ecc5f%40news.povray.org%3E/#%3C3e1ecc5f%40news.povray.org%3E


Viewer api materials
(Alex) #40

You mentioned a problem with some other test you did , could you show me what model and explain what went wrong?

It was model with ID d87741008973439b80848dff07988a62
First problem is not reproducible with new version of utility (it was due to mixture of materials and objects in the same list) but artefact still presents: if you hide all objects except central octahedron it has some spots with different color near some vertices.
UPDATE: I just tested skeleton animation - the blender export currently works perfect and seems compatible with your script http://ayvlasov.neocities.org/sketchfab/test2/cat_walk.html


(Cscartdept) #41

I like the cat. However, why does it look like it's scratching just after it pooped in the litterbox?