Javascript Three.js:设置'texture.needsUpdate=true'非常慢

我正在处理一个Three.js场景，其中我想在一段时间后更新一些纹理。但是，我发现更新纹理非常慢，并且在几秒钟内将FPS拖到仅1-2 FPS（仅更新单个纹理时）

有什么方法可以加快纹理更新吗？如果其他人能就此问题提供任何见解，我们将不胜感激

要查看此行为，请单击下面示例的窗口。这将加载第一个纹理更新（再次单击将触发第二个纹理更新）。如果您尝试在其中一次单击后缩放，您会发现屏幕冻结，FPS将大幅下降。有人知道如何解决这个问题吗

html，正文{宽度：100%；高度：100%；背景：#000；}
正文{边距：0；溢出：隐藏；}
画布{宽度：100%；高度：100%；}
高精度浮点；
统一mat4模型视图矩阵；
均匀mat4投影矩阵；
均匀vec3摄像机定位；
属性vec3位置；//设置蓝图的顶点位置
属性vec3转换；//实例的x y平移偏移
属性float texIdx；//要访问的纹理索引
可变浮动vTexIdx；
void main（）{
//设定点位置
vec3位置=位置+平移；
vec4 projected=projectionMatrix*modelViewMatrix*vec4（位置1.0）；
gl_位置=投影；
//分配变量
vTexIdx=texIdx；
//使用点位置和相机位置之间的增量来调整点的大小
浮动xDelta=功率（投影[0]-摄像机位置[0]，2.0）；
浮动yDelta=功率（投影[1]-摄像机位置[1]，2.0）；
浮动zDelta=功率（投影[2]-摄像机位置[2]，2.0）；
浮动增量=功率（xDelta+yDelta+zDelta，0.5）；
gl_PointSize=40000.0/增量；
}
高精度浮点；
均匀取样器2da；
均匀取样器2db；
可变浮动vTexIdx；
void main（）{
int-textureIndex=int（vTexIdx）；
vec2uv=vec2（gl_PointCoord.x，gl_PointCoord.y）；
如果（textureIndex==0）{
gl_FragColor=纹理2D（a，uv）；
}else if（textureIndex==1）{
gl_FragColor=纹理2d（b，uv）；
}
}
/**
*生成具有背景色的场景对象
**/
函数getScene（）{
var scene=new THREE.scene（）；
scene.background=新的三种颜色（0xaaaa）；
返回场景；
}
/**
*生成要在场景中使用的摄影机
**/
函数getCamera（）{
var aspectRatio=window.innerWidth/window.innerHeight；
var摄像机=新的三透视摄像机（75，aspectRatio，0.11000）；
摄像机位置设置（0,1，-6000）；
返回摄像机；
}
/**
*生成要在场景中使用的渲染器
**/
函数getRenderer（）{
//使用渲染器创建画布
var renderer=new THREE.WebGLRenderer（{antialas:true}）；
//添加对视网膜显示的支持
renderer.setPixelRatio（window.devicePixelRatio）；
//指定画布的大小
renderer.setSize（window.innerWidth、window.innerHeight）；
//将画布添加到DOM中
document.body.appendChild（renderer.doElement）；
返回渲染器；
}
/**
*生成要在场景中使用的控件
**/
函数控件（摄影机、渲染器）{
var controls=新的三个.trackball控件（摄影机、渲染器.domElement）；
controls.zoomSpeed=0.4；
控制点速度=0.4；
返回控制；
}
/**
*为场景生成点
**/
函数添加点（场景）{
var BA=3.BufferAttribute；
var IBA=3.InstancedBufferAttribute；
var geometry=new THREE.InstancedBufferGeometry（）；
//为每个观察添加数据
var n=10000；//观察次数
var rootN=n**（1/2）；
var-cellSize=20；
var translation=新的Float32Array（n*3）；
var texIdx=新的浮点数组（n）；
var translationIterator=0；
var-texIterator=0；
对于（var i=0；i（n/8）？1:0；
}
var positionAttr=newba（新的Float32Array（[0,0,0]），3）；
var translationAttr=新IBA（翻译，3,1）；
var texIdxAttr=新的IBA（texIdx，1，1）；
positionAttr.dynamic=true；
translationAttr.dynamic=true；
texIdxAttr.dynamic=true；
geometry.addAttribute（'position'，positionAttr）；
geometry.addAttribute（'translation'，translationAttr）；
geometry.addAttribute（'texIdx'，texIdxAttr）；
var画布=[
getElem（'canvas'，{宽度：16384，高度：16384，}），
getElem（'canvas'，{宽度：16384，高度：16384，}），
]
var纹理=[
getTexture（画布[0]），
getTexture（画布[1]），
];
var material=新的3.RawShaderMaterial({
制服：{
a:{
类型：“t”，
值：纹理[0]，
},
b:{
类型：“t”，
值：纹理[1]，
}
},
vertexShader:document.getElementById（'vertex-shader'）.textContent，
fragmentShader:document.getElementById（'fragment-shader'）.textContent，
});
var mesh=新的三个点（几何体、材质）；
mesh.frustumCulled=false；//防止拖动时剪裁网格
场景。添加（网格）；
//在第一个窗口上单击，绘制红色点
//在第二个窗口上单击，绘制蓝色点
var=0；
window.addEventListener（'click'，function（）{
如果（点击次数==0 | |点击次数==1）{
var canvas=画布[点击]；
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle=clicks==0？'red'：'blue'；
ctx.rect（0,0,16384,16384）；
ctx.fill（）；
纹理[clicks].needsUpdate=true；
点击++；
}
})
}
函数getTexture（画布）{
var-tex=新的三种纹理（画布）；
tex.needsUpdate=true；
tex.flipY=false；
返回tex；
}
/**
*创建一个元素
**/
功能getElem（标签，obj）{