强制Pixi.js WebGL始终使用新的画布来解决重新加载页面后未清除浏览器缓存的情况下出现的错误

如何解决强制Pixi.js WebGL始终使用新的画布来解决重新加载页面后未清除浏览器缓存的情况下出现的错误

我的Pixi.js“游戏”运行正常，并且在第一次加载网页（请参见评论部分中的临时链接）时或在新的Chrome / Incognito视图页面中都运行良好。但是，总是在重新加载页面时，（webgl）画布上都会出现绘图错误。

如果我保持从Chrome开发者工具启用的Chrome DISABLE CACHE设置，则该问题不会出现，因此它必须与缓存相关。 需要清除画布缓存以使画布能够再次正确绘制。

我必须假定在页面重新访问/重新加载之间，客户端上仍有一些缓存（webgl）内容，这导致此画布上的绘制错误。 即使按Shift + reload也会再次出现重新绘制错误。

关于Pixi WebGl Canvas，我每次都试图制作一个新画布作为修复，但似乎无济于事，像这样引用新画布，但是Pixi总是自己制作画布

  r.app = new l.Application({
            backgroundColor: 16777215,height: 620,width: 1100,clearBeforeRender: true,view :  document.getElementById("canv"&location.search.split('v=')[1])
        })
    },

我更喜欢强制以某种方式清除画布缓存，始终使用新的画布名称或提供一些画布选项是否有帮助？

另一个选择是根本不使用WebGL模式。 如何强制PixiJS从不使用WebGL？

解决方法

您能不能先尝试一下？

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue,01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

如果它不起作用，这是我的另一个问题。

您是在本地运行服务器吗？否则，您正在使用静态html文件？ 如果您使用的是某种服务器，则确实需要按照服务器类型按照以下说明进行操作。

• [http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/]

, 每次调用新的PIXI.Texture.fromImage时，都会创建一次 textureCache，它会检查它（或baseTexture）是否已经保存在缓存中，以防止从服务器上一次又一次下载纹理。它已经加载了。

想象一下，创建一个降雨效果并在i≤200的for循环中准备雨滴； 如果没有纹理缓存，这将意味着您必须调用服务器200次。 纹理缓存是由两个元素创建的。

textureCache和baseTexture。 （每个缓存的纹理下面都有一个基本纹理 如果要通过调用.destroy（）来删除textureCache，则将删除纹理，但基本纹理仍保留在内存中。 实际上，这意味着如果您在舞台上有一个精灵，并且在纹理上调用了destroy（）。上传到舞台上的精灵仍然可以渲染。但是在执行此操作后，如果您调用相同的（先前已删除的纹理），则会从服务器重新上传。

在纹理上使用destroy（true）方法将删除textureCache和baseTexture。实际上，如果您在舞台上的精灵所使用的纹理上将此参数与true参数一起使用，则该精灵将变为黑色。 在WebGL上下文中大量使用baseTextures来使用gl方法来加快计算速度。

https://github.com/GoodBoyDigital/pixi.js/issues/949#issuecomment-54502749