[Three. js details II] Renderer

This article describes how to set the renderer in three. js.

In the three. js document, the Renderer branch is as follows:

Renderers

• CanvasRenderer
• DOMRenderer
• SVGRenderer
• WebGLRenderer
• WebGLRenderTarget
• WebGLRenderTargetCube
• WebGLShaders

We can see that three. js provides many rendering methods. Of course we chose WebGLRenderer, but here we will compare the two rendering Methods CanvasRenderer and WebGLRenderer.

In the example in the previous article, we can use the WebGL Renderer:

Renderer = new THREE. WebGLRenderer ();

Replace it with the Canvas Renderer:

Renderer = new THREE. CanvasRenderer ();

In this way, the canvas will be rendered in 2d mode. The following is a comparison of effects (the former is rendered using WebGLRenderer ):

Obviously, WebGL is superior in rendering performance. The rendering of WebGL can maximize your exquisite scenes. If your device supports it, this Renderer has better performance than CanvasRenderer, on the contrary, CanvasRenderer has better compatibility.

// Enable Three. js Renderer: WebGLRenderer
// Declare the global variable var renderer; function initThree () {// obtain the width and height of the container width = document. getElementById ('canvas3d '). clientWidth; // obtain the width height of the canvas "canvas3d" = document. getElementById ('canvas3d '). clientHeight; // get the height of the canvas "canvas3d" // declare the renderer object: WebGLRenderer renderer = new THREE. webGLRenderer ({antialias: true, // antialias: true/false whether anti-sawtooth precision: "highp" is enabled, // precision: highp/mediump/lowp: Select alpha: true for coloring precision, // alpha: true/false Set the background color to transparent premultipliedAlpha: false ,//? Stencel: false ,//? PreserveDrawingBuffer: true, // preserveDrawingBuffer: true/false whether to save the drawing buffer maxLights: 1 // maxLights: Maximum number of lights }); // specify the height and width of the renderer (consistent with the size of the canvas) renderer. setSize (width, height); // append the canvas element to the canvas3d element. Document. getElementById ('canvas3d '). appendChild (renderer. domElement); // set the canvas background color (clearColor) and background color transparency (clearAlpha) renderer. setClearColor (0x000000, 0.5 );}

This is the js Code for setting the Renderer in the previous article. The process is as follows:

1. Declare the Renderer objectWe use new THREE. WebGLRenderer () to create a new WebGL Renderer.

Some parameters in WebGLRenderer () can be set. The following parameters are from the official documentation:

Antialias:

Value: true/false

Meaning: whether to enable anti-aliasing. Set it to true to enable anti-aliasing.

Precision:

Value: highp/mediump/lowp

Meaning: Color precision selection.

Alpha:

Value: true/false

Meaning: whether the background color is transparent.

PremultipliedAlpha:

Value: true/false

Meaning :?

Stencel:

Value: true/false

Meaning :?

PreserveDrawingBuffer:

Value: true/false

Meaning: whether to save the drawing buffer. If set to true, you can extract the buffer of the canvas drawing.

MaxLights:

Value: int

Meaning: Maximum number of lights. The maximum number of lights can be added in a scenario.

2. Specify the width and height of the Renderer., We use renderer. setSize (width, height) to set;

 

3. append the generated canvas element to the container element.. The canvas object is obtained using renderer. domElement;

4. Set the canvas background color (clearColor) and background color transparency (clearAlpha), Renderer. setClearColor (clearColor, clearAlpha );

The above are some common settings of the three. js Renderer. You can check the role of various parameters.