Question

一个 3D 引擎，我们绘制完整的场景以保持每秒 60 帧(FPS) 为最佳。这样可以保证动画的流畅。

为了进行渲染工作，我们需要后台缓冲区。它可以被看作是一个映射屏幕大小区域的二维数组。数组中的每个元素都被映射为屏幕上的某一个像素。

在 XAMLWindows Store Apps 中，我们将使用一个 byte[]数组，它将成为我们的动态后台缓冲区。

在我们的动画循环中(Tick)，每一帧要进行渲染时，后台缓冲区都将影响到作为 XAML 图像源头的前台缓冲区的 WriteableBitmap。

在渲染循环中，XAML 渲染引擎调用我们时，帧就会被产生。注册事件代码为：

CompositionTarget.Rendering += CompositionTarget_Rendering;

在 Html5 中我们将使用 <canvas></canvas> 元素。canvas 元素已经具有一个后台缓冲区数组的关联。你可以通过 getImageData() 和 setImageData() 函数来访问它。

动画循环将有 requestAnimationFrame() 函数来处理。它是一个类似 setTimeout(function(){}, 1000 / 60); 的定时器实现。不同的是，只有当浏览器主动调用时才会执行，所以并不需要指定间隔时间。

注意 ：在”硬件缩放“的情况下，后台缓冲区和前台缓冲区的大小可以不同。使用”硬件缩放“可以得到更好的性能和更差的效果【译者注：我是故意把这里翻译成这样的，很喜感不是么……哈哈。】。更多关于这个话题的内容请看 这里 。