Display error screen if webgl2 is not available

Author: TBlueF

common/webapp/src/js/MapViewer.js

@@ -37,6 +37,7 @@ import {CombinedCamera} from "./util/CombinedCamera";
 import {CSS2DRenderer} from "./util/CSS2DRenderer";
 import {MarkerSet} from "./markers/MarkerSet";
 import {reactive} from "vue";
+import WebGL from "three/addons/capabilities/WebGL";
 
 export class MapViewer {
 
@@ -84,6 +85,7 @@ export class MapViewer {
 		this.stats.hide();
 
 		// renderer
+		if (!WebGL.isWebGL2Available()) throw "WebGL2 is not supported.";
 		this.renderer = new WebGLRenderer({
 			antialias: true,
 			sortObjects: true,

common/webapp/src/main.js

@@ -64,7 +64,7 @@ async function load() {
       <div>
         <img src="assets/logo.png" alt="bluemap logo">
         <div class="bm-app-err-main">Failed to load BlueMap webapp!</div>
-        <div class="bm-app-err-hint">Make sure you have <a href="https://get.webgl.org/">WebGL</a> enabled on your browser.</div>
+        <div class="bm-app-err-hint">Make sure you have <a href="https://get.webgl.org/webgl2/">WebGL2</a> enabled on your browser.</div>
       </div>
     </div>
   `;