Make writing a habit together! This is the third day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

At present, computer rendering graphics involves the use of many buffers, among which the frame buffer is the most important.

The frame buffer

The video memory in the figure above is what we call a frame buffer. A GPU is a chip with a lot of wire on it. It’s the brain of the graphics card. The graphics card is responsible for storing the graphics data processed by the GPU, and the graphics card is responsible for transferring the data from the frame buffer to the display.

A buffer is a reserved area of video card memory where the frame buffer is used to store a color for each pixel.

Currently, the frame buffer is located mainly in display memory.

The frame buffer is usually divided into a front buffer and a back buffer, such that a double buffer is designed to display the image before it is fully rendered to prevent cross-frames.

The back buffer is often referred to as the off-screen buffer. This area of memory is responsible for storing graphic data that is about to be displayed on the screen.

Why not put the front buffer directly into a VGA or HDMI interface? The author has not learned the circuit related knowledge, does the reader know?

Double buffer design

This is a classic computer rendering schematic. In the beginning, there was only one frame buffer. After people tested that single buffer would cause stalling, so there was a double buffer design.

The parallel computing capability of GPU provides computing power support for double buffer design.

Three. Js WebGLRenderTarget

To use three. js’s off-screen rendering capability, use the 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.

A render target is a buffer that stores the graphics data processed by the graphics card 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;                                                                                                                                                   
Copy the code

According to the source code of WebGLRenderTarget, three. js uses the off-screen rendering capability mainly to render textures and optimize the rendering performance of textures. The bottom line is space for time, while making full use of the parallel computing power of the graphics card.

An example of how to render a texture using the WebGLRenderTarget is provided in the official documentation of Three. js for those who are interested.

Portal: threejs.org/examples/we…