From fe6c0f93fa27e1f310bbf3a65988b396b6e7ca23 Mon Sep 17 00:00:00 2001
From: Sir Blob <adithcool.5@gmail.com>
Date: Tue, 30 Jun 2026 20:58:44 +0000
Subject: [PATCH] Remove 3D background and guard WebGL usage

---
 src/lib/assets/css/background-3d.css   |  1 +
 src/lib/components/Background3D.svelte | 24 +++++++++++++++++++++++-
 src/lib/components/ModelViewer.svelte  | 11 +++++++++--
 src/routes/+layout.svelte              |  2 --
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/lib/assets/css/background-3d.css b/src/lib/assets/css/background-3d.css
index c8b4ad8..f52e45a 100644
--- a/src/lib/assets/css/background-3d.css
+++ b/src/lib/assets/css/background-3d.css
@@ -6,6 +6,7 @@
 	height: 100%;
 	z-index: -1;
 	pointer-events: none;
+	background-color: var(--scene-bg);
 }
 
 .scene-container :global(canvas) {
diff --git a/src/lib/components/Background3D.svelte b/src/lib/components/Background3D.svelte
index ad4ff49..85846e6 100644
--- a/src/lib/components/Background3D.svelte
+++ b/src/lib/components/Background3D.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { Canvas } from '@threlte/core';
 	import { T } from '@threlte/core';
 	import ParticleField from './ParticleField.svelte';
@@ -8,9 +9,29 @@
 	// Reactive theme colors
 	const bgColor = $derived($themeColors.background);
 	const primaryColor = $derived($themeColors.primary);
+
+	let webglAvailable = $state(false);
+
+	function isWebGLAvailable() {
+		try {
+			const testCanvas = document.createElement('canvas');
+			const context =
+				testCanvas.getContext('webgl2') ||
+				testCanvas.getContext('webgl') ||
+				testCanvas.getContext('experimental-webgl');
+			return !!(window.WebGLRenderingContext && context);
+		} catch {
+			return false;
+		}
+	}
+
+	onMount(() => {
+		webglAvailable = isWebGLAvailable();
+	});
 </script>
 
-<div class="scene-container">
+<div class="scene-container" style="--scene-bg: {bgColor};">
+	{#if webglAvailable}
 	<Canvas>
 		<T.PerspectiveCamera
 			makeDefault
@@ -36,4 +57,5 @@
 		<!-- Background color -->
 		<T.Color args={[bgColor]} attach="background" />
 	</Canvas>
+	{/if}
 </div>
diff --git a/src/lib/components/ModelViewer.svelte b/src/lib/components/ModelViewer.svelte
index ab4844d..9e27983 100644
--- a/src/lib/components/ModelViewer.svelte
+++ b/src/lib/components/ModelViewer.svelte
@@ -385,8 +385,15 @@
 
 	onMount(() => {
 		if (container) {
-			initScene();
-			animate();
+			try {
+				initScene();
+				animate();
+			} catch (err) {
+				console.error("WebGL unavailable:", err);
+				loadError = "3D viewer unavailable (WebGL not supported)";
+				isLoading = false;
+				return;
+			}
 			window.addEventListener("resize", handleResize);
 			window.addEventListener("keydown", handleKeydown);
 		}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 55b7104..b98a28e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import './layout.css';
-	import Background3D from '$lib/components/Background3D.svelte';
 	import { themeColors, mode, colorTheme, toggleMode, setColorTheme, themeOptions } from '$lib/stores/theme';
 	import { goto } from '$app/navigation';
 	import { navigation } from '$lib/config';
@@ -76,7 +75,6 @@
 		<NavbarWaybar />
 		<!-- <Navbar /> -->
 		<main class="main-content">
-			<Background3D />
 			{@render children()}
 		</main>
 	</div>