Loading and Unloading a WebGL player on a website

Unity Engine
1

I had a really nice jQuery solution for the old webplayer, where you’d click on a play button to load the webplayer and have an unload link to unload it and now I’m finally looking into updating everything to use WebGL.

Is there something out there that does this already? Preferably using jQuery?

2

Okay, wrote my own solution. Basically I’m just loading/unloading an iFrame with jQuery.

3

This is the barebones solution if anyone needs it:

<?php
  $row['demo_width'] = 800;
  $row['demo_height'] = 600;
  $row['demo_link'] = "circles.html";
?>
<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | circles</title>
    <script type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type='text/javascript'>//<![CDATA[

        function iFrameLoaded(id, src, width, height) {
            var deferred = $.Deferred(),
                iframe = $("<iframe scrolling=\"no\" seamless=\"seamless\"></iframe>").attr({
                    "id": id,
                    "src": src,
                    "width": width,
                    "height": height
                });

            iframe.load(deferred.resolve);
            iframe.appendTo("#unityPlayer");

            deferred.done(function() {
                console.log("iframe loaded: " + id);
                var iframe = document.getElementById("frame");
                var iframe_canvas = iframe.contentDocument || iframe.contentWindow.document;
                var canvas = iframe_canvas.getElementById("canvas");
                canvas.width = width;
                canvas.height = height;
                //alert("loaded " + canvas);
            });

            return deferred.promise();
        }

          function showDemo(options) {
          var settings = $.extend( {
                            width : 600,
                            height : 450,
                            file : "index.html",
                            params: {
                                backgroundcolor : "222222",
                                bordercolor: "222222",
                                textcolor: "FFFFFF",
                                logoimage: "GameAssetsLogo.png",
                                disableContextMenu: false
                            }
                        }, options);
            $("#unityPlayer").empty();
            $("#hideWebPlayer").show();
            $.when(iFrameLoaded( "frame", settings.file, settings.width, settings.height) ).then(function() {
                // console.log("All done loading iframe");
            });

          }

          function hideDemo() {
            $("#unityPlayer").html("<div class=\"notmissing\"><a href='javascript:showDemo({ width : <?php echo $row['demo_width']; ?>, height : <?php echo $row['demo_height']; ?>, file : \"demos/<?php echo $row['demo_link']; ?>\" });'>Show Demo</a></div>");
            startUp();
            $("#hideWebPlayer").css({'width': '<?php echo $row['demo_width']; ?>'});
          }

          function startUp() {
            $("#hideWebPlayer").hide();
          }
      
        $(document).ready(function(){ startUp(); });

        //]]>
</script>
  </head>
  <body class="template">

    <div id="unityPlayer">
      <div class="notmissing"><a href='javascript:showDemo({ width : <?php echo $row['demo_width']; ?>, height : <?php echo $row['demo_height']; ?>, file : "demos/<?php echo $row['demo_link']; ?>" });'>Show Demo</a></div>
    </div>

    <div id="hideWebPlayer"><a href="javascript:hideDemo();">Unload WebGL Player</a></div>
 

  </body>
</html>

Just make sure the WebGL HTML has no margin/padding, etc. and you should be good to go!