From 2f3acabf863a513838bd998a9673d6a8f82d4dad Mon Sep 17 00:00:00 2001
From: Sean Boult <996134+Hacksore@users.noreply.github.com>
Date: Sun, 3 Sep 2023 11:43:13 -0500
Subject: [PATCH] Detect if has GPU acceleration

---
 examples/index.html | 486 +++++++++++++++++++++++++++++++-------------
 package.json        |   1 +
 src/utils.ts        |  12 ++
 src/viewer.ts       |  14 ++
 4 files changed, 368 insertions(+), 145 deletions(-)
 create mode 100644 src/utils.ts
diff --git a/examples/index.html b/examples/index.html
index 5619843..b39d585 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -1,15 +1,33 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 
 <head>
-	<meta charset="utf-8">
-	<meta http-equiv="x-ua-compatible" content="ie=edge">
-	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+	<meta charset="utf-8" />
+	<meta http-equiv="x-ua-compatible" content="ie=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 	<title>skinview3d</title>
 	<style>
+		/* make the background dark or light depending on system theme  */
+		@media (prefers-color-scheme: dark) {
+			body {
+				background-color: #222;
+				color: #eee;
+			}
+
+			input,
+			select {
+				background: #333 !important;
+				color: #eee !important;
+			}
+
+			a {
+				color: lightblue;
+			}
+		}
+
 		@font-face {
-			font-family: 'Minecraft';
-			src: url('font/minecraft.woff2') format('woff2');
+			font-family: "Minecraft";
+			src: url("font/minecraft.woff2") format("woff2");
 		}
 
 		body {
@@ -34,11 +52,16 @@
 			box-sizing: border-box;
 		}
 
+		button {
+			background: #282828;
+			color: #fff;
+		}
+
 		.control {
 			display: inline;
 		}
 
-		.control + .control {
+		.control+.control {
 			margin-left: 10px;
 		}
 
@@ -108,22 +131,23 @@
 </head>
 
 <body>
-
 	<canvas id="skin_container"></canvas>
 
 	<div class="controls">
-
 		<button id="reset_all" type="button" class="control">Reset All</button>
 
 		<div class="control-section">
 			<h1>Viewport</h1>
 			<div>
-				<label class="control">Width: <input id="canvas_width" type="number" value="300" size="4"></label>
-				<label class="control">Height: <input id="canvas_height" type="number" value="300" size="4"></label>
+				<label class="control">Width: <input id="canvas_width" type="number" value="300" size="4" /></label>
+				<label class="control">Height:
+					<input id="canvas_height" type="number" value="300" size="4" /></label>
 			</div>
 			<div>
-				<label class="control">FOV: <input id="fov" type="number" value="70" step="1" min="1" max="179" size="2"></label>
-				<label class="control">Zoom: <input id="zoom" type="number" value="0.90" step="0.01" min="0.01" max="2.00" size="4"></label>
+				<label class="control">FOV:
+					<input id="fov" type="number" value="70" step="1" min="1" max="179" size="2" /></label>
+				<label class="control">Zoom:
+					<input id="zoom" type="number" value="0.90" step="0.01" min="0.01" max="2.00" size="4" /></label>
 			</div>
 		</div>
 
@@ -135,29 +159,40 @@ <h1>Light</h1>
 
 		<div class="control-section">
 			<h1>Rotation</h1>
-			<label class="control"><input id="auto_rotate" type="checkbox"> Enable</label>
-			<label class="control">Speed: <input id="auto_rotate_speed" type="number" value="2" step="0.1" size="3"></label>
+			<label class="control"><input id="auto_rotate" type="checkbox" /> Enable</label>
+			<label class="control">Speed:
+				<input id="auto_rotate_speed" type="number" value="2" step="0.1" size="3" /></label>
 		</div>
 
 		<div class="control-section">
 			<h1>Animation</h1>
 			<div>
-				<label><input type="radio" id="animation_none" name="animation" value="" checked> None</label>
-				<label><input type="radio" id="animation_idle" name="animation" value="idle"> Idle</label>
-				<label><input type="radio" id="animation_walk" name="animation" value="walk"> Walk</label>
-				<label><input type="radio" id="animation_run" name="animation" value="run"> Run</label>
-				<label><input type="radio" id="animation_fly" name="animation" value="fly"> Fly</label>
+				<label><input type="radio" id="animation_none" name="animation" value="" checked />
+					None</label>
+				<label><input type="radio" id="animation_idle" name="animation" value="idle" />
+					Idle</label>
+				<label><input type="radio" id="animation_walk" name="animation" value="walk" />
+					Walk</label>
+				<label><input type="radio" id="animation_run" name="animation" value="run" />
+					Run</label>
+				<label><input type="radio" id="animation_fly" name="animation" value="fly" />
+					Fly</label>
 			</div>
-			<label class="control">Speed: <input id="animation_speed" type="number" value="1" step="0.1" size="3"></label>
-			<button id="animation_pause_resume" type="button" class="control">Pause / Resume</button>
+			<label class="control">Speed:
+				<input id="animation_speed" type="number" value="1" step="0.1" size="3" /></label>
+			<button id="animation_pause_resume" type="button" class="control">
+				Pause / Resume
+			</button>
 		</div>
 
 		<div class="control-section">
 			<h1>Mouse Control</h1>
 			<div class="control">
-				<label><input type="checkbox" id="control_rotate" checked> Enable Rotate</label>
-				<label><input type="checkbox" id="control_zoom" checked> Enable Zoom</label>
-				<label><input type="checkbox" id="control_pan"> Enable Pan</label>
+				<label><input type="checkbox" id="control_rotate" checked /> Enable
+					Rotate</label>
+				<label><input type="checkbox" id="control_zoom" checked /> Enable
+					Zoom</label>
+				<label><input type="checkbox" id="control_pan" /> Enable Pan</label>
 			</div>
 		</div>
 
@@ -178,29 +213,55 @@ <h1>Skin Layers</h1>
 				<tbody>
 					<tr>
 						<th>inner</th>
-						<td><input type="checkbox" data-layer="innerLayer" data-part="head" checked></td>
-						<td><input type="checkbox" data-layer="innerLayer" data-part="body" checked></td>
-						<td><input type="checkbox" data-layer="innerLayer" data-part="rightArm" checked></td>
-						<td><input type="checkbox" data-layer="innerLayer" data-part="leftArm" checked></td>
-						<td><input type="checkbox" data-layer="innerLayer" data-part="rightLeg" checked></td>
-						<td><input type="checkbox" data-layer="innerLayer" data-part="leftLeg" checked></td>
+						<td>
+							<input type="checkbox" data-layer="innerLayer" data-part="head" checked />
+						</td>
+						<td>
+							<input type="checkbox" data-layer="innerLayer" data-part="body" checked />
+						</td>
+						<td>
+							<input type="checkbox" data-layer="innerLayer" data-part="rightArm" checked />
+						</td>
+						<td>
+							<input type="checkbox" data-layer="innerLayer" data-part="leftArm" checked />
+						</td>
+						<td>
+							<input type="checkbox" data-layer="innerLayer" data-part="rightLeg" checked />
+						</td>
+						<td>
+							<input type="checkbox" data-layer="innerLayer" data-part="leftLeg" checked />
+						</td>
 					</tr>
 					<tr>
 						<th>outer</th>
-						<td><input type="checkbox" data-layer="outerLayer" data-part="head" checked></td>
-						<td><input type="checkbox" data-layer="outerLayer" data-part="body" checked></td>
-						<td><input type="checkbox" data-layer="outerLayer" data-part="rightArm" checked></td>
-						<td><input type="checkbox" data-layer="outerLayer" data-part="leftArm" checked></td>
-						<td><input type="checkbox" data-layer="outerLayer" data-part="rightLeg" checked></td>
-						<td><input type="checkbox" data-layer="outerLayer" data-part="leftLeg" checked></td>
+						<td>
+							<input type="checkbox" data-layer="outerLayer" data-part="head" checked />
+						</td>
+						<td>
+							<input type="checkbox" data-layer="outerLayer" data-part="body" checked />
+						</td>
+						<td>
+							<input type="checkbox" data-layer="outerLayer" data-part="rightArm" checked />
+						</td>
+						<td>
+							<input type="checkbox" data-layer="outerLayer" data-part="leftArm" checked />
+						</td>
+						<td>
+							<input type="checkbox" data-layer="outerLayer" data-part="rightLeg" checked />
+						</td>
+						<td>
+							<input type="checkbox" data-layer="outerLayer" data-part="leftLeg" checked />
+						</td>
 					</tr>
 				</tbody>
 			</table>
 			<div>
 				<h2>Back Equipment</h2>
 				<div class="control">
-					<label><input type="radio" id="back_equipment_cape" name="back_equipment" value="cape" checked> Cape</label>
-					<label><input type="radio" id="back_equipment_elytra" name="back_equipment" value="elytra"> Elytra</label>
+					<label><input type="radio" id="back_equipment_cape" name="back_equipment" value="cape" checked />
+						Cape</label>
+					<label><input type="radio" id="back_equipment_elytra" name="back_equipment" value="elytra" />
+						Elytra</label>
 				</div>
 			</div>
 		</div>
@@ -209,20 +270,25 @@ <h2>Back Equipment</h2>
 			<h1>Skin</h1>
 			<div>
 				<div class="control">
-					<label>URL: <input id="skin_url" type="text" value="img/hatsune_miku.png" placeholder="none" list="default_skins" size="20"></label>
+					<label>URL:
+						<input id="skin_url" type="text" value="img/hatsune_miku.png" placeholder="none" list="default_skins"
+							size="20" /></label>
 					<datalist id="default_skins">
-						<option value="img/1_8_texturemap_redux.png">
-						<option value="img/hacksore.png">
-						<option value="img/haka.png">
-						<option value="img/hatsune_miku.png">
-						<option value="img/ironman_hd.png">
-						<option value="img/sethbling.png">
-						<option value="img/deadmau5.png">
+						<option value="img/1_8_texturemap_redux.png"></option>
+						<option value="img/hacksore.png"></option>
+						<option value="img/haka.png"></option>
+						<option value="img/hatsune_miku.png"></option>
+						<option value="img/ironman_hd.png"></option>
+						<option value="img/sethbling.png"></option>
+						<option value="img/deadmau5.png"></option>
 					</datalist>
-					<input id="skin_url_upload" type="file" class="hidden" accept="image/*">
-					<button id="skin_url_unset" type="button" class="control hidden">Unset</button>
-					<button type="button" class="control"
-						onclick="document.getElementById('skin_url_upload').click();">Browse...</button>
+					<input id="skin_url_upload" type="file" class="hidden" accept="image/*" />
+					<button id="skin_url_unset" type="button" class="control hidden">
+						Unset
+					</button>
+					<button type="button" class="control" onclick="document.getElementById('skin_url_upload').click();">
+						Browse...
+					</button>
 				</div>
 			</div>
 			<div>
@@ -239,17 +305,22 @@ <h1>Skin</h1>
 		<div class="control-section">
 			<h1>Cape</h1>
 			<div class="control">
-				<label>URL: <input id="cape_url" type="text" value="img/mojang_cape.png" placeholder="none" list="default_capes" size="20"></label>
+				<label>URL:
+					<input id="cape_url" type="text" value="img/mojang_cape.png" placeholder="none" list="default_capes"
+						size="20" /></label>
 				<datalist id="default_capes">
-					<option value="">
-					<option value="img/mojang_cape.png">
-					<option value="img/legacy_cape.png">
-					<option value="img/hd_cape.png">
+					<option value=""></option>
+					<option value="img/mojang_cape.png"></option>
+					<option value="img/legacy_cape.png"></option>
+					<option value="img/hd_cape.png"></option>
 				</datalist>
-				<input id="cape_url_upload" type="file" class="hidden" accept="image/*">
-				<button id="cape_url_unset" type="button" class="control hidden">Unset</button>
-				<button type="button" class="control"
-					onclick="document.getElementById('cape_url_upload').click();">Browse...</button>
+				<input id="cape_url_upload" type="file" class="hidden" accept="image/*" />
+				<button id="cape_url_unset" type="button" class="control hidden">
+					Unset
+				</button>
+				<button type="button" class="control" onclick="document.getElementById('cape_url_upload').click();">
+					Browse...
+				</button>
 			</div>
 		</div>
 
@@ -266,38 +337,48 @@ <h1>Ears</h1>
 				</label>
 			</div>
 			<div id="ears_texture_input">
-				<label class="control">URL: <input id="ears_url" type="text" value="" placeholder="none" list="default_ears" size="20"></label>
+				<label class="control">URL:
+					<input id="ears_url" type="text" value="" placeholder="none" list="default_ears" size="20" /></label>
 				<datalist id="default_ears">
-					<option value="">
-					<option value="img/ears.png" data-texture-type="standalone">
-					<option value="img/deadmau5.png" data-texture-type="skin">
+					<option value=""></option>
+					<option value="img/ears.png" data-texture-type="standalone"></option>
+					<option value="img/deadmau5.png" data-texture-type="skin"></option>
 				</datalist>
-				<input id="ears_url_upload" type="file" class="hidden" accept="image/*">
-				<button id="ears_url_unset" type="button" class="control hidden">Unset</button>
-				<button type="button" class="control"
-					onclick="document.getElementById('ears_url_upload').click();">Browse...</button>
+				<input id="ears_url_upload" type="file" class="hidden" accept="image/*" />
+				<button id="ears_url_unset" type="button" class="control hidden">
+					Unset
+				</button>
+				<button type="button" class="control" onclick="document.getElementById('ears_url_upload').click();">
+					Browse...
+				</button>
 			</div>
 		</div>
 
 		<div class="control-section">
 			<h1>Panorama</h1>
 			<div class="control">
-				<label>URL: <input id="panorama_url" type="text" value="img/panorama.png" placeholder="none" list="default_panorama" size="20"></label>
+				<label>URL:
+					<input id="panorama_url" type="text" value="img/panorama.png" placeholder="none" list="default_panorama"
+						size="20" /></label>
 				<datalist id="default_panorama">
-					<option value="">
-					<option value="img/panorama.png">
+					<option value=""></option>
+					<option value="img/panorama.png"></option>
 				</datalist>
-				<input id="panorama_url_upload" type="file" class="hidden" accept="image/*">
-				<button id="panorama_url_unset" type="button" class="control hidden">Unset</button>
-				<button type="button" class="control"
-					onclick="document.getElementById('panorama_url_upload').click();">Browse...</button>
+				<input id="panorama_url_upload" type="file" class="hidden" accept="image/*" />
+				<button id="panorama_url_unset" type="button" class="control hidden">
+					Unset
+				</button>
+				<button type="button" class="control" onclick="document.getElementById('panorama_url_upload').click();">
+					Browse...
+				</button>
 			</div>
 		</div>
 
 		<div class="control-section">
 			<h1>Name Tag</h1>
 			<div class="control">
-				<label>Text: <input id="nametag_text" type="text" value="" placeholder="none" size="20"></label>
+				<label>Text:
+					<input id="nametag_text" type="text" value="" placeholder="none" size="20" /></label>
 			</div>
 		</div>
 
@@ -307,12 +388,12 @@ <h1>Other examples</h1>
 				<li><a href="offscreen-render.html">offscreen-render</a></li>
 			</ul>
 		</div>
-
 	</div>
 
 	<footer>
 		<div>
-			GitHub: <a href="https://github.com/bs-community/skinview3d">bs-community/skinview3d</a>
+			GitHub:
+			<a href="https://github.com/bs-community/skinview3d">bs-community/skinview3d</a>
 		</div>
 		<!--%%deploy_only%%
 			<div>
@@ -325,13 +406,20 @@ <h1>Other examples</h1>
 
 	<script src="../bundles/skinview3d.bundle.js"></script>
 	<script>
-		const skinParts = ["head", "body", "rightArm", "leftArm", "rightLeg", "leftLeg"];
+		const skinParts = [
+			"head",
+			"body",
+			"rightArm",
+			"leftArm",
+			"rightLeg",
+			"leftLeg",
+		];
 		const skinLayers = ["innerLayer", "outerLayer"];
 		const availableAnimations = {
 			idle: new skinview3d.IdleAnimation(),
 			walk: new skinview3d.WalkingAnimation(),
 			run: new skinview3d.RunningAnimation(),
-			fly: new skinview3d.FlyingAnimation()
+			fly: new skinview3d.FlyingAnimation(),
 		};
 
 		let skinViewer;
@@ -361,12 +449,14 @@ <h1>Other examples</h1>
 				skinViewer.loadSkin(null);
 				input.setCustomValidity("");
 			} else {
-				skinViewer.loadSkin(url, {
-					model: document.getElementById("skin_model").value,
-					ears: document.getElementById("ears_source").value === "current_skin"
-				})
+				skinViewer
+					.loadSkin(url, {
+						model: document.getElementById("skin_model").value,
+						ears:
+							document.getElementById("ears_source").value === "current_skin",
+					})
 					.then(() => input.setCustomValidity(""))
-					.catch(e => {
+					.catch((e) => {
 						input.setCustomValidity("Image can't be loaded.");
 						console.error(e);
 					});
@@ -380,10 +470,13 @@ <h1>Other examples</h1>
 				skinViewer.loadCape(null);
 				input.setCustomValidity("");
 			} else {
-				const selectedBackEquipment = document.querySelector('input[type="radio"][name="back_equipment"]:checked');
-				skinViewer.loadCape(url, { backEquipment: selectedBackEquipment.value })
+				const selectedBackEquipment = document.querySelector(
+					'input[type="radio"][name="back_equipment"]:checked',
+				);
+				skinViewer
+					.loadCape(url, {backEquipment: selectedBackEquipment.value})
 					.then(() => input.setCustomValidity(""))
-					.catch(e => {
+					.catch((e) => {
 						input.setCustomValidity("Image can't be loaded.");
 						console.error(e);
 					});
@@ -396,14 +489,16 @@ <h1>Other examples</h1>
 			if (sourceType === "none") {
 				skinViewer.loadEars(null);
 			} else if (sourceType === "current_skin") {
-				if (!skipSkinReload){
+				if (!skipSkinReload) {
 					reloadSkin();
 				}
 			} else {
 				hideInput = false;
-				document.querySelectorAll("#default_ears option[data-texture-type]").forEach(opt => {
-					opt.disabled = opt.dataset.textureType !== sourceType;
-				});
+				document
+					.querySelectorAll("#default_ears option[data-texture-type]")
+					.forEach((opt) => {
+						opt.disabled = opt.dataset.textureType !== sourceType;
+					});
 
 				const input = document.getElementById("ears_url");
 				const url = obtainTextureUrl("ears_url");
@@ -411,9 +506,10 @@ <h1>Other examples</h1>
 					skinViewer.loadEars(null);
 					input.setCustomValidity("");
 				} else {
-					skinViewer.loadEars(url, { textureType: sourceType })
+					skinViewer
+						.loadEars(url, {textureType: sourceType})
 						.then(() => input.setCustomValidity(""))
-						.catch(e => {
+						.catch((e) => {
 							input.setCustomValidity("Image can't be loaded.");
 							console.error(e);
 						});
@@ -422,7 +518,7 @@ <h1>Other examples</h1>
 
 			const el = document.getElementById("ears_texture_input");
 			if (hideInput) {
-				if (!(el.classList.contains("hidden"))){
+				if (!el.classList.contains("hidden")) {
 					el.classList.add("hidden");
 				}
 			} else {
@@ -437,9 +533,10 @@ <h1>Other examples</h1>
 				skinViewer.background = null;
 				input.setCustomValidity("");
 			} else {
-				skinViewer.loadPanorama(url)
+				skinViewer
+					.loadPanorama(url)
 					.then(() => input.setCustomValidity(""))
-					.catch(e => {
+					.catch((e) => {
 						input.setCustomValidity("Image can't be loaded.");
 						console.error(e);
 					});
@@ -456,37 +553,107 @@ <h1>Other examples</h1>
 		}
 
 		function initializeControls() {
-			document.getElementById("canvas_width").addEventListener("change", e => skinViewer.width = e.target.value);
-			document.getElementById("canvas_height").addEventListener("change", e => skinViewer.height = e.target.value);
-			document.getElementById("fov").addEventListener("change", e => skinViewer.fov = e.target.value);
-			document.getElementById("zoom").addEventListener("change", e => skinViewer.zoom = e.target.value);
-			document.getElementById("global_light").addEventListener("change", e => skinViewer.globalLight.intensity = e.target.value);
-			document.getElementById("camera_light").addEventListener("change", e => skinViewer.cameraLight.intensity = e.target.value);
-			document.getElementById("animation_pause_resume").addEventListener("click", () => skinViewer.animation.paused = !skinViewer.animation.paused);
-			document.getElementById("auto_rotate").addEventListener("change", e => skinViewer.autoRotate = e.target.checked);
-			document.getElementById("auto_rotate_speed").addEventListener("change", e => skinViewer.autoRotateSpeed = e.target.value);
-			for (const el of document.querySelectorAll('input[type="radio"][name="animation"]')) {
-				el.addEventListener("change", e => {
+			document
+				.getElementById("canvas_width")
+				.addEventListener(
+					"change",
+					(e) => (skinViewer.width = e.target.value),
+				);
+			document
+				.getElementById("canvas_height")
+				.addEventListener(
+					"change",
+					(e) => (skinViewer.height = e.target.value),
+				);
+			document
+				.getElementById("fov")
+				.addEventListener("change", (e) => (skinViewer.fov = e.target.value));
+			document
+				.getElementById("zoom")
+				.addEventListener(
+					"change",
+					(e) => (skinViewer.zoom = e.target.value),
+				);
+			document
+				.getElementById("global_light")
+				.addEventListener(
+					"change",
+					(e) => (skinViewer.globalLight.intensity = e.target.value),
+				);
+			document
+				.getElementById("camera_light")
+				.addEventListener(
+					"change",
+					(e) => (skinViewer.cameraLight.intensity = e.target.value),
+				);
+			document
+				.getElementById("animation_pause_resume")
+				.addEventListener(
+					"click",
+					() => (skinViewer.animation.paused = !skinViewer.animation.paused),
+				);
+			document
+				.getElementById("auto_rotate")
+				.addEventListener(
+					"change",
+					(e) => (skinViewer.autoRotate = e.target.checked),
+				);
+			document
+				.getElementById("auto_rotate_speed")
+				.addEventListener(
+					"change",
+					(e) => (skinViewer.autoRotateSpeed = e.target.value),
+				);
+			for (const el of document.querySelectorAll(
+				'input[type="radio"][name="animation"]',
+			)) {
+				el.addEventListener("change", (e) => {
 					if (e.target.value === "") {
 						skinViewer.animation = null;
 					} else {
 						skinViewer.animation = availableAnimations[e.target.value];
-						skinViewer.animation.speed = document.getElementById("animation_speed").value;
+						skinViewer.animation.speed =
+							document.getElementById("animation_speed").value;
 					}
 				});
 			}
-			document.getElementById("animation_speed").addEventListener("change", e => {
-				if (skinViewer.animation !== null) {
-					skinViewer.animation.speed = e.target.value;
-				}
-			});
-			document.getElementById("control_rotate").addEventListener("change", e => skinViewer.controls.enableRotate = e.target.checked);
-			document.getElementById("control_zoom").addEventListener("change", e => skinViewer.controls.enableZoom = e.target.checked);
-			document.getElementById("control_pan").addEventListener("change", e => skinViewer.controls.enablePan = e.target.checked);
+			document
+				.getElementById("animation_speed")
+				.addEventListener("change", (e) => {
+					if (skinViewer.animation !== null) {
+						skinViewer.animation.speed = e.target.value;
+					}
+				});
+			document
+				.getElementById("control_rotate")
+				.addEventListener(
+					"change",
+					(e) => (skinViewer.controls.enableRotate = e.target.checked),
+				);
+			document
+				.getElementById("control_zoom")
+				.addEventListener(
+					"change",
+					(e) => (skinViewer.controls.enableZoom = e.target.checked),
+				);
+			document
+				.getElementById("control_pan")
+				.addEventListener(
+					"change",
+					(e) => (skinViewer.controls.enablePan = e.target.checked),
+				);
 			for (const part of skinParts) {
 				for (const layer of skinLayers) {
-					document.querySelector(`#layers_table input[type="checkbox"][data-part="${part}"][data-layer="${layer}"]`)
-						.addEventListener("change", e => skinViewer.playerObject.skin[part][layer].visible = e.target.checked);
+					document
+						.querySelector(
+							`#layers_table input[type="checkbox"][data-part="${part}"][data-layer="${layer}"]`,
+						)
+						.addEventListener(
+							"change",
+							(e) =>
+							(skinViewer.playerObject.skin[part][layer].visible =
+								e.target.checked),
+						);
 				}
 			}
 
@@ -500,28 +667,42 @@ <h1>Other examples</h1>
 					fileInput.value = fileInput.defaultValue;
 					callback();
 				};
-				fileInput.addEventListener("change", e => callback());
-				urlInput.addEventListener("keydown", e => {
+				fileInput.addEventListener("change", (e) => callback());
+				urlInput.addEventListener("keydown", (e) => {
 					if (e.key === "Backspace" && urlInput.readOnly) {
 						unsetAction();
 					}
 				});
-				unsetButton.addEventListener("click", e => unsetAction());
+				unsetButton.addEventListener("click", (e) => unsetAction());
 			};
 			initializeUploadButton("skin_url", reloadSkin);
 			initializeUploadButton("cape_url", reloadCape);
 			initializeUploadButton("ears_url", reloadEars);
 			initializeUploadButton("panorama_url", reloadPanorama);
 
-			document.getElementById("skin_url").addEventListener("change", () => reloadSkin());
-			document.getElementById("skin_model").addEventListener("change", () => reloadSkin());
-			document.getElementById("cape_url").addEventListener("change", () => reloadCape());
-			document.getElementById("ears_source").addEventListener("change", () => reloadEars());
-			document.getElementById("ears_url").addEventListener("change", () => reloadEars());
-			document.getElementById("panorama_url").addEventListener("change", () => reloadPanorama());
-
-			for (const el of document.querySelectorAll('input[type="radio"][name="back_equipment"]')) {
-				el.addEventListener("change", e => {
+			document
+				.getElementById("skin_url")
+				.addEventListener("change", () => reloadSkin());
+			document
+				.getElementById("skin_model")
+				.addEventListener("change", () => reloadSkin());
+			document
+				.getElementById("cape_url")
+				.addEventListener("change", () => reloadCape());
+			document
+				.getElementById("ears_source")
+				.addEventListener("change", () => reloadEars());
+			document
+				.getElementById("ears_url")
+				.addEventListener("change", () => reloadEars());
+			document
+				.getElementById("panorama_url")
+				.addEventListener("change", () => reloadPanorama());
+
+			for (const el of document.querySelectorAll(
+				'input[type="radio"][name="back_equipment"]',
+			)) {
+				el.addEventListener("change", (e) => {
 					if (skinViewer.playerObject.backEquipment === null) {
 						// cape texture hasn't been loaded yet
 						// this option will be processed on texture loading
@@ -536,34 +717,47 @@ <h1>Other examples</h1>
 				initializeViewer();
 			});
 
-			document.getElementById("nametag_text").addEventListener("change", () => reloadNameTag());
+			document
+				.getElementById("nametag_text")
+				.addEventListener("change", () => reloadNameTag());
 		}
 
 		function initializeViewer() {
 			skinViewer = new skinview3d.SkinViewer({
-				canvas: document.getElementById("skin_container")
+				canvas: document.getElementById("skin_container"),
 			});
 
 			skinViewer.width = document.getElementById("canvas_width").value;
 			skinViewer.height = document.getElementById("canvas_height").value;
 			skinViewer.fov = document.getElementById("fov").value;
 			skinViewer.zoom = document.getElementById("zoom").value;
-			skinViewer.globalLight.intensity = document.getElementById("global_light").value;
-			skinViewer.cameraLight.intensity = document.getElementById("camera_light").value;
+			skinViewer.globalLight.intensity =
+				document.getElementById("global_light").value;
+			skinViewer.cameraLight.intensity =
+				document.getElementById("camera_light").value;
 			skinViewer.autoRotate = document.getElementById("auto_rotate").checked;
-			skinViewer.autoRotateSpeed = document.getElementById("auto_rotate_speed").value;
-			const animationName = document.querySelector('input[type="radio"][name="animation"]:checked').value;
+			skinViewer.autoRotateSpeed =
+				document.getElementById("auto_rotate_speed").value;
+			const animationName = document.querySelector(
+				'input[type="radio"][name="animation"]:checked',
+			).value;
 			if (animationName !== "") {
 				skinViewer.animation = availableAnimations[animationName];
-				skinViewer.animation.speed = document.getElementById("animation_speed").value;
+				skinViewer.animation.speed =
+					document.getElementById("animation_speed").value;
 			}
-			skinViewer.controls.enableRotate = document.getElementById("control_rotate").checked;
-			skinViewer.controls.enableZoom = document.getElementById("control_zoom").checked;
-			skinViewer.controls.enablePan = document.getElementById("control_pan").checked;
+			skinViewer.controls.enableRotate =
+				document.getElementById("control_rotate").checked;
+			skinViewer.controls.enableZoom =
+				document.getElementById("control_zoom").checked;
+			skinViewer.controls.enablePan =
+				document.getElementById("control_pan").checked;
 			for (const part of skinParts) {
 				for (const layer of skinLayers) {
 					skinViewer.playerObject.skin[part][layer].visible =
-						document.querySelector(`#layers_table input[type="checkbox"][data-part="${part}"][data-layer="${layer}"]`).checked;
+						document.querySelector(
+							`#layers_table input[type="checkbox"][data-part="${part}"][data-layer="${layer}"]`,
+						).checked;
 				}
 			}
 			reloadSkin();
@@ -577,7 +771,9 @@ <h1>Other examples</h1>
 		initializeViewer();
 	</script>
 
-	<script type="module" src="https://unpkg.com/stats.js@0.17.0/src/Stats.js" integrity="sha384-W71K+d2HbqXqQWSj3Vj4RDsIVvIV7lR8O6RArKAiqB39ntwLci0W08qOn4Z1n8sM" crossorigin="anonymous" async></script>
+	<script type="module" src="https://unpkg.com/stats.js@0.17.0/src/Stats.js"
+		integrity="sha384-W71K+d2HbqXqQWSj3Vj4RDsIVvIV7lR8O6RArKAiqB39ntwLci0W08qOn4Z1n8sM" crossorigin="anonymous"
+		async></script>
 	<script type="module" async>
 		import Stats from "https://unpkg.com/stats.js@0.17.0/src/Stats.js";
 		const stats = new Stats();
@@ -586,10 +782,10 @@ <h1>Other examples</h1>
 		document.body.appendChild(stats.dom);
 		function loop() {
 			stats.update();
-			requestAnimationFrame(loop)
+			requestAnimationFrame(loop);
 		}
 		requestAnimationFrame(loop);
 	</script>
-
 </body>
+
 </html>
diff --git a/package.json b/package.json
index 8935a8e..c831a38 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
 		"format": "prettier src --write",
 		"test:lint": "eslint --ext .ts src",
 		"test": "npm run test:lint",
+		"format": "prettier --write src",
 		"dev:watch:modules": "tsc -w --preserveWatchOutput --declaration --sourceMap --outDir libs -p .",
 		"dev:watch:bundles": "rollup -w --no-watch.clearScreen -c --configPlugin=swc3",
 		"dev:serve": "ws",
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..9c7b740
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,12 @@
+/** if the browser supports WebGL */
+export const isWebGLAvailable = () => {
+	try {
+		const canvas = document.createElement('canvas');
+		return !!(
+			window.WebGLRenderingContext &&
+			(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
+		);
+	} catch (e) {
+		return false;
+	}
+};
diff --git a/src/viewer.ts b/src/viewer.ts
index 0fa43a7..cd90ad5 100644
--- a/src/viewer.ts
+++ b/src/viewer.ts
@@ -40,6 +40,7 @@ import { FXAAShader } from "three/examples/jsm/shaders/FXAAShader.js";
 import { PlayerAnimation } from "./animation.js";
 import { type BackEquipment, PlayerObject } from "./model.js";
 import { NameTagObject } from "./nametag.js";
+import { isWebGLAvailable } from "./utils.js";
 
 export interface LoadOptions {
 	/**
@@ -340,6 +341,19 @@ export class SkinViewer {
 		this.scene.add(this.camera);
 		this.scene.add(this.globalLight);
 
+		// if webgl is not available, throw an error and render text saying not avail
+		if(!isWebGLAvailable()){
+			const container = document.createElement("div");
+			container.style.width = `${this.canvas.width}px`;
+			container.style.height = `${this.canvas.height * 2}px`;
+			container.style.backgroundColor = "black";
+			container.style.color = "white";
+			container.innerText = "WebGL is not available on this device. Please try another device.";
+			this.canvas.replaceWith(container);
+
+			throw new Error("WebGL is not available on this device. Please try another device.")
+		}
+
 		this.renderer = new WebGLRenderer({
 			canvas: this.canvas,
 			preserveDrawingBuffer: options.preserveDrawingBuffer === true, // default: false
