浏览器绘制时间之外的WebGL渲染

我们正在构建一个WebGL应用程序，它具有一些高渲染负载对象。是否有一种方法可以在浏览器绘制时间之外（即在背景中）渲染这些对象？我们不希望FPS下降，中断渲染过程是可能的（在帧之间分割）。

想到三个想法

可以通过帧缓冲区在多个帧上渲染到纹理，完成后将该纹理渲染到画布

const gl=document.querySelector（'canvas'）.getContext（'webgl'）；
常数vs=`
属性向量4位置；
属性向量2 texcoord；
可变矢量2 v_texcoord；
void main（）{
gl_位置=位置；
v_texcoord=texcoord；
}
`;
常数fs=`
高精度浮点；
均匀采样2d-tex；
可变矢量2 v_texcoord；
void main（）{
gl_FragColor=纹理2d（tex，v_texcoord）；
}
`;
//编译着色器、链接程序、查找位置
const programInfo=twgl.createProgramInfo（gl[vs，fs]）；
//gl.createBuffer、gl.bindBuffer、gl.bufferData
const bufferInfo=twgl.createBufferInfoFromArrays（gl{
职位：{
NUM组件：2，
数据：[
-1, -1,
1, -1,
-1,  1,
-1,  1,
1, -1,
1,  1,
],
},
特克斯库尔德：{
NUM组件：2，
数据：[
0,  0,
1,  0,
0,  1,
0,  1,
1,  0,
1,  1,
],  
},
});
//使用纹理和深度缓冲区创建帧缓冲区
//与画布大小相同
//gl.createTexture、gl.texImage2D、gl.createFramebuffer
//gl.framebufferTexture2D
const framebufferInfo=twgl.createFramebufferInfo（gl）；
const infoElem=document.querySelector（'info'）；
常量numDrawSteps=16；
设drawStep=0；
设时间=0；
//画几个框架。准备就绪时返回true
函数绘图（）{
//按纹理绘制
//gl.bindFrambuffer，gl.viewport
twgl.bindFramebufferInfo（gl，framebufferInfo）；
如果（drawStep==0）{
//在第一步，清除并记录时间
gl.禁用（gl.剪刀试验）；
gl.clearColor（0,0,0,0）；
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
时间=性能。现在（）*0.001；
}
//这代表画一些东西。
总帐启用（总帐剪刀测试）；
const halfWidth=framebufferInfo.width/2；
const halfHeight=framebufferInfo.height/2；
常数a=时间*0.1+绘图步长
常数x=数学cos（a）*半宽+半宽；
常数y=数学sin（a*1.3）*半高+半高；
gl.剪刀（x，y，16，16）；
gl.clearColor(
第16/16号决议，
提取步骤/6%1，
提取步骤/3%1，
1);
总账清除（总账颜色缓冲位）；
drawStep=（drawStep+1）%numDrawSteps；
返回drawStep==0；
}
设frameCount=0；
函数render（）{
++帧数；
infoElem.textContent=帧数；
if（draw（））{
//画到画布上
//gl.bindFramebuffer，gl.viewport
twgl.bindFramebufferInfo（gl，null）；
gl.禁用（gl.深度测试）；
总账禁用（总账混合）；
gl.禁用（gl.剪刀试验）；
总账使用程序（programInfo.program）；
//gl.bindBuffer、gl.EnableVertexAttribute数组、gl.VertexAttribute指针
twgl.setBuffersAndAttributes（总帐、程序信息、缓冲信息）；
//德国劳埃德船级社制服。。。
twgl.setUniformsAndBindTextures（programInfo{
tex:framebufferInfo.attachments[0]，
});
//画正方形
gl.绘图阵列（gl.三角形，0,6）；
}
请求动画帧（渲染）；
}
请求动画帧（渲染）