Inserting Different Textures Into Scene via Browser Interface


(JERSIED) #1

Hello Sketchfab team, love your work.

I'm building a new website that allows my customers to insert different patterns onto my hockey jerseys on my 3D hockey player model. I'm currently having to use another 3D solution for the new site but I'm not 100% happy with their solution, though they do support the ability to insert new textures into the scene with a custom user facing web interface that I've built. My current site users Sketchfab an it shows of my model much better than the alternate solution I'm developing with right now.

Are their plans to allow us to insert new textures into a scene anytime soon?

Thanks for all your work.

Gregan


Website Change Log
(Bart) #2

We already have support for that:


(JERSIED) #3

Very interesting. Thank you for pulling this up.

I google searched and was unable to find this answer: Does CORS Support svg image formats?

I want to insert SVG based textures.


#4

Hmm, I'm not sure. @stephomi do you know if we would we be able an SVG texture?

@jersied you could also use the Viewer API to add and load new textures. It supports the same CORS-enabled image URLs or base64 encoded images.


(Stephomi) #5

Yes the viewer API should usually be the preferred solution (addTexture, and setMaterial).

I quickly try to add and use an svg image (as a base64 string, but an url should be fine too) and it worked so far.
I'm not sure about CORS though.


(JERSIED) #6

Ok, thanks Guys. I've pinged Ian Preatorius to see if he's interesting in digging into my setup and help me sort things out. Looks like I might be migrating back to Sketchfab!


(JERSIED) #7

I'm not overly technical, I thought the texture formats that worked had to be compatible with CORS. I have no idea what CORS is... :slight_smile: I googled it to see if SVG was supported but couldn't figure it out.

Thanks for taking the time to test things out on your end with a sample.


(JERSIED) #9

For some reason my current 3D tech platform takes about 3 or 4 seconds to change a tiny texture:
Ex: http://jersied.gfactr.net/svg/generate?logo_id=1&template_id=1&palette_id=1&numbers=18&name=JERSIED&order=0123
(yes... it's an ugly texture, things aren't worked out yet!)

How quickly will sketchfab handle this?


(Stephomi) #10

How quickly will sketchfab handle this?

Hard to predict, as it depends of several factors, the best is probably to try it.
It's possible the first time you change a texture, it's a bit slow due to shader compilation (if there was no texture prior to that, but it should be fine for the subsequent changes).

You can test it with the material showcase url, ex:

https://sketchfab.com/models/738c3a515a084e3d8c78c45893290dd6/embed?autostart=1#material_showcase=1,material_names=jerseySG,material_diffuse=https://cdn.rawgit.com/alexmwalker/03433aaec5293280f6b896e7a7a2ef1e/raw/08088a2c6f1fd5e363915003dc7e2e34cc04d3ec/alva.svg
^ an example with a CORS friendly svg

(you can also do it separetely by :
- loading first https://sketchfab.com/models/738c3a515a084e3d8c78c45893290dd6/embed?autostart=1#material_showcase=1
- then simply paste at the end of the url ,material_names=jerseySG,material_diffuse=https://cdn.rawgit.com/alexmwalker/03433aaec5293280f6b896e7a7a2ef1e/raw/08088a2c6f1fd5e363915003dc7e2e34cc04d3ec/alva.svg

With the showcase url technique technique, we have a few constraints though, the url can't contain comma (,) or equal signs (=).


(JERSIED) #11

hrm.... I can't seem to get a test up and running.

So I've uploaded my latest model, it has all three uniform textures in one file so it's uniformSG, but I can't get the link to work:

New model:

Drop box link:

Anticipated URL with texture:
https://sketchfab.com/models/18cf664eb9144be0bf8eda8100308e19,material_names=uniformSG,material_diffuse=https://www.dropbox.com/s/kx4xhqoxpartgxb/SVG%20TEXTURE.svg

Unfortunately I get a 404 with that link! Where am I screwing up Stephomi?


(Stephomi) #12

There's some missing parameters in your url, it should be

https://sketchfab.com/models/18cf664eb9144be0bf8eda8100308e19#material_showcase=1,material_names=uniformSG,material_diffuse=https://www.dropbox.com/s/kx4xhqoxpartgxb/SVG%20TEXTURE.svg

However it still doesn't work, it's due to dropbox who probably doesn't accept CORS friendly svg web hosting.
I think url such as dl.dropboxusercontent.com/s/kx4xhqoxpartgxb/SVG%20TEXTURE.svg used to work, but not anymore.


(Klaasnienhuis) #13

Hey Gregan! CORS is not a property of the image but a setting on the server the image is hosted on. It's basically a way to say to the sketchfab.com domain "Yes, it's safe to use this image hosted on the Jersied domain!".
Any image type can be cors enabled so to say.


(JERSIED) #14

Thanks Klaas! I hope you're doing well.


(JERSIED) #16

Looks like I need to get a proper 3D modeller on this. Me poking and proding with limited knowledge isn't going to get me anywhere. I don't think the model files I have are setup right, so perhaps the texture is loading but it's not rendering on the model because it's not setup right... Thanks for your help guys, I'll see what I can dig up to test this out.


(Shaderbytes) #17

Hey Greg

I grabbed the svg texture you provided and tested injecting into an embed. I first i did have some CORS issues .. that i dont have with normal image formats and the CORS setup im using on my server space. Anyway I found a line of code that works and it does indeed pull this texture in , only it seems to be a low res version or something. The svg file is fine if you hit it directly so something weird is going on here.

this texture :
http://www.shaderbytes.co.za/clients/jersied/images/cors_svg_test/uniformSG.svg

testing on this embed :
http://www.shaderbytes.co.za/clients/jersied/index.php

if you click the svg block once the model has loaded it does inject the texture just low res for some reason.

@stephomi maybe you can shed some light on this ?

edit : I did rename your texture dont uses spaces or uppercase if possible for server file names :wink: uppercase is still kinda ok , spaces are not - it creates more problems than you need to deal with


(JERSIED) #18

Hey Shaderbytes! Did you get my e-mail? I sent you an e-mail three or four days ago. Thanks for the mock-up you've prepared, super helpful.

Weird note: Works great on mobile, shows high resolution texture, on PC it's low resolution. Very odd.

Looks fast though, much more responsive than my current solution.


(JERSIED) #19

Please check your e-mails for me and get back to me. Thanks!


(JERSIED) #20

@stephomi Note that the high resolution texture ends up on my iPhone Safari version of the page. On my mac within Chrome, the texture is clearly low resolution. Something odd going on.


(Stephomi) #21

The low resolution issue is because we are dealing with svg.

https://stackoverflow.com/questions/45331552/how-intrinsic-dimensions-are-computed-for-svg-images
Since svg is a vector format, the "real" size of the texture is not as straightforward as with png/jpg.

I think we'll probably start by using a fixed resolution to starts with (e.g: 1024x1024).


(Shaderbytes) #22

rather make it 2k (2048x2048) this is an svg texture, people will expect high resolution from that all ready, i think 1k is really too low but perhaps get a vote on it from a few people before you decide.