https://ameliemaia.com Amelie Maia Sun, 12 Oct 2025 01:05:49 +0000 https://ameliemaia.com en https://ameliemaia.com/Information Sun, 07 Nov 2021 03:29:51 +0000 Amelie Maia https://ameliemaia.com/Information Hello! I’m Amelie (she/her)I’m an English Creative Coder based in Toronto, Canada. <img width="2048" height="2048" width_o="2048" height_o="2048" data-src="https://freight.cargo.site/t/original/i/0ec6b99c3e5f18c327bcae09c174748066363b25514c3cd76e970fc8261df3bd/blossom-HD.jpg" data-mid="128305147" border="0" src="https://freight.cargo.site/w/1000/i/0ec6b99c3e5f18c327bcae09c174748066363b25514c3cd76e970fc8261df3bd/blossom-HD.jpg" /> <img width="2048" height="2048" width_o="2048" height_o="2048" data-src="https://freight.cargo.site/t/original/i/89ab2970a0be74ceba7ab3d61f824d679c1c008005b0220da868c3b478674aa5/pi-1-4-HD.jpg" data-mid="123782403" border="0" src="https://freight.cargo.site/w/1000/i/89ab2970a0be74ceba7ab3d61f824d679c1c008005b0220da868c3b478674aa5/pi-1-4-HD.jpg" /> My journey with code began in 2004 when I taught myself how to draw in Flash using ActionScript 2. Ever since that moment my love and passion for generative art has taken me on a journey exploring and investigating the possibilities of code based art. Upon graduating with a First class honors in Digital Media Design at Brighton University, England, I’ve been fortunate to work at some of the most established agencies in the field such as Hi-ReS!, Stink Studios,&nbsp;Jam3 and Otherlife where I currently work as a Creative Developer. I primarily work as a lead on XR creative-driven experiences using WebGL and Unity3D. Over the span of my 11+ year career I’ve met and worked alongside some very talented people picking up some highly coveted awards along the way, in particular for projects East of the Rockies and Oculus Medal of Honor: Above and Beyond. I actively seek to encourage and inspire others either through public talks, online presentations and podcasts. In March 2021 I co-founded DiverseNftArt, a collective that supports and nurtures diversity and inclusivity in the NFT art space. WebGL Showreel 2022 Talks &amp; Presentations 05/05/23 Awwwards Toronto How We Created The NBA Pixel Arena: The Future Of Fandom 17/04/23 FITC&nbsp;Toronto Navigating The NFT Space: Perspectives From Crypto Artists How We Created The NBA Pixel Arena: The Future Of Fandom 27/01/22 Creative Coding Meetup&nbsp;Toronto NFTs and Generative Art 04/08/21 Global Digital Futures&nbsp;interviews DiverseNftArt NFTs &amp; Digital Art Production 27/01/22 Creative Coding Meetup&nbsp;Toronto NFTs and Generative Art 04/08/21 Global Digital Futures&nbsp;interviews DiverseNftArt NFTs &amp; Digital Art Production 22/06/21 Toronto Public Library live stream Queer Tech: Pride Month Panel Discussion 11/06/21 Decentraland Pride Day Panel live stream Spotlighting NFT Artists and Creators from the LGBTQIA+ Community 11/06/20&nbsp;Jam3 x The Microsoft Garage live stream The Creative Development of FWA 100 12/19 Tech + Art podcast interviewCreative Development insights 23/10/19&nbsp;Creative Coding Meetup TorontoWebGL workflows for creativity and performance 30/04/19&nbsp;FITC&nbsp;Toronto East of the Rockies: Developing an AR Game 15/06/16&nbsp;3DWebFest San FranciscoLive performance of VOID II by Hi-ReS! 28/01/16&nbsp;Awwwards conference AmsterdamHi-ReS! Let’s make the Internet great again! Articles and Publications 18/04/22 Wild Cities Technical Art Case Study Wild Cities AR - Magical Storytelling 11/21 THE AGE OF DATA - Embracing Algorithms in Art &amp; Design Blossom artwork featured 14/02/21 Medal of Honor A&amp;B Case StudyMedal of Honor: Above and Beyond – Using WebGL to craft an immersive hand-painted 3D battlefield 15/04/20&nbsp;Jam3's 100 FWA Case StudyHow We Built a Playful WebGL Experience for 100 FWA Wins 10/15&nbsp;.NET Magazine articlevoid.hi-res.net website overview https://ameliemaia.com/Projects Sun, 07 Nov 2021 03:29:51 +0000 Amelie Maia https://ameliemaia.com/Projects https://ameliemaia.com/Mastercard-Artist-Accelerator Sun, 12 Oct 2025 01:05:49 +0000 Amelie Maia https://ameliemaia.com/Mastercard-Artist-Accelerator MASTERCARD ARTIST ACCELERATOR Generative Web3 Music Passes 04.2024 ︎ connect.priceless.com/artistaccelerator Personalized Music Passes Unlocking Priceless Experiences <img width="5800" height="1400" width_o="5800" height_o="1400" data-src="https://freight.cargo.site/t/original/i/a2d6318c9607daf03a14a6f988d4b17aa82482daf756dbd0323ac1a4bf0818a1/Frame-316125981.jpg" data-mid="239283103" border="0" src="https://freight.cargo.site/w/1000/i/a2d6318c9607daf03a14a6f988d4b17aa82482daf756dbd0323ac1a4bf0818a1/Frame-316125981.jpg" /> Shortly after starting my role as a Creative Developer at Otherlife, I joined the team working on Mastercard’s Artist Accelerator Season Two campaign.Mastercard’s Artist Accelerator is a part of the priceless.com platform designed to unlock access to unforgettable experiences around the world through the power of Web3 technology. As part of Otherlife’s ongoing partnership with Mastercard’s global marketing innovation team, we helped strategize and develop Artist Accelerator Season Two - an immersive WebGL powered platform that invites users to create their own sonic anthem through a series of interactive, personalized choices that resonate with their personal style. Once created, their dynamic sonic anthem is rendered from WebGL and composited into a video file and stored on the Polygon Blockchain. Music Passes can be used to unlock exclusive content, concerts, and real-word events through the program. View the collection on Open Sea My role on this project was to develop the WebGL technology that powered key parts of the experience, including: – The interactive front-end interface, bringing Mastercard’s brand into 3D for the first time in a live, browser-based experience. – The dynamic, generative Web3 Music Passes, seeded with user inputs and traits, and rendered server-side as video files composed with each user’s custom sonic anthem. A Journey of Musical Preferences <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/61f72454403d7563b8097cfa59d3de34e58344f02004eb3b6992eef3e681cb3a/AA--Desktop---Question-02.png" data-mid="239299089" border="0" src="https://freight.cargo.site/w/1000/i/61f72454403d7563b8097cfa59d3de34e58344f02004eb3b6992eef3e681cb3a/AA--Desktop---Question-02.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/bd9f287e7aa041a8c7b3fef4805babc64b00bc006126b2445f139d24710c0f8d/AA--Desktop---Question-02.png" data-mid="239283082" border="0" src="https://freight.cargo.site/w/1000/i/bd9f287e7aa041a8c7b3fef4805babc64b00bc006126b2445f139d24710c0f8d/AA--Desktop---Question-02.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/82f12ebfbe7c878f9ce1a3b1a77fe2b459ad5107287abeab256f05d0ce636cd6/AA--Desktop---Question-03.png" data-mid="239283083" border="0" src="https://freight.cargo.site/w/1000/i/82f12ebfbe7c878f9ce1a3b1a77fe2b459ad5107287abeab256f05d0ce636cd6/AA--Desktop---Question-03.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/9593339b5f13e0afe94fd0a128967d5c3a4d7656d09d5e47932a28266c60a74c/AA--Desktop---Question-04.png" data-mid="239283084" border="0" src="https://freight.cargo.site/w/1000/i/9593339b5f13e0afe94fd0a128967d5c3a4d7656d09d5e47932a28266c60a74c/AA--Desktop---Question-04.png" /> The design of the Artist Accelerator platform centered around guiding users through an interactive, emotionally driven journey. Upon starting, the user is prompted for their preference in genre, this choice sets the tone for the remainder of the journey. As users progress, their choices cause the 3D spheres to dynamically react, shifting in size, speed, and color. Each selection is recorded as a trait, forming the foundation of their final, personalized Music Pass. Traits and Variations <img width="1816" height="2732" width_o="1816" height_o="2732" data-src="https://freight.cargo.site/t/original/i/d9f22f30e4b4de3874a16c90fa6aee2dde65300e22606db559bb7dca32a61678/Frame-58.png" data-mid="239297206" border="0" src="https://freight.cargo.site/w/1000/i/d9f22f30e4b4de3874a16c90fa6aee2dde65300e22606db559bb7dca32a61678/Frame-58.png" /> <img width="1816" height="2732" width_o="1816" height_o="2732" data-src="https://freight.cargo.site/t/original/i/c897d32147067dab3de973fdfb196de890c08e779b6609328cb5525d127f9bde/Frame-62.png" data-mid="239297208" border="0" src="https://freight.cargo.site/w/1000/i/c897d32147067dab3de973fdfb196de890c08e779b6609328cb5525d127f9bde/Frame-62.png" /> <img width="1816" height="2732" width_o="1816" height_o="2732" data-src="https://freight.cargo.site/t/original/i/7eaa8208e9a92b0b254da591f19c3b2ee6b0aeb8155dc95ab7b2df7cb21378bc/Frame-57.png" data-mid="239297207" border="0" src="https://freight.cargo.site/w/1000/i/7eaa8208e9a92b0b254da591f19c3b2ee6b0aeb8155dc95ab7b2df7cb21378bc/Frame-57.png" /> <img width="1816" height="2732" width_o="1816" height_o="2732" data-src="https://freight.cargo.site/t/original/i/56a2b905c3e8d811e257536fbe8330d531cbbaa9c8cc7b99eeb952027db1fb54/Frame-63.png" data-mid="239297209" border="0" src="https://freight.cargo.site/w/1000/i/56a2b905c3e8d811e257536fbe8330d531cbbaa9c8cc7b99eeb952027db1fb54/Frame-63.png" /> With the potentional for over 32,000 outcomes generated from user combinations, we designed a flexible, deterministic system that delivered rich visual variety while remaining time efficient. Each question in the journey correlated to a specific behavioral rule that influenced the overall composition of the Music Pass. In total, there were five traits, each containing eight options, combining to form a unique visual and auditory identity for every user. Music Genre — determined the color palette.Music Style — selected one of three visual style frames.Music Pace — controlled the animation speed of the spheres.Music Mood — adjusted the number of spheres displayed.Listening Activity — influenced the layout within the style frame. Rarity For Season One pass holders, we designed a special, exclusive themed Music Pass to reward their continued participation. In this edition, the orb’s lines pulsed dynamically in sync with the frequencies of the user’s sonic anthem, creating a living, audio-reactive visual that felt both personal and elevated. &nbsp; &nbsp; <img width="1276" height="1920" width_o="1276" height_o="1920" data-src="https://freight.cargo.site/t/original/i/85afbcc537dcabcabc69b148894ef0d869e188525745447614d9fd7f8c4181e0/Rare-Layout.jpg" data-mid="239301032" border="0" src="https://freight.cargo.site/w/1000/i/85afbcc537dcabcabc69b148894ef0d869e188525745447614d9fd7f8c4181e0/Rare-Layout.jpg" /> <img width="1276" height="1920" width_o="1276" height_o="1920" data-src="https://freight.cargo.site/t/original/i/7c6b64678bd3bc99006fc0e1cd12dd6f2583cd813409f975a158b4b7427f4ca2/Rare-Layout-1.jpg" data-mid="239301033" border="0" src="https://freight.cargo.site/w/1000/i/7c6b64678bd3bc99006fc0e1cd12dd6f2583cd813409f975a158b4b7427f4ca2/Rare-Layout-1.jpg" /> Program launch and success Season Two went live in April 2023, generating over 2700 unique music passes. <img width="2992" height="1868" width_o="2992" height_o="1868" data-src="https://freight.cargo.site/t/original/i/d23a23ae7b45d2ff53ccb5469491cfbe64fb0d1eaf58d6a257cef3c27b408396/opensea.jpg" data-mid="239300408" border="0" src="https://freight.cargo.site/w/1000/i/d23a23ae7b45d2ff53ccb5469491cfbe64fb0d1eaf58d6a257cef3c27b408396/opensea.jpg" /> Closing ThoughtsAs a Creative Developer specializing in WebGL and Three.js, this project gave me the opportunity to expand my expertise into new and emerging fields like Web3. Developing a trait-based generative collection had long been on my creative bucket list, but the opportunity to bring it to life didn’t come until this project. Working on Mastercard’s Artist Accelerator allowed me to merge my passion for interactive 3D with generative systems and blockchain technology, resulting in a personalized user-centered experience that was both technically challenging and creatively rewarding. This project offered an exciting glimpse of what’s yet to come as I continue to collaborate with the Otherlife team, pushing the boundaries of 3D innovation and creating next-generation, Web3-activated experiences 🖤. Agency Otherlife, MoonPay Role WebGL Developer Website priceless.com/artistaccelerator https://ameliemaia.com/NBA-Pixel-Area Sun, 22 Oct 2023 13:52:03 +0000 Amelie Maia https://ameliemaia.com/NBA-Pixel-Area NBA PIXEL ARENA Multiplayer WebGL Game 02.2023 ︎ enterpixelarena.nba.com A multiplayer microverse celeberating basketball fandom. &nbsp; &nbsp; &nbsp; In 2022 Media Monks collaborated with NBA &amp; Google to create an immersive avatar experience within the NBA app for the 2022 playoffs. Within the experience user’s could customize their avatar, participate in real time trivia against other users and interact with half time and post game highlights through data visualization.<img width="3480" height="1800" width_o="3480" height_o="1800" data-src="https://freight.cargo.site/t/original/i/345c77580d7e010439eae5a6621edc671e8a8a2d18a1d537c9f7215f9c9b57ee/pixel-arena.jpg" data-mid="194463272" border="0" src="https://freight.cargo.site/w/1000/i/345c77580d7e010439eae5a6621edc671e8a8a2d18a1d537c9f7215f9c9b57ee/pixel-arena.jpg" />Fast forward a few months after the successful launch we were determined to create a bigger and more ambitious world for the February 2023 All Star weekend. To celebrate basketball culture and fandom we designed a world where players could gather to play, create, earn, and celebrate.My role on this project was to architect the WebGL experience whilst also leading a team of 6 WebGL developers. With a collective team of 150+ people covering all aspects of production this was a multi-faceted challenge. Although this didn’t deter us from exploring new ideas and technologies to bring a microverse to life.&nbsp; <img width="3456" height="1944" width_o="3456" height_o="1944" data-src="https://freight.cargo.site/t/original/i/1524b78375b7e536daa538be80b6a4e6e63f2b37f1aacfb37cf6ac4ae0324703/pixel-arena-center-court.jpg" data-mid="194461371" border="0" src="https://freight.cargo.site/w/1000/i/1524b78375b7e536daa538be80b6a4e6e63f2b37f1aacfb37cf6ac4ae0324703/pixel-arena-center-court.jpg" /> <img width="3456" height="1944" width_o="3456" height_o="1944" data-src="https://freight.cargo.site/t/original/i/36e88491fb98a535e24fb34bc93da9afa9d1ec0e6936c976d5043c9e76bccd4f/pixel-arena-your-pixel.jpg" data-mid="194461375" border="0" src="https://freight.cargo.site/w/1000/i/36e88491fb98a535e24fb34bc93da9afa9d1ec0e6936c976d5043c9e76bccd4f/pixel-arena-your-pixel.jpg" /> <img width="3456" height="1944" width_o="3456" height_o="1944" data-src="https://freight.cargo.site/t/original/i/2a7ebd982832a26773495bb770495d7c57abc4fc21e4cc1cf71df0f7f4ad53f0/pixel-arena-locker-room.jpg" data-mid="194461373" border="0" src="https://freight.cargo.site/w/1000/i/2a7ebd982832a26773495bb770495d7c57abc4fc21e4cc1cf71df0f7f4ad53f0/pixel-arena-locker-room.jpg" /> <img width="3456" height="1944" width_o="3456" height_o="1944" data-src="https://freight.cargo.site/t/original/i/5308390121f5e4556b0b8523a4f9f94a092dd7bfadd89d1ba5b1d69a52907381/pixel-arena-creator-zone.jpg" data-mid="194461498" border="0" src="https://freight.cargo.site/w/1000/i/5308390121f5e4556b0b8523a4f9f94a092dd7bfadd89d1ba5b1d69a52907381/pixel-arena-creator-zone.jpg" /> <img width="3456" height="1944" width_o="3456" height_o="1944" data-src="https://freight.cargo.site/t/original/i/cf5950f2e4e7293bbc53b40ef9cecf0d84c325ae20d6b15a0e35f095f585fbce/pixel-arena-skill-zone.jpg" data-mid="194461374" border="0" src="https://freight.cargo.site/w/1000/i/cf5950f2e4e7293bbc53b40ef9cecf0d84c325ae20d6b15a0e35f095f585fbce/pixel-arena-skill-zone.jpg" /> <img width="3456" height="1944" width_o="3456" height_o="1944" data-src="https://freight.cargo.site/t/original/i/60d30556d8d872b18c37471b29ec57812e14ab81cc042d794813d1a78260d124/pixel-arena-drop-zone.jpg" data-mid="194461372" border="0" src="https://freight.cargo.site/w/1000/i/60d30556d8d872b18c37471b29ec57812e14ab81cc042d794813d1a78260d124/pixel-arena-drop-zone.jpg" /> The experience featured 5 zones that taps into key areas of basketball fandom. The Center Court The Center Court is an open area where players can shoot hoops, explore a city with jump pads and shop for new gear and accessories via the Drop Zone.&nbsp; Locker Room The Locker Room is your personal space where you can customize your avatars face, clothing and accessories through a diverse and vast range of options. Creator ZoneThe Creator Zone provides players with a remix tool to recreate legendary moments from recent and historical NBA games with their avatar. Players can customize the camera, music, VFX before downloading their personalized video to share on social media. Skill Zone The Skill Zone puts players face to face as they compete to earn PX through two different game modes - Trivia and Shot Clock. Each mode works as a timed session with different game mechanics. With the objective of scoring the most points (PX) to win. Drop ZoneThe Drop Zone offers players a marketplace to trade their hard earned PX in for the coolest and most fashionable futuristic street wear. Clothing, accessories and avatar customization options were given four rarity traits: Common, Fandom, Rare, Legendary. Each of which were inspired by NBA’s Top Shot. Architecture Shortly before development began for this project I prototyped a microverse framework that set out to explore ECS, a game architecture pattern. ECS is best known for providing a flexible and efficient way to design and organize code. With the sheer amount of functionality, data and 3D models required to make this game complete I was hopeful that using an efficient programming paradigm would help alleviate common issues when developing and collaborating with a team of creative developers. &nbsp; <img width="3848" height="2168" width_o="3848" height_o="2168" data-src="https://freight.cargo.site/t/original/i/d47bb625704c92078cefbf0f23078636e77717beb5e80533cb0452481128c06f/landing-3.png" data-mid="195257100" border="0" src="https://freight.cargo.site/w/1000/i/d47bb625704c92078cefbf0f23078636e77717beb5e80533cb0452481128c06f/landing-3.png" /> After successfully implementing ecs-lib into our threejs framework, adding new objects and implementing new gameplay mechanics became a breeze. The final prototype served as the basis for what would become the main game engine, equipped with a third person controllable avatar, joystick, keyboard and game controller support. The asset pipeline We made several adjustments to our asset pipeline to accommodate how assets were delivered to the technical artist on the team. Level design and collision GLTFs were exported directly from Unity, avatar and other world building assets were exported directly from Blender. All of these assets, whether they’re compressed or not, get transformed through our command line asset optimization scripts. Using config files we can precisely specify what type of compression we want to apply to the GLTFs and KTX textures. Once processed Typescript files are generated based on the destination directory, which speeds up referencing the assets in the final codebase. Gameplay To incentivise players to earn PX through the mini games we came up with 4 core game mechanics that could scale across the open world and mini games - shooting, dunking, blocking and traversing. &nbsp; <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/935ec9814a109a5198b205b2745243eeffe8da81f6b5019b1062b1ecf5a6b636/pixel-arena-gameplay.png" data-mid="203898256" border="0" src="https://freight.cargo.site/w/1000/i/935ec9814a109a5198b205b2745243eeffe8da81f6b5019b1062b1ecf5a6b636/pixel-arena-gameplay.png" /> <img width="2016" height="1137" width_o="2016" height_o="1137" data-src="https://freight.cargo.site/t/original/i/9e8fa6fbd4e1bd13bda96d20fd9bc13f116b10e1a8fe960585df590ae94fcc1c/pixel-arena-cosmetics.jpg" data-mid="203898348" border="0" src="https://freight.cargo.site/w/1000/i/9e8fa6fbd4e1bd13bda96d20fd9bc13f116b10e1a8fe960585df590ae94fcc1c/pixel-arena-cosmetics.jpg" /> <img width="2016" height="1137" width_o="2016" height_o="1137" data-src="https://freight.cargo.site/t/original/i/b5a8c6f39822dde2ec9103a1871006e125e353b08659afed2c2017391857edb7/pixel-arena-arena.jpg" data-mid="203898344" border="0" src="https://freight.cargo.site/w/1000/i/b5a8c6f39822dde2ec9103a1871006e125e353b08659afed2c2017391857edb7/pixel-arena-arena.jpg" /> Shooting &amp; Dunking As players encounter hoops a shot clock meter appears. Timing is a core component of making a successful shot, the quicker and more precise you are, the more points you’ll score against others! After 3 successful shots players are guaranteed a slam dunk which is non blockable!&nbsp; Blocking If you’re a little cheeky and competitive you might seek enjoyment out of blocking others shots as I do. When players begin to make their shot attempt others have a brief time window to block their shot.Serverside Game ValidationAll game logic and user actions are validated server side to ensure players don’t cheat whilst playing. For shots we used cubic bezier curves and fixed time steps which allow us to run several updates on the game server to ensure a shot reaches the hoop without being blocked by an opponent. We toyed with the idea of using physics&nbsp; to control the ball throwing but realized early on the game server would need to run these simulations. Given the short timeframe we decided not to go with a physics based approach. Deterministic bezier curves were easier for our developers to implement and more reliable to test. Journee As a graphics programmer who loves the art of rendering and lighting I always try to elevate the visual fidelity of projects I work on. Unfortunately given the time constraints of this project we never really reached the level of visual fidelity we were aiming for. At Media Monks we were given exclusive access to Journee - an Unreal Engine pixel streaming platform for virtual worlds. I was in the process of learning Unreal Engine at the time so I was curious to replicate the Pixel Arena world within Unreal Engine for others to explore and experience on the Journee platform. &nbsp; &nbsp; After spending a week on integrating GLTF assets, reworking materials and lighting we had a fully explorable prototype rendered in UE5 within a web browser. Journee’s platform and plugin for Unreal streamlined the entire process of pixel streaming a Unreal Application.&nbsp; Closing ThoughtsI’m incredibly proud of what our team accomplished in 12 weeks. This was by far the largest and most ambitious immersive WebGL experience we’ve created to date. The sheer amount of creativity, ux, design and programming required to launch this project was absolutely insane but we pulled through, albeit at the cost of the quality we aim to release projects at 🖤. Agency Jam3 Role Lead WebGL Developer Website enterpixelarena.nba.com Awards &amp; Recognition FWA - Site of the Day Talks &amp; Presentations05/05/23 Awwwards Toronto How We Created The NBA Pixel Arena: The Future Of Fandom17/04/23 FITC Toronto How We Created The NBA Pixel Arena: The Future Of Fandom Case Study &amp; Articles Case Study on Behance https://ameliemaia.com/Adidas-Ozworld Sun, 04 Feb 2024 18:53:01 +0000 Amelie Maia https://ameliemaia.com/Adidas-Ozworld ADIDAS OZWORLD AI Generated Avatars for the Metaverse︎ adidas.com/ozworld The world’s first personality based AI Avatar creation platform. &nbsp; &nbsp; &nbsp; To celebrate the arrival of Adidas Originals Ozworld’s collection Jam3 partnered with Adidas and Ready Player Me to launch the world’s first personality based Avatar creation platform. In the midst of the Metaverse hype of 2022 many virtual worlds would take advantage of Ready Player Me’s avatars.&nbsp; These human-like avatars had a diverse amount of customization options but they lacked more fantastical designs at the time. For Ozworld we saw an opportunity to experiment with style and self expression. Influenced by the upcoming Ozworld collection we created future forward digital garments that reflected peoples IRL personas.&nbsp;<img width="1400" height="585" width_o="1400" height_o="585" data-src="https://freight.cargo.site/t/original/i/7a2fcd1d4ae3ebb77d868fbe25debf0994a6fd01f149c9307d3fa92d7c1ff9ed/ozworld-avatar-design.png" data-mid="203844856" border="0" src="https://freight.cargo.site/w/1000/i/7a2fcd1d4ae3ebb77d868fbe25debf0994a6fd01f149c9307d3fa92d7c1ff9ed/ozworld-avatar-design.png" /> I was brought on near the end of development to first help optimize the WebGL experience, secondly to develop a command line tool to prepare the 500k+ avatars created by users online for Ready Player Me. The platformThe web platform starts with a guided personality quiz which prompts the users to express their individuality through 7 different interactions.&nbsp; &nbsp; &nbsp; Once complete the AI model generates a unique avatar for the user along with a digital code they can redeem on the Ready Player Me platform. The user also has the choice to download gifs and stickers to use on their messaging services. &nbsp; &nbsp; <img width="1400" height="789" width_o="1400" height_o="789" data-src="https://freight.cargo.site/t/original/i/7f1cf0b39ea87c313079f0711bb92d96ae0db31dea32a23f737ab03674e3c50c/165f12151178479.64d24fda1a4cc.png" data-mid="203849295" border="0" src="https://freight.cargo.site/w/1000/i/7f1cf0b39ea87c313079f0711bb92d96ae0db31dea32a23f737ab03674e3c50c/165f12151178479.64d24fda1a4cc.png" /> Ready Player Me Every single avatar created on the web platform had to be prepared and exported as GLTFs following Ready Player Me’s avatar specification. Working closely with the Ready Player Me engineering team we developed a workflow to deliver the avatars in batches on a weekly basis.&nbsp;We tried initially to use the web platform to export avatars but soon ran into memory leaks and crashes when generating 1000s of avatars in a single session. One advantage of using Threejs is how adaptable the library is in different execution environments. We were able to use&nbsp;node-canvas-webgl to emulate the WebGL rendering context in a nodejs environment. With the final command line script it took less than 10 seconds to generate and save each one to the file system.&nbsp; Closing ThoughtsI’m forever grateful to be part of the team that worked on this project. It’s a true reflection of innovation and originality in the realm of virtual fashion and web3 🖤. Agency Jam3 Role WebGL Developer Website adidas.com/ozworld Awards &amp; Recognition FWA - Site of the Day Webby Winner -&nbsp;Metaverse, Immersive &amp; Virtual Arts, Fashion &amp; Culture 2023 ADCC - Gold Interactive 2022 Case Study &amp; Articles Hype Reel Case Study on Behance Web Platform Case Study on Behance https://ameliemaia.com/Medal-of-Honor-Above-Beyond Wed, 26 May 2021 23:30:30 +0000 Amelie Maia https://ameliemaia.com/Medal-of-Honor-Above-Beyond Medal of Honor Above and BeyondWebGL on Canvas 11.2020 ︎ oculus.com/medal-of-honor An immersive hand-painted 3D battlefield. &nbsp; &nbsp; &nbsp;The first Medal of Honor game was released on Playstation in 1999, at the time there were few first person shooter titles that aimed to deliver a compelling narrative whilst taking you through some of the most exhilarating and dangerous espionage missions during World War II. Directed by Steven Spielburg and developed by Dreamworks Interactive, the game remains a classic in video game history and has inspired and influenced many first person shooters that exist today. At Jam3 I was asked to be part of a team to work on an interactive website experience for the launch of Medal of Honor: Above and Beyond - a Virtual Reality game built for the Oculus VR headsets developed&nbsp;by Respawn Entertainment. When I first heard about this brief I was beyond excited. Having played the Medal of Honor games growing up it felt like a true honor to be part of the latest installment. Jam3 worked alongside Oculus’ creative team to develop a concept that brings the 3D feeling of Oculus VR gaming to players on 2D surfaces. The campaign was divided into two phases: a teaser website which featured dev diaries from Respawn, and the main WebGL Experience, which would launch alongside the gallery trailer.The WebGL experience turned the game’s painterly key art into an immersive 3D battlefield. By scrolling through the action, you can experience selected features and gameplay moments. By the end, you have a crystal clear idea of what to expect from the game: a stunning first-person experience, gripping moments of heroism, and innovative combat mechanics.My role on this project was the WebGL Developer. I worked alongside the creatives to help conceptualise, validate and shape the core experience idea. My main tasks would involve creating various prototypes, creating the export pipeline from Blender to threejs, developing the main WebGL experience on Oculus’ development environment. This was by far the most demanding and challenging WebGL website I’ve worked on to date. There were many systems I developed from the ground up to accommodate the vision for the project.Camera PathThe camera path navigates the user through this frozen moment in time. To create a more cinematic feel I added various effects like roll, focus and speed, which influenced how the camera moved and felt from hotspot to hotspot. Some of the post processing effects like depth of field and vignette were also changed based on the scroll value. Positional Audio To enhance the experience we used positional audio to create a dynamic soundscape across the battlefield. As the user scrolls, sounds trigger around their location amplifying the intensity of the visuals they see. Hotspots The scene features various hotspots placed around the map which provide contextual information on certain game mechanics the user will experience during the game. To ground the typography in the scene I used threejs CSS3D renderer. Post Processing The post processing effects played an important role for frame composition. Radial motion blur was used on desktop browsers to give a greater sense of speed whilst scrolling through the world. Depth of field activates and vignette intensifies when the user reaches hotspots. I try to be conservative with post processing, I believe that post effects should only be used when appropriate. <img width="3836" height="2158" width_o="3836" height_o="2158" data-src="https://freight.cargo.site/t/original/i/6879fd5c50f31a54eec6b45c4b81ccc13e6feda713b6c9b385074774316c7c74/experience-3-landscape-4K.jpg" data-mid="109878984" border="0" src="https://freight.cargo.site/w/1000/i/6879fd5c50f31a54eec6b45c4b81ccc13e6feda713b6c9b385074774316c7c74/experience-3-landscape-4K.jpg" /> <img width="3836" height="2158" width_o="3836" height_o="2158" data-src="https://freight.cargo.site/t/original/i/13cdd543f0d63dd3b753963ad3192185c27ece2d7d84fe8cdc832208a6aacbc0/experience-1-landscape-4K.jpg" data-mid="109878982" border="0" src="https://freight.cargo.site/w/1000/i/13cdd543f0d63dd3b753963ad3192185c27ece2d7d84fe8cdc832208a6aacbc0/experience-1-landscape-4K.jpg" /> <img width="3836" height="2158" width_o="3836" height_o="2158" data-src="https://freight.cargo.site/t/original/i/449047cd8790b1631951b77f14d0b7e7b3ee0e4eb0383ac12446a2de42f1af9a/experience-1-landscape-4K.jpg" data-mid="109879672" border="0" src="https://freight.cargo.site/w/1000/i/449047cd8790b1631951b77f14d0b7e7b3ee0e4eb0383ac12446a2de42f1af9a/experience-1-landscape-4K.jpg" /> <img width="3836" height="2158" width_o="3836" height_o="2158" data-src="https://freight.cargo.site/t/original/i/0d81ef7aa1e5bfd2c26357b1ad8cd5ff9148813719445053c5a2083c0b8fdd8e/experience-2-landscape-4K.jpg" data-mid="109878983" border="0" src="https://freight.cargo.site/w/1000/i/0d81ef7aa1e5bfd2c26357b1ad8cd5ff9148813719445053c5a2083c0b8fdd8e/experience-2-landscape-4K.jpg" /> The website launched in November 2020 and was very well received by the creative community earning itself the high coveted Site of the Year and Peoples Choice awards from FWA. Closing Thoughts I feel so incredibly fortunate to be a part of a campaign for a game that inspired me as a teenager growing up. Every technical 3D skill I learnt to date helped me create this wonderful immersive experience alongside a team of very talented individuals. This project will always hold a special place in my 🖤. Agency Jam3 Role WebGL Developer Website oculus.com/medal-of-honor Awards &amp; Recognition FWA - Site of the Year Awwwards - Site of the Month CSS Design Awards - Site of the Year Case Study &amp; Articles Case Study on Medium https://ameliemaia.com/East-of-the-Rockies Wed, 26 May 2021 23:49:16 +0000 Amelie Maia https://ameliemaia.com/East-of-the-Rockies East of the RockiesMobile AR 03.19 ︎ eastoftherockies.com A heartfelt Augmented Reality story by Joy Kogowa. I’ll admit, I’ve played through a lot of video games since my childhood. My first games console was the Atari 2600 - it was simple and primitive but it lead me to develop a very strong love and passion for well crafted video games. From first person shooters, RPGs to RTS. I’ve played through many genres and titles but none have really moved me emotionally, with the exception of games like: “The Last of Us” , “The Unfinished Swan” and “What Remains of Edith Finch”. These games deeply resonated with me, bringing me to tears on more than one occasion which I find really impactful. Until this point in my career I never had the opportunity to work on a game, my work has been mainly centered around experimental web experiences. Shortly after completing Love Lost at Jam3,&nbsp; Jason Legge, a senior producer at Jam3 asked me if I would be interested in working on a game called “East of the Rockies”.&nbsp; Without any hesitation and not even knowing the story I said yes! Jason then went on to explain how he and Dirk Van Ginkel, our Creative Director at Jam3, wanted to create a storytelling piece to mark Canada’s 150th anniversary. The story would focus on Canada’s injustices as well as their achievements through a fictional story of someone’s past. This person was Joy Kogowa, a first-generation Japanese Canadian poet and novelist who lived through the Japanese Internment camps during World War II. She was able to take these negative experiences and turn them into creative outputs with one example being writing&nbsp;Obasan.Jason, who has been a fan of Joy’s writings since his university days, reached out to Joy and asked her if she would be willing to partner with Jam3 to create a storytelling experience. After explaining his idea more and showing her “What Remains of Edith Finch” she was on board! Joy paired up with Walt Williams to produce an original fictional script for East of the Rockies. Once our team had the script in our hands it was time to roll up our sleeves and get to work!My role for this project was Lead Game Developer. I had a small group of creative developers and technical artists to manage aside from working on the project myself. My main tasks would involve developing the app architecture, handling the interactions, camera direction and working on additional shader effects and providing support for UI where needed. As with most projects I start on, the first month or so is usually spent planning and creating various prototypes that test ideas to backup our creative vision for the project. Since East of the Rockies would be primarily an Augmented Reality experience, AR was one of the first prototypes on the list.ARKit, Apple’s Augmented Reality technology launched in Summer 2017 so by the time we started development on EOTR there was no official Unity AR plugin. Instead we relied on Vuforia, an SDK toolkit that provides an API for using AR on devices. It wasn’t ideal but it worked for the time being. Our creative team started to work on moodboards and art direction depicting the various locations the user would encounter during their playthrough. <img width="3840" height="2145" width_o="3840" height_o="2145" data-src="https://freight.cargo.site/t/original/i/ee70d451990cc73a13b0caa6aa4c2a48adcc8d17d4b7da7f0bb693a6fa8a8359/concept-art-slocan-landscape-4K.jpg" data-mid="109923583" border="0" src="https://freight.cargo.site/w/1000/i/ee70d451990cc73a13b0caa6aa4c2a48adcc8d17d4b7da7f0bb693a6fa8a8359/concept-art-slocan-landscape-4K.jpg" /> <img width="3840" height="2253" width_o="3840" height_o="2253" data-src="https://freight.cargo.site/t/original/i/eeb5a498bcd9f290f49d3716c6b7c2365f7a845869626104b9e9ba55482461b8/concept-art-yuki-house-landscape-4K.jpg" data-mid="109923585" border="0" src="https://freight.cargo.site/w/1000/i/eeb5a498bcd9f290f49d3716c6b7c2365f7a845869626104b9e9ba55482461b8/concept-art-yuki-house-landscape-4K.jpg" /> <img width="3840" height="2051" width_o="3840" height_o="2051" data-src="https://freight.cargo.site/t/original/i/877dce46678b8bd41c34bdd8a1be4b75fefca94f8d873b8003f3554a836756a4/concept-art-bath-house-landscape-4K.jpg" data-mid="109923580" border="0" src="https://freight.cargo.site/w/1000/i/877dce46678b8bd41c34bdd8a1be4b75fefca94f8d873b8003f3554a836756a4/concept-art-bath-house-landscape-4K.jpg" /> <img width="3840" height="2417" width_o="3840" height_o="2417" data-src="https://freight.cargo.site/t/original/i/8ff0854e02280049466bbc57f815bf6069c3f81538cb0c7ce75922d62f1797c3/concept-art-community-centre-landscape-4K.jpg" data-mid="109923581" border="0" src="https://freight.cargo.site/w/1000/i/8ff0854e02280049466bbc57f815bf6069c3f81538cb0c7ce75922d62f1797c3/concept-art-community-centre-landscape-4K.jpg" /> <img width="3840" height="2128" width_o="3840" height_o="2128" data-src="https://freight.cargo.site/t/original/i/5f0472a21e62852bc7aef77cb63db292a17d4f077e545f7c3d061427663803ae/concept-art-farm-house-landscape-4K.jpg" data-mid="109923582" border="0" src="https://freight.cargo.site/w/1000/i/5f0472a21e62852bc7aef77cb63db292a17d4f077e545f7c3d061427663803ae/concept-art-farm-house-landscape-4K.jpg" /> <img width="3840" height="2051" width_o="3840" height_o="2051" data-src="https://freight.cargo.site/t/original/i/26ed8ef476c04740432380bc5b1d4bac326e872e99fa5f0d3868a4545d7e49d8/concept-art-table-landscape-4K.jpg" data-mid="109923584" border="0" src="https://freight.cargo.site/w/1000/i/26ed8ef476c04740432380bc5b1d4bac326e872e99fa5f0d3868a4545d7e49d8/concept-art-table-landscape-4K.jpg" /> <img width="3840" height="2051" width_o="3840" height_o="2051" data-src="https://freight.cargo.site/t/original/i/38b1131730fdbb1db8bcdc5175c49cdf13f4a13681bda36c86294763a45204ba/concept-art-alex-house-landscape-4K.jpg" data-mid="109923578" border="0" src="https://freight.cargo.site/w/1000/i/38b1131730fdbb1db8bcdc5175c49cdf13f4a13681bda36c86294763a45204ba/concept-art-alex-house-landscape-4K.jpg" /> <img width="3840" height="2051" width_o="3840" height_o="2051" data-src="https://freight.cargo.site/t/original/i/6cfcc664371e30403a8bfac94bdc3771a0e854f694338d1cd133f922b5e1c910/concept-art-barndale-landscape-4K.jpg" data-mid="109923579" border="0" src="https://freight.cargo.site/w/1000/i/6cfcc664371e30403a8bfac94bdc3771a0e854f694338d1cd133f922b5e1c910/concept-art-barndale-landscape-4K.jpg" /> The concept art by&nbsp;Aaron Campbell inspired the whole team. It set the tone perfectly well for the game and it gave our development team enough ideas to plan out how we’d achieve this art direction in Unity. The story centers around three characters: Yuki, Tomio and Tak. We planned early on in the development of the game to motion capture actors performing the necessary actions we’d need for the story. We used the Rokoko motion suit to capture these various animations. In hindsight it wasn’t the best. It was difficult for our team to edit the animations and some had to be recaptured in several recording sessions. <img width="867" height="1209" width_o="867" height_o="1209" data-src="https://freight.cargo.site/t/original/i/0e2de7817899aba16b55a155d1a97980f82445af7812e905eaea1d263d9a34c4/yuki.jpg" data-mid="109924175" border="0" src="https://freight.cargo.site/w/867/i/0e2de7817899aba16b55a155d1a97980f82445af7812e905eaea1d263d9a34c4/yuki.jpg" /> <img width="963" height="1126" width_o="963" height_o="1126" data-src="https://freight.cargo.site/t/original/i/687755103b143c9048b239e48f68c77bf7819ae80a79693e965e7a486df3b90a/tomio.jpg" data-mid="109924174" border="0" src="https://freight.cargo.site/w/963/i/687755103b143c9048b239e48f68c77bf7819ae80a79693e965e7a486df3b90a/tomio.jpg" /> <img width="1125" height="1352" width_o="1125" height_o="1352" data-src="https://freight.cargo.site/t/original/i/f9f8c02215b643b8785fae7b952dda616572fff7bbd2e5c743fd4cd9e622debd/tak.jpg" data-mid="109924173" border="0" src="https://freight.cargo.site/w/1000/i/f9f8c02215b643b8785fae7b952dda616572fff7bbd2e5c743fd4cd9e622debd/tak.jpg" /> The world in which East of the Rockies takes place would be physically large in Augmented Reality. One of our early ideas was to mask out the surroundings so the user could focus on a particular area in the scene. We called this our SceneMask. One our of lead creative developers Fabio used a post processing mask to fade out the render based on the AR Anchor position in the physical world.We planned to make the game also playable without AR. I developed a universal camera animation system which panned, scaled and zoomed the world in and out based on the timeline of the story. This allowed us to direct and focus the user’s attention to specific moments in the story. <img width="2208" height="1242" width_o="2208" height_o="1242" data-src="https://freight.cargo.site/t/original/i/2b086758a459504af26c1922ef26b0022d16600881aebf1ddab7f294abd984b1/ar-gameplay-8-landscape.jpg" data-mid="109924576" border="0" src="https://freight.cargo.site/w/1000/i/2b086758a459504af26c1922ef26b0022d16600881aebf1ddab7f294abd984b1/ar-gameplay-8-landscape.jpg" /> <img width="2208" height="1242" width_o="2208" height_o="1242" data-src="https://freight.cargo.site/t/original/i/3662b6b1b5942633d5adee5ae9afb9871f685ff08a69a08ec1fb3d8d3f4b85ed/ar-gameplay-0-landscape.jpg" data-mid="109924565" border="0" src="https://freight.cargo.site/w/1000/i/3662b6b1b5942633d5adee5ae9afb9871f685ff08a69a08ec1fb3d8d3f4b85ed/ar-gameplay-0-landscape.jpg" /> <img width="2208" height="1242" width_o="2208" height_o="1242" data-src="https://freight.cargo.site/t/original/i/e428338de1ad0812986c97e39ad877d3fd22802d6a49829d0a496e64b130e30f/ar-gameplay-1-landscape.jpg" data-mid="109924567" border="0" src="https://freight.cargo.site/w/1000/i/e428338de1ad0812986c97e39ad877d3fd22802d6a49829d0a496e64b130e30f/ar-gameplay-1-landscape.jpg" /> <img width="2208" height="1242" width_o="2208" height_o="1242" data-src="https://freight.cargo.site/t/original/i/4351e2b317f1679dc0af6490d536756e69d971a8d7c53a55b591ef718fe12c63/ar-gameplay-7-landscape.jpg" data-mid="109924575" border="0" src="https://freight.cargo.site/w/1000/i/4351e2b317f1679dc0af6490d536756e69d971a8d7c53a55b591ef718fe12c63/ar-gameplay-7-landscape.jpg" /> <img width="2208" height="1242" width_o="2208" height_o="1242" data-src="https://freight.cargo.site/t/original/i/641c8aacb552da529e0ef6266995d5d227c516a6c86062ded00d88517f529ea6/ar-gameplay-6-landscape.jpg" data-mid="109924574" border="0" src="https://freight.cargo.site/w/1000/i/641c8aacb552da529e0ef6266995d5d227c516a6c86062ded00d88517f529ea6/ar-gameplay-6-landscape.jpg" /> <img width="2208" height="1242" width_o="2208" height_o="1242" data-src="https://freight.cargo.site/t/original/i/d54d67fabe60d22bd72721f8dc3cfc8afcf06b2ead3efae3a41f8636ccfc5c22/ar-gameplay-4-landscape.jpg" data-mid="109924571" border="0" src="https://freight.cargo.site/w/1000/i/d54d67fabe60d22bd72721f8dc3cfc8afcf06b2ead3efae3a41f8636ccfc5c22/ar-gameplay-4-landscape.jpg" /> <img width="2208" height="1242" width_o="2208" height_o="1242" data-src="https://freight.cargo.site/t/original/i/05bbc4f0e301b215e1156eb602a81147e17927a36e5ffed27e24bb84b0998689/ar-gameplay-3-landscape.jpg" data-mid="109924570" border="0" src="https://freight.cargo.site/w/1000/i/05bbc4f0e301b215e1156eb602a81147e17927a36e5ffed27e24bb84b0998689/ar-gameplay-3-landscape.jpg" /> <img width="2208" height="1242" width_o="2208" height_o="1242" data-src="https://freight.cargo.site/t/original/i/d2db4d7a70249fab1b50515e3849cfc5d038ae30009712fa93e237907fa8a4d7/ar-gameplay-2-landscape.jpg" data-mid="109924568" border="0" src="https://freight.cargo.site/w/1000/i/d2db4d7a70249fab1b50515e3849cfc5d038ae30009712fa93e237907fa8a4d7/ar-gameplay-2-landscape.jpg" /> The game features various user interactions like: drawing pictures, picking up objects, interacting with elements in the world. Some of these are optional and hidden but most require the user’s interaction to progress through the scene.As the user progresses through each act they unlock collectables that reveal historical context. Jason and Dirks had planned early on to develop educational resources for schools. Adding unlockable collectables was another way we could help educate the player. Two months before the project deadline Unity released AR Foundation, a package that unifies AR development across iOS and Android devices. Even though the package was early in development I was impressed with the simplicity of the API and the small overhead of the codebase. I was still unhappy with Vuforia‘s performance as it would occasionally throw errors and the tracking would occasionally drift from time to time. I created a small prototype to test the feasibility and impact this would have on the game and noticed a significant improvement overall to the frame rate. With the game being a 30 - 40 minute experience our aim was to make it as smooth and performant as possible. This change was most certainly for the better! We first premiered East of the Rockies at the IDFA Festival in Amsterdam November 2019. This was the perfect opportunity for our team to gather feedback on how people would play and experience the game. With the exhibition lasting several days we opted to use iPad Pro’s to ensure the game would run smoothly throughout each day. Upon arriving back to the office we made several UX improvements based on the feedback we gathered. <img width="1620" height="2160" width_o="1620" height_o="2160" data-src="https://freight.cargo.site/t/original/i/edf2491ada360f445a54e0350695f6defd93df1063459376d23b9f3e5e73c335/idfa-exhibition-0-UHD.jpg" data-mid="119906464" border="0" src="https://freight.cargo.site/w/1000/i/edf2491ada360f445a54e0350695f6defd93df1063459376d23b9f3e5e73c335/idfa-exhibition-0-UHD.jpg" /> <img width="2880" height="2160" width_o="2880" height_o="2160" data-src="https://freight.cargo.site/t/original/i/442c6d576fe47c8f4a5a3a1953882974eb12d9ceba00b6630e556d286392b280/idfa-exhibition-2-UHD.jpg" data-mid="119906466" border="0" src="https://freight.cargo.site/w/1000/i/442c6d576fe47c8f4a5a3a1953882974eb12d9ceba00b6630e556d286392b280/idfa-exhibition-2-UHD.jpg" /> <img width="2880" height="2160" width_o="2880" height_o="2160" data-src="https://freight.cargo.site/t/original/i/c7af8343074520850c9d5bb190cba8c1875ad6556c9ebf1ef02b1e33cdabfaf8/idfa-exhibition-1-UHD.jpg" data-mid="119906465" border="0" src="https://freight.cargo.site/w/1000/i/c7af8343074520850c9d5bb190cba8c1875ad6556c9ebf1ef02b1e33cdabfaf8/idfa-exhibition-1-UHD.jpg" /> We launched the game on the iOS app store in March 2019 shortly after earning us App of the Day. The game was received positively from various news articles and award ceremonies. On April 30th 2019 I had the pleasure of publicly speaking about the game development at FITC Toronto.Closing Thoughts&nbsp;I will never forget the first time I met Joy at the Jam3 office. She was so humble and appreciative of the team’s efforts to turn her story into something memorable and educational. Her experiences as an interned Japanese Canadian and how she was discriminated against for her identity draws many parallels to how others are being treated during the present day. I believe educational experiences are one of the many ways we can help people understand and learn to be more empathetic with one another 🖤. Agency Jam3 Role Lead Game Developer Website &amp; App eastoftherockies.com EOTR on the App Store Awards &amp; Recognition Canadian Screen Awards:&nbsp;Best Video Game Narrative Banff World Media Festival:&nbsp;Arts &amp; Entertainment - Interactive Content Talks &amp; Presentations 30/04/19 FITC Toronto East of the Rockies: Developing an AR GameEOTR slideshare presentation at FITC Toronto https://ameliemaia.com/FWA-100 Wed, 26 May 2021 23:30:29 +0000 Amelie Maia https://ameliemaia.com/FWA-100 FWA 100WebGL on Canvas 8.03.20 ︎ fwa100.jam3.com Celebrating 100 FWA with artistic expression and fun. The FWA is a pillar within the web development community. For over 20 years its founder and owner Rob Ford has built a huge community and earnt the respect and recognition from creatives all around the world. The platform was built for showcasing the best of web, which encourages and drives studios all around the world to earn the coveted SOTD, SOTM and SOTY awards.Earning these awards is by no means an easy feat, web development projects can take months to years to develop and then each website submitted goes before the public and a curated set of judges for a score to be given.In 2019 Jam3 was approaching winning 100 FWAs. I’ve been fortunate to help contribute to some of those award winning projects during my time at the company. Pablo, one of the co-founders of Jam3 and the Executive Creative Director at the time, tasked a small group of us to create something special and memorable in marking our 100 FWA milestone. I along with three others, Charlotte, Victoire and Aaron started to brainstorm ideas on how we could celebrate this special achievement. During our concepting phase we defined three pilars that would define the tone of the experience: Playfulness, Curiosity, and Gratitude. We pitched several ideas to Pablo before all agreeing on one. Our idea was a story that showcased Jam3’s journey from the start to the present with a glimpse of the future.We created visual mood boards for each section to roughly figure out art direction and interactions. The past would explore Jam3’s beginnings. Using a geode rock as a metaphor for Jam3’s potential, clicking down on the surface would grow crystal shards releasing energy. The longer the user clicks down the more change they would see. The rock eventually explodes into thousands of pieces which float through space surrounding the user. One of the technical hurdles I faced with this interaction was exploding the mesh into all the shards. The mesh of the rock deforms realtime to where the user is clicking down, with the vertex position being changed directly in the shader, I needed to find a solution to export these positions from the GPU to CPU. The crystal shards are instanced tetrahedra, therefore each instance needed to align to the deformed geode mesh. As the mesh explodes I render the geode mesh into a separate render target, which encodes the vertex positions to rgb. On the javascript side I can simply read the render target data and unpack the vertex position from the pixel data. This technique seemed to work fairly well for mobile and desktop but I’d like to find a more robust solution in the future. To learn more about how I solved this challenge along with shader snippets please check out the&nbsp;case study. The present day at Jam3 would explore our growth, we’re multiplying in numbers, opening up more offices in different places. During our moodboard exploration phase we were drawn to the idea of spheres to represent growth. I first started to prototype with 2D physics libraries in Javascript to explore some simple user interactions, our team wanted the interaction to feel tangible, like you’re physically playing with the spheres.After making several prototypes I found the 2D physics’ libraries limiting. I started to research other libraries and came across&nbsp;Oimo.js, a lightweight 3D physics library thats very simple to use with a low performance cost.&nbsp; I’ll admit I hadn’t really worked much with physics libraries before so understanding the features and terminology was key to finding out an interesting technique to use for the interaction. After a day or so playing around with the library, I became particularly fascinated with distance joints - a joint in which two objects can be connected together. After applying some spring tension, the spheres would naturally collide with one another creating a tangible motion. The shading of this scene is probably my favourite in the whole experience. Victoire and I liked the idea of the spheres using different materials. I prototyped several different shaders which were influenced by real world objects and phenomena such as marbles and iridescence, to name a few. Performance is always a top priority of mine whenever I work with a visual effect or shader so I made every sphere an instance. This meant I needed a shader setup that uses snippets to control which instance uses the corresponding shader effect.With many of the spheres simulating glass like properties I added cube map reflections to simulate real world reflections. My implementation only uses a single cubemap rendered from the center of the scene, which by no means is physically correct, but visually it makes the spheres in motion look more real. This was an additional effect only I only enable for higher end GPUs. To learn more about the shader composition please refer to the case study. The future was equally unclear to our team as we tried to figure out the direction we wanted to take. Our first idea was based around connecting dots, each time the user connected a sequence together a new dimension would appear orthogonal to the user. However this seemed to lack depth and a satisfying visual finale. Victoire’s logo for the experience uses the infinity symbol to represent the 00’s in 100. I thought this was an interesting shape to use visually in 3D. Thinking back to the work I did on Chanel Intangible Matter, the loading screen flies through a tunnel while content is loaded. Using the same camera technique, what if the user were to fly through a vortex of space into the future? That was more than enough of an idea for me to start with. I constructed the infinity geometry with a custom formula for threejs tube buffer geometry. A particle system flows around the path creating a sense of speed and momentum as the user holds down to accelerate the camera. As the camera picks up speed the field of view elongates creating a sense of warp drive towards the destination. Finally, the camera animates back and reveals the infinity shape. Digital confetti explodes around to celebrate this special moment. <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/21a69980643e46291fb03ee78ac4fd6379bb7fa43f97113e4fb0b480b95ecabd/future-story-landscape-4K.jpg" data-mid="109862802" border="0" src="https://freight.cargo.site/w/1000/i/21a69980643e46291fb03ee78ac4fd6379bb7fa43f97113e4fb0b480b95ecabd/future-story-landscape-4K.jpg" />After the final words are shown the user is invited to click and explode digital confetti throughout the scene. A pool of 8 confetti meshes are created to avoid additional garbage collection from being generated. Each confetti mesh is composed of an instanced tetrahedron with all the animations being driven directly in the vertex shader. Closing ThoughtsThe FWA has been a source of inspiration for me since I was an aspiring web developer in the early 2000’s. From Flash to HTML the web has evolved and grown, enabling creators like our team at Jam3 to create special experiences like this. Achieving 100 FWA is a remarkable feat and I’m particularly grateful that Jam3 has personally invested in allowing a small group of us to create a project like this. Not only does it help our team grow and learn, the results will hopefully inspire a new generation of artists and coders to create passionate, playful experiences like this in times to come 🖤. Agency Jam3 Role Lead / Concept / Creative Developer Website fwa100.jam3.com Awards &amp; Recognition FWA - Site of the Day AWWWARDS - Site of the Day &amp; Developer Award Case Study &amp; Articles FWA 100 on Behance FWA 100 Case Study on Medium https://ameliemaia.com/Love-Lost Wed, 26 May 2021 23:48:44 +0000 Amelie Maia https://ameliemaia.com/Love-Lost Love LostWebGL on Canvas 14.02.2017 ︎ lovelost.jam3.com A meditation on love, loss and the forgotten. &nbsp; &nbsp; Shortly after joining Jam3 I was asked to make a small website experience for Valentines Day. Self initiated projects have always been a personal favourite of mine to work on. Having full creative freedom on the idea and execution opens up lots of interesting possibilities. Our team brainstormed ideas for what we’d potentially like to create for the experience. Our favourite idea was a concept based around remembering people who you’ve loved and lost in your life. This idea was very close to my heart as I lost my father to cancer in 2014. Our idea was centered around a poem. Revealing each line linearly throughout the experience would prompt the user to think about memories of their lost loved one. &nbsp; &nbsp; Before the user encounters the first heart they find themselves in an empty atmospheric space, subtle particles animate around to a melodic soundscape. A line of the poem fades in and animates towards the camera. As the camera animation path comes to a still, a spotlight guides their attention towards the center. As the user begins to interact with the heart, light begins to illuminate from inside out, thus forming a connection between their memory and their touch. We placed a lot of emphasis on the gravity of the interaction, not just emotionally, but the feel of holding down to light and making the heart pulse again.I modelled the hearts in Maya using polygon sculpting tools. To achieve the highest level of detail in the 3D model and to ensure it loads fast on the web I created and exported normal and AO maps in Mudbox from high polygon sculptures (350k triangles). The website still uses the underlying base mesh which is around 20k triangles per heart. One of the technical challenges I faced was morphing one heart into the next. My first approach was to simply morph each vertex position into the next, since each heart was sculpted from the same 3D model I assumed the vertices order would match one-to-one. However after testing this approach out I noticed the indices of the 3D geometry changed between each heart. My solution was to use Maya’s mesh conform, which projects one meshes vertices onto another surface. This seemed to work perfectly well. I wrote a python script to export each meshes buffers (position, UV, index) to json, along with the transition data for morphing. For shading the heart I used a subsurface scattering algorithm in the shader to achieve the light illumination effect. Three point lights are placed inside to make the heart glow. I used the AO map for the translucent layer to mask the areas in which the light would be visible. <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/6cf7e97cbcd32e57ec01fb5ef779c975d68c4aa6ceef89fded69c005cb3e89b5/h-intro-UHD.jpg" data-mid="119015308" border="0" src="https://freight.cargo.site/w/1000/i/6cf7e97cbcd32e57ec01fb5ef779c975d68c4aa6ceef89fded69c005cb3e89b5/h-intro-UHD.jpg" /> <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/0e6ea8984aafaec1d056933eb506cb95213028335d1415faea0d676c2b104f09/h-interact-UHD.jpg" data-mid="119015307" border="0" src="https://freight.cargo.site/w/1000/i/0e6ea8984aafaec1d056933eb506cb95213028335d1415faea0d676c2b104f09/h-interact-UHD.jpg" /> <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/04a6b55d1a6f0d78d1665e2f3ab6ee5b096a8eacd47aaa8db0126fe5467fd582/he-interact-UHD.jpg" data-mid="119015309" border="0" src="https://freight.cargo.site/w/1000/i/04a6b55d1a6f0d78d1665e2f3ab6ee5b096a8eacd47aaa8db0126fe5467fd582/he-interact-UHD.jpg" /> <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/89bb2bcd12b1bc032f0f9bfde7b5c22b4d6f2dc7702c21e81672a09b9e623b0e/he-intro-UHD.jpg" data-mid="119015310" border="0" src="https://freight.cargo.site/w/1000/i/89bb2bcd12b1bc032f0f9bfde7b5c22b4d6f2dc7702c21e81672a09b9e623b0e/he-intro-UHD.jpg" /> <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/7ccdace283721cb9d4f6e36e6bf50080851d9d051f83e6acbd1152af370fbd2c/hea-intro-UHD.jpg" data-mid="119015312" border="0" src="https://freight.cargo.site/w/1000/i/7ccdace283721cb9d4f6e36e6bf50080851d9d051f83e6acbd1152af370fbd2c/hea-intro-UHD.jpg" /> <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/a7cd5799bfc076c8cdf372b1f9f7e8e8273ff6bf1f67ce2ddb7a2aeb148bbf64/hea-interact-UHD.jpg" data-mid="119015311" border="0" src="https://freight.cargo.site/w/1000/i/a7cd5799bfc076c8cdf372b1f9f7e8e8273ff6bf1f67ce2ddb7a2aeb148bbf64/hea-interact-UHD.jpg" /> <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/c42d2f705ece758dadb04885fd5d03f145d389681692cc6068fc1d854725719b/hear-interact-UHD.jpg" data-mid="119015313" border="0" src="https://freight.cargo.site/w/1000/i/c42d2f705ece758dadb04885fd5d03f145d389681692cc6068fc1d854725719b/hear-interact-UHD.jpg" /> <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/87715ad6410ba9c8da8cd9196ebb9e9a2137d76c48616ee4b7f429d2bbb3e917/hear-intro-UHD.jpg" data-mid="119015314" border="0" src="https://freight.cargo.site/w/1000/i/87715ad6410ba9c8da8cd9196ebb9e9a2137d76c48616ee4b7f429d2bbb3e917/hear-intro-UHD.jpg" /> <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/d2fa2966847aaf90d10d5b0713821e846c7068b0028c536fa04848f14a794c68/heart-intro-UHD.jpg" data-mid="119015316" border="0" src="https://freight.cargo.site/w/1000/i/d2fa2966847aaf90d10d5b0713821e846c7068b0028c536fa04848f14a794c68/heart-intro-UHD.jpg" /> <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/ce45c0ecac3526d46a1f7142562707514dd63ccaeb2c686f6c481cbf59a7194a/heart-interact-UHD.jpg" data-mid="119015315" border="0" src="https://freight.cargo.site/w/1000/i/ce45c0ecac3526d46a1f7142562707514dd63ccaeb2c686f6c481cbf59a7194a/heart-interact-UHD.jpg" /> I worked closely with Steven Mengin, the designer, on all aspects within the 3D, together we fine tuned the camera animation paths, materials, lights and visual fx. Steven has a fantastic eye for interactive experiences and I’ve been fortunate enough to work with him on more than one occasion. The ambient soundscape produced by Jon Lloyd starts off very melancholic, but slowly and subtly layers hints of happiness through piano notes. The final scene, which reveals the poem in its entirety, plays a composition that’s reminiscent of all the happy memories the user thought of throughout their journey. &nbsp; &nbsp; Closing Thoughts Websites are powerful tools for storytelling, they allow us to share experiences easily and freely with a global audience through a single url. This was the first time I’ve used a website as a medium to deliver a storytelling experience like this.I’d like to personally thank everyone that played a role in delivering this heartfelt, memorable, poetic experience 🖤. Agency Jam3 Website Lead / Concept / Creative Developer Website lovelost.jam3.com Awards &amp; Recognition FWA - Site of the Day AWWWARDS - Site of the Day &amp; Developer Award Case Study &amp; Articles Love Lost on Behance https://ameliemaia.com/Chanel-Intangible-Matter Wed, 26 May 2021 23:49:37 +0000 Amelie Maia https://ameliemaia.com/Chanel-Intangible-Matter Chanel Intangible MatterWebGL on Canvas 11.2017 ︎ lucyhardcastle-thefifthsense.i-d.co An artistic celebration of female creativity. The Fifth Sence is a collaborative project that celebrates female creativity by Chanel and&nbsp;i-D. Lucy Hardcastle,&nbsp;an artist who was finishing her masters at the Royal College of Art in London in 2017 was commissioned by i-D to create a response to Chanel’s upcoming No.5 L’Eau. Lucy’s has a unique visual quality to her work, renderings look like physical objects and vice versa. Her love for experimenting with various material properties often makes me question if the image is a photo or digital rendering. Lucy partnered with Stink Studios to produce an interactive immersive digital space that explored the virtual elements of the fragrance. It was to my delight in the first meeting our team had with Lucy that she referenced VOID, a project that I worked on at Hi-ReS!.My role on the project was Lead WebGL Developer. Aside from managing a team of creative and frontend developers, I worked closely with Lucy to plan out the interactions for each space and to ensure her art direction is realised within the constraints of WebGL and device performance. Before we began developing the main experience I spent 3 weeks creating prototypes that explored technical and creative ideas which covered: camera transitions, material effects, particle and liquid simulations. Lucy planned on having 5 rooms within the experience and the majority of these rooms would feature unique content and interactivity. <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/2f976ddcad4783e596911fef19a8efba2146e25348d21317c389d52a533fb626/intro-mist-portrait-4K.jpg" data-mid="109864799" border="0" src="https://freight.cargo.site/w/1000/i/2f976ddcad4783e596911fef19a8efba2146e25348d21317c389d52a533fb626/intro-mist-portrait-4K.jpg" /> <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/f7610b3cbee08282e30bf3dd74be4a13c135a459a7d7ac88df5e5b83caef0611/intro-soft-portrait-4K.jpg" data-mid="109864801" border="0" src="https://freight.cargo.site/w/1000/i/f7610b3cbee08282e30bf3dd74be4a13c135a459a7d7ac88df5e5b83caef0611/intro-soft-portrait-4K.jpg" /> <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/b733d849f2fc848840bbe42ca7cc3e3276fefd35f6afabe609baeda27c17d817/intro-molten-portrait-4K.jpg" data-mid="109864800" border="0" src="https://freight.cargo.site/w/1000/i/b733d849f2fc848840bbe42ca7cc3e3276fefd35f6afabe609baeda27c17d817/intro-molten-portrait-4K.jpg" /> <img width="2160" height="2160" width_o="2160" height_o="2160" data-src="https://freight.cargo.site/t/original/i/b323b166593cf5d8d62f45ebc38860a06bc36175d782b3f1ab5d9f14acbb73c4/intro-beam-portrait-4K.jpg" data-mid="109864798" border="0" src="https://freight.cargo.site/w/1000/i/b323b166593cf5d8d62f45ebc38860a06bc36175d782b3f1ab5d9f14acbb73c4/intro-beam-portrait-4K.jpg" /> The first room the user enters is Limbo, what would typically act as a menu on a website would be a spherical gallery of portals. Upon clicking on the portal’s title the user would be taken into the room. Soft, a room with foamy walls invites the user to pick up and throw squishy pillows around. As pillows start to bounce from wall to wall feathers lightly fall from the ceiling. This room presented several challenges during development. When the user picks up and releases a pillow I dynamically calculate a looping animation path based on the ray intersection where the pillow lands. Upon impact a mask texture is drawn to concave the wall surface. This is done by calculating the UV intersection of where each animation path starts and ends. This visually creates a more believable connection between the two objects. Mist presents the chemical reactions found within the fragrance. A vortex of particles swirls around the user in a dark empty space. Shimmering bubbles float upwards with small iridescent pearls inside. Upon interacting with the bubbles a ripple is sent through the surface. After several clicks the bubble dissipates into particles which trigger a chemical reaction above.&nbsp; The surrounding particles use curl noise for it’s spatial distribution, the turbulence of the algorithm creates an interesting visual vortex alluring the user to look around the space The chemical reaction triggered above uses a vertex based voronoi implementation to create a bubbly animated surface. Beam transports the user into a geometric space filled with pearls. Faces of the icosahedron shimmer as the user turns around inside this geometric dome. Upon releasing a pearl a surface of the icosahedron is shattered into smithereens. After performing this interaction for the third time they’re transported outside to continue shattering the icosahedron. The surface shatter animation was made entirely in the vertex shader for optimal performance. Each new face of the icosahedron the user faces will trigger additional pearls to shatter the surface. Molten was inspired by the process of oil extraction. Upon entering this dark space a large piece of fabric is held up by a marble hoop. Breaking the hoop unveils a mysterious form that invites the user to press down on. Large gloops of gold are released after each press. Realtime fabric simulations can be quite demanding on web based experiences. Instead we used a pre-animated cloth simulation from Blender. To create more visual folds in the fabric I rotated and swirled the UV’s around creating a more complex and compelling feel. After visiting the 4 rooms the user unlocks the final “fifth” space. A realtime music video featuring music by Fatima Al Qadiri and vocalist Chris Lee.&nbsp;This space was technically challenging since it featured assets from all the other rooms. Geometries and shaders are all generated before the music video starts to ensure the performance is smooth from start to end. Closing Thoughts Chanel Intangible Matter felt like the spiritual successor to VOID. A space filled with abstract shapes and unique interactions that invites the user to experience it their own way. It was an absolute delight to work with Lucy Hardcastle on this project, aside from our shared passion for digital art we formed a unique friendship all centered around the creativity of women 🖤 . Agency Stink Studios Role Lead / Creative Developer Website lucyhardcastle-thefifthsense.i-d.co Awards &amp; Recognition FWA - Site of the Day AWWWARDS - Site of the Month Case Study &amp; Articles Stink Studios Case Study FWA Case Study Communication Arts - Intangible Matter It’s Nice That - Digital sculptor and RCA student Lucy Hardcastle on working with Chanel and i-D