# 渲染系统

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

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

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

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

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

在最后，我们还提供了后处理[PostProcess](post-process)，来实现更加丰富的风格化效果。

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

## 画布透明配置

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

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

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

```xml
<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`的透明通道。