chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: removed fallback image processing and updated portrait image processing

Browse Source
This commit is contained in:
Haoyu Xu
2025-11-16 17:05:28 +08:00
parent ea0bd20211
commit 2a99186867
13 changed files with 138 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
apps/directory/src/routes/path/Home.jsx
View File

@@ -120,7 +120,7 @@ export default function Home() {
const list = navigationList.filter((item) => {
return (
item.name.toLowerCase().indexOf(searchField.toLowerCase()) !==
-1 || item.type === 'date'
-1 || item.type === 'date'
)
})
const newList = []
@@ -222,7 +222,7 @@ export default function Home() {
}
viewBox={
entry.type ===
'operator'
'operator'
? '0 0 88.969 71.469'
: '0 0 94.563 67.437'
}
@@ -234,25 +234,24 @@ export default function Home() {
}
>
{language ===
'zh-CN'
'zh-CN'
? entry.type ===
'skin'
? `${
entry
.skinName[
'zh-CN'
]
} · ${entry.operatorName}`
'skin'
? `${entry
.skinName[
'zh-CN'
]
} · ${entry.operatorName}`
: entry.operatorName
: entry
.skinName[
'en-US'
]}
.skinName[
'en-US'
]}
</section>
<section
className={
classes[
'arrow-icon'
'arrow-icon'
]
}
>
@@ -369,9 +368,9 @@ function OperatorElement({ item, hidden, handleVoicePlay }) {
<span className={classes.text}>
{
item.codename[
language.startsWith('en')
? alternateLang
: textDefaultLang
language.startsWith('en')
? alternateLang
: textDefaultLang
]
}
</span>
@@ -430,13 +429,13 @@ function ImageElement({ item }) {
const { language } = useLanguage()
return (
<img
src={`/${buildConfig.directory_folder}/${buildConfig.portraits}/${item.fallback_name.replace(/#/g, '%23')}_portrait.png`}
src={`/${buildConfig.directory_folder}/${buildConfig.portraits}/${item.portrait_filename.replace(/#/g, '%23')}.png`}
alt={item.codename[language]}
/>
)
}
ImageElement.propTypes = {
item: PropTypes.object.isRequired,
fallback_name: PropTypes.string,
portrait_filename: PropTypes.string,
codename: PropTypes.object,
}

8
apps/showcase/src/components/aklive2d.js
View File

@@ -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,

16
apps/showcase/src/components/fallback.css
View File

@@ -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%;
}

40
apps/showcase/src/components/fallback.js
View File

@@ -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()
}
}

12
apps/showcase/src/components/helper.js
View File

@@ -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)
}