Need some help embedding webgl build(s) in webpage

Unity Engine
1

Howdy,

First off I am not much of a web guy. I would love a little help on embedding webgl builds into a webpage. I have art that I would love to show on a webpage. I am specifically using Rapidweaver and if anyone could give me a few pointers that would be greatly appreciated.

Thanks for your time.

Gary

Unity to Web
2

Easiest way I have found is to upload the entire build folder that Unity creates to your web server (or even a public dropbox folder). Then use an iframe to embed that page into your site.

3

This does not work for me, it shows just a grey box and nothing loads.

Any insight would be great.

Thanks,
jrDev

4

Does your game work fine when launched directly from the dropbox url? Are you using Unity 5.3?

5

Yes, here test this Demo.

Thanks,
jrDev

6

Interestingly, I have used your exact line

and it works fine for me both in Firefox and Chrome, both from the server and locally (although I had to wait for about 30 sec for it to fully load the first time, while the frame was grey). Is there a specific browser or any other special environment you are using for testing? Btw, you can open the browser network log to see the loading progress in details (it is usually located in the same place as the error console, just on another tab).

7

Hmm. Well that’s interesting…I am using Safari so I don’t know…I can try with Firefox and Chrome to see if there is any difference though…I will post back in a few minutes.

Thanks,
jrDev

8

Hey,

Ok so it works on Firefox lol. I checked on Safari again but still no loading…checked error console and it gave a 404 error…I cannot believe I have been doing it correctly the entire time, wasted countless hours trying and asking people why it isn’t working.

Thanks a lot but why does it not work on Safari?

Thanks,
jrDev

9

You might be surprised, but it works fine in my Safari (8.0.8) as well.
The Failed to load resource: the server responded with a status of 404 (Not Found) console message you are talking about just informs you that the server does not support response rewrite and this message should normally appear for dropbox. The loader then falls back to loading the compressed file directly and the game launches fine. You can check the downloading details in Develop - Show Web Inspector - Network Requests (clear the cache if necessary)

10

Hmm, well I cleared the cache and I am on Safari 9.01 and it still doesn’t load. Apparently Web.js had an error when checking Network Requests part of the Web Inspector.

Thanks,
jrDev

11

I have just updated from Safari 8.0.8 to 9.0.3 and it appears that there is some problem.
The game does load, but for some reason it takes unreasonably long time up to like 6.2 minutes (as you can see on the attached screenshot). Note that Web.js request does get 404 and this is expected. Just open the Network tab and look for the Web.jsgz request instead:
2484175--171211--Screen Shot 2016-01-27 at 21.10.47.png

12

Yea, that definitely sounds like its from Apple’s end or is Unity supposed to update Webgl builds for this weird change?

Thanks,
jrDev

13

I suspect this was probably related to dropbox bandwidth in some way, I tried it today once again (after clearing Safari cache of course) and gz files are now downloaded in just about 10-15 sec.

14

My code had some problems, comment removed for now

15

I would love an update to this thread with a more appropriate answer. iframes are a major web faux pas these days. It is not 1999 anymore.

16

Can’t find the post where i got this info from but it seems that an iframe is needed because otherwise there is no possibility to unload and reload the unity-web-gl builds without a page reload. I use iFrames on the page in my signature (just don’t click Shooter or Visibility, i failed to build there web-GL version)

Basically i set up some variables for loading the weg-GL-build from the correct folders and then i start a master.html in the iframe that fetches it. I am a Web-noob and this page is the only thing i ever done. It should work on every major browser, except IE, i deliberately excluded it because i could not get it to display the page how i wanted.
Also, i can’t get the master.html to load the specific loading bar because it seems that the .js files in Release have hardcoded targets or something.

17

Amazing… Unity includes a web build option that can only be embedded into a webpage via an iFrame. No means of just adding it directly to a page? Nice.

I wanted to add WebGL demos to my Wordpress site but WebGL is turning out to be the greatest waste of time in my life. One problem after the rest.

I wanted to ask how to embed into a Wordpress page but I guess iFrames are the best answer there is since I haven’t heard anything else yet :frowning:

Sorry for my tone but I have had nothing but trouble with WebGL since LITERALLY the very first time I clicked on it as a build platform and the problems has continued till this very second. Absolute, complete, total and utter waste of a build platform. Unity would be better off without a web platform at all rather than this. WebGl and Flash should share the same fate.

Uggghhh… let me just go… I don’t see any answers cmoing any time soon…

18

Actually I’m working on this as a contract programmer, being a web guy I’m certain iframes are not the only answer. I just am not at the point where I need to solve it yet. I’ll be sure to update this when I do.

EDIT: I looked at the files, this will be easy. I can’t confirm completely because I’m on the wrong computer right now. Though it seems people are running into issues when working with MVC platforms and not understanding what’s happening. A lot of these files will need to be placed into a publicly accessible directory and update the file paths referenced in the build. I’ll make a little walk-through for what generally needs to happen so people can take that and apply it to their framework of choice. Expect an update in a few days.

1 Like
19

What’s the problem with an iframe? Could you guys enlighten me? The cross-domain restriction?

20

There are plenty of reasons why an iframe is bad and even specific cases where it can be useful. Though generally the need to use an iframe these days is the result of bad design and they are used as a band-aid. Quick fixes to bigger issues are never a real solution and cause maintenance nightmares down the road.

Basically, it’s just a tool. One that was heavily abused in the early web days and left a bad taste in everyone’s mouth. I dare say there is always a far more elegant solution that would be better and easier to work with.

1 Like