catch threejs webgl error

oulipoh · Sep 15, 2024 · 54c231b · 54c231b
1 parent 11217a5
commit 54c231b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -9,14 +9,14 @@
 </head>
 <body onload="video_url.value = location.hash.slice(1); video_url.select(); video_url.dispatchEvent(new Event('change'))">  <!-- Chromium allows requesting screen capture without user gesture (against the spec). See: https://issues.chromium.org/issues/40177563 -->
     <div id="inputs">
-        <input type="text" id="video_url" autofocus inputmode="url" spellcheck="false" size="37" placeholder="Enter YouTube / Vimeo ID + args or any URL">
+        <input type="text" id="video_url" autofocus inputmode="url" spellcheck="false" size="39" placeholder="Enter YouTube / Vimeo ID + params or any URL">
         <select id="effect" title="Browse with Alt+↑ / Alt+↓" aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown">
             <optgroup label="Wasm (MediaPipe)">
-                <option value="recode_landmarks">Recode + landmarks</option>
+                <option value="pose_landmarks_recode">Pose landmarks overlay</option>
                 <option value="pose_landmarks">Pose landmarks</option>
                 <option value="chest_xray">Chest X-ray</option>
                 <option value="laser_eyes">Laser eyes</option>
-                <option value="background_removal">Background removal</option>
+                <option value="background_segmentation">Background segmentation</option>
             </optgroup>
             <hr>
             <optgroup label="WebGPU">

diff --git a/script.js b/script.js
@@ -239,7 +239,7 @@ const effect_funcs = {
         canvasCtx.restore()
     },
 
-    background_removal: (W, H, rgbx, models, videoFrame) => {
+    background_segmentation: (W, H, rgbx, models, videoFrame) => {
         models.segment.segmentForVideo(videoFrame, performance.now(), result =>
             result.categoryMask.getAsFloat32Array().forEach((cat, index) => {
                 if (!cat)
@@ -448,8 +448,9 @@ async function capture() {
     try {
         // https://github.com/ZHKKKe/MODNet
         // https://huggingface.co/Xenova/modnet
-        modnet = await AutoModel.from_pretrained('Xenova/modnet', {quantized: false, device: 'webgpu', dtype: 'fp32'})
-        modnet_preproc = await AutoProcessor.from_pretrained('Xenova/modnet')
+        const modnet_path = 'Xenova/modnet'
+        modnet = await AutoModel.from_pretrained(modnet_path, {quantized: false, device: 'webgpu', dtype: 'fp32'})
+        modnet_preproc = await AutoProcessor.from_pretrained(modnet_path)
     } catch (e) {
         console.warn(e)
         disable_option('modnet_transformers_webgpu')
@@ -484,8 +485,14 @@ async function capture() {
     const dotcamera = new DotCamera(glsl, {dayMode: false, rgbMode: false})
 
     // https://www.airtightinteractive.com/2011/06/rutt-etra-izer/
-    const renderer = new THREE.WebGLRenderer({antialias: true, powerPreference: 'high-performance', sortObjects: false})
-    const ruttetraizer = new RuttEtraIzer(THREE, renderer, canvas)
+    let renderer, ruttetraizer
+    try {
+        renderer = new THREE.WebGLRenderer({antialias: true, powerPreference: 'high-performance', sortObjects: false})
+        ruttetraizer = new RuttEtraIzer(THREE, renderer, canvas)
+    } catch (e) {
+        console.warn(e)
+        disable_option('ruttetraizer_threejs')
+    }
 
     const gl_engines = {swissgl: glsl, threejs: renderer}
 
@@ -508,7 +515,7 @@ async function capture() {
     const trackGenerator = new MediaStreamTrackGenerator({kind: 'video'})
     const transformer = new TransformStream({
         async transform(videoFrame, controller) {
-            if (effect.value.includes('landmarks'))
+            if (effect.value.includes('pose_landmarks'))
                 effect_funcs.pose_landmarks(videoFrame, poseLandmarker, canvasCtx, drawingUtils)
             else if (!effect.value.includes('laser') && !effect.value.includes('swissgl') && !effect.value.includes('threejs') && (canvas.width || canvas.height))
                 canvas.width = canvas.height = 0

diff --git a/style.css b/style.css
@@ -17,12 +17,13 @@ footer {
 }
 
 #inputs {
+    column-gap: 1rem;
     display: flex;
     flex-wrap: wrap;
-    gap: 2rem;
     justify-content: space-around;
     margin-inline: 2rem;
     max-width: 100%;
+    row-gap: 2rem;
 }
 
 #videos {