polygonrunway
patreon
Behind the Scenes: 3D Website with Spline
🕑 Added 2025-02-09 09:35:41 +0000 UTC
Before I dove head-first into 3D design, I was a web designer for about 10 years straight. And that's probably why Blender excited me so much in the first place. I saw all that potential with 3D graphics, being able to produce high quality illustrative visuals for my web designs.
I even played around a bit with Three.js to bring real-time 3D online, but at the time, it was quite difficult to do and performance really suffered.
Fast forward few years and we have completely new options now. Not only there's a massive leap in terms of compute power in every smartphone, but there's an emergence of tools, that allow you to do real-time 3D web without a line of code.
This really got me excited, so I spent quite an intensive time with Spline app and thought about some projects I could do.
Visit the full Pinboard here
I always try to come up with themes, that help people not only understand the tools, but also see the ways they can utilize the knowledge in real projects. For an online 3D demonstration, I wanted something colorful, so I explored the idea of flavours. I started to explore ideas for a drink or beverage,
I kinda liked the idea of a gamer's energy drink brand, where each of the flavours is linked to a game genre. I gave this a quick brainstorm and came up with three basic flavours, watermelon for a cozy games genre, blueberry for rich and deep RPG games and finally lime for a quick action games and shooters. Name of the brand? Respawn!
I know, it's cheezy, but kinda works and for a quick demonstration prototype it was the right fit.
The next step was to sketch some ideas for each respective flavours. I wanted to make these into small dioramas, partly abstract in nature, but clearly representing each genre. I sketched some geometric compositions and wrapped some basic genre tropes around. Ancient ruins with a treasure for RPG's, cute farm house for a cozy game and sci-fi-looking envirment with some ammo crate for the shooter.
Next I modeled all of this in Blender, but I had to be a bit thoughtful about the geometry density and topology, as this was meant for the web export. So I kept everything mostly quads and triangles and also kept a clear object hierarchy for easy export.
Finally all the materials and animation had to be done in Spline. It's a little bit different approach to shading, than PBR materials in Blender or game engines. Much more simple and layer-based, so it offers quite a creative control, especially for very stylized and expressive scenes.
Overall I loved the experience and final result. If you're interested in more projects like this, let me know in the comment :)
You can watch the full process video on Youtube and check out the project live here.
Comments
qDev
awesome stufz!
