关于浏览器：如何计算一个物体在WebGL中的渲染时间？看上去我计算错了

webgl渲染一帧所用时间测试

为了衡量渲染时间，我在开始和结束时都加上了时间戳。

我正在两台计算机上运行它：客户端和服务器

我不知道这种方法是否适合计算渲染时间。即使以某种方式，我仍然感觉到代码已被执行，在硬件级别，渲染的图像尚未显示在浏览器窗口中。如何了解为各个交互更新的各个框架。如果获得该状态，那么也许我可以正确计算渲染时间。

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);
}

参考：https://www.codenong.com/39922716/（How to calculate rendering time in WebGL? Looks like I am calculating it wrongly.）

>>Cesium渲染一帧中用到的图形技术：http://www.360doc.com/content/21/1115/20/65839921_1004309620.shtml(Graphics Tech In Cesium - Rendering a Frame)

本文通过追溯Cesium的Scene.render,解释了Cesium 1.9如何使用其WebGL渲染器渲染每一帧。在Scene.render中放置一 个断点， 运行一个Cesium应用,然后继续。 由于Cesium专注于可视化地理空间内容，因此使用许多不同光源的场景并不常见，因此 Cesium使用传统的前向阴影管线(Forward Rendering)。Cesium的管道之所以独特，是因为它使用了多个视锥体来支持巨大的视距，避免造成Z-fighting现象[Cozzi13]。 译者注:正向渲染/前向渲染(Forward Rendering)与延迟渲染(Deferred Rendering)相对，延迟渲染多用于多光照的场合。参看《正向渲染和延迟渲染彼此之间有什么不同》。

设置

Cesium将具有帧生存期的常量存储在FrameState对象中。在每一帧的开始阶段，将使用诸如相机参数和仿真时间之类的值对其进行初始化。这个FrameState对可用于其他对象， 例如在整个帧周期中生成命令(绘图调用)的图元(primitives) 。

UniformState是FrameState的一部分，具有通用的预先计算的着色器uniform变量。在每一帧的开始阶段，诸如视图矩阵和太阳光线矢等uniform变量将会被计算。

更新

Cesium具有经典的动画/更新/渲染管线，动画步骤可以在不与WebGL交互的情况下移动图元 (primitives，Cesium表示可渲染对象的术语)， 更改材质属性，添加/删除图元等。这不是 Scene.render的一部分，它可能会在应用程序代码中，通过在渲染帧之前显式设置属性时发 生;或者可能会在Cesium中隐式地，通过使用Entity APl分配时间变值触发。

>>Entity和primitive 对比：为什么primitive渲染效率更高：https://www.cnblogs.com/little-oil/p/16639582.html  https://www.jianshu.com/p/2cb8f723bff7

primitive更接近webgl底层，没有entity各种各样的附加属性，因此在加载时效率会更高。

scripting Rendering Painting System Idle这几个数值怎么看？https://www.jianshu.com/p/6b415a3413c3  Chrome Performance 页面性能分析指南

可以用Chrome dev-tools中的performance工具，截取第一个白屏到渲染完成的过程；可以看到loading、scripting、rendering、painting、system、idle的时间花费分布；

>>加载完图形->Bounding Box->View裁切->Rendering....在rendering之前要做很多的数据准备。

打断点