WebGLRenderTarget(離屏渲染)

WebGLRenderTarget(離屏渲染)

WebGL渲染目標對象WebGLRenderTarget實現了WebGL的離屏渲染功能，若是你有必定的WebGL或OpenGL基礎，對幀緩衝區、離線渲染、後處理等概念應該是不陌生的。

我的WebGL/Three.js技術博客

.render()方法

WebGL渲染器WebGLRenderer渲染方法.render()的參數( Scene, Camera, WebGLRenderTarget, forceClear ).

• Scene:要渲染的場景對象
• Camera:場景對象對應的相機對象
• WebGLRenderTarget:若是參數指定了WebGL渲染目標WebGLRenderTarget，渲染的圖像結果保存到該對象，或者說保存到GPU自定義幀緩衝區中，不會顯示到canvas畫布上； 若是沒有指定渲染目標，也就是沒有該參數，渲染結果會直接顯示到canvas畫布上，或者說渲染結果保存到canvas畫布對應的默認幀緩衝區中.

無渲染目標(Canvas顯示)

執行下面代碼會把場景scene的渲染結果保存到canvas畫布對應的默認幀緩衝區中，形象點說就是能夠直接顯示到Cnavas畫布上，顯示器會自動讀取CPU默認幀緩衝區上面的圖像數據顯示。

renderer.render(scene, camera);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
// 渲染結果canvas元素插入到body元素中
document.body.appendChild(renderer.domElement);
// .domElement屬性返回的一個canvas畫布對象，保存了render方法的渲染結果
console.log(renderer.domElement);

有渲染目標(Canvas不顯示)

執行下面代碼WebGL渲染器的渲染結果，也就是一張圖像，不會直接顯示在Canvas畫布上，從Three.js的角度闡述，渲染結果的RGBA像素數據存儲到了WebGL渲染目標對象WebGLRenderTarget中，經過目標對象的紋理屬性.texture能夠得到渲染結果的RGBA像素數據，也就是一個Three.js的紋理對象THREE.Texture，能夠做爲材質對象顏色貼圖屬性map的屬性值；從原生WebGL的角度闡述，就是渲染結果的RGBA像素值存儲到了GPU一個自定義的幀緩衝區中，屏幕默認不會直接讀取該緩衝區中的像素數據，經過WebGL的特定API能夠獲取，更多的信息能夠百度WebGL或OpenGL離屏渲染。

// 建立一個WebGL渲染目標對象WebGLRenderTarget
// 設置渲染結果(一幀圖像)的像素爲500x500
var target = new THREE.WebGLRenderTarget(500, 500);
// 設置特定target的時候，render渲染結果不會顯示在canvas畫布上
renderer.render(scene, camera,target); //執行渲染操做

.texture

經過WebGL渲染目標WebGLRenderTarget的紋理屬性.texture能夠得到WebGL渲染器的渲染結果，該屬性返回的結果是一個紋理對象THREE.Texture，能夠做爲材質Material對象顏色貼圖屬性map的屬性。

var material = new THREE.MeshLambertMaterial({
  // WebGL渲染目標對象屬性.texture返回一張紋理貼圖，也就是scene在camera下的渲染結果
  map: target.texture,
});

WebGLRenderTarget實現灰度圖後處理功能

這節課主要內容是把WebGL渲染目標對象WebGLRenderTarget和自定義着色器材質對象ShaderMaterial結合實現後處理功能。

灰度計算後處理

場景Scene對象的渲染結果保存到渲染目標對象target中

var target = new THREE.WebGLRenderTarget(500, 500);

renderer.render(scene, camera,target);

target.texture從渲染目標對象target得到渲染結果，而後經過ShaderMaterial對象把渲染結果傳值給片元着色器中uniform定義的變量texture，而後進行灰度計算後處理。

// 自定義頂點着色器對象
var material2 = new THREE.ShaderMaterial({
  uniforms: {
    // texture對應頂點着色器中uniform聲明的texture變量
    texture: {
      // WebGL渲染目標對象屬性.texture返回一張紋理貼圖
      value: target.texture
    },
  },
  // 頂點着色器
  vertexShader: document.getElementById('vertexShader').textContent,
  // 片元着色器
  fragmentShader: document.getElementById('fragmentShader').textContent,
});

材質對象material2是場景2中一個網格模型的紋理貼圖，經過render渲染方法把後處理灰度效果顯示出來

renderer.render(scene2, camera2);

建立多個WebGL渲染目標對象

能夠建立多個WebGL渲染目標對象分別保存一個WebGL渲染器的渲染結果，知足一個應用須要在GPU上臨時保存多個後處理效果，而不顯示在Canvas畫布上。

// 建立一個WebGL渲染目標對象target0，像素500X500
var target0 = new THREE.WebGLRenderTarget(500, 500);

// 建立一個WebGL渲染目標對象target1，像素300X500
var target1 = new THREE.WebGLRenderTarget(500, 500);