WebGL Builds STILL Not Entirely Usable

As we approach the 5th month of Unity 5's official release, I am still working on WebGL integration into websites, something that was assured to be easy...It's not.

I have just under 10 years experience developing websites so I know a little about it, and WebGL is not the best way of doing this, but with that out of the way, we can get down to the rest of it.

Wordpress Integration Attempts

Attempt 1
The first attempt of many was the assumed simplicity of Wordpress integration, as there were a few articles on the net about WebGL and Wordpress.
This did not go so well.

After attempting to use the embed code directly in a Wordpress page, I quickly came to the conclusion that this was not going to work at all.

The next issue was uploading, I had to strip the security on my dev site all the way back to the bare minimum to allow Wordpress to upload some of the files as they were deemed a "security risk".
After all what work I was still no closer to finding a solution, but this did not deter me, Edison didn't succeed the first time round.

Attempt 2
The second of many attempts came from someone's good idea to use an iFrame, a feature in HTML that allows for "windows" that display content from other URLS (pages).
This did not work either.

As the default files used by the WebGL builds point to the parent folder, not to URLs, I was unable to get a connection.

Other Issues
By now I am sure you are all aware of why the Unity Web Player no longer works in Google Chrome, for those who don't know, here's the gist of it:

Google; Who have hated the plugin system NPAPI for a long time (see excerpt quote below), decided to pull support from the main browser at the top of the web market holding over 40% of the worlds internet usage.
Unfortunately, the system the old Unity Web Player used to run it's plugin was none other than NPAPI, which is why it no longer runs in Google Chrome and will not run for much longer in Internet Explorer or Firefox, so a new system was needed, why WebGL was picked is beyond me.

Straight Integration/Upload

Attempt 1
The first of a new approach after about 10 failed attempts and many weeks wasted was based on the premise that:

This did not go so well either.

The WebGL Unity builds are based on the ability to upload the contents directly to the webspace and use from there.

Using another development area (an empty subdomain pointing to an empty folder), I uploaded a simple demo for testing, after another 4 days wasted, I determined that trying to run these builds how they were intended would not work either, the system these builds were created on would not suit my needs, nor anyone elses in their current condition.

Attempt 2
My final attempt (3 attempts to be precise, spread over just over a week), took me to believe the builds would run on a virtual private network (VPN) running from Visual Studio.
This did work, sort of.

I was able to get past the Unity loading screen so the content was accessible, but when I tried to replicate this on a webspace, things did not go so well.

After it simply not loading, no errors, no javascript complaints, no nothing, I had decided enough was enough, there were 2 choices, come up with a concrete way of getting these builds to at least work the way they are said to work, or give up.

With the second being something I vow never to do in these situations, I am turning to the community and Unity developers for answers.
​

The Question
The question this little article is building to is:

How Do You Use The Unity WebGL Builds Online?
​

Why the buildup for such a simple question you may ask? Well, I have spent so much time trying to get this seemingly poorly implemented method working that I do not want to keep wasting time on things that will not work, so I thought it best to mention the methods I have tried so far.

Considering how much time I have spent on this already I think I am remaining very calm considering however I do apologise if this seems threatening or condescending in any way, I'm tired.

Eagerly awaiting replies,

Kyle Briggs.

 

Hey there

I can only provide some limited advice around the 2nd option - straight integration; we did not try to embed the WebGL version of our mobile game in our WordPress site.

First, we cut a WebGL build with all the debugging options turned on all the compression/optimizations off to make sure the baseline build worked. We loaded the output web page locally to test to make sure things loaded as expected. In order to do this in Chrome you have to launch it with the --allow-file-access-from-files switch.

Once we were satisfied that everything looked ok we ran a build with the highest optimization settings and tinkered around with a launch page that uses modernizr to detect if WebGL + web audio featured worked in the browser being used. If so, it loads the WebGL version, otherwise defaults to the legacy Unity Plugin.

Once the optimized version loaded fine locally, we uploaded the Release and TemplateData directories, along with our loading pages to our web server. Again, we ran this from various browsers and checked to make sure it worked without compression,

Depending on your environment you may be able to get away with using .htaccess file to compress your WebGL data files; in our case we had to configure our webserver to enable compression. You'll definitely want to enable this, once you're happy everything is loading properly from the webserver. You may be facing proxy issues, permission problems - it is tough to tell with so many variables.

My advice would be to get it working locally first and incrementally deploy from there.

I can attest that our WebGL game does work in Windows/Mac on both Chrome and FireFox. (Possibly Safari on Yosemite as well).

You're welcome to look at how we structured our WebGL version: http://www.sproutedinteractive.com
Click on the Play the Demo in your Browser icon.

Hope that helps.

 

Thank you for taking the time to write this @justoon however I am using a demo build I just built which does work locally in Firefox and Chrome, but when uploaded to the root of our subdomain (we now have one dedicated to getting this working), we are unable to load the page, we are just directed to our hosts landing page.

We have contacted them many times since about April about this and we have been assured it is nothing on their end and nothing appears to be going wrong, there is not much else we can try.

Apart from completely scratching the Web Build from our plan I don't really see much of a way of doing this, if it doesn't run in out current configuration as it is intended to do (uploaded straight by itself to a completely empty space) then there is not much else I can do.

As mentioned, I have spent a great deal of time on this, believing that using the WebGL builds was a brilliant way to unleash Unity 5, but I am having my serious doubts as to it's long-term usefulness, we cannot be the only ones with this problem, but many have just given up, and at some point I will have to too, although I hate to admit it.

I spend most of my free time now working on the WebGL builds which as you can imagine is very tedious and with such lacking results, quite depressing which is why I have ultimately taken the position on this build method.

I am still working on this but I am not willing to tear apart our entire web structure or switch providers (we have been with ours for almost 5 years and it's brilliant) just for the sake of a web build, demos and product examples may simply be not possible for us given Google's position on this matter and Unity's solution.

I am still trying it now, it's not half 11 here in the UK and I am still hard at work on this damned thing, hoping that I would at least get the first frame running, that at least would be something but I am completely burned out now, so I may have to leave it until tomorrow in a few minutes.

Any more help anyone can provide is greatly appreciated.

 

I can confirm issues with integrating WebGL builds inside Wordpress pages.

IFrame could be fine - game is working but the text input isn't.

UPD: text input works if player focuses in IFrame by clicking outside the WebGL part.

 

The latest in a long line of errors in my next attempt (using ASP.NET) complains about not being able to load a seemingly important file:

The entire error is declared like so:

 

Update:
My third attempt into the ASP.NET method has achieved some preliminary results!

First of all, by preliminary results I mean it runs, not usably yet though.

I am able to successfully run the build from Visual Studio 2013 using the browser run method which creates a sort of temporary IIS network for the site to run on; using this I can successfully launch the demo I have created, with a few added flags to prevent errors throwing in the Web.Config file.

From here I proceeded to upload it to my empty subdomain with the hopes it would run there...it didn't.
typing in the web address of the initial page (default.html) I received nothing, just a white screen.

Below I have attached a link to a downloadable version of the latest build of the .NET method (the one mentioned above), I have stripped out all the .Net stuff for now as I just wanted to get it working.

http://dev.areonline.co.uk/wp-content/uploads/2015/07/WebGL_Template.zip

 

Has anyone been able to take a look at this yet, or determine what is going wrong when it is up on the web?

 

Hey just wanted to drop in and say that I've not looked at your solution, but I have put up builds. I can tell you that it isn't easy, but only half of it is Unity's fault. The primary thing I take issue with is that Unity's javascript for integration is a mess. The game files are fine, but the actual template that it produces generates hard coded paths and such. It's been a little while since I worked on it so I can't recall what all of the issues were, but some messy javascript makes integration very difficult if you're not doing the out of the box template.

It sounds to me though that the majority of your issues are configuration related, probably both on the WordPress and ASP .NET side. Unfortunately there are a lot of technical things that are probably hard for Unity staff to explain to people who don't configure web hosting environments on a regular bases. I know they are working on ways to make it easier to publish these files, but for now we have what we have. The biggest issue you're going to run into (and the reason you have errors with your .mem file) is MIME types. You have to make sure you have MIME types mapped for the .data and .mem files. If you use the compressed versions you'll have to have mime mappings for those as well.

But, using the compressed versions opens up a whole other can of worms as you have to do some configuration sorcery to get IIS to not only serve the .gz files, but to also make sure it is doing so using the correct gzip headers. This is done through URL Rewrites and configuration. And in fact, the same is true for Apache servers.

I just recently put some stuff together to make it work, and I wrote an AngularJS wrapper that you could use to host WebGL content within AngularJS sites and there is a post hanging around about it somewhere but I don't recall where. You might have to do some searching. It's here on the Unity forums. I also have posts somewhere about how to properly configure IIS. I'm in my office now and don't have access to the machine with those files on it or I'd just post some more info here.

Lastly, I'd like to point out that I believe WebGL is still considered to be in Beta so we can't expect it to be perfect. It's a WIP and doesn't even have full feature browser support across browsers which again is outside of Unity's control.

 

Thanks for the update.
I have worked around the MIME types in my .NET "solution" but the files are still not being run properly.

They work fine when run using IIS internally (running from VS2013) but uploading this to any site makes it fail to run, I am uploading it to an Apache server so there is no .NET functionality but my template for .NET has all the actual ASP stripped out for now anyway, it's all just HTML and JS for the moment and should run.

I think you are right and that a lot of my problem is sloppily linked JS file links, but I think I expected too much to think I could use it with more than the default templates for now.

I am still working on this, but I am also working on a few Wordpress related projects as well (one of which is WebGL related) which may come in handy.

 

You're going to need to use a .htaccess file to configure it if you're uploading to apache.

 

How would I configure the .htaccess file to work with Apache?

 

The .htaccess file provided by Unity when doing a WebGL Release build, should do the trick.