April Product Update: Using Sweat, Tears, and Havoc.js to Make Events Fun for Everyone Involved
At Gather, we pride ourselves on dreaming up an optimal user experience first, then working towards the technology required to deliver on that dream. We’re making events fun for everyone involved, from inquiry to execution. Planning and booking an event can be stressful, so we knew that we needed to make the last step as magical as Tolkien and as authentic as Twain — true to the tenants of Gather itself.
The guest experience after finalizing a booking just wasn’t cutting it – so our entire team set out to improve it over the past 6 months. Our biggest problem: guests viewed the confetti explosion upon booking as dismal and unrealistic, resulting in suboptimal feelings of fun and delight. The answer? Our engineering team worked to rebuild our booking confirmation page to include the most realistic confetti physics engine in software history. We felt that simulating the true physics of confetti was the only way to provide a genuinely immersive experience — customers should believe someone just fired a confetti cannon straight into their face!
“First, think. Second, believe. Third, dream. And finally, dare.”
– Walt Disney
⊕ Confetti Particle Collision Challenges
Although simulating falling confetti sounds simple, it’s actually quite complicated. Various factors including acceleration due to gravity, dispersion due to air resistance, and collision force need to be taken into account.
When objects collide, you must account for the transfer of force based on implied momentum and mass; i.e., Force = Mass x Acceleration. Using standard units, the amount of force, in Newtons, required to accelerate an object having a mass of 1 kg is precisely 1 m/s^2 (assuming no friction). An engine to simulate this requires clearly-defined tradeoffs to estimate large-scale interactions between small-scale objects. In the initial research phase, the Gather engineering team decided on a stringently-accurate reproduction, requiring significant computing power, but producing extremely realistic results:
⊕ Custom Light Reflection Considerations
Similarly, light refracts off of metallic confetti in many different ways. The number of refracted rays exponentially increases as the angle of incidence approaches zero. This means that the incident and reflected electric fields are opposed. Changing the angle of incidence does not change the direction of E (Γγ), and you must store and rerender the light rays billions of times each second. Out-of-the-box libraries were not performant enough to handle hundreds, let alone billions of refracted rays.
Most physics engines took the easy way out and grouped the object particles and lights surfaces together without any consideration for reflections. We never take the easy way out at Gather, so we decided to build a new light reflection engine from scratch.
⊕ Confetti Engine Launch
There are several lightweight solutions for dispersing small 3D polygons across a user’s display device. NVidia’s PhysX Flat package was found to be far too slow on the uptake, with up to a 0.01s delay while detecting particle collisions. Following this, the industry standard of confetti.js wasn’t quite cutting it. Confetti.js’s non-deterministic particle interaction and complete disregard for adjustments in atmospheric pressure by user location proved too random and unreliable for Gather.
“Innovation distinguishes between a leader and a follower.”
– Steve Jobs
After a lot of testing and design, the Gather engineering team elected to move forward with building a new confetti physic engine from the ground up. Our deterministic engine for v2.0 was aptly named “Havok,” and we’re excited to share it with the world. With Havok, we’re confident that the event industry will finally be able to witness an accurate rendering of the joy of celebrating a confetti explosion.
When booking an event on any standard browser, the confetti particles and their natural movements will be indistinguishable from reality.
This product update was written in collaboration with Matt Albert & Caroline Cox
BARGTEIL, A., WOJTAN, C., HODGINS, J., AND TURK, G. 2007. A finite element method for animating large viscoplastic flow. In ACM Trans. on Graph., vol. 26, 16. BELL, N., YU, Y., AND MUCHA, P. 2005. Particle-based simulation of granular materials. In Proc. of the 2005 ACM SIGGRAPH/Eurographics symposium on Comp. animation, 77–86.
CHAO, I., PINKALL, U., SANAN, P., AND SCHRODER ¨ , P. 2010. A simple geometric model for elastic deformations. ACM Trans. on Graph. 29, 4, 38.
DRUCKER, D., AND PRAGER, W. 1952. Soil mechanics and plastic analysis or limit design. Quarterly of App. Math. 10, 157–165.
IHMSEN, M., WAHL, A., AND TESCHNER, M. 2012. High resolution simulation of granular material with SPH. In Workshop on Virtual Reality Interaction and Phys. Sim., 53–60.
IRVING, G., TERAN, J., AND FEDKIW, R. 2004. Invertible finite elements for robust simulation of large deformation. In Proc. of the 2004 ACM SIGGRAPH/Eurographics symposium on Comp. animation, 131–140.
MILENKOVIC, V. 1996. Position-based physics: simulating the motion of many highly interacting spheres and polyhedra. In Proc. of the 23rd annual conf. on Comp. Graph. and interactive techniques, 129–136.
O’BRIEN, J., BARGTEIL, A., AND HODGINS, J. 2002. Graphical modeling and animation of ductile fracute. ACM Trans. on Graph. 21, 3, 291–294.
PAULY, M., KEISER, R., ADAMS, B., DUTRE´, P., GROSS, M., AND GUIBAS, L. 2005. Meshless animation of fracturing solids. In ACM Trans. on Graph., vol. 24, 957–964.
SELLE, A., LENTINE, M., AND FEDKIW, R. 2008. A mass spring model for hair simulation. In ACM Trans. on Graph., vol. 27, 64.1–64.11.
TERZOPOULOS, D., AND FLEISCHER, W. 1988. Modeling inelastic deformation: viscoelasticity, plasticity, fracture. Proc. ACM SIGGRAPH 1988 22, 4, 269–278.
YU, J., AND TURK, G. 2010. Reconstructing surfaces of particle-based fluids using anisotropic kernels. In Proceedings of the 2010 ACM SIGGRAPH/Eurographics Symposium on Computer Animation, Eurographics Association, 217–225.