GSTORE 25th Birthday PIÑATA Experience | 2023
To keep the birthday celebrations going, customers get the opportunity to win even more gifts by swinging at a virtual birthday piñata. The piñata is brought to life in an immersive 3D web experience, activated by scanning a QR code on the product packaging. Customers swing at the piñata by touch movement, enjoying the fun of cracking the piñata through hitting the screen.
3D Development Notes:
To bring the Pinata party to life, we embedded an extruded Google logo within a realtime 3D environment, utilising a physics engine so we could hang it from the ceiling. We used raycasting to register when the user tapped on the Pinata, applying realistic forces depending on where they clicked on the model to create a satisfying experience, sending the G twisting and turning, whilst confetti goes flying.
As for the confetti part, we optimised the 3D experience by integrating a custom Frame Buffer Object (FBO) system into the Three.js InstancedMesh module, significantly reducing CPU usage by leveraging more parallel computing. This integration opens up more precise control over each aspect of the confetti, from materials to physical motion dynamics, while preserving seamless compatibility with core Three.js modules, such as cameras, lighting, and the shadow system.
-
For a more intuitive experience, each tap from the user would detach confetti from the Piñata's surface, simulating a gradual breaking effect. Furthermore, the Piñata is also aligned with the physics engine in our 3D environment, naturally following with the motion of the swinging pendulum.
User Journey:
(1) User receives product along with the thank you card/QR code
(2) User scans the QR code which takes them to their PINATA Experience
(3) After users select to play Pinata in the first screen ,
users can interact with Pinata by tapping to hit until a present falls out
(4) User gets a congratulations and their extra discount code with the option to save to clipboard or ‘save code’ (assume they could potentially send to email)
Agency : Phantom Studio
Role : WebGL Developer
Environment / Framework : Three.js, Custom Shaders