Debatree

Link to demo video (YouTube or Vimeo). 

https://www.youtube.com/watch?v=GNH3JjvHRT4

also included videos on the included models: 

https://www.youtube.com/watch?v=-Cx-DnCyEtk

https://www.youtube.com/watch?v=CbElO05nNNc

Include a link to your public, playable 8th Wall experience:

https://stagemark.8thwall.app/debatree/

Did you use an 8th Wall-made module? If yes, please list which one(s).

 Out of the three 8th Wall modules accessible from the module section of the website, we incorporated the realtime Reflections module into our project ( we didn’t need the Payments or Maps module for this project ).  You’ll notice the reflections in the 3D story panels behind the user. We also used a number of module components such as splash-screen, landing-page, xrextras ( loading, runtime-error ), the sky coaching overlay and segmentation effect ( delayers ).  We made great use of sky-remote-authoring to enable rapid testing and debugging on desktop.

Briefly describe your project key features and tech stack used.

 We used A-Frame as the core tech stack for the project.  As it sits on top of Three.js, we created a number of components that directly accessed lower level features in order to control the animation mixer ( for example to play the animation of the tree forward and in reverse ).

The cool dynamic ice and fire effects were generated using GLSL shaders, which are optimised for mobile usage.  We were even able to control the speed of the shader over time by connecting it to the progress of the size of the tree - the more the tree has grown, the faster the fire burns - the same goes for the ice skin on the giants, as they have to work harder to keep up!

Blender was used to rig and animate the 3D tree model.  A bone structure was created that ran up the main trunk of the tree, right to the tip.  Child bone structures were then created for each of the main branches.  When the bones were in place, the process of skinning could start - this involves mapping each vertices of the model to one or more bones.  Because of the twisted shape of the original tree model and all of the intertwining branches and leaves, this was a fairly complex task.  Once this was completed, we were able to move on to the third and most fun stage - animating the growth of the tree, including various twists and turns as it expands upwards.

Blender was also used to import the Giant and apply all of its animations into a single GLB file that could be easily changed using the animation-mixer interface using straightforward names ( Idle, FallDown, Rise, Die etc )

We wanted our experience to be interactive and also to be repayable - so it has a full game loop that can be repeated many times.  AR games tend to be fairly short - we added in two stages within the game, at 50% and at 75% tree growth where additional enemies drop down to try to destroy the tree.  Their AI also gets angrier the larger the tree gets, and they are more likely to throw boulders.  They also get angry when you knock them down, and tend to throw a boulder as soon as they get back on their feet.

We use the built in recasting to detect user click hits on the boulder, and also have an optimised invisible proxy around the giants to enable knocking them down without having to raycast against their more complex skinned mesh. 

We also used a particle effect system when the boulders explode ( either when the user clicks on them, or when they hit the tree ).  We used a sphere shape with additive blending, and an animated opacity fade from 1 to 0.

Regarding the 2D elements of the experience, we decided to go with a swipeable deck of images to show the instructions and also a visual story - we imported the Swiper JS library via a CDN to enable us to do this.

When 8th Wall released an update that allowed the use of SLAM along with sky effects, we wanted to make use of this as well.  If the user looks behind them, they can see posters of the instructions, and walk over to them to read them in more detail.

Inspiration:

Our team's passion for musical immersive experiences inspired us to create "Debatree," an AR game that combines a battle between a giant tree and ice giants with a song from Bryan's original musical, Moonlight Carnival. Using 8th Wall's platform, we aim to realize this ambitious project while aligning with their mission to inspire exploration and connection.

"Debatree" emerges from our shared love for nature and music, intertwining these elements to create a powerful narrative about environmental balance. Set in a fantastical world, players protect the tree, representing Mother Nature, from ice giants embodying humanity's destructive forces. Battles are accompanied by enchanting music and sound design, immersing players in the story and emphasizing the importance of environmental preservation through a musical interactive battle of giant proportions made possible with teamwork and 8th Wall's Sky Effects. 

other tools used in the development process: midjourney, Skybox Labs