帧缓存的详细介绍

Posted 2023-03-09

参考技术A

帧缓冲（framebuffer）是Linux为显示设备提供的一个接口，把显存抽象后的一种设备，他允许上层应用程序在图形模式下直接对显示缓冲区进行读写操作。这种操作是抽象的，统一的。用户不必关心物理显存的位置、换页机制等等具体细节。这些都是由Framebuffer设备驱动来完成的。
帧缓冲驱动的应用广泛，在linux的桌面系统中，Xwindow服务器就是利用帧缓冲进行窗口的绘制。尤其是通过帧缓冲可显示汉字点阵，成为Linux汉化的唯一可行方案。
Linux FrameBuffer 本质上只是提供了对图形设备的硬件抽象，在开发者看来，FrameBuffer 是一块显示缓存，往显示缓存中写入特定格式的数据就意味着向屏幕输出内容。所以说FrameBuffer就是一块白板。例如对于初始化为16 位色的FrameBuffer 来说， FrameBuffer中的两个字节代表屏幕上一个点，从上到下，从左至右，屏幕位置与内存地址是顺序的线性关系。
帧缓存可以在系统存储器(内存)的任意位置，视频控制器通过访问帧缓存来刷新屏幕。 帧缓存也叫刷新缓存 Frame buffer 或 refresh buffer, 这里的帧(frame)是指整个屏幕范围。
帧缓存有个地址，是在内存里。我们通过不停的向frame buffer中写入数据， 显示控制器就自动的从frame buffer中取数据并显示出来。全部的图形都共享内存中同一个帧缓存。
CPU指定显示控制器工作，则显示控制器根据CPU的控制到指定的地方去取数据 和 指令， 目前的数据一般是从显存里取，如果显存里存不下，则从内存里取， 内存也放不下，则从硬盘里取，当然也不是内存放不下，而是为了节省内存的话，可以放在硬盘里，然后通过指令控制显示控制器去取。帧缓存 Frame Buffer，里面存储的东西是一帧一帧的， 显卡会不停的刷新Frame Buffer, 这每一帧如果不捕获的话， 则会被丢弃，也就是说是实时的。这每一帧不管是保存在内存还是显存里，都是一个显性的信息，这每一帧假设是800x600的分辨率， 则保存的是800x600个像素点，和颜色值。

参考技术B vray的渲染而改变内容的那一部分图形内存区域叫做帧缓存（frame
buffer）。
一个支持vray渲染的窗口
(即帧缓存)
可能包含以下的组合：
·
至多4个颜色缓存
·
一个深度缓存
·
一个模板缓存
·
一个积累缓存
·
一个多重采样缓存
　　为了能够执行双缓存构架，大多数图形硬件同时支持前后缓存。这将允许应用程序在显示前缓存（可见的）的时候渲染到后缓存（离屏缓存）。当渲染结束的时候，这两个缓存进行交换，以便已经完成渲染的缓存像前缓存一样进行显示，这样渲染就能在后缓存重新开始了。一旦使用双缓存，在绘制过程当中用户将不能看到图像。这种技术通常被用来实现实时交互的平滑动画。
　　如果为左眼和右眼各实现一个颜色缓存的话，那么就可以支持立体视觉效果了。双缓存技术由前后缓存来支持。因此一个双缓存的立体视觉将会有4各颜色缓存：前左，前右，后左，后右。一个普通的（非立体的）双缓存窗口将会仅仅有前后两个缓存。一个单缓存的窗口将会只有一个缓存。
　　如果绘制3d对象时需要剔除隐藏表面的话，深度缓存是必要的。这个缓存在每个象素上存储了显示对象的深度值。当绘制附加对象的时候，会在每个象素上进行深度比较，这样就能决定新的对象是否可见。
　　模板缓存用来进行复杂的掩模(masking)操作。一个复杂的形状可以存储在模板缓存里，然后绘制子序列操作可以使用模板缓存里的内容来决定是否更新象素。
　　积累缓存是一个颜色缓存，不过典型地它有比颜色缓存更高的精度。这就允许一些图像通过积累产生一些合成的图像。比如说一个作用就是可以在积累缓存里对一个对象随着他的运动绘制一些帧数。在积累缓存中的象素除以帧数以后，结果图像就展现出了运动模糊效果。相似的技巧也可以用来模拟景深效果以及高质量的全屏抗锯齿。
　　而通常的，当一个对象被绘制的时候，对于某个图元是否影像屏幕上的象素，会做一个单独的决议。多重采样缓存正是这样一个缓存，它允许每个渲染的对象在象素内被采样多次，以进行高质量的全屏抗锯齿，而不必对这个对象渲染多次。每个象素内的采样包括：颜色，深度，模板信息。每个象素采样的次数当然是必须的。当窗口包含多重采样缓存的时候，它将不回包括单独的深度或者是模板缓存。随着对象的渲染，颜色样本会被组合生成一个单一的颜色值，然后这个颜色值被传递，并写入到颜色缓存里。因为他们包括窗口中每个象素的多个颜色、深度以及模板样本（通常是4，8或者是16），因此多重采样缓存会消耗相当数量的离屏缓存。

[UWP]缓存Lottie动画帧

原文:[UWP]缓存Lottie动画帧

在上一篇博文《[UWP]在UWP平台中使用Lottie动画》中我简单介绍了一下LottieUWP项目以及如何使用它呈现Lottie动画，这篇文章里我们来讲点进阶的东西——缓存Lottie动画帧。

为什么会有这样的需求呢？

有两方面原因：

• 直接在XAML中使用Lottie动画时，是边播放边渲染，计算量比较大，某些Lottie文件会非常吃性能！另外也会存在渲染不正确（有黑色区域）的情况，但是如果我们把每一帧缓存下来，自己控制播放的话，性能会提升很多！
• 应用于视频合成时（给视频添加Lottie动画挂件），需要获取每一时刻的动画帧图像（UWP媒体编辑以及视频合成的相关知识也很多，有时间我会整理一下，分享点干货）。

获取Lottie动画帧

在上一篇中我们使用了LottieAnimationView控件来播放Lottie动画，其实另一个类LottieDrawable也可以完成同样的工作，并且更易扩展。

下面我们就来修改下LottieDrawable类，让它可以返回给我们某一时刻的帧图像。

在LottieDrawable类中，Lottie动画的播放进度由Progress属性控制，而实际上的呈现则是使用了Win2D中的CanvasAnimatedControl控件来承载绘制目标。

这样的话，其实我们要做的就很简单了。我们可以新增一个GetCurrentFrame方法，使用CanvasRenderTarget作为绘制目标，将CanvasAnimatedControl的Draw事件中的绘制逻辑转移过来即可。

具体代码如下：

        /// <summary>
        /// 获取当前进度时的Lottie图像
        /// </summary>
        /// <param name="resourceCreator"></param>
        /// <param name="scaleX">横向缩放倍数</param>
        /// <param name="scaleY">纵向缩放倍数</param>
        /// <returns></returns>
        public CanvasBitmap GetCurrentFrame(ICanvasResourceCreator resourceCreator, float scaleX, float scaleY)
        {
            lock (this)
            {
                var width = _composition.Bounds.Width * scaleX;
                var height = _composition.Bounds.Height * scaleY;
                var commandList = new CanvasRenderTarget(resourceCreator, (float)width, (float)height, 96f);
                using (var session = commandList.CreateDrawingSession())
                {

                    if (_bitmapCanvas == null || _bitmapCanvas.Width < width || _bitmapCanvas.Height < height)
                    {
                        _bitmapCanvas?.Dispose();
                        _bitmapCanvas = new BitmapCanvas(width, height);
                    }

                    using (_bitmapCanvas.CreateSession(resourceCreator.Device, (float)width,
                        (float)height, session))
                    {
                        _bitmapCanvas.Clear(Colors.Transparent);
                        LottieLog.BeginSection("Drawable.Draw");
                        if (_compositionLayer == null)
                        {
                            return null;
                        }

                        _matrix.Reset();
                        _matrix = MatrixExt.PreScale(_matrix, scaleX, scaleY);
                        _compositionLayer.Draw(_bitmapCanvas, _matrix, _alpha);
                        LottieLog.EndSection("Drawable.Draw");
                    }

                }

                return commandList;
            }
        }

有一点要注意的是这里的绘制目标使用了CanvasRenderTarget，切勿使用CanvasCommandList，区别在于CanvasRenderTarget有固定大小的尺寸，而CanvasCommandList则没有固定的尺寸（实际上时无限大的），使用CanvasCommandList作为绘制目标将会引起某些Lottie动画绘制时丢失部分内容，具体可参见我在LottieUWP项目上提的这个Issue 。

缓存Lottie动画帧

有了上面添加的GetCurrentFrame方法后，我们就可以通过修改Progress来获取Lottie动画中每一时刻的帧图像了。

我编写了一个缓存Lottie动画帧的方法：

        protected List<CanvasBitmap> CacheLottieFrames;
        /// <summary>
        /// 缓存Lottie动画帧
        /// </summary>
        /// <param name="width">缓存图像的宽</param>
        /// <param name="height">缓存图像的高</param>
        /// <param name="frameRate">缓存的帧率</param>
        /// <returns></returns>
        private async Task InitLottieFrame(double width, double height, int frameRate)
        {
            await Task.Run(() =>
            {
                lock (_lockObj)
                {
                    if (lottieDrawable != null)
                    {
                        var duration = lottieDrawable.Composition.Duration;
                        var scaleX = width / lottieDrawable.Composition.Bounds.Width;
                        var scaleY = height / lottieDrawable.Composition.Bounds.Height;
                        var timeGap = 1d / frameRate;
                        CacheLottieFrames = new List<CanvasBitmap>();
                        var device = CanvasDevice.GetSharedDevice();
                        for (var i = 0d; i < duration; i += timeGap)
                        {
                            lottieDrawable.Progress = (float)(i / duration);
                            var renderTarget =
                                new CanvasRenderTarget(device, (float)CanvasWidth, (float)CanvasHeight, 96f);
                            using (var session = renderTarget.CreateDrawingSession())
                            {
                                session.Clear(Colors.Transparent);
                                var effectImg = lottieDrawable.GetCurrentFrame(device, (float)scaleX, (float)scaleY);
                                if (effectImg != null)
                                    session.DrawImage(effectImg);
                            }

                            CacheLottieFrames.Add(renderTarget);
                        }
                    }
                }

            });
        }

我们也可以在LottieDrawable.Composition中获取到帧的总数量以及帧率，以此为依据来 获取帧，但是我在这个方法里没有使用，因为我想依据传入的帧率来控制获取的帧数量，避免缓存多余的帧占据内存空间。

结尾

有关于UWP使用Lottie动画的相关博文到这里就结束了，这段时间接触下来，我的感受是Lottie动画真的挺好玩效果也很棒。在LottieFiles网站大家可以找到各种有趣好玩的Lottie动画，当然有能力的也可以自己制作。

本篇博客到此结束！谢谢大家阅读！