Developer Profile – Declan Johnson

We caught up with Declan Johnson, a WebXR developer who’s been putting Mattercraft through its paces, creating immersive 3D experiences for both mobile and headsets. 

Based in Dallas, Texas, Declan is passionate about using augmented and mixed reality on the web to enhance marketing and educational experiences and is currently expanding his skills to explore a variety of WebXR tools and platforms within the industry like Mattercraft.

How did you get into the XR Space? 

I was introduced to XR when I was in college. I had an amazing professor who did his PhD degree in 2014 on AR UX. He was very passionate about XR and was able to get funding to start an XR lab on campus. I took his XR class in 2019 and fell in love with the technology. 

I started by developing VR prototypes in Unity for people around campus and building experiences with a friend that we put on SideQuest. In 2021 I was asked to become a WebXR specialist by my employers and have been working on WebXR ever since. 

"When I jump into Mattercraft I feel like I can build anything. It just feels like a Swiss army knife of a tool that can do it all." 

How did you learn to develop for XR?  

I was lucky and my university offered a VR development class. We were expected to have a playable VR prototype built in Unity by the end of the semester. I learned mostly from Unity Udemy tutorials, Brackey’s Unity videos, and Dilmer Valecillo’s XR tutorials. 

I learned about WebXR by taking apart sample projects and seeing how they worked. I had no prior web experience so everything I have learned about web development has been done by trial and error and by making WebXR experiences. 

How did you get introduced to Zappar and Mattercraft? 

I have known about Zappar for years. I met the team for the first time in 2021 at AWE. When I saw the release of Mattercraft I was extremely interested in the platform. When I became self-employed I reached out to Zappar because I wanted to get my hands on Mattercraft and play with it!  

Why WebXR and Mattercraft? 

I think WebXR is an amazing entry point into the world of XR for most people. It is extremely accessible, easy to understand, and can still blow people’s minds and make them excited for more. 

Mattercraft is an amazing all-around platform for building WebXR experiences. It is something that you can jump in and play with even if you don’t have programming experience. If you do have programming experience you can dive in and make some amazingly complex and interactive experiences. 

Could you tell everyone about the experiences you’ve been building with Mattercraft?

So far, I’ve worked on roughly four projects in Mattercraft, experimenting with some of the key features and functionalities like WebXR and web-based physics.  I'll break them down for you. 


'CUB3D'

CUB3D was my first experience with the tool – a 3D, world-tracked version of Tetris that’s playable on both smartphones and headsets. 

Tetris is a game I like to make to test out new programming languages and game engines. I typically will build Tetris in an engine first because it is pretty easy to make and doesn’t require extensive amounts of 2D or 3D art to be created. I can also learn about how some basic game mechanics will work in the engine. 

When building this project I had three main learning objectives. The first thing I wanted to learn was how to write custom methods in Mattercraft. The second was to figure out how to do basic transformations and translations through code. The last objective was to learn about ‘z-components’.  

For those who don’t know, z-components are like prefabs in Unity or scenes in Godot. They are powerful components that aren’t available on any other tool. They are easy to build and can be instantiated very easily. I was able to use them to instantiate the cubes and to delete the cubes I just deleted the z-components.  

CUB3D was a ton of fun to make and helped me understand the ins and outs of Mattercraft.

'Blastronaut' 

When the Havok Physics Engine was added to Mattercraft I knew I wanted to make a physics-based game. When building experiences I am often inspired by mobile games from the early 2010s. Normally they are very easy to replicate, very recognizable, and very nostalgic for me. 

Flappy Bird to me is one of the best physics-based games that came out in that era of games and it also happened to be one of my favourites. It also seemed like something I could make into a web game, face filter game, and world-tracked WebAR game. The physics of that game have always made me think of living on another planet with weird gravity so I decided to give Blastronaut a space theme.

The Havok engine was a breath of fresh air to use and worked as intended right out of the box. In the past, it has been very difficult to integrate physics into a web game or WebAR experience. After looking at the examples and documentation that is available I was able to come up with a really quick jump mechanic sample. I was also able to find some awesome stylized assets online that I threw into the project. 

Porting the game was not very difficult either. All I had to do was change the camera type and change a few locations of entities in the scene to get the project to work in AR. To get the face filter working I just needed to calculate the distance between the player's top and bottom lips and change the jump function so it triggered when the mouth was open instead of when the screen was tapped. I also rebalanced the physics of each version to accommodate for more difficult mechanics.

XR Hack London 

For this project, I wanted to create a fun social media filter that showed off some of the iconic elements of London. I was provided with some concepts, and I was responsible for bringing that concept to life. I worked with an artist to come up with the most important elements we wanted represented and how we wanted them represented. 

I wanted to make sure that there were cool little animations that kept the scene alive so I worked with the artist to add in small animations on the arms of Big Ben, pulsing animations for each bus, and also made the wheel of the Eye of London spin. I also added in a head model and made it an occluder so that it hides anything behind it, but does not show up in the experience. That give the effect of having objects go behind the user's head.

To make this an experience that users can create content with I added in the video recorder package from the Mattercraft dependencies. This package allows users to take images and record video inside of an AR experience. I also used face anchors to keep this experience attached to the head of the user. 

What’s your favourite functionality in Mattercraft? How does it differ from other WebXR tooling or 3D game engines? 

I love the animation functionality in Mattercraft. Every time I make something in Mattercraft I am surprised by how powerful that tool is. There are so many things I am now able to do through that tool that used to take me hundreds of lines of code. If you haven’t tried it out you need to! 

When I jump into Mattercraft I feel like I can build anything. It just feels like a Swiss army knife of a tool that can really do it all. 

What’s the fastest way to pick up a new tool like Mattercraft? 

If I need to learn a new tool I look through as many samples as I can. The sample projects on Mattercraft are built by people who know the tool well and you can learn a lot by how they use it. 

I would also read through the documentation. Most people really hate doing that but I often learn new things by reading documentation.

Dilmer at Learn XR has created some brilliant in-depth tutorials that are well worth checking out here and here. 

In your mind, what are the most important skills WebXR developers need? 

WebXR developers need to be driven and willing to do a lot of trial and error. The world of WebXR is still very nascent and there are a lot of things that haven’t been done yet. 

However, just because it hasn’t been done yet doesn't mean that it can’t be done. It will just take a lot of trial and error to figure out how to do it. I have built over 350 prototypes since starting with WebXR in 2021 and in each prototype I have learned something new. I am always trying to push the boundaries of what is possible and that has helped me make experiences that I think are really fun to use!

What’s your advice for fellow developers wanting to get into WebXR and build immersive content for the web? 

I would say the best thing you can do is just start making stuff. Just start trying and don’t be afraid to fail. Also, share what you are building and trying. Get people to use your experiences and let them give you honest feedback. Sometimes things just don’t work and it is better to get that feedback sooner, rather than later. The last thing I would recommend is to try out as many experiences as you can.

 A lot of my inspiration has come from projects that others have built. 

What are you looking to ship next in Mattercraft? 

I am currently working on a portal experience inspired by Monster’s Inc. The user is able to choose between 3 different scenes that they can enter and view. I was inspired to make this when Mattercraft announced its new world tracking capabilities. Portals are a tough type of experience to build and depend heavily on the tracking abilities of the engine. 

I am really excited to show off what Mattercraft can do!

Be sure to check out Declan’s work on LinkedIn if you’re interested in partnering with him. Declan was also featured in our WebXR webinar, which you can watch back here.