Search Unity

Need some help embedding webgl build(s) in webpage.

Discussion in 'WebGL' started by garyhaus, Mar 9, 2015.

  1. garyhaus

    garyhaus

    Joined:
    Dec 16, 2006
    Posts:
    595
    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
     
  2. Doug-Wolanick

    Doug-Wolanick

    Joined:
    Mar 8, 2008
    Posts:
    404
    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. jrDev

    jrDev

    Joined:
    Nov 5, 2008
    Posts:
    1,621
    <iframe src="Source url (I'm using dropbox)" style="border:0px #000000 none;" name="Game name" scrolling="no" frameborder="1" marginheight="px" marginwidth="320px" height="320px" width="480px"></iframe>

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

    Any insight would be great.

    Thanks,
    jrDev
     
  4. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    317
    Does your game work fine when launched directly from the dropbox url? Are you using Unity 5.3?
     
  5. jrDev

    jrDev

    Joined:
    Nov 5, 2008
    Posts:
    1,621
    Yes, here test this Demo.

    Thanks,
    jrDev
     
  6. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    317
    Interestingly, I have used your exact line

    <iframe src="https://dl.dropboxusercontent.com/u/4585058/GAC/Demo/GAC3DDemo/index.html" style="border:0px #000000 none;" name="Game name" scrolling="no" frameborder="1" marginheight="px" marginwidth="320px" height="320px" width="480px"></iframe>

    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. jrDev

    jrDev

    Joined:
    Nov 5, 2008
    Posts:
    1,621
    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. jrDev

    jrDev

    Joined:
    Nov 5, 2008
    Posts:
    1,621
    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. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    317
    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. jrDev

    jrDev

    Joined:
    Nov 5, 2008
    Posts:
    1,621
    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. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    317
    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:
    Screen Shot 2016-01-27 at 21.10.47.png
     
  12. jrDev

    jrDev

    Joined:
    Nov 5, 2008
    Posts:
    1,621
    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. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    317
    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. Marrt

    Marrt

    Joined:
    Feb 7, 2012
    Posts:
    520
    My code had some problems, comment removed for now
     
    Last edited: Aug 27, 2016
  15. Mudder

    Mudder

    Joined:
    Sep 27, 2015
    Posts:
    3
    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. Marrt

    Marrt

    Joined:
    Feb 7, 2012
    Posts:
    520
    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. MrDude

    MrDude

    Joined:
    Sep 21, 2006
    Posts:
    2,569
    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 :(

    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. Mudder

    Mudder

    Joined:
    Sep 27, 2015
    Posts:
    3
    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.
     
    Last edited: Sep 8, 2016
    MrDude likes this.
  19. Marrt

    Marrt

    Joined:
    Feb 7, 2012
    Posts:
    520
    What's the problem with an iframe? Could you guys enlighten me? The cross-domain restriction?
     
    Last edited: Sep 8, 2016
  20. Mudder

    Mudder

    Joined:
    Sep 27, 2015
    Posts:
    3
    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.
     
    MrDude likes this.
  21. MrDude

    MrDude

    Joined:
    Sep 21, 2006
    Posts:
    2,569
    Well said. I would have taken at least 5 times as long to articulate the same sentiment.

    I read once that using tables nowadays is also a sign of bad coding. It's just used for layouts and that is what CSS is for.

    I would add that an iFrame is similar to a goto statement in other languages. It exists but using it is a sign that you suck at doing things right and just looked for the first shortcut you could find.

    My main gripe is the fact that I want to have a page I can maintain in Wordpress. I don't want to open the editor in Wordpress and see: "The file is located here. Download via FTP, fix and upload right back again" and that is exactly what an iframe does.
     
  22. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    317
    Iframes should indeed be used wisely in special cases, for example:
    - when you expect the text content inside the embedded iframe to be scanned and cached by a search engine, so that the link from the search results would point you to the main page to maintain its proper rating, and not to the iframe which might not even work correctly without the parent page (and WebGL does not have any text that needs to be scanned)
    - when the content of the iframe is hosted on another domain, as it might cause complications if the user disables 3rd party cookies or iframe needs indexedDB access
    - the end user is using a really really outdated browser which does not handle iframes properly (it will not handle html5 as well then)
    So, as you can see, none of this applies to the case of embedded WebGL content (assuming that it is hosted on the same domain), therefore you can use iframes freely, it works well.

    One of the most commonly embedded content nowadays, YouTube videos, now have the only recommended way of embedding, as stated on the development page, and it is via iframe, while all other embedding options for YouTube videos have been marked as deprecated in 2015. This alone makes iframes the most common way of embedding content today (not to mention iframes on Facebook etc.)
     
    Last edited: Sep 13, 2016
    MrDude and Marrt like this.
  23. MrDude

    MrDude

    Joined:
    Sep 21, 2006
    Posts:
    2,569
    Wow, seriously? iFrames are making a comeback? :p lol I used to love using iFrames till I was told AJAX or bust. :p Right now the only reason I don't want to use an iFrame for my content is because I use a CMS and the content of the iFrames are NOT editable via the CMS. Will probably have to roll out some form of custom solution for that... or use FTP.

    I used to use it with my Webplayer builds and hated it :( It worked at least, but I hated it :(

    I did not know they were making a comeback, though.
     
  24. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    317
    Yes, iframes are widely used and are great for embedding "isolated" content like videos and games. However, you should use it wisely when you try to embed some html content. Not only because of the mentioned search engine issue, but also because the user will not have any way to reference the content displayed inside the iframe (for example, if you implement a photo album viewer inside an iframe, the user will not be able to obtain the link to the page which contains a specific photo, because it will not be reflected in the main document url).

    Even though the concept of a url link to a specific content state makes some sense for video players, the user would for example still use the internal YouTube menu to obtain a link to the video at specific timestamp, and would not expect the document url to reflect the timestamp.

    And for the most games the concept of a url link to a specific game state does not make any sense at all (as well as backward/forward browser navigation). Therefore in case of games iframe should function according to the user expectations.

    And yet iframes are not ideal and currently have some minor limitations. For example, it seems that you can not reliably move an iframe within the DOM tree without reloading it, which might potentially cause some trouble for some dynamically changed pages. Even though such setup is not common, this would not be a problem at all if you had just a canvas.
     
    Last edited: Sep 13, 2016
  25. Banksy

    Banksy

    Joined:
    Mar 31, 2013
    Posts:
    309
    wow loads of talk about iframes.. but no remedy regarding embedding WEB GL content created from a Unity 5 Build
     
  26. MrDude

    MrDude

    Joined:
    Sep 21, 2006
    Posts:
    2,569
    Allow me to remedy that then, @Banksy

    After much struggling with getting the WebGL build to just WORK (i do database accessing stuff and security issues cause problems with WebGL. Pain in the ass. Won't go into it here), I managed to load it into a page on my wordpress site by using ..wait for it... an iFrame :)

    Build it in Unity, upload everything as is to a folder on your website, create a page, add in an iFrame, tell it to load the index.html you just uploaded and there you have it.
     
  27. roundham

    roundham

    Joined:
    Oct 28, 2014
    Posts:
    44
    I tried using the iframe as described above but all that does is download the index.html file(which is hosted in dropbox) when I load my webpage.
     
  28. LittleRainGames

    LittleRainGames

    Joined:
    Apr 7, 2016
    Posts:
    97
    Are you kidding guys. There is web developers in here and they aren't telling you how to do this? I guess they are too busy to take a good look.

    Luckily in the last couple weeks I've been doing nothing but HTML and CSS, cause my website built with concrete5 broke and didn't want to go back to a PHP website builder. Before this I didn't know how to write 1 line of HTML.

    Ok so here is what you do.

    Step 1
    In your web GL's index.html file, you will see <head> and lower down a </head>.
    Copy everything in there, and open up the index.html for the webpage you want your game to be in.
    Locate the <head> </head> again, and paste all your code above the </head>.

    Step 2

    If you are using something like concrete5, wordpress, etc, create a custom HTML block.

    Again in your web GL's index.html, copy everything in between the <body> </body> and paste it in the HTML block.

    Before you try it out, because it will work, but it will overlap anything below it, so you need to add a this above it all.

    <div style="height:650px, width:100%; margin:auto;">

    You want the height to be 50 pixels more then your game window, which will see in the code you pasted.

    And close it with a </div>

    Now in the code you pasted you will see <div class="footer"> with a closing </div>, copy that as well as everything in it, and post it before the closing div that starts like this <div id="gameContainer".....

    Should now look like this.

    <div id="gameContainer" style="width: 960px; height: 600px">
    <div class="footer">
    <div class="webgl-logo"></div>
    <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
    <div class="title">Bound</div>
    </div>
    </div>

    On that game container line you need to add a margin:auto;

    Ok now you need to go and open style.css which is in the TemplateData folder, straight up delete every bit of text like this.
    position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);

    You are done! You may want to change the width from 100% depending on how big the container your custom html block is actually sitting in.

    I do want to say when I loaded the page my browser gave me an error, something to do with a js file, but the game loaded fine. Will post back later when I figure that out.

    Enjoy!


    Edit: I just noticed that I'm still getting overlapping issues in some situations, it has to do with the css class webgl-content. The position is set to absolute with some other stuff, I'll do some tweaking and get back to you guys shortly.

    Edit2: So I figured out what I need to do to fix it, was in the middle of writing it up but then I realized the UnityLoader actually changes the HTML causing the changes I did in windows edge to not exist. The UnityLoader.js is literally 4 lines of code that are thousands of characters long, so tomorrow I will try to write a program that makes it somewhat readable so I can go figure out how edit the HTML created when it loads. Good Night!
     
    Last edited: Nov 30, 2017
    codebeans likes this.
  29. codebeans

    codebeans

    Joined:
    Apr 7, 2014
    Posts:
    79
    Based what @LittleRainGames mentioned you have to tweak the the css a bit. You can find the ccs in TemplateData/styles.css

    Edit line 2 as follows
    .webgl-content {position: relative; top: 0%; left: 25%; }

    position: relative - Will align the WebGL content with your website relative to the other tags of your html file
    top: 0% - We don't want any vertical offset, tweak this as you like, you may need to add webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); and adjust accordingly
    left: 25% - The WebGL content has a width of 50%, 25% offset from left will align it to the center

    The rest you have to do to embed your WebGL export is pretty much straight forward. Change the id and title as you like

    <div class="webgl-content" id="mySpecialId">
    <div id="gameContainer" style="width: 960px; height: 600px;margin:auto;"></div>
    <div class="footer">
    <div class="webgl-logo"></div>
    <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
    <div class="title">My WebGL stuff</div>
    </div>
    </div>


    add these scripts to the bottom of your page

    <script src="TemplateData/UnityProgress.js"></script>
    <script src="Build/UnityLoader.js"></script>
    <script>
    var gameInstance = UnityLoader.instantiate("gameContainer", "Build/webgl.json", {onProgress: UnityProgress});
    </script>

    add these scripts to the head of your page

    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">

    Make sure that both the TemplateData/ and Build/ folder are in the same folder you have your index.html file in, or change the path in the script and link Tags
     
  30. MrDude

    MrDude

    Joined:
    Sep 21, 2006
    Posts:
    2,569
    ...or use an iFrame. Fare less work...
    <iframe src="mygame/index.html" style="width:750px; height:500px">

    Can't see why you would want to go through all the above fuss when you don't absolutely have to. The example above of an iframe downloading an html page... that is some sort of miracle that is. When embracing iframes you can get quite creative... whereas NOT using iFrames looks to be quite tedious...

    I currently have one page on which I have 5 buttons that each link to a different game and clicking on it loads a different WebGL game into the location I created for the demo.

    http://mybadstudios.com/source-code/the-dialogue-engine/ in case you want to see it in action:

    MyScripting:
    Code (csharp):
    1. <script language="JavaScript">
    2. function ChangeFrameContent(which)
    3. {
    4. var gamename = (which < 4) ? "UDEA"+which : "MudDemo";
    5. document.getElementById('webgl_content_area').innerHTML =
    6. '<iframe src="/BUILDS/wuss_index.php?game='+gamename+'&#038;h=580&#038;autoload=true" style="width:860px; height: 680px"></iframe>';
    7. }
    8. </script>
    My links:
    Code (csharp):
    1. <div id="navmenu">
    2. <ul>
    3. <li><a href="JavaScript:ChangeFrameContent(0);">Visual Novel</a></li>
    4. <li><a href="JavaScript:ChangeFrameContent(1);">RPG Classic</a></li>
    5. <li><a href="JavaScript:ChangeFrameContent(2);">RPG Alt</a></li>
    6. <li><a href="JavaScript:ChangeFrameContent(3);">Point n Click</a></li>
    7. <li><a href="JavaScript:ChangeFrameContent(4);">Text Based</a></li>
    8. </ul>
    9. <hr>
    10. </div>
    11.  
    My iframe area:
    Code (csharp):
    1. <div id="webgl_content_area">
    2. <iframe src="http://mybadstudios.com/BUILDS/wuss_index.php?game=&amp;h=680px" style="width:860px; height:680px"></iframe>"
    3. </div>
    Now mind you, my use case is very specific because I wanted to create a WordPress shortcode system so the above is not a "How you should do itt" example but rather a "This is how useful iframes can be" example.

    For example, this URL: http://mybadstudios.com/source-code/the-dialogue-engine/rpg-classic-demo/
    The source for that page is only this:
    Code (csharp):
    1. [wuss_webgl_player game=UDEA1 width=860 height=680]<br>
    2. One of the prefabs included in <a href="http://mybadstudios.com/source-code/the-dialogue-engine/">THE Dialogue Engine</a>
    The wuss_webgl_player shortcode is replaced with an iframe. Job done.
     
  31. LittleRainGames

    LittleRainGames

    Joined:
    Apr 7, 2016
    Posts:
    97
    I made a full tutorial with pictures here. The links to the files aren't up yet though.
    Ya I did end up editing the styles.css, but there is still one problem and that's the <div id="gameContainer actually gets recreated when it starts to load, and the UnityLoader.js edits its styles, undoing the work in styles.css.

    I usually have a really hard time getting the iframe's to fit the pages style and in the right spot. Then there's an issue with the full screen button being out of sight as well, and the whole thing not being responsive for smaller screens.

    If you look on your page if you shrink your browser to the size of a ipad it starts to trail off the side of page, but yes I admit it looks good on desktop, I had a harder time with the iframe.

    Loading different games is pretty slick though!

    This way really doesn't take too long, once I figured it out it only takes about 5 minutes, and now that I have the edited css files, and the new ones I made it will be even less time. The tutorial looks a little daunting, but its really not that bad.

    Here's my result The game has to be full screen for the UI to be proper, made the game for ludum dare and just didn't have enough time to fix it. If you open it on the regular build its like that too.
     
    Last edited: Dec 1, 2017
    MrDude likes this.
  32. MrDude

    MrDude

    Joined:
    Sep 21, 2006
    Posts:
    2,569
    Granted, when I specifically say "Show me the game at 860x680" it is not going to scale down for smaller devices. If you have your game's size automatically adjusting to be responsive then kudos to you :)
    perhaps that is something I should consider adding to my code. Hmmm...
     
  33. Marrt

    Marrt

    Joined:
    Feb 7, 2012
    Posts:
    520
    Doesn't work for me, i use Vivaldi, here is what i get
    upload_2017-11-30_12-0-15.png

    If it is any help:
    I still use the same stuff that i used a year ago. I get some errors too, but it still works everywhere afaik (minus IE), http://marrtgames.com/?page=6 (don't try my other builds, they are still broken, mostly, i never have time for that)

    It is just a single index.html and a single master.html that manage loading and unloading the playerfiles. But don't ask me how i did it, it was so long ago i can't remember a single line i wrote or copied
    http://marrtgames.com/index.html
    http://marrtgames.com/master.html
     
  34. LittleRainGames

    LittleRainGames

    Joined:
    Apr 7, 2016
    Posts:
    97
    Hmm that's weird Marrt. I like I said in the first post I made I do get an error, its the one at the top of your list there, Cannot Read Property Defaults. But all I did was click Ok and it doesn't seem to actually affect anything.

    What is Vavaldi?

    I really like what you've done though, that's really sick! Was that with Unity Web Player or the Web GL?