klavdij Posted November 17, 2015 Share Posted November 17, 2015 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. 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). Quote Link to comment Share on other sites More sharing options...
Dad72 Posted November 17, 2015 Share Posted November 17, 2015 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> GameMonetize 1 Quote Link to comment Share on other sites More sharing options...
Vousk-prod. Posted November 18, 2015 Share Posted November 18, 2015 Also you should always call hand.js before babylon.js Quote Link to comment Share on other sites More sharing options...
Dad72 Posted November 18, 2015 Share Posted November 18, 2015 Effectively. can also be Oimo.js and cannon.js Quote Link to comment Share on other sites More sharing options...
klavdij Posted November 18, 2015 Author Share Posted November 18, 2015 Thank you for the anwsers, i figured it out Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.