PITCH
Configure the world’s most advanced truck with DIGITRUCK - More Pixels than a Real Truck. DIGITRUCK’s mere existence causes the world to DIGITIZE as well. Available in several brilliant colors.
INSPIRATION
In simple terms, I can be described as a car guy; I like cars, automotive design, technology, and generally things that go fast and look good doing so. I am also a bit of a designer and artist myself, I am a Senior 3D Artist for a design and marketing consultancy studio in Portland, Maine. It is my job to design and visualize various computer-generated visual elements for a number of automotive, healthcare/medical, and technology companies around the world (still/motion animations, videos, interactive experiences, custom apps, AR and VR experiences, etc.). I like what I do and it is that which served as my primary inspiration for this project - what would a client think was cool?
Spark AR is a unique piece of software that opens up a wealth of interesting marketing opportunities to various brands with products to display to the world in creative ways. I wanted to take a compelling product (in this case, the thought-provoking Tesla Cybertruck) and integrate it in some way into a fun and approachable/sharable augmented reality experience.
But here's the challenge - there is a limit to what can be effectively done in Spark AR. Under the constraints of this particular hackathon, the effect must be publishable to Instagram, this means a hard project size limit of 4MB. I know 3D data. I have painstakingly crammed a relatively-detailed automotive effect down to Spark AR's Facebook limit of 10MB but getting down to 4MB is likely out of the question for what I had in mind - if I was going photorealistic with my integration of the vehicle. So, why not avoid photorealism entirely. What options might that open up? If for the sake of the data limitations I can not reasonably make my subject photorealistic, why not make reality non-photorealistic?
I do not recall exactly how I got on this train-of-thought, but the Nintendo Game Boy was great. The original Game Boy had a tiny dim 8-bit display; the Game Boy Color after it had something like 15-bit color. I am a child of the 90s, I love Japanese culture and technology, so it was only natural that I gravitated towards Pokemon games and played just about every one until life and responsibilities got in the way of continuing that habit. That being said, the immersion that came with even a tiny dim screen like those Game Boys, playing Pokemon Yellow day in and day out, it was great and had a definite feel to it; I wanted to employ a bit of that for this effect.
Back to the subject for a bit, the product, the truck. My typical product/car configurator is simple but effective. The user gets an interactive view of the product. They can orbit around it, zoom it, look at it. Depending on the product there may be multiple finishes or colors and other bits to swap out. Because the experience is interactive and not just a picture, the user can view this changes immediately and in the context of what they are already viewing. The impending Tesla Cybertruck is slated to come from factory in only one color - bare steel. I am ignoring that but I will get back to that in a minute.
Although unreleased at the moment, the Cybertruck is already an iconic design; it is immediately recognizable even when disguised, distorted, or modified. However, because I want to get away from using exact branding I chose to use a bit of modified data for my DIGITRUCK.
So, to define scope, this experience will:
Feature a pixelated rendition of a vehicle (Tesla Cybertruck modified to DIGITRUCK) The pixelated vehicle will be augmented into a pixelated view from the user's/device's rear-facing camera (the pixelated truck lives in the user's pixelated reality) Retro/Game Boy reminiscent graphics Some basic customization of the vehicle - probably color
Sketchfab to the rescue - I found a usable model of an already low-fi/pixelated Tesla Cybertruck. I came across it when I was looking into what vehicle I wanted to use and was part of the reason I chose the Cybertruck in the first place. I am used to creating photoreal/manufacture-ready CAD models from scratch but something this style is not my forte; having this Sketchfab model to start off with was a great help. I downloaded the model and imported it into Autodesk Maya for some quick modification and clean up. The textures that came with it where modified a bit as well for the sake of integrating into real-world color values.
Model done, I headed back into Spark AR to begin prototyping the pixellation effect that would be applied to the real world. I am far from a Spark AR pro - but I have made some things when testing effects on behalf of my studio as well as for my general curiosity. I do have one basic published effect that I created for a local cafe and ice cream shop. I was not aware that Spark AR has a library of sorts that has a lot of add-ins available to just drop into any Spark AR project. The shaders in this library were particularly interesting and gave me just what I needed to Game Boy-ify the world. I am essentially combining the TriTone Shader and the Pixelate Shader to replace the real-world view - making the view from the camera appear pixelated and mimicking low-bit color. From there I imported my final DIGITRUCK model. I am using the basic world-space effect controls to place and manipulate the position, orientation, and size of the digital asset. I am also using a quick system of randomizers attached to another Pixelate Shader to manipulate the DIGITRUCK's texture. The effect that this has helps it integrate a bit better into the pixelated real-world, which inherently has a bit of flicker that the truck's flat texture did not have. Interaction wise, the user can tap the screen to place the DIGITRUCK wherever the plane tracker finds a surface. Two-finger-twist will rotate the truck, and pinching will scale it. Simple. The rest is UI/UX.
I wanted really integrate this digitization thing so I decided to make the UI as reminiscent of an old 8-bit game as I could. Using Spark AR's ability to use custom fonts, I imported a nice digital/pixelated font I had and used it throughout the UI. The next trick was getting the color picker working. Those early Pokemon games I referenced earlier used a cool device for naming the various towns the player would come across; they were named after colors: Cerulean City, Lavender Town, Cinnabar Island, etc. Because of the low color depth achievable on Game Boys at the time, these games utilized color to make these locals impactful and immersive. Cerulean City was largely blue, Lavender Town was lavender-colored, Cinnabar Island took on the reddish-orange hue of a piece of mercury-sulfide (AKA Cinnabarite). I wanted to sample these hues directly from the game and use them to tint my augmented world and define my vehicle's color as well (like it was a car paint color). Thus, Cerulean City becomes Cerulean Tintcoat. I am using the new Picker UI patch to control the color selection. While it is great to have a picker like this built directly into the patch editor, I would love to have the option to increase the number of inputs at my discretion (make it more than 10 if I want). Also, having a picker UI-style patch that accepted other values aside from textures (like text) would have been a great addition as well. For the time being, I am using a system of "Equals Exactly" patches connected to a series of "If Then Else" nodes that checks the Index from the Picker UI to display on the UI the current color selection. It works. The only other thing to add was a simple toggle-able "Specs" screen for a bit of wit and interaction.
In the end, all of this comes together as a witty marketing piece for a largely fictional product - the DIGITRUCK. It was fun and interesting to work on and I have learned a great deal more about Spark AR and hope to continue using in the future as it continues to grow and develop into a serious content development tool.
Log in or sign up for Devpost to join the conversation.