ive a question about pwa development with unity3d web builds. For my new application i have to think about how to get all tools together: web content and games. In this case the main content is web based, but should be published for ios and android.
So my research brought me to pwa development. Of couse there is an opposite opportunity to integrate a webview into the application and build the application via ios and andorid build system. But i has to look for alternative development methods too. So my question: I would like to develop my games in unity3d, build them for webGL and integrate those games into my progessive web application. Those games have to communicate with webcontent too.
Has someone some experiance with pwa development and maybe some experience how to combine unity3d games with web based mobile app development?
I’m fairly certain that Unity web builds are a bit of a black box, especially in a way that won’t really work with this idea. That said, this certainty is around 75%, so it’s possible I’m thinking of the old Webplayer stuff.
@Murgilod Is correct in stating the Unity WebGL content running is a black box to the browser. The browser is not capable of “seeing” what’s going on inside the the Unity player. Now this is how it is by default, however you can use Javascript to allow the browser to communicate to the Unity player. A good example of this would be HTML buttons that when clicked call functions inside of your Unity program. I haven’t attempted it yet, but I am pretty certain the Unity docs also state that you can communicate out from your Unity program to the web page as well. My experience with this has been through work, where they have a requirement that my Unity games have to be 508 compliant or in simpler terms accessible to folks with disabilities. Screen readers need to be able to “see” game content to relay that content to a user who may be vision impaired or blind. As we said earlier, Unity WebGL is a black box to the browser, it doesn’t know what’s going on inside your Unity content. So I’ve added a layer of standard HTML elements that communicate with the Unity content and in this way the HTML content now becomes accessible to the user through the browser. I still need to sort out Unity communicating back to the browser.
This is the documentation that got me started on establishing communication between Unity WebGL and the browser:
With all of that said. I would not recommend Unity WebGL for your Progressive Web Apps. One of the core pillars of PWA is that they respond as if they were native iOS and Android apps. This means instant, fast, with little loading time. Unity WebGL is very slow to load on mobile devices and won’t consistently load on iOS devices. This is at least from my own testing. If you’re game uses lighting, 3D meshes, physics and such it also runs slower on mobile devices and it’s tough to get an instant native app feel. I would recommend something like PlayCanvas for their WebGL tech. It’s very fast, almost instant loading and it’s a native Javascript engine for the browsers. It also allows you to write Javascript, HTML and CSS that does communicate directly with your game. PlayCanvas would come much closer to behaving like a native application on iOS or Android devices.
thanks for your answers! I suggested this kind of answers, because i made the same experience with unity3d builds for webGl. Therefore i would have to go with another engine to avoid some complications.
I thought, nesting unity3d games would avoid this webGl problem.
Did you guys have some thinkings about the other way? Building the app with unity3d for ios / andoird and integrating the web stuff via webview?
I don’t know for certain, but my guess would be is that a new template has been provided that now allows for a responsive WebGL embed. It was always possible, just not out of the box with what Unity provided. This is one example I leaned on for a few years: https://assetstore.unity.com/packages/tools/gui/responsive-webgl-template-117308
I do not know if by providing this template it speaks to a more performant or optimized WebGL experience (similar to a PWA). I am a technical artist on the solutions side who doesn’t get much face time with the WebGL team (my earlier post was during my time as a web developer at NASA). Here is a good link on what Progressive Web Apps entail. A few of the core aspects of a PWA is that it performs just like a native application would and that it performs equally well across all platforms it’s deployed to, i.e. a desktop, a laptop or a mobile device. If Unity has brought mobile performance for WebGL up to the same performance capability of a desktop machine I’ll be quite impressed!
I’m not very familiar with PWA development, is there any resources regarding this WEBGL Template? I only saw the name mentionned in the docs but no information on the actual hooks between the web page and the build
You can see how this webgl template actually looks in the following path
C:\Program Files\Unity\Hub\Editor<UNITY_VERSION>\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates\PWA
in this directory you can see and copy the PWA template into your WebGLTemplates folder in the project
hope that helps,
Lee
Can you do the equivalent of a PWA style app but embed native Unity content, because webgl content on mobile does, I imagine (just from seeing it on desktop), have severe limitations compared to native Unity content?
Ideally you want a web-dev to build most of a company’s app, alongside the website, but then embed native Unity alongside for some limited 3d views.
(NB I am not familiar with app dev and web dev outside of Unity!)