Overview
I created an interactive 3D WebGL game for Invesco QQQ featuring legend Grant Hill, inviting users to show off their hoop skills and score as much digital dough as possible in just 30 seconds.
Play in your living room in WebAR or just the web.
WebARWeb
Dev
When working with 3D physics engines, the main task is applying real world physics properties to ridgid 3D objects. In making a backstball game, I decided that the UI would technically be the offsetting of a 2D vector from the user's pointer against a 3D velocity vector. In other words, I needed to calculate the amount of 3D velocity to apply to a sphere to "shoot" the ball into the perfect planar center of the hoop. Being were dealing with gravity, this velocity needs to provide enough arch for the ball to go over the front part of the rim. I created a function Stack Overflow: getBallVelocity() that calculates the needed velocity, and I offset it by the user's input vector, gamifying the application.
In the WebAR version, I authored a Chroma Key (Green Screen) Three.js Shader Material to remove Grant's backgound within the postprocess loop. Checkout the code.
