一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。
目前计算机渲染图形涉及到许多缓冲区的使用，其中最重要的是帧缓冲区。
帧缓冲区
上图中的显存就是我们所说的帧缓冲区。GPU就是那一块带有很多金属丝的芯片，它是显卡的大脑。 显卡负责存储gpu处理的图形数据，而显卡则负责将帧缓冲区的数据传送到显示屏上。
缓冲区是显卡内存中的一块预留区域，帧缓冲区用于为每个像素存储一种颜色。
目前，帧缓冲区主要位于显示内存中。
通常将帧缓冲区分为前缓冲区和后缓冲区，这样一个双缓冲设计是为了图像在完全呈现之前显示，以防止出现跨帧的现象。
后缓存区通常就是我们所说的离屏缓冲区，这一块内存区域负责存储即将显示到显示屏上的图形数据。
为什么不将前缓冲区直接放到vga接口或者说hdmi接口处呢?笔者没有学过电路相关的知识，有读者知道吗？
双缓冲区设计
这是一个经典的计算机渲染原理图，在最开始，只有一个帧缓冲区，经过人们的测试，单缓冲区会导致卡顿的发生，因而出现了双缓冲区设计。
gpu的并行运算能力为双缓冲区设计提供了算力支持。
Three.js的WebGLRenderTarget
要使用Three.js的离屏渲染能力就要使用到WebGLRenderTarget。
A render target is a buffer where the video card draws pixels for a scene that is being rendered in the background. It is used in different effects, such as applying postprocessing to a rendered image before displaying it on the screen. 渲染目标就是一块缓冲区存储了显卡gpu处理的图形数据。
const image = { width: width, height: height, depth: 1 }; this.texture = new Texture( image, options.mapping, options.wrapS, options.wrapT,
options.magFilter, options.minFilter, options.format, options.type, options.anisotropy,
options.encoding );
this.texture.isRenderTargetTexture = true;
由WebGLRenderTarget的源码可知，Three.js使用离屏渲染能力主要是为了渲染纹理，优化纹理的渲染性能。说到底是以空间换时间，同时充分运用显卡的并行运算能力。
关于如何使用WebGLRenderTarget渲染纹理，three.js官方文档已经给出了示例，有兴趣的读者可以自行查阅。
