How we crafted a playful digital Christmas card in 3D on the web.
During an internal Hack Day, one of our developers made a simple 3D scene with A-Frame — an open source library that simplifies WebVR development on the web.
Here is the scene:
This was shared on our #hacks channel on Slack and already sparked some interest.
Then the idea hit us, “Why don’t we turn this into a Christmas Card to send to our friends and clients?”. The snowball was rolling.
The idea was to create an island (being 14islands) to bring the Christmas spirit to town. Our designer got involved and started pouring out ideas.
It was a good start, but we felt the island itself was a bit lonely. It was missing some of the Christmas magic. I mean, there is no Santa, reindeers or much happening on the island. We wanted to create more characters and 3D graphics to add to our winter land.
Since our time was limited, we didn’t want to use any complex 3D software. Instead, we sculpted out the graphics in VR with our own hands inside 3D space.
We used our HTC Vive gear and Blocks by Google as a drawing tool. Very intuitive and fun as we got started. We ended up making a library of Christmas stuff.
With all these graphic in place, it was time to start developing together as a team.
We used Glitch as our place to collaborate on the code. The cool thing about Glitch is it allows to build whole projects fully in the cloud and also use it as a hosting platform.
We exported the 3D elements as OBJ files, and added to our island in code.
It felt like the Xmas spirit was upon us as we started to add more and more details. If you look close, you can see the brightness under the tree and a soft light coming from the cabin window. This is where Shaders came into play.
We created a couple of custom WebGL Shaders to add life to the scene. Shaders are tiny programs that run in parallel on the Graphics Card which is much more performant than traditional CPU-based calculations. We used them mainly for the snow/magic dust particle effects that surround the scene and to let all the trees move randomly with the wind — making the scene feel less static.
There were few cases where we needed to use a pro 3D software to design graphics. For example, for this sign with 3D text on it, since it has many small details to it.
We used Blender as a 3D software for these cases. It’s a bit complex and intimidating at the start, but very powerful when you get a hang of it.
Next step, was to further define our concept for this whole Christmas card and tell the story we wanted to craft.
The idea was simple. To start with a dark scene and as the user presses and holds down the finger/mouse, they fire-up Christmas in all its glory.
Here’s an early exploration:
Jingle bells all the way.
Many ways to say Merry Christmas
Looking back, one of the most lively discussions we had was on how to say Merry Christmas.
I mean, what is politically correct? Some people don’t even celebrate Christmas; Should we rather say “Season Greetings”, “Happy Holidays” or something like that?
This debate also got fuelled by the USA president election that was in full swing at the time.
In the end, we just went for “Merry Christmas” as it’s what we usually say to each others and friends. It just felt like the most authentic way for us to say it, since this was one of our own passion projects.
Our designer went to the drawing board again and came up with these title variations.
In the end, this became the version we went for:
The result
Check out the result, we feel pretty proud of it. Make sure you have the sound ON to enjoy the full experience.
Also, stay tuned — as we might do another Christmas Card this year.
Finally, we sent out a personal letter to our clients with the Christmas card, including a greeting in all our languages.
Merry Christmas.
God Jul.
Gleðileg jól.
Wesołych Świąt.
Joyeux Noël.
Fröhliche Weihnachten.
Feliz Natal.
