# 后處理

后處理一般指一次渲染的最后環(huán)節(jié)，它接受一個相機的渲染結(jié)果，用圖像處理算法對結(jié)果增強來達到一些效果，比如模糊、輝光、漸暈等等。

xr-frame內(nèi)置的后處理系統(tǒng)以相機為基礎(chǔ)，將后處理資源組裝起來，實現(xiàn)最終的效果。

?? 后處理系統(tǒng)在框架內(nèi)部涉及到渲染管線，目前暫時不接受定制，未來視情況開放。

# 后處理資源

單個后處理資源對應后處理中的一個步驟，我們可以用以下幾種方式來創(chuàng)建它：

# 在xml中創(chuàng)建

在XML中創(chuàng)建是最常用的使用方式

<xr-asset-post-process asset-id="blur" type="blur" is-hdr data="radius:10" />

可見我們指定了資源的asset-id、后處理類型type、是否為is-hdr和參數(shù)data。如此一來在資源系統(tǒng)中將會創(chuàng)建一個類型為blur、開啟HDR、參數(shù)為{radius:10}的后處理資源blur。

# 在代碼中創(chuàng)建

當然，如果有需要我們也可以使用代碼創(chuàng)建：

const xrFrameSystem = wx.getXrFrameSystem();

scene.assets.addAsset('post-process', 'vignette', scene.createPostProcess({
  type: 'vignette',
  isHDR: false,
  data: {
    intensity: 0,
    smoothness: 2,
    color: [0 0 0 1]
  }
}));

這里創(chuàng)建了一個類型為vignette的后處理資源。

# 在相機中配置

有了資源，只需要將它們配置給相機便可以開啟后處理效果了：

<xr-camera
  ......
  post-process="blur vignette"
/>

相機元素的post-process屬性接受一個字符串數(shù)組，數(shù)組的每個元素都是后處理資源的id，它們會按照步驟順序執(zhí)行。

# 修改參數(shù)

有時候我們想修改后處理資源的參數(shù)來調(diào)整效果，有兩種方式可以實現(xiàn)：

# 在代碼中修改

一個最常用的方法就是在代碼中拿到資源引用后修改：

const blur = scene.assets.getAssets('post-process', 'blur');
blur.data.radius = 20;

# 使用幀動畫

另一種方法是使用幀動畫，指定某幀的屬性為后處理資源：

{
  "keyframe": {
    "blur": {
      "0": {
        "asset-post-process.assetData.radius": 10
      },
      "100": {
        "asset-post-process.assetData.radius": 64
      }
    }
  },
  "animation": {
    "parent": {
      "keyframe": "blur",
      "duration": 4,
      "ease": "linear",
      "loop": -1
    }
  }
}

# 內(nèi)置后處理資源

目前框架內(nèi)置支持的后處理資源類型和對應效果可見：內(nèi)置后處理資源。