refactor: removed fallback image processing and updated portrait image processing

apps/showcase/src/components/aklive2d.js

@@ -1,10 +1,8 @@
 import Background from '@/components/background'
 import Events from '@/components/events'
-import Fallback from '@/components/fallback'
 import {
     addEventListeners,
     insertHTMLChild,
-    isWebGLSupported,
     updateElementPosition,
 } from '@/components/helper'
 import Insight from '@/components/insight'
@@ -42,11 +40,7 @@ export default class AKLive2D {
         this.#background = new Background(this.#appEl)
         this.#voice = new Voice(this.#appEl)
         this.#music = new Music(this.#appEl)
-        if (isWebGLSupported()) {
-            this.#player = new Player(this.#appEl)
-        } else {
-            new Fallback(this.#appEl)
-        }
+        this.#player = new Player(this.#appEl)
         addEventListeners([
             {
                 event: Events.Player.Ready.name,

apps/showcase/src/components/fallback.css

@@ -1,16 +0,0 @@
-#fallback-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-}
-
-#fallback {
-    margin: auto;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-}

apps/showcase/src/components/fallback.js

@@ -1,40 +0,0 @@
-import { insertHTMLChild } from '@/components/helper'
-import '@/components/fallback.css'
-import buildConfig from '!/config.json'
-
-export default class Fallback {
-    #el = document.createElement('div')
-
-    constructor(parentEl) {
-        alert('WebGL is unavailable. Fallback image will be used.')
-        const calculateScale = (width, height) => {
-            return {
-                x: window.innerWidth / width,
-                y: window.innerHeight / height,
-            }
-        }
-        const fallback = () => {
-            const el = document.getElementById('fallback-container')
-            const scale = calculateScale(
-                buildConfig.image_width,
-                buildConfig.image_height
-            )
-            el.style.width = '100%'
-            el.style.height =
-                buildConfig.image_height *
-                    (scale.x > scale.y ? scale.y : scale.x) +
-                'px'
-        }
-        window.addEventListener('resize', fallback, true)
-        this.#el.id = 'fallback-box'
-        this.#el.innerHTML = `
-      <div id="fallback-container">
-        <div id="fallback"
-          style="background-image: url(${import.meta.env.BASE_URL}${buildConfig.default_assets_dir}${buildConfig.fallback_name}.png)"
-        />
-      </div>
-    `
-        insertHTMLChild(parentEl, this.#el)
-        fallback()
-    }
-}

apps/showcase/src/components/helper.js

@@ -1,15 +1,3 @@
-export const isWebGLSupported = () => {
-    try {
-        const canvas = document.createElement('canvas')
-        const ctx =
-            canvas.getContext('webgl') ||
-            canvas.getContext('experimental-webgl')
-        return ctx != null
-    } catch {
-        return false
-    }
-}
-
 export const insertHTMLChild = (parent, child) => {
     parent.appendChild(child)
 }