前言:什么是渲染目标?(详见:RenderTarget-渲染目标)
 在3D计算机图形领域,渲染目标是现代图形处理单元(GPU)的一个特征,它允许将3D场景渲染到中间存储缓冲区或渲染目标纹理(RTT),而不是帧缓冲区或后缓冲区。然后可以通过像素着色器操纵此RTT ,以便在显示最终图像之前将其他效果应用于最终图像。————来自维基百科
渲染目标就是一个缓冲区,(除了back frame buffer 和screen frame buffer之外的缓冲区)用来记录渲染后的输出的结果,而不直接将帧缓冲绘制到屏幕。而是将其应用到别处。
离屏渲染,就可以通过渲染目标实现的。
1.资源加载
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-material asset-id="standard-mat" effect="standard" />
    <xr-asset-load type="gltf" asset-id="miku" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/miku.glb" />
    <xr-asset-render-texture asset-id="rt" width="2048" height="1024" />
  </xr-assets> 
注:定义一个资源:xr-asset-render-texture,属性需要id和高宽(详见:渲染目标)
<xr-asset-render-texture asset-id="rt" width="2048" height="1024" /> 
2.添加物体
<xr-node >
    <xr-mesh id="cube" node-id="mesh-cube" position="-1 0.5 1.5" scale="1 1 1" rotation="0 45 0" geometry="cube" material="standard-mat" uniforms="u_baseColorFactor:0.298 0.764 0.85 1" />
    <xr-gltf model="miku"  position="0 1 0" scale="0.08 0.08 0.08"  rotation="0 180 0"    anim-autoplay />
  </xr-node> 
3.添加相机
  <xr-camera
    position="0 1 6" clear-color="0.925 0.925 0.925 1"
    target="rt-camera-target" render-target="rt" 
  />
  <xr-camera
    position="0 6 6" clear-color="0.925 0.925 0.925 1"
    target="mesh-plane"  camera-orbit-control=""
  ></xr-camera> 
4.添加灯光
  <xr-node node-id="lights">
    <xr-light type="ambient" color="1 1 1" intensity="1" />
    <xr-light type="directional" rotation="40 170 0" color="1 1 1" intensity="3" />
  </xr-node> 
整体代码以及效果:(部分代码来源于:微信开放文档)
1.wxml部分:
<xr-scene id="xr-scene" bind:ready="handleReady">
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-material asset-id="standard-mat" effect="standard" />
    <xr-asset-load type="gltf" asset-id="miku" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/miku.glb" />
    <xr-asset-render-texture asset-id="rt" width="2048" height="1024" />
  </xr-assets>
  <xr-node >
    <xr-mesh id="cube" node-id="mesh-cube" position="-1 0.5 1.5" scale="1 1 1" rotation="0 45 0" geometry="cube" material="standard-mat" uniforms="u_baseColorFactor:0.298 0.764 0.85 1" />
    <xr-gltf model="miku"  position="0 1 0" scale="0.08 0.08 0.08"  rotation="0 180 0"    anim-autoplay />
  </xr-node>
  <xr-node >
    <xr-mesh node-id="mesh-plane" position="0 0 -6" rotation="-90 0 0" scale="16 1 12" geometry="plane" material="standard-mat"
    uniforms="u_baseColorMap:render-rt" states="cullOn:false" />
  </xr-node>
  <xr-node node-id="rt-camera-target" position="0 1 0"></xr-node>
  <xr-camera
    position="0 1 6" clear-color="0.925 0.925 0.925 1"
    target="rt-camera-target" render-target="rt" 
  />
  <xr-camera
    position="0 6 6" clear-color="0.925 0.925 0.925 1"
    target="mesh-plane"  camera-orbit-control=""
  ></xr-camera>
  <xr-node node-id="lights">
    <xr-light type="ambient" color="1 1 1" intensity="1" />
    <xr-light type="directional" rotation="40 170 0" color="1 1 1" intensity="3" />
  </xr-node>
</xr-scene> 
- js部分  
Component({ data: { loaded: false }, lifetimes: {}, methods: { handleReady({detail}) { const xrScene = this.scene = detail.value; console.log('xr-scene', xrScene); }, handleAssetsProgress: function({detail}) { console.log('assets progress', detail.value); }, handleAssetsLoaded: function({detail}) { console.log('assets loaded', detail.value); this.setData({loaded: true}); } } }) - 效果:
 



















