如何使用kick.js以FPS速率开发演示应用程序？

Question

我对Kick.js很感兴趣为了说服我的教授使用这个框架，我想开发一个应用程序，我可以使用kick.js加载/编写自定义3D模型，并且应该能够添加更多对象。当我在画布上添加更多3D对象时，我还应该能够打印FPS来检查FPS的变化。我是图形编程的新手，我既不了解着色器编程也不了解openGL。作为一个新手，我怎么能开始潜入这个框架？

我想实施以下步骤（建议我，如果我出错了）：

1. 使用kick.js在画布上加载单个立方体或球体或茶壶来开发简单的演示。
2. 当我改变相机角度时能够看到fps。
3. 后来我应该能够在相同类型的画布上添加更多三角形（模型）（例如：茶壶），并能够将fps与单个茶壶比较。

我是接近正确的方式还是请提出所需的建议。提供的教程都没有FPS演示。请有人帮我。我真的很喜欢主页上说明的功能，但我不知道如何在我的演示中实现它们。

Answer 1

假设Kick.js有一个“渲染”回调或类似的东西，你想要渲染的每一帧（你知道帧之间的时间，或程序开始后的绝对时间），计算你的相当简单帧率。

我之前使用的方法是：选择一个采样率（我喜欢250ms，因此它每秒更新4次），并计算每250ms执行多少帧。当你达到250ms时，更新屏幕上的帧率计数器变量并重新开始计数。

timeSinceLastFPSUpdate += millisecondsSinceLastFrame;
framesSinceLastFPSUpdate++;
if timeSinceLastFPSUpdate > 250:
    timeSinceLastFPSUpdate = 0
    fps = framesSinceLastFPSUpdate * (1000 / 250); // convert "frames per 250ms" to "frames per 1s"
    framesSinceLastFPSUpdate = 0;

print fps to screen;

您可以使用不同的采样率或使用不同的帧速率计算方法来使计时器更“准确”（以更好地找到帧速率下降）但听起来您正在寻找不太准确的东西并且只是让你合理地了解渲染的整体复杂性，而不是帧到帧的下降。