Renderer渲染器

彩現（英語：Render）在電腦繪圖中，是指：用軟體從模型生成圖像的過程。模型是用語言或者資料結構進行嚴格定義的三維物體或虛擬場景的描述，它包括幾何、視點、紋理、照明和陰影等信息。圖像是數字圖像或者位圖圖像。彩現用於描述：計算視頻編輯軟體中的效果，以生成最終視頻的輸出過程。

為了呈現我們想要的效果，我們需要藉由渲染器將3D物件映射至2D平面，而在Three.js中有兩種渲染器可以選擇：

1. CanvasRenderer
2. WebGLRenderer

CanvasRenderer

Canvas renderer使用Canvas 2D Context API來顯示你的場景。 可以在一般場景時作為WebGLRenderer後備的渲染器。

function webglAvailable() {
    try {
        var canvas = document.createElement( 'canvas' );
        return !!( window.WebGLRenderingContext && (
            canvas.getContext( 'webgl' ) ||
            canvas.getContext( 'experimental-webgl' ) )
        );
    } catch ( e ) {
        return false;
    }
}

if ( webglAvailable() ) {
    renderer = new THREE.WebGLRenderer();
} else {
    renderer = new THREE.CanvasRenderer();
}

Note: WebGLRenderer與CanvasRenderer皆是以<canvas>標籤嵌在HTML5網頁上的。在CanvasRenderer中的Canvas僅表示他是使用Canvas 2D而非WebGL。

WebGLRenderer

WebGLRenderer是以WebGL顯示你的場景，當然，前題是你的裝置支援WebGL。而這個渲染器的效能將優於CanvasRenderer。

渲染器的加入、使用方式

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );//設定大小
renderer.setClearColor( 0xff0000 );//設定畫布背景顏色
document.body.appendChild( renderer.domElement );//將畫布加入body
renderer.render( scene, camera );//將攝影機畫面渲染

建立好renderer物件後我們以setSize()來改變畫布的大小， 而上式中domElement代表的是你所渲染輸出的畫布，在物件建構時就會自動產生，在這裡我們把它加到body上， 最後以render()函式就可以藉由攝影機將場景展現出來。

參考資料

https://zh.wikipedia.org/wiki/%E5%BD%A9%E7%8F%BE http://threejs.org/docs/index.html#Reference/Renderers/CanvasRenderer http://threejs.org/docs/index.html#Reference/Renderers/WebGLRenderer