Hi! I’d like to share this interactive art gallery we built on top of Shapespark.
www.nyudesignshow.com/virtual gallery
Because of the pandemic the annual gallery exhibit for the graduating class of NYU’s Department of Design for Stage and Film was cancelled. We decided to recreate the event virtually, with 18 designers and over 800 pieces of art.
Thanks for all the great support from Shapespark - the response time (even pointing out a bug in my custom code) was amazing.
Thank you for sharing this. I think it shows what Shapespark is actually capable of if you know how to add and write some custom code. Well done!
This is great!
How did you add custom code. does it require self hosting?
To make this work we married two platforms - Shapespark and Webflow. We built all the traditional webpages in Webflow. So all the overlays (like the navigation) and the sidepanels that open with details of the artwork are regular webpages. The Shapespark viewer is embeded as an iframe in a page from Webflow.
In Shapespark, I added custom code to open iframes to display those webpages, and added the buttons for navigation. It’s like a layer cake:
Webflow webpage (main level)
Shapespark iframe (viewer)
webflow webapges (sidepanels and overlays)
In my code are two functions that make this work. One catches the “nodeClick” events from the shapespark viewer. It has a lookup table, so if the user clicks on “COSTA_HEADSHOT” as the object, it opens “https://myurl.com/designer/costa” as an iframe. If I had been more rigorous about naming objects, I could have done it programmatically, but we were building this airplane as we were flying it.
The second key function is a message handler that receives events generated by the javascript “Window.postMessage” api. An iframe can’t interact with its parent’s javascript context directly, so in order to trigger navigation from my custom overlay, or from within the credits of a production, the web page in Webflow posts a message with the name view to load, and then the message handler calls the switchToView function in my custom code.
In theory you could use divs in your custom shapespark code and hide/show those (if you were just doing the “All Designers” overlay for example", but you couldn’t use any media assets. In our case, all the artwork displayed in the sidepanels is data-driven from a CMS system that Webflow has, so we required a host.
All the custom code was put in the “body-end.html” in my shapespark project directory, in STYLE and SCRIPT tags.
There are some things I may have been able to do more easily using the added extensions in the newest Shapespark release, but I was already deep into the project when that dropped.
Given more time I also might have downloaded the bundle from Shapespark and combined the hosting. It would have made some things easier, and I could have been smarter about the loading process (I wish I could preload all the assets intelligently so the drawing was better, but I ran out of time to implement it).
Happy to answer any questions. The forums were a big help putting this together.
@danscully all I can say is Heeeeeeeat! You smashed it!
Well I can say more, for the purposes of this project the simplicity of the space is perfect and unlike a lot of the Shapespark or other tours I have seen, how the work is presented and the overlays, page layout are really well composed.
I assume the reason for the large screen restriction is to avoid creating an interface which is forced visually to fit to a unsuitbaly small screen. (Good choice if that is the case, as again this type of experience needs to breath!)
Honestly, hats off really great & inspiring experience.
Nice work!! It makes my model look so crude! (https://wattis.org/view?id=1052)
Can you talk more about the ways that you cut down on initial load time, your model seems to load so quickly and smoothly.
mobile sizes:
Yeah - it felt like it would be a compromised experience on mobile, and I didn’t have the build time to come up with a good interface for the overlays etc. I think it looks good on iPads though. If we were to do this again, we would put more art on the walls, rather than buried in side-panels, and just have text information pop up instead. But we didn’t want to be too committed to Shapespark only because we were afraid we couldn’t pull it off!
Loading optimizations:
In Chrome using browser tools, I looked at the size and download time of all the files Shapespark uses. And I also looked at really culling the polygon count. Initially we had about 1.2m polys, and I realized that the track lighting was 500k of that! So we went with a boxier track light, flattened all the text so it wasn’t extruded, removed the rear faces of any object that had complex geometry and you couldn’t see its back. I also played around with lower and higher lightmap resolution settings.
At one point we had several embedded videos on the walls, which looked amazing, but the performance hit was too much on less powerful machines. The network analysis pane in Chrome helped reveal that.
I also was initially pre-fetching all the gallery pages at initial load, so they would be cached as you explored. But what I found was they were slowing down the gallery 3d support files, rather than waiting for them to be finished. Given more time, I would look into triggering those pre-fetches once the viewer had finished loading, but instead I got caught in a drag-out fight trying to bend the html box model to my will (I mostly lost).
Awesome work, very nice done!
Congratulations @danscully !
Great idea and realization. If you need our votes for nomination at Nominees - Awwwards (or similar to this) count on us too.
You have opened our eyes that in combination with html, much more can be achieved with Shapespark.
Thank you!
Hi Danscully, this work is spectacular, simply excellent!
Your work motivates me to two things, to get someone who can perform these actions for me and learn to code so that I don’t depend entirely on that person.
Your work is outstanding and it’s simply a pleasure to visit this site! Congratulations, very well done!
Regards
Jorge
Hi Jorge-
Well, Covid has shut down all my theatrical design work, so let me know if you need any help!
Best
Dan
Greetings, a consultation. With which program to perform 3D modeling?
We did the initial modeling in Vectorworks. We then refined that in C4d.
And the materials introduced it with Vectorworks or C4d? or directly with shapespark, thanks.
Hi @danscully,
I am really having a hard time to implement your instructions into one of my scenes. I want to have such kind of navigation with my scene. Is it possible to teach me or write a simple instructions on the forum so that I could implement it.
It will really mean a lot to me ! I would be very thankful for your support.
Hi- I don’t have the available time write now to write a whole guide, but if you have specific questions I’m happy to help. A first step might be using the Chrome Developer Tools to look at the source code of what I did…
