To display 3D content in real-time, Sketchfab relies on WebGL, which is a standard rendering library in most modern browsers. You can check if your browser is compatible on https://get.webgl.org/
For more technical details about WebGL on your machine, visit WebGL Report.
Desktop
Sketchfab is compatible with all modern browsers, including:
- Mozilla Firefox
- Google Chrome
- Opera
- Safari
- Edge
- Any other Chromium-based browser
Go to Safari → Preferences → Advanced and check Show Develop menu in menu bar. Go to Develop → Enable WebGL.
Mobile
- iOS 8+
- Android 4.0+
Troubleshooting
WebGL
On older browsers or devices with WebGL disabled, models are displayed with an image-based fallback that gives a 360° turntable view of the model.
If you run into problems, make sure your graphics driver and browser are up-to-date. If that doesn’t help, try one of the other browsers listed above. https://get.webgl.org/ is a good place to start troubleshooting.
Sometimes, your browser may disable WebGL based on your GPU. If you are using a compatible browser, but you see an incompatible warning or the viewer performs very badly, try forcing the browser to use your GPU:
Chrome
-
- Go to System Settings ( chrome://settings/ → Advanced → System ) and make sure Use hardware acceleration when available is enabled.
- Go to chrome://flags/#ignore-gpu-blacklist and enable the Override software rendering list flag.
If you go to WebGL Report and see "SwiftShader" listed as the renderer, the steps above should solve the problem.
Firefox
Type about:config into the address bar and enable webgl.force-enabled.
Touch Screens / Tablets
Sometimes, navigating a model may not work on a touch screen or tablet device. This is especially common on certain Windows 10 devices. In Chrome, for example, visit chrome://flags/#touch-events and enable the "Touch Events API" flag.
Scripts and Cookies
In order to load correctly, the viewer needs to run various JavaScript scripts. It also needs access to browser cookies for various purposes such as respecting Sound volume and Restricted Content settings. If script execution or cookies are blocked by browser settings, plugins, sandboxing the Sketchfab iframe, or other methods, the viewer will not load. If you must sandbox the iframe for some reason, you must also lift several restrictions to make sure all viewer features work as expected:
- allow-scripts (needed to load the frame whatsoever)
- allow-same-origin (needed to allow the frame to communicate with our servers)
- allow-popups (needed for links within the frame to work)
- allow-forms (needed if the model is password-protected so that you can enter the password)
You will want your iframe HTML code to look something like this (note the sandbox attribute).
<iframe sandbox="allow-scripts allow-same-origin allow-popups allow-forms" frameborder="0" width="xxx" height="xxx" src="https://sketchfab.com/models/xxxxxxxx/embed"></iframe>
You can also remove the sandbox attribute completely if possible.
<iframe frameborder="0" width="xxx" height="xxx" src="https://sketchfab.com/models/xxxxxxxx/embed"></iframe>
WordPress Users
Sketchfab must be added as 'Trusted oEmbed Provider', otherwise WordPress will automatically add sandbox restrictions to Sketchfab iframes.
Adding the following line to a plugin or functions.php in the theme directory solves that:
wp_oembed_add_provider( '#https?://sketchfab\.com/.*#i', 'https://www.sketchfab.com/oembed', true );
It is also added by the JetPack plugin and the Sketchfab oEmbed plugin.
Comments
162 comments
Hi James,
We are having similar issues here with a premium account. Could you please help us? Here is our website with some Sketchfab embeds: https://shapelabvr.com/ (please scroll down to the “Created with ShapeLab” section).
As a visitor, with an up to date Chrome or Edge (for example) you’ll most likely see the following message “It looks like your browser or this site is blocking some scripts or cookies necessary to properly display the viewer.”
We are using Elementor WordPress plugin and tried to simply embed the models by following these instructions https://help.sketchfab.com/hc/en-us/articles/204982689-WordPress
Unfortunately, I’m not a technical guy, but I guess the generated “iframe HTML code” does not supposed to look like this..? Can’t see attributes such as “allow-same-origin allow-popups”
Not sure if I’m copying the right part from our page: <iframe class="wp-embedded-content lazy-loaded" sandbox="allow-scripts" security="restricted" data-lazy-type="iframe" data-src="https://sketchfab.com/models/31012aa1375f443a852110b4f9112564/embed#?secret=7r1ObyPxXo" data-secret="7r1ObyPxXo" frameborder="0" width="688" height="387" src="https://sketchfab.com/models/31012aa1375f443a852110b4f9112564/embed#?secret=7r1ObyPxXo"></iframe>
Could you please let me know if there is a workaround for this?
Thank you very much for your time!
Hi,
Yep you're looking in exactly the right place in the code. You'll need to change sandbox="allow-scripts" to sandbox="allow-scripts allow-same-origin". Do you have the ability to edit the raw HTML directly?
We're still investigating why certain WordPress configurations and/or plugins are doing this by default. Some other WP users have also found workarounds, but I haven't received any information yet. I'll follow up with any news.
@James
Hello, Im having an issue with IOS 10.13 and using the steps to fix the problem for Safari.
I did the steps correctly, but i noticed that those steps were for 10.9 and earlier.
Is there a way to fix this Safari issue with 10.13 and up for IOS
@virainsight sorry, do you mean macOS, not iOS?
What happens when you try to view a model? Can you please send me a screenshot of this report from Safari? http://webglreport.com/
@James I am trying to embed a Sketchfab into my WP site. https://www.midsouthdroneservices.com/construction-progress-photos/ .
I simply past the URL into my WP page editor (WPBakery Page Builder) and it works fine on the back end where I am editing the page. But when I view the page as a visitor (any browser) I get the dreaded grey box and message
It looks like your browser or this site is blocking some scripts or cookies necessary to properly display the viewer.
I can't find where to edit the iframe code??? If you can tell me where to go and edit that I am sure that will fix it.
When a person loads the page as a normal site visitor, the Sketchfab windows shows for about 1 second and then then it immediately switches to the grey window with error message.
Any help will be greatly appreciated.
Thanks!
I had originally added the one line of code to the functions.php file. But then I read that installing Jetpack fixes this problem. So after installing Jetpack, I deleted the line from functions.php and now the Sketchfab does not work in the backend. I am sure that if I re-insert that code back in the functions.php file it will work in the backend (but still not in the front end).
However, I am going to wait for further instruction before I make any further changes. I just need to get this up and running ASAP :)
Thanks,
Tim
Hi Tim,
The embed seems to be working now. WordPress caches oEmbed codes for 24 hours, so it can take some time to show the change.
Hello! I am trying to link a 3d model into my PowerBI report, but in every browser I got the same message:
It looks like your browser or this site is blocking some scripts or cookies necessary to properly display the viewer.
View this model on Sketchfab :
https://sketchfab.com/models/88709aef079d45f1954f830509055e93/embed?utm_source=website&utm_campaign=blocked_scripts_error
If I click that link I can see my model on the website, but I need to see it in my report.
As a source I used the following link:
<div class="sketchfab-embed-wrapper"><iframe width="640" height="480" src="https://sketchfab.com/models/88709aef079d45f1954f830509055e93/embed" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
<a href="https://sketchfab.com/3d-models/v1-1-88709aef079d45f1954f830509055e93?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">V1 1</a>
by <a href="https://sketchfab.com/klajas?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">klajas</a>
on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
</p>
</div>
I tried already with webgl.force-enabled, but it didn't help.
Does anybody know what should I change in my code or in the settings of my browser to make it work?
I would be really thankful for any help, I need that report for my master thesis.
Hi, the annotations are not 'clickable' on android? you can only open them by cycling through with the arrow keys? works fine in IOS...
@tedsheppard Thanks for the report. I'll continue replying directly to the support ticket you submitted.
Hi there, I'm having issues with the viewport at the moment. My browser (Chrome) supports and is running WebGL and yet when I click a model it says "For compatibility reasons, 3D is not available".
Hello,
Did you try the steps listed above to enable the Override software rendering list at chrome://flags/#ignore-gpu-blacklist and then restart Chrome?
If you did that and it's still not working, can you please send me a screenshot of this report? https://webglreport.com/
Yup, I enabled 'Override software rendering list' but still no luck.
It's because Chrome is trying to use SwiftShader (a CPU implementation of WebGL) instead of your GPU. I've seen this once or twice recently, but I haven't yet been able to figure out why it's happening. It might be a bug in Chrome. I'm going to need our 3D team to look into this.
Zenofyy can you share your system specs, especially operating system version and GPU information?
I was having the same issues as @Zenofyy described a month ago where every model said "For compatibility reasons, 3D is not available". I already had 'Override software rendering list' enabled. I never had any problems on sketchfab prior to this.
I was using Chrome Version 78.0.3904.108 (Official Build) (64-bit) at the time. When I went to check my Chrome version, I noticed that it said I needed to restart Chrome to finish a pending upgrade.
After restarting Chrome, it is now Version 79.0.3945.79 (Official Build) (64-bit) and the sketchfab compatibility warning is no longer being shown. I suspect the problem was the fact that Chrome was in the middle of upgrading itself.
Hope this helps someone else who is encountering the same warning.
Hi davidhall, thanks for sharing those details! My best guess now is that it was a bug in Chrome, perhaps a specific range of 78.x versions.
It seems its working well in Brave Browser(Chromium) but not the embeded model, who is displayed like a multiple pictures turnstile and send me here.
In Brave, you will need to allow "device recognition attempts", and possibly also cross-site coolies, anywhere you want to see an embed.
Hello,
I read your comments after 1 year still you didn't solve Wordpress blocking iframe show issue?
I searched a lot and cannot solve this problem. please help, our big part of our studio service is about 3D and presentation.
Hola, estoy teniendo problemas para visualizar los modelos... navego con Chrome, nunca tuve problemas, comenzaron ahora, desde la misma PC, con el mismo sistema operativo, mismo navegador.... no cambie nada... hago la prueba de compatibilidad de mi navegador y veo el cubo girando sin ningun inconveniente. ¿alguien me puede ayudar?
nahuel10 What happens when you try to view a model in Chrome? Is there an error message? Does the tab crash?
Hola James, me sale un mensaje de error "For compatibility reasons, 3D is not available (see requirements). You are seeing a 360º image instead"
Comprobe la comatibilidad con WebGL con los link que estan en la página, y me dice que no tengo problemas con mi navegador, pero sigo sin poder ver los modelos de manera correcta.
Hmm ok. Can you share a screenshot of the "WebGL 1" page of this report? https://webglreport.com/
Also, did you try the "ignore-gpu-blacklist" workaround above on this page? https://help.sketchfab.com/hc/en-us/articles/203059088?page=5#troubleshooting-webgl
Aquí dejo la captura, la solucion alternativa no se como hacerla.
Great thanks! You can see "Google SwiftShader" on that page. It means that Chrome is trying to use your CPU for rendering instead of your GPU. We do not support that.
You should go to chrome://settings/system and make sure that "Use hardware acceleration when available" is enabled.
Then you should go to chrome://flags/#ignore-gpu-blacklist and enable "Override software rendering list".
Solucionado! ... Muchas Gracias... no encontraba como anular lista de procesamiento de software, la ultima parte... ahora lo logré.
Saludos, y gracias por la rapida respuesta.
James I had this problem 2 days ago and It wasn't a problem and now it is and i'm not sure why.
Hi malowzs - which problem? Did you follow the troubleshooting steps?
James sorry I wasn't responding
Please sign in to leave a comment.