"Three.js detailed two" renderer chapter

This article will explain in detail how the renderer (renderer) is set up in Three.js.

The branches of the renderer in the Three.js document are as follows:

Renderers

• Canvasrenderer
• Domrenderer
• Svgrenderer
• Webglrenderer
• Webglrendertarget
• Webglrendertargetcube
• Webglshaders

You can see that Three.js provides a lot of rendering, we choose the webglrenderer of course, but here we will canvasrenderer and webglrenderer two ways to make a comparison.

In the example of the previous article, we can completely put the WebGL renderer:

Renderer=new three. Webglrenderer ();

Replace with the canvas renderer:

Renderer=new three. Canvasrenderer ();

This way, the canvas will be rendered in 2d, and the following is the effect comparison (the former is rendered with Webglrenderer):

It's clear that WebGL is better at rendering, and WebGL rendering maximizes your beautifully crafted scene, and if your device supports it, the renderer has better performance than Canvasrenderer, and conversely, Canvasrenderer has better compatibility.

Turn on the three.js renderer: webglrenderer
　　　　　　　Declares the global variable var renderer; function Initthree () {//Gets the width of the container wide = document.getElementById (' Canvas3d '). clientwidth;//won                Take the wide height of the canvas "canvas3d" = document.getElementById (' Canvas3d '). clientheight;//Get Canvas "canvas3d" high Declares the Renderer object: Webglrenderer renderer=new three. Webglrenderer ({antialias:true,//antialias:true/false Whether anti-aliasing is turned on precision: "HIGHP",//pre CISION:HIGHP/MEDIUMP/LOWP Shading Precision Select whether Alpha:true,//alpha:true/false can set background color transparency Premultipli                    edalpha:false,//?                    stencil:false,//?                    Preservedrawingbuffer:true,//preservedrawingbuffer:true/false whether to save drawing buffer maxlights:1//maxlights: Maximum number of lights                });                Specifies the aspect of the renderer (and the size of the canvas frame) 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 the renderer that we set up in our last article, with the following process:

1. Declare the Renderer object , we use new three. Webglrenderer () to create a new WebGL renderer.

where Webglrenderer () has some parameters that we can set, the following parameters are from the official documentation:

AntiAlias:

Value: True/false

Meaning: If anti-aliasing is turned on, set to true to turn on anti-aliasing.

Precision

Value: HIGHP/MEDIUMP/LOWP

Meaning: Color precision selection.

Alpha

Value: True/false

Meaning: You can set the background color transparency.

Premultipliedalpha:

Value: True/false

Meaning:?

Stencil:

Value: True/false

Meaning:?

Preservedrawingbuffer:

Value: True/false

Meaning: If the drawing buffer is saved, if set to true, the buffer of the canvas drawing can be extracted.

Maxlights:

Value: Numeric int

Meaning: The maximum number of lights that can be added to our scene.

2. Make the height of the renderer , we use Renderer.setsize (width,height) to set;

3. Append the resulting canvas element to the container element . The method of obtaining the canvas object is renderer.domelement;

4. Set the canvas background color (clearcolor) and background color transparency (clearalpha), Renderer.setclearcolor (Clearcolor,clearalpha);

So above is the three.js renderer some of the common settings, we can actually test the role of various parameters.