# 渲染系统

渲染系统是xr-fame最重要的系统，它管理并驱动着整个场景的渲染过程。渲染系统的底层设计了一套可定制的RenderGraph来组织整个渲染管线，并且内置了一套简化的ForwardAdd管线作为默认的渲染管线。

RenderGraph的定制会在未来看需求酌情开放给开发者。在内置的管线中，渲染实际的运作是以相机组件Camera驱动的，这点和大部分引擎一致。

在实际的运作中，框架会给相机按照深度排序，之后在每一帧去根据前面所说的可见性与图层以及相机的可视角度与范围，对网格Mesh和灯光Light做剔除，最终利用网格的几何数据Geometry和材质Material进行渲染，而材质又是基于效果Effect实现的。

我们同样内置了一些效果在框架中，最重要的是符合PBR规范的standard材质。其依赖于IBL技术，需要环境高光贴图和漫反射SH系数，而环境组件Env就是来解决这个问题的。它同样还负责了对当前场景的天空盒skybox的定义，配合相机组件的background属性渲染天空盒。

无论是材质还是环境数据，都大量依赖于图像数据，图像数据在框架中一般纹理Texture的形式存在，作为一种特殊的数据，除了普通的2D纹理外，它下面还包括立方体纹理CubeTexture、视频纹理VideoTexture、图集Atlas，同时渲染目标RenderTexture（用于渲染到纹理，比如后处理等效果）也可以作为纹理使用。

在最后，我们还提供了后处理PostProcess，来实现更加丰富的风格化效果。

这些资源的管理和绘制过程中比较重的计算都是在混合方案的底层完成的，实现了高性能的渲染。

# 画布透明配置

有时候我们需要让画布有一定的透明度，来和画布后面的背景混合，

在基础库版本v2.30.4以及以上支持。

要实现画布透明非常简单，一个比较典型的用法如下：

<xr-scene render-system="alpha:true">
  <xr-mesh node-id="cube" geometry="cube" uniforms="u_baseColorFactor:0.298 0.764 0.85 0.5" states="alphaMode:BLEND" />
  <xr-camera
    id="camera" node-id="cube" position="0 2 2"
    clear-color="0 0 0 0" target="target"
  />
</xr-scene>

这段代码中我们开启了render-system的alpha属性，并且将xr-camera元素上的clear-color的透明通道设置了一个非零的值，还开启了xr-mesh的BLEND混合和设置了baseColor的透明通道。