Quantcast
Viewing all articles
Browse latest Browse all 388

WebGL not supported when trying to implement a game menu

Hello..So I am in the phase of finishing our project and have been working on UI before the start of the game. I have been playing with HTML, importing images and so on. My code and game works if i only have canvas on it, as soon as i add other HTML elements such as images or divs, it says that webGL is not supported.. Please help me.. its driving me crazy.  Image may be NSFW.
Clik here to view.
:wacko:
  Image may be NSFW.
Clik here to view.
:wacko:

Here is the HTML, that stops working : 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>CleanItUp!</title>
      <link rel="shortcut icon" href="./assets/ikona.ico" type="image/x-icon"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <style>
        html, body {
          overflow: hidden;
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
        }

        #renderCanvas {
          width: 100%;
          height: 100%;
          touch-action: none;
        }
        .image{
            width: 100%;
            height: 100%;
        }
        .menu{
            position: absolute;
            top: 30%;
            left: 15%;
        }
        .menu1{
            position: absolute;
            top: 50%;
            left: 15%;
        }
      </style>
      <script type="text/javascript" src="./scripts/Babylon/dist/babylon.2.2.max.js"></script>
      <script type="text/javascript" src="./scripts/handjs/bin/hand.1.3.8.js"></script>
      <script type="text/javascript" src="./scripts/Babylon/dist/Oimo.js"></script>
       <script type="text/javascript" src="./scripts/engine.js"></script>
   </head>

   <body>

        <img id="image" src="menuBackground.png">
        <div id ="gumbi">
            <img class="menu" src="playbutton.png" onclick="hideDivs(); createScene();">
            <br><br>
            <br><br>
            <img class="menu1" src="controlsbutton.png">
        </div>

   <canvas id="renderCanvas"></canvas>

   </body>

</html>

Heres my hideDivs code which only hides the divs and images i created, so the scene can be rendered on it :

function hideDivs(){
    var image = document.getElementById("image");
    image.style.visibility = 'hidden';
    var divImages = document.getElementById("gumbi");
    divImages.style.visibility = 'hidden';
}

I can also pastebin the main part of code (createScene, but it has around 700 lines and it works fine if i delete this part of the code).


Viewing all articles
Browse latest Browse all 388

Trending Articles