Jump to content

WebGL not supported when trying to implement a game menu


klavdij
 Share

Recommended Posts

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.  :wacko:  :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).

Link to comment
Share on other sites

Hi,

 

Try loading the engine and your application after the canvas:

 

   </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>   <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></body>
Or

<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>   </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>      <script type="text/javascript" src="./scripts/engine.js"></script></body>
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...