Demo on iMac goes slow

Hi!!

Im new to shapespark, and still havent tried really yet, but im quite impressed well done guys!!!

Still want to try the 30 days demo, but before i have two questions:

1 - In my iMac your demos go really slow, im testing for example the third one thats on your homepage www.shapespark.com, and i guess something is wrong!

In my windows pc, android and iphone the same scene goes well, but not in the iMac, and its fairly powerfull

These are the specs of the iMac i have

Retina 5K Display
3.8GHz Processor
2TB Storage
4.2GHz quad-core 7th-generation Intel Core i7 processor, Turbo Boost up to 4.5GHz
Turbo Boost up to 4.2GHz
64GB 2400MHz memory, configurable up to 64GB
2TB Fusion Drive1
Radeon Pro 580 with 8GB video memory
Two Thunderbolt 3 ports
Retina 5K 5120-by-2880 P3 display

Im using still macOS Sierra version 10.12.6

The same scene on the iphone 6 goes much much faster than on the iMac!!!

2 - The second question i have is that on the iphone, at least in the iphone 6 theres not a but to put fullscreen but in android, mac and windows there is! Im testing with your demos that are in your homepage! Is there any option to activate fullscreen if the user is seeing it on an iphone?

Thanks

Fernando

Hello,

1 - One user reported similar problem with Safari on his Mac (View in Safari Browser). I suspect these were caused by lack of hardware acceleration for WebGL content.

Could you check if you have the same performance problems in different browser and if other WebGL sites work well on your machine (for example: three.js examples)?

2 - iOS doesn’t support the full screen API (Can I use... Support tables for HTML5, CSS3, etc) The only workaround is to add a home screen icon from Safari with a link to the scene (open the scene directly, for example: 3D scene , tap Share, Add to Home Screen).

Hi Jan,

Thanks for the quick reply!

1- On my iMac ive used both safari and chrome and the result is really slow (tried the 3rd demo on your website) and the same demo on windows android and ios is great!

Ive tested the three.js examples and was running fine, if its full screen it can vary between 30fps to 55fps, if the window is not fullscreen but its smaller size then its 60 fps stable! I guess it depends on the resolution ?! iMac goes to 5k resolution!

So im not sure whats really happening there, but i think its really important to get it working on iMac aswell !!!
Im more than glad to help with video recording of the screen if you want to check it, or whatever you want!!!

2 - Youre right, was also looking how guys over sketchfab did it for iphone, and their fullscreen icon button (on iphone) what it actually does is open another window and open the scene directly (we have to load again the scene on that new window).

So is it possible to add that fullscreen button with a personalized button i upload or with a standard fullscreen button that opens a new window with the url of the scene? Or how can we do it?!

Sorry for this basic question but i still didnt really tried shapespark since im currently with some jobs and without much time, but im really excited with trying when i finish since i think the possibilities are huge!!!

Just love quality versus weight to load versus all devices compatibility (although iMac seems to be still an issue…hopefully easy fixable :slight_smile: )

Thanks again

Fernando

1 - If you open the 3rd demo directly: Apartment by Cadwalk is it still slow? Does making the browser window smaller help? One possibility is that your browsers are using integrated GPU instead of the Radeon (to verify it please see: Find out which graphics processor is in use on your MacBook Pro - Apple Support).

Could you also open the Chrome debug console (Cmd+Opt+J) and see if there are any errors in the Console tab that could indicate what is the source of the problem?

2 - If you present a scene embeded on a web site in an iframe, it is technically possible to provide a button that would open the scene in a new window, outside of the iframe. This isn’t fully equivalent to the full screen mode, because browser UI elements are still visible. I’m not sure if this would be a good default behavior for the full screen button in iOS, users may not expect and like that pushing such button would cause the loading to be started from scratch.

Hi @jan

Sorry for the long delay but had been with too much work!!! And also trying shapespark on my pc (with windows).

So to answer your questions:

1 - I opened the 3rd demo directly and it still goes slow :frowning:

  • i also tried to make the browser window smaller but it didnt help, maybe i gained 1 or 2 fps but nothing that could really profit from it…
  • the link you sent me are to check for the gpu in use for a macbook.
    On the imac for what i reserched it is supposed to just use the radeon and i dont have an option to use the integrated one… maybe it is doing some thing in the background and it just doesnt use the radeon gpu but:
    i did install the iStat program on my iMac so i can check in realtime the usage of the gpu and it does use it and if we trust what iStat says the Gpu used is the Radeon, now that been said, it is just using between 1% and 4% of the gpu processor (sometimes it goes to 10% but most of the time is around 3% or 4%) when i run the your demo,and the frames per second is between 3 and 5 (this is what istat says when im using google chrome on imac).

I opened the chrome debug console but didnt found any errors on it, although i did activate the rendering tab of the console, and it pop up the gpu memory and fps on chrome which seem to give a more real fps, which actually 2 or less depending on where we are looking!!

Im also making a video comparing the perfomance on my imac and my windows pc so we can see the difference!! Ill upload it later!!

If you have a chance try with an imac to see how it goes…mine is from 2017 the specs are above on this thread!

Thanks so much for looking into this cause im afraid that for some reason it doesnt work on imacs… :frowning:

ps: I did tried again the link you sent me from other webgl three.js examples to check if it was really using the gpu, and in normal window (occupying 1/4 of the screen) it was using 30% of the gpu and in fullscreen it was using around 99% of the gpu (at least it was what iStat said) and in there the performance is smooth very good, but for some reason with shapespark it can just use 1 to 4% of the gpu processing power…so i think somehow the reason is there…

Hi @jan

Ive made 2 videos so i can ilustrate it better the first one is the iMac vs PC:

and the second one is the test webgl link you sent me vs shapespark on iMac:

Cheers

Thank you very much for this very detailed report. We will try to get our hands on iMac to fix this.

Searching through Three.js issues, there were some Mac/Radeon specific problems that they fixed. For example Three.js rewrites loops in shaders, because Radeons had trouble handling such loops. Our shaders do use one loop, and perhaps the browser fallbacks to software rendering because of it.

Hi @jan

Thank you :slight_smile: hope its something you can reproduce, and easy fixable :slight_smile: anyway if you need anything else im here to help !!

Cheers

hello!

just wondering if there was ever a resolution with this?

we’re having exactly the same problems on a retina macbook

sorry, just to elaborate

Mid 2012, 15" Macbook Pro Retina, i7, 8GB, SSD, HD Graphics 4000.

Using safari scene loads rather quickly (100Mbps internet) but performance is extremely poor. single digit FPS.

Will download other browsers and try

We still have a problem with poor performance on Macs that use Radeon graphics cards. We intend to have a fix at the beginning of August.

We are not aware of any issues with Macs that use built-in Intel graphics card like yours. It seems like for some reason your browser doesn’t use hardware acceleration. Please try other browsers and also other WebGL web sites (like three.js examples)

for anyone having this issue I would try the following:

user google chrome and enter chrome://flags in the address bar and enable the first experiment “Override software rendering list”

this improved my scene dramatically!!

there are similar options for firefox and safari that seemed more involved and or using beta versions of their software. I didn’t explore them too much as chrome is my default browser and if it works ok in that im happy.

Tried the chrome://flags tip, although it didn’t make any difference here. 2018 6-core i7 MacBook Pro and runs like a slide show :frowning:

Any idea when this will be sorted for us Radeon users guys?

Many thanks

Next week we will have IMac Pro with Radeon and we will work on fixing this.

That’s great, many thanks Jan.

We were able to reproduce and have a fix for this problem. Could you verify that the fix works also on your Mac: Apartment by Cadwalk

Hi @jan !

Ive tried on my iMac and now its working :slight_smile: !!! Thats great!!! :slight_smile:

Its not as smooth as on my pc on windows, on the iMac you can feel just a slighty bit of stuttering (not sure if its the right word) in windows the interpolation to go from one point to the other is smoother…but its just a detail!!! But anyway its great!

EDIT: Actually its working just fine on safari and mozilla for iMac, its just on chrome for iMac that is a little stuttering (try to go from one point to another far away and youll see that in chrome for iMac is worse …but still completly aceptable (specially compared with before :wink: )) great job!!

Just curious what was the problem?! :slight_smile:

Thank you for checking this @iarchviz.

The difference could be due to native antialiasing. Chrome is reporting it uses 6 samples, Safari and Firefox 4, which can cause worse performance on Chrome. We will experiment with disabling anti-aliasing on retina displays, perhaps with such pixel density it is not needed.

The fixed problem was pretty intricate. Shapespark uses an optimization that limits the number of WebGL texture bindings operations. If a material uses a texture that is already bound, the binding is reused. Thanks to this textures that are used by many materials, such as lightmaps, are bound once and the binding is reused for all the materials. It turns out Macs, probably due to drivers bug, need the textures to be always bound in a sequential order, so we needed to disable this optimization.

Fortunately we found that other WebGL engine - Babylon.js had the same Mac performance problem caused by similar optimization: Bad performance on some Macs · Issue #3542 · BabylonJS/Babylon.js · GitHub Otherwise it would take us much longer to find what is causing this.

1 Like

There is a visible drop in quality with antialiasing disabled on retina, especially for wires and narrow gaps. For now we will keep having it enabled.

Thanks for the detail answer!! Really great to see u guys fixed it :slight_smile:

About the perfomance in chrome probably its not noticeble for most people…because im mostly on the graphic side of things specially videos and realtime walkthroughs it just pop up immediately! But hey its not at all a big issue and if without antialising we are creating a bigger problem…so just let it be :slight_smile:

Thanks again :wink: