Have you ever worked on a project that didn’t quite go the way you hoped it would? This is a story about a project that I worked on at Dixon Schwabl that got released, but it included some strange patterns, had performance issues, and didn’t end up with the polish that most of our other projects had.
Still, those of us who worked on it learned some things and got to have a little bit of fun in the process.
The project was part of a self-promotion paper magazine that Dixon Schwabl released from time to time. The magazine was a showpiece for our services and it highlighted some of our clients and success stories. Employees could volunteer to write an article and our Creative Team would work magic coming up with some amazing layouts and slick illustrations. From time to time we would get a local photographer on board to shoot photos for it and we would use our in-house video production studio to shoot videos that could be linked to with a QR code or a vanity URL.
As part of the Interactive Team, our web developers got to pitch in by creating little microsites and online experiences that were sprinkled in each issue. We could also share these pages on social media to drive more engagement using the same assets.
3D Tour
After going through a large building expansion in our main office, we decided to put together a virtual tour of the building for the next issue of the magazine. The idea was similar to that of the Energy Saver Series project we completed for Black & Decker.
The Power House was gone, along with most Flash projects at the time. My collaborator on the Power House, Ian Auch, and I wanted to see if we could use newer technologies to re-create the 3D rotating building, re-create the portal UI, and when a portal was clicked the user would zoom into the building and play a video showing off the newly remodeled interior.
We got the green light to move forward with this concept and our writers and video producers got to work on shooting and editing the videos. Ian and I kept to our previous roles, where Ian would use Blender to create a 3D model of the building and I would handle the UI and interactive pieces.
Long story short, we did create a rotating building with clickable portals that played the videos based on which room you selected. However, we weren’t thinking of the audience as hard as we should have.
The 3D tour page was meant to be played inside a QR code reader app on iOS and Android devices. As we were walking around the agency asking people to pull up the website on their mobile phones we found that the page stuttered and it was almost unusable in portrait mode.
To fix the portrait mode issue, we essentially blocked the app based on the orientation of the devices.
Some of the performance issues came down to the fact that we were rendering the model in 3D and mobile devices at the time didn’t have the GPU power to handle it smoothly. While it played fine on a capable desktop computer, most people wouldn’t experience it from their desktop browser.
Other issues that came up were related to the portals. We had ideas to use a mobile app to scan a room and then help us model out the interior, or we planned on using photos of each interior to create the rotating portal look like we did on the Power House. But as it sometimes goes, we prioritized client work and we essentially ran out of time to get this tour page done by the time the paper magazine would get printed.
These were hard lessons learned and we knew better for the next time we would attempt to use 3D on the web.
Behind the Scenes
I had played around with Three.js before, but I was still learning my way through working with a camera and interacting with objects in 3D space. To handle some of the camera panning animations, I used Greensock to tween the camera position and rotation. I wound up creating a dev mode that was enabled by a boolean on the global level. When enabled, extra controls would become available for me to read out the coordinates of the camera and the rotation of the scene. I had it set up to jump between all of the different angles we would zoom in on so I can test them out on different screen dimensions.
I used dev mode to adjust the lighting of the scene. While subtle, I added realtime shading based on the position of the "sun" in the scene. We removed the shading when we originally launched the tour website as a way to improve rendering performance, but a couple of years after the magazine issue was released I updated the tour page to include the shadow and some other easter eggs.
For example, one thing that I don’t think anybody other than Ian and I knew about is that we slipped in a sunset and sunrise routine based on a sped up and imaginary clock. If you let the site sit idle for a bit you would see the shadow change and the tint of the building and the sky background change.
Again this was taken out of the launch version, but I re-enabled it at a later point in time.
Fin
This isn’t exactly a project where I’m proud of the final results, but I believe anytime you’re doing something you’re learning. In this case I used what I learned on some other 3D projects. Combining GSAP and Three.js turned out to be a great combo that I used a few more times since this project.
With AR continuing to gain interest by companies like Apple and Meta, and with better 3D support improvements happening in browsers, I like the idea of doing more with 3D on the web. I would love to get my hands on the original source files to see how well this would work on today’s raytracing-enabled phones.