-
Notifications
You must be signed in to change notification settings - Fork 252
Description
InfiniteGrid错误地缓存了WebGL Texture,致使该组件多次加载时,每个卡片的前景内容不被渲染。
复现方法:
- 打开一个含有该组件的页面,如https://inspira-ui.com/docs/en/components/visualization/infinite-grid;
- 经由vue router切换到其它路径,不要触发window刷新;
- 再切换回来,此时该组件内,所有的卡片会只有blur的背景而没有前景;
原因:
在该组件createTexture.ts内,你们用一个全局变量const textureCache = new Map<string, Texture>()缓存了所有webgl texture。但是,webgl texture是不可以跨context使用的。该组件在同一window下,第二次及以后加载时,会错误地从这个map里取得无效的texture。
临时修复:
- 在createTexture.ts下列代码
// Option 1: Pre-generate textures once, reuse them
const textureCache = new Map<string, Texture>()
后面加个小接口:
export function clearCache(): void {
textureCache.clear()
}
- 在GridManager的构造函数内调用它:
export class GridManager {
private host: GridManagerHost
private isInitialized: boolean = false
/**
* Creates a new GridManager instance
* @param host - The main grid class that provides required properties and methods
*/
constructor(host: GridManagerHost) {
this.host = host
clearCache()
}
...
ai translation:
InfiniteGrid incorrectly caches WebGL Textures, causing foreground content of each card to not render when the component is loaded multiple times.
Reproduction steps:
- Open a page that contains this component, for example:
https://inspira-ui.com/docs/en/components/visualization/infinite-grid - Navigate to another route via vue-router without triggering a full window refresh.
- Navigate back to the page. At this point, inside the component, all cards will only display the blurred background, and the foreground content will be missing.
Root cause:
In createTexture.ts, the component uses a global variable
const textureCache = new Map<string, Texture>()
to cache all WebGL textures.
However, WebGL textures cannot be shared across different WebGL contexts. When the component is loaded for the second time (or later) within the same window, it incorrectly retrieves invalid textures from this cache.
Temporary fix:
- In
createTexture.ts, after the following code:
// Option 1: Pre-generate textures once, reuse them
const textureCache = new Map<string, Texture>()add a small helper API:
export function clearCache(): void {
textureCache.clear()
}- Call it in the constructor of
GridManager:
export class GridManager {
private host: GridManagerHost
private isInitialized: boolean = false
/**
* Creates a new GridManager instance
* @param host - The main grid class that provides required properties and methods
*/
constructor(host: GridManagerHost) {
this.host = host
clearCache()
}
...
}