SVG Texture Turns Black Upon Insertion into Scene - IE, EDGE, Firefox

I’m now finally trying to get my jersey designer working well on firefox, edge and explorer (small market share I know, but big enough that it’s a headache for me with customers that I want to solve).

Issue is that my SVG textures that get inserted into the scene turn all black once in the 3D scene on these three browsers. These SVG textures open up perfectly fine in the browser on their own (example URL here), so something is making them go black once they are inserted into the sketchfab scene.

Can anyone provide any insights on this issue that I can pass onto my developer to dig into?

@tuan_kuranes solved this problem for me in another thread on slack:

kuranes [5 hours ago]
Not all SVG tag are accepted by Firefox/IE11 https://jsfiddle.net/sketchfab/L89boejq/57 (works) VS https://jsfiddle.net/sketchfab/L89boejq/55/ (doesn’t works). Both work in chrome (edited)

2 Likes

do you have floor shadows enabled? There is some weird bug related to that i have also recently experienced. This is normally for a material that is getting a texture injected. although in my case it does result in displaying correctly , just for a brief moment it shows black like this.

Edit ok , your post came before I sent mine , so obviously not the same issue … but in some way related to showing the black materials for some reason. im wondering if it is a transitional state for display caused between a texture swop. This would make sense as for me it only lasts a brief moment as my textures do load. For you it seems it was stuck in the transition as the textures failed.

2 Likes

I’ve passed on these code snippets to my developer, we shall see if this fixes my problem. I’ll keep you posted.

1 Like

My developers are confounded… they see that the code provided works in IE, EDGE and Firefox, but for some reason the SVG that my site inserts into the scene remains black even with this code provided.

Anyone got any ideas on how we can trouble shoot this problem? @james @shaderbytes @tuan_kuranes?

My developer created this codepen example using our texture output, works in above browsers but when that texture is inserted into the scene it goes black!
https://codepen.io/anon/pen/OeZrra

Hey Gregan , the url is malformed,

you go to this site :

https://yoksel.github.io/url-encoder/

then paste in the svg data from your code pen.

Now a bit of mangling , you want a data url , so this starts with the “data:image/svg+xml,”
This you can copy from the block that says for css. But then after that you want to copy the " Take encoded" section and append it to that , here it a code pen showing it is working:

https://codepen.io/shaderbytes/pen/pXZQJE

(Ps I dont know why it is low res though , but I do recall you had a discussion with some dev about it in the past. Im probably missing something. Anyway regardless it does at least work and is injecting, not black texture :wink: )

HAZAH! A step forward. Thanks man.

I’ll pass onto my devs.

Still loads black @shaderbytes? SVG loads fine, but the texture when inserted goes black. Works fine on Chrome… I don’t have IE or EDGE on my macbook.

I tested in Chrome only at first , just did IE Edge and still worked :

Doesnt work in Firefox :

Will have to wait for a dev to respond , but it might be a vendor bug they cant do anything about… will have to wait to hear from them

1 Like

Here’s sample code that allow you to do the svg to canvas on your webpage, making you in control of all parameter (size) and avoiding any CORS issue
https://jsfiddle.net/sketchfab/pn2sdcr5/

1 Like

@paul_sketch, thanks for stepping in to try and help out. Unfortunately it still loads black on Firefox. I’m unable to test on IE/Edge at the moment.

Chrome:

Firefox:

I also tested in in windows 10 64 bit firefox , still does not work on my end as well. weird all my tests and paul work in Chrome and IE

svg needs width and height specified clearly on the svg tag for firefox
https://jsfiddle.net/sketchfab/0yf863wn/

4 Likes

Winner winner chicken dinner?!? The texture is showing up now in firefox on my end.

I’ll send over to my developers and see if we can get this working on our site.

2 Likes

CONFIRMATION THIS FIXED OUR ISSUE. THANK YOU @paul_sketch!!!

2 Likes

Ugh… I stand corrected, some weird UV stuff going on? It’s as if the UV for the firefox model is totally different?!

Check it out: https://staging.jersied. com/design (added space on purpose so that google doesn’t start having this link show up in searches.

are you using same exact code from code and firefox ?

@paul_sketch 100 percent the same code on all browsers. Any further ideas? Would love to get this sorted so I’m not dealing with headaches of weird stuff when orders start to come in… pain in the ass, such a small market share browser but it’s caused me issues with customers.

if you could do a quick fiddle of minimal repro case based https://jsfiddle.net/sketchfab/0yf863wn/ it would be much faster/easier to debug and fix.
(very hard to debug on remote server )