如何使用phaser3/webgl在网格中显示250k单元格？

我需要一次显示250k单元格/矩形，当绘制超过20k的矩形时，帧速率会下降到30fps以下

绘制网格后，我没有运行任何东西，但fps保持较低，不确定原因。我还需要偶尔更新一些单元格颜色

我尝试过使用线条，而不是矩形（垂直和水平线条形成网格），但性能似乎差不多

代码：

假设以每秒30帧的速度绘制这么多矩形是不可能的，那么还有什么其他的选择呢

谢谢

解决方案： 我最终用直线代替了矩形，就像丹尼斯建议的那样，在显示250k的单元格时，速度超过60fps

var配置={
宽度：1200，
身高：1200，
类型：Phaser.AUTO，
父项：“#画布”，
场景：{
创建：创建，
更新：更新，
},
};
var game=new Phaser.game（配置）；
var图形；
//改变大小。
设isize=600；
让数据=[]；
data=[…数组（isize）].map（x=>Array（isize）.fill（0））；
设hspace=5；
让大小={
x:isize，
y:isize
}
设fps=0；
让我们看一看文本；
函数create（）{
graphics=this.add.graphics({
线型：{
宽度：1，
颜色：0xffffff，
阿尔法：1
}
});
//画矩形。
for（设ix=0；ix{
graphics.beginPath（）；
图形。移动到（ix*hspace，0）；
图形.lineTo（ix*hspace，size.y*hspace）；
graphics.stroke（）
});
}
for（设iy=0；iy{
graphics.beginPath（）；
图形。移动到（0，iy*hspace）；
图形.lineTo（尺寸.x*hspace，iy*hspace）；
graphics.stroke（）
});
}
fpsText=this.add.text（50,50，‘静态文本对象’，{fontFamily:'Arial'，fontSize:48，颜色：'#00ff00'}）；
这个.cameras.main.setZoom（.3）；
这个.cameras.main.setPosition（-400，-400）；
//用鼠标拖动移动相机。
this.input.on（'pointermove'，（指针）=>{
if（指针.isDown）{
this.cameras.main.scrollX-=（pointer.position.x-pointer.prevPosition.x）*1.5；
this.cameras.main.scrollY-=（pointer.position.y-pointer.prevPosition.y）*1.5；
}
})
}
函数更新（）{
setText（Math.floor（this.game.loop.actualFps）+“fps”）；
}

---

对

requestAnimationFrame

的调用是完全冗余的，因为

create

函数不向显示器显示任何内容。它只被调用一次

通过减少渲染调用的数量来减少GPU状态更改<代码>图形。笔划是一个状态更改函数，因为所有行都使用相同的样式，您只需一次调用笔划

注意我不熟悉Phaser的内部结构，它可能会也可能不会强制改变

冲程的状态

，但其他API却公然这样做！意识到这一点并有效地写作是很好的

const-config={
宽度：1200，高度：1200，
类型：Phaser.AUTO，
父项：“#画布”，
场景：{创建，更新}，
};
const game=new Phaser.game（配置）；
const-isize=600，hspace=50，size={x:isize，y:isize}；
变量图形，fps=0，fps文本；
函数create（）{
变量i=数学最大值（大小x，大小y）；
graphics=this.add.graphics（{lineStyle:{width:1，color:0xffffff，alpha:1}}）；
graphics.beginPath（）；
而(我--){
如果（i{
if（指针.isDown）{
this.cameras.main.scrollX-=（pointer.position.x-pointer.prevPosition.x）*1.5；
this.cameras.main.scrollY-=（pointer.position.y-pointer.prevPosition.y）*1.5；
}
})
}
函数更新（）{
fpsText.setText（（this.game.loop.actualFps | 0）+“fps”）；
}

---

对

requestAnimationFrame

的调用是完全冗余的，因为

create

函数不向显示器显示任何内容。它只被调用一次

通过减少渲染调用的数量来减少GPU状态更改<代码>图形。笔划是一个状态更改函数，因为所有行都使用相同的样式，您只需一次调用笔划

注意我不熟悉Phaser的内部结构，它可能会也可能不会强制改变

冲程的状态

，但其他API却公然这样做！意识到这一点并有效地写作是很好的

const-config={
宽度：1200，高度：1200，
类型：Phaser.AUTO，
父项：“#画布”，
场景：{创建，更新}，
};
const game=new Phaser.game（配置）；
const-isize=600，hspace=50，size={x:isize，y:isize}；
变量图形，fps=0，fps文本；
函数create（）{
变量i=数学最大值（大小x，大小y）；
graphics=this.add.graphics（{lineStyle:{width:1，color:0xffffff，alpha:1}}）；
graphics.beginPath（）；
而(我--){
如果（i{
if（指针.isDown）{
this.cameras.main.scrollX-=（pointer.position.x-pointer.pr