切換語言為:簡體

Three.js WebGLRenderTarget 離屏渲染

  • 爱糖宝
  • 2024-10-28
  • 2049
  • 0
  • 0

WebGLRenderTarget 是 Three.js 中用於離屏渲染(offscreen rendering)的物件,它允許你將場景渲染到紋理(Texture)而不是直接渲染到螢幕。這對於許多高階效果非常有用,比如後期處理、陰影貼圖、反射或環境對映等。

WebGLRenderTarget 有十四個屬性 四個方法

    WebGLRenderTarget(width : Number, height : Number, options : Object)
    width -renderTarget的寬度. Default is 1.
    height - renderTarget的高度. Default is 1.
    options - (可選)一個儲存著自動生成的目標紋理的紋理引數以及表示是否使用深度快取/模板快取的布林值的物件 以下是一些合法選項:
        wrapS - 預設是ClampToEdgeWrapping.
        wrapT - 預設是ClampToEdgeWrapping.
        magFilter - 預設是LinearFilter.
        minFilter - 預設是LinearFilter.
        generateMipmaps - 預設是false.
        format - 預設是RGBAFormat.
        type - 預設是UnsignedByteType.
        anisotropy - 預設是1. 參見Texture.anisotropy
        colorSpace - 預設是NoColorSpace.
        internalFormat - 預設是 null.
        depthBuffer - 預設是true.
        stencilBuffer - 預設是false.
        resolveDepthBuffer - 預設是true.
        resolveStencilBuffer - 預設是true.
        samples - 預設是0.
        count - default is 1.
    建立一個新WebGLRenderTarget

    // 建立一個 WebGLRenderTarget 物件
    const renderTarget = new THREE.WebGLRenderTarget(512, 512, {
      minFilter: THREE.LinearFilter,
      magFilter: THREE.LinearFilter,
      format: THREE.RGBAFormat,
      type: THREE.UnsignedByteType,
    });
    // 渲染場景到這個渲染目標
    renderer.setRenderTarget(renderTarget);
    renderer.render(scene, camera);
    renderer.setRenderTarget(null); // 恢復到預設的螢幕渲染

    // 使用渲染結果作為材質紋理
    const renderTargetTexture = renderTarget.texture;
    const material = new THREE.MeshBasicMaterial({ map: renderTargetTexture });
    // 將材質應用到幾何體
    const plane = new THREE.PlaneGeometry(5, 5);
    const mesh = new THREE.Mesh(plane, material);
    scene.add(mesh);

屬性

  • isWebGLRenderTarget : Boolean 判斷是webGL目標渲染器

  • width : number 渲染目標寬度

  • height : number 渲染目標高度

  • scissor : Vector4 渲染目標視口內的一個矩形區域,區域之外的片元將會被丟棄

  • scissorTest : Boolean 表明是否啟用了剪裁測試

  • viewport : Vector4 渲染目標的視口

  • texture : Texture 紋理例項儲存這渲染的畫素,用作進一步處理的輸入值

  • textures : Texture 儲存使用 count 選項配置的多個渲染目標的紋理引用的陣列。

  • depthBuffer : Boolean 渲染到深度緩衝區。預設true.

  • stencilBuffer : Boolean 渲染到模板緩衝區。預設為false.

  • resolveDepthBuffer : Boolean 定義渲染到多重取樣渲染目標時是否應解析深度緩衝區。 預設為true。

  • resolveStencilBuffer : Boolean 定義渲染到多重取樣渲染目標時是否應解析模板緩衝區。當 .resolveDepthBuffer 設定為 false 時,此屬性無效。 預設為true。

  • depthTexture : DepthTexture 如果設定,那麼場景的深度將會被渲染到此紋理上。預設為null

  • samples : Number 定義 MSAA 樣本的計數。預設值為 0。

方法

  • setSize ( width : Number, height : Number ) : null 設定渲染目標的大小

  • clone () : WebGLRenderTarget 建立一個渲染目標副本

  • copy ( source : WebGLRenderTarget ) : this 採用傳入的渲染目標的設定

  • dispose () : null 發出一個處理事件

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.