"Three.js detailed two" renderer chapter

Source: Internet
Author: User
Tags set background

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.