Case study of a WebGL experience with party cups

Merci-Michel ®
Dec 5, 2018 · 5 min read
Image for post
Image for post

The brief

For this occasion, the idea was to create a website with an interactive experience, inviting the users to interact with the iconic object of any home party: the red party cup! Try it here:

No bullshit, ok.

Here we had the interactive concept: an exploratory experience where the user got to find out how to interact with that cup and what to do with it — by himself.

The design issue

Here are several of the design challenges and the tricks we set up :

Image for post
Image for post

The tech answer


We allowed the user to grab objects with raycasting and a point to point constraint. When grabbed, for the sake of simplicity, objects can only be moved on two axes define by an abstract plane facing the camera.

But to let the the user build pyramids, stacks, do flips, etc… we needed a third dimensions. We tried several possibilities with keyboard and scroll. But since we wanted to only use mouse/touch interactions, we finally decided moving the camera by clicking on the floor with a classic orbit controls.

To make things easier for the user and help him navigate the 3D space we added helpers: a grid, a line and a target to visualize where the cup will fall. We also allowed the possibility for the user to catch and throw balls with respectively a short and a long click.

Image for post
Image for post

For cups, the grab was a little bit more trickier than we thought. First we let the user grab the cup at any points of its surface but then it was too difficult to put it straight or with a lot of efforts. The solution we found was to only enable grabbing the cup by its top or its bottom.

But this approach creates another problem: if the user does not click the cup near its top or its bottom, it will jump to the constraint position instantly and generate unwanted movements.

So instead of a point to point constraint, we used a spring between the cursor and the cup that hardens the more the user move his mouse. The linear damping for cups are also different when they are grabbed or not, to facilitate manipulation.

Physics and events

To determine user actions we needed precise details about the state of each object. Are they in the air, stable, right side up, upside down, stacked with other, idling ? How many rebounds did they made ? etc…

We added sphere-shaped sensors inside the cup, distributed homogeneously on its height and with different sizes to fit the model. (We also create an additional sensor — when two cups are close enough and on approximately the same height — to detect pyramids)

We could then for example, check if a ball was inside a cup, or by checking if all sensors were intersecting with their counterpart of another cup, if two cups were stacked, etc…

To detect if a flip or more were complete, we used a stabilization delay at landing to make sure the cup will not fall just right after the collision with the floor occurred.

Image for post
Image for post
3 cups pyramids detection


VR prototype


Want to join us?

More informations here:
Submit your profile/references here:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store