How to calculate rendering time in WebGL? Looks like I am calculating it wrongly
我正在运行一个基于浏览器的交互式WebGL体积渲染。使用鼠标进行交互时,将调用drawVolume()函数。为了衡量渲染时间,我在开始和结束时都加上了时间戳。差异给了我渲染时间。
目前,我正在两台计算机上运行它:客户端和服务器
以下是观察结果:
服务器计算机:[NVIDIA GeForce GTX970] Render_time大约小于2ms。互动更快。
客户端计算机:[NVIDIA Quadro K600]渲染时间约为10-11毫秒。交互式显示较慢,框架更新较慢。有时显示器驱动程序会停止工作,并且显示器会熄灭。我需要重启系统。
我不知道这种方法是否适合计算渲染时间。即使以某种方式,我仍然感觉到代码已被执行,在硬件级别,渲染的图像尚未显示在浏览器窗口中。如何了解为各个交互更新的各个框架。如果获得该状态,那么也许我可以正确计算渲染时间。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | drawVolume = function() { start3 = new Date().getTime(); gl.clearColor(0.0, 0.0, 0.0, 0.0); gl.enable(gl.DEPTH_TEST); gl.bindFramebuffer(gl.FRAMEBUFFER, gl.fboBackCoord); gl.shaderProgram = gl.shaderProgram_BackCoord; gl.useProgram(gl.shaderProgram); gl.clearDepth(-50.0); gl.depthFunc(gl.GEQUAL); drawCube(gl,cube); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.shaderProgram = gl.shaderProgram_RayCast; gl.useProgram(gl.shaderProgram); gl.clearDepth(50.0); gl.depthFunc(gl.LEQUAL); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, gl.fboBackCoord.tex); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, gl.vol_tex); gl.activeTexture(gl.TEXTURE2); gl.bindTexture(gl.TEXTURE_2D, gl.tf_tex); gl.uniform1i(gl.getUniformLocation(gl.shaderProgram,"uBackCoord"), 0); gl.uniform1i(gl.getUniformLocation(gl.shaderProgram,"uVolData"), 1); gl.uniform1i(gl.getUniformLocation(gl.shaderProgram,"uTransferFunction"), 2); //Set Texture drawCube(gl,cube); end3 = new Date().getTime(); render_time=end3-start3; console.log(render_time); } |
CPU / GPU交互是异步的,这是使用驱动程序内部命令缓冲区来实现的,在该缓冲区中,所有发出的命令都将在其中进行缓冲,因此不能保证在调用
在大多数情况下,不希望强制/等待执行给定命令,但是可以使用
理想情况下,应该使用