Web AR Experiences – Developer Spotlight with Animech

Welcome to the third instalment of Developer Spotlight, a series of blog articles where we talk to developers about how they use PlayCanvas and showcase the fantastic work they are doing on the Web.

Today we are excited to be joined by Staffan Hagberg, CMO of Animech.

Hi Staffan, welcome to Developer Spotlight! Tell us about yourself and Animech!

Animech was founded back in 2007, in the city of Uppsala, Sweden. With a mix of 3D artists, engineers, developers, and UI/UX experts, we have a team of 40 people and all the competence in-house. The studio started in the early days of real-time 3D. It was a mix of CAD engineers and developers who realized the power of visualization for selling complex products in the life sciences segment. 

Since then, we have visualized pretty much anything you can think of online and offline. We’ve worked in VR, AR, MR, phones, tablets, desktops, and pretty much any other device that has a browser. We have developed VR applications for cars, the first real-time 3D configurator in native WebGL ever developed, one of the world’s first configurators for Oculus Rift Devkit and much more.

We have also visualized experiences for hotel safes, medical instruments and lab products for 7 of the 10 largest life science companies, as well as built 3D converters from Unreal to glTF and a bunch of custom tools specially built for PlayCanvas. 

Our core business is real-time 3D. We push the boundaries every day trying to invent new ways of using 3D, where our solution makes the difference.

Bathroom Planner for Iconic Nordic Rooms

Why did Animech choose PlayCanvas?

After an extensive search for a WebGL-based engine, we evaluated a few and selected PlayCanvas for its performance, out-of-the-box features, its extensibility and its valuable editor. Our customers expect the highest level of visual quality along with a smooth browsing experience – without the need for an app or plugins. PlayCanvas truly helps us deliver.

As for our artists’ perspective, they think it was (and still is) the most artist-friendly WebGL editor out there, with the added bonuses that it is open source, and supports many important features, such as PBR, tonemapping, render layers, etc.

Did your team face any initial challenges? How did you overcome them?

It’s always challenging when customers have high quality and performance expectations. Though, at the same time, that is what drives us. Being able to create stunning 3D experiences linked to real business value is a unique opportunity and challenge. Adding AR to that process helps you to stand out against competitors. 

Our particular challenge was to dynamically create an AR model of a procedurally generated mesh as a generic function. Our solution was to create a SaaS service that can take of whatever 3D object you’re looking at in PlayCanvas, and on the fly create AR models for both iOS and Android devices (ARKit or ARCore).  

You’ve built several Web AR experiences. Can you tell us a little about them and how important you think Web AR is today?

We have been early adopters of both AR and VR, both as standalone applications and on the web. We believe it’s important to use AR not as a gimmick, but as an application that provides real value for the user. For example, looking at how that greenhouse would look in your actual backyard or similar. In that sense, Web AR will get more and more important, both as something that stands out but also as something that provides value for users.

Why do you think that your clients want Web AR in their experiences?

To offer something more to their customers – both in marketing value and actual value. To help users make smarter, more informed decisions.

We have also developed our own web based 3D converter that takes our PlayCanvas 3D models to glTF and USD on the fly. It is a server side solution that takes everything we develop to AR.

How is building a web experience different from a native experience?

You must optimize for both loading time and performance. The application could be run on a wide range of devices – from several years old phones to high-end desktops.

The application is accessible to a wider audience since they don’t need to install anything.

What are the team’s favorite features of PlayCanvas?

As a team consisting of both 3D artists and developers, PlayCanvas’ online editor provides a fantastic way to collaborate, prepare and preview our projects before pairing the solution with a stunning web UI or deploying it as a standalone viewer.

Our 3D artists also enjoy how the editor is robust and easy to use, and how its design promotes collaboration. Powerful material settings (per-texture UV and color channel, vertex colors, blend types, depth test/write, etc.), flexible texture compression and a fast response by the team when reporting bugs and requesting features are also great.

What is on the feature wish list for PlayCanvas this year?

As the future for 3D on the web continues to evolve, we are excited to see support for more accessible 3D formats, such as the glTF standard by the Khronos Group, which PlayCanvas are advocating for as well.

Beyond this, here are some things we look forward to:

  • Node-based shader editor
  • Support for editor extensions
  • Post processing (HDR bloom, chromatic aberration, SSAO, motion blur, color grading, eye adaption, etc.)
  • More customizable asset import options
  • Reflection probes
  • Material instances (see Unreal Engine)
  • Debug visualization (see Unreal Engine’s View Modes)
  • Expose currently hidden options in the editor (detail maps, etc.)

How do you see AR and 3D e-commerce evolve over the next few years?

The possibilities are enormous. The question is when do people actually start using AR. It has been around for many years, lots of interesting solutions and demos have been built, but the real value of AR has not reached the masses yet.

I think we are closing in on that though. Just the other day I was about to buy a new espresso coffee machine. One supplier had an AR model online in the e-store with which I could see that it looked good and covered my needs. With just one static USDZ file. It is such an easy way of helping your customer to make the right decision. Imagine how much value you add if you can see configured 3D models in AR and really see the potential of what you are about to buy. 

Next phase would be to configure and change your 3D model directly in AR-mode which would make the experience even stronger.

As the graphics quality gets better and better online and the fashion industry keeps on digitizing their customer journey, AR will probably be the best and easiest way of trying on fashion products like bags, watches, jewelry and clothes. It will reduce faulty orders on a massive scale if you can do a virtual fitting before buying stuff online.

Animech helps our customers to get what they want. Simply put: we empower people to make smart decisions through intelligent visualization.

Thank you, Staffan! Is there anything else you’d like to share?

You can visit our website here. You can also follow us on Twitter! You can also check out our other projects here:

Building WebAR Experiences – Developer Spotlight with Visionaries777

Welcome to the second installment of Developer Spotlight! A series of blog articles where we talk to developers about how they use PlayCanvas and showcase the fantastic work they are doing on the Web.

Today we are excited to be joined by Frantz Lasorne, co-founder of Visionaries777.

Hi! Let’s get started. Firstly, welcome to the developer spotlight! Frantz, if you could just tell me a little bit about yourself and your team and your studio.

My name is Frantz and I’m the co-founder of Visionaries777. Actually, we [founders] are three. We started as two French guys. We studied together in France; Interaction Design, and then we created this company about 10 years ago in Hong Kong.

[We currently employ] Around 35 people. We’ve been working on AR since 2010. It’s our main focus. Within the realm of AR, we are involved in 3D real time AR, and all sorts of XR applications.

Me and my business partner were working at Lego in Denmark before, so we started to work on AR back then in the R&D department. We helped Lego bridge the physical and digital to create hybrid play experiences.

Afterwards, we left Lego and started our own company. Lego hired us as consultants to keep working for them for some time. In the early days, we did a lot of collaborations for marketing and promotional events using AR.

Nowadays, the things we work on are more industrial-focused; automotive or luxury. AR is now a properly matured product, with WebGL, Web AR experiences, VR and so on.

Thank you! I’m curious, why did Visionaries777 choose PlayCanvas?

Before, we always used Unity 3D for any 3D real time project, because they have a huge compatibility of hardware platforms. It’s quite nice. The only platform they are lacking is the web.

We were looking around, trying to find what is the best platform to develop WebGL experiences. Then, we saw PlayCanvas, opened the editor, and were surprised how familiar it was for us. I think the people who designed the PlayCanvas editor knew Unity and got inspired in terms of the menu and layout. It’s very similar to the way [Unity] works. It’s just that it’s an editor on the web rather than a desktop application. So for us, it was very easy to do the jump.

So far we’ve been really happy with all the engine capabilities, the loading, how lightweight it is, et cetera. For us, it’s the best platform for developing web experiences.

Awesome! So, were there any initial challenges that you guys faced? How did you guys end up overcoming them? 

In terms of challenges? I think mostly the model optimizations; how to get the WebGL experience as small as possible, but retaining maximum visual quality. Most of our clients are either automotive brands or luxury brands, so they are concerned about the product that you are looking at on the screen. It’s pointless to show a product that you can see the rough edges of. They won’t like it in the end. 

That was our struggle at the beginning – to try and find the right balance of optimizing enough, but not too much, and be happy with loading time. So it took some trying to get this right and find the right compromise.

Right now, with our current approach and the tools in our pipeline, we’re quite happy. And it’s also why we work with Cartier and are now doing all these products on their websites.

That’s very interesting. Visionaries777 has worked on several Web AR experiences. Can you tell me how important you think Web AR is today?

It’s very important – but we are back to the same problem that we had in the early 2010s, when we relied on markers for tracking. Now with where we are in WebAR we are still very limited. You need something like an image marker, or a floor with a world target, but it’s not as stable as if you use AR Kit or AR Core in a native Unity app. 

With a standalone Unity application with ARKit and ARCore it’s mind blowing what you can do. There’s barely any drift, it’s super accurate. With web you’re still constrained. Tracking is not perfect. There’s a lot of drift. So I think the applications we see with the present state of tech are limited, experiences are considered a bit gimmicky. It’s getting there, but it still needs to grow. 

But at the end of the day, for marketing initiatives, no one wants to install an ad app on their smartphone as a user, as a consumer. You don’t want to install a BMW app just to uninstall it three days later because you’re done playing around.

These sorts of experiences were fine 10 years ago on an iPhone, but now people have moved on, and have different mindsets – things should be accessible through a web browser directly, not through an app. If it’s inside an app, it has to be inside Snapchat, inside Instagram, or inside an app that has more to it than just one AR experience.

Extending a bit from that question, why do you think that the clients you work with want Web AR in their experiences? 

Augmented reality has always been exciting for brands to show a product in 3D and also integrate it into [customers’] homes or their driveway. It’s quite appealing for a brand, marketing-wise. Then, for consumers, it’s something new, it’s fun. You get closer to the product.

It’s key to reduce friction. 

You don’t have to install things anymore. You download some assets in your web browser, but it’s more transparent than going into the store and searching for the app and downloading it.

Brands are definitely interested in WebAR for these reasons, so AR will keep growing. It brings a lot of value. You can try a car in your driveway or you can try a watch on your wrist.

eCommerce in a more immersive way is really the next generation for eCommerce experiences.

When you’re building your Web AR experiences, what features does PlayCanvas provide that you think were most helpful?

I think the true value of PlayCanvas is really how they are keeping up to date with all the WebGL standards, improving materials, improving compression, improving loading and so on. And their UI is very easy to use.

When you import your model, it gets converted to the GLB format. It makes it more lightweight, and you don’t need to pre-export it as GLB.

On the programming side, it’s just JavaScript. You can do whatever you want. It doesn’t have any preset for you aside from an orbit camera, but that’s not really important. Anyone can build more.

Cool! So, how would you say that building an HTML5 or a WebGL experience differs from developing a native experience or a native application?

You have to always concern yourself with the loading. In some cases, when you develop a web experience, you have to load something quickly for the user to play with right away. Then the model and the rest gets loaded progressively afterwards. Let’s say you have a car and this car has variants with different wheels, roofs, and so on. All these elements need to be loaded, but you shouldn’t load everything at once. Otherwise, the download would be huge.

I think that’s one of the main differences compared to designing a native application, aside from UX/UI, because you also need to be concerned about the browser for web experiences. Are you using it in portrait? On a desktop? Do you need to embed it into an iframe? Is it going to be full screen?

Those are questions that are quite different from a standalone application where you don’t need to concern yourself about the surroundings of the app.

So next up; we went a bit over this in one of the previous questions I asked. You explained how you guys use some of the features of the editor, but is there any feature PlayCanvas provides that is the team’s favorite?

To me it’s more that we can collaborate. The collaboration aspect of PlayCanvas is quite nice because you have one project and anyone can access it from their desktop machine on the web.

And you can, as an artist, populate the scene with the assets. Then, the developer can work with it. In parallel. And you can have someone to check things, maybe not edit anything, but do quality control. The collaboration aspect is one of the best features I would say that makes [PlayCanvas] so nice to work with.

As part of the interview, but also as a feedback exercise, what is a PlayCanvas feature that would be at the top of your wishlist?

It would be great if the PlayCanvas editor had a feature to assign different texture resolutions for different platforms (mobile or desktop), similarly to how Unity does it for different devices. It would make it so much easier to manage rather than doing it with code and tagging etc.

Thanks for sharing the feedback! Going back to another question, how do you see HTML5 and web experiences evolving over the next few years?

I think it will grow. We see two things at the moment, WebGL experiences and cloud streaming, which is not HTML or WebGL at all. Some brands will choose either doing a WebGL configurator, or a cloud streaming configurator. Those are two different approaches. I have a tendency to prefer WebGL because you have a much more crisp image.

Also, once the experience is loaded, it’s much more responsive to commands. You’re not constrained by latency of streaming and video glitches. Those are things that put me off when I do classroom experiences. 

So I think WebGL will continue, especially right now with the whole discussion around the metaverse, and when we talk about the necessary file transmission. GLTF, USDZ, USD – those files can be translated from one platform to another, so I think there’s a lot of potential for these. 

I think the metaverse will most likely be built in WebGL rather than in cloud streaming, but I could be wrong.

Either way, I believe that in the end, it’s very important for brands to start digitizing all their assets. For example, Cartier chooses to have a WebGL viewer and recreate every single one of their products into GLB formats. I think it’s quite smart because once you have them, you can reuse them anywhere on the web; whether it’s in their website, the metaverse or a Snapchat AR filter.

I think there’s lots of opportunities, and as 5G expands, compression format algorithms get more efficient, things are going to be smaller and we’ll be able to build richer experiences on the web. I think there’s a long positive future, and cloud streaming is not necessarily going to replace it.

Thank you! Those were all the questions I had. Thank you for your time, Frantz! Is there anything that you would like to promote, a website, a Twitter handle, or a job opening that you would like to share?

We have a website purely focused on product configurators, utilizing WebAR: https://vzion.vz777.com/

And a main website too, where we show all of our work: https://www.vz777.com/ 

We’re also on twitter! Follow us there: https://twitter.com/visionaries777