docs: add advanced shader docs

docs/zh/graphics/shader/builtins/eye.mdx

@@ -0,0 +1,54 @@
+---
+title: 眼睛着色器
+---
+
+眼睛着色器为眼球模型提供真实的渲染，使你的创作呈现逼真的艺术效果。
+
+<img src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*VVUtRL4JfE0AAAAAAAAAAAAADgDwAQ/original"  />
+
+<Callout type="info">
+该着色器与模型uv强关联，如果需要从头开始构建眼睛，不建议使用此着色器，对于无着色器代码开发经验的人，建议使用官方示例中的眼球几何模型，只需替换必要的纹理满足你的需求，如需创建自己的eye shader变体，请参阅[shader lab开发教程](/docs/graphics-shader-lab)文档。
+</Callout>
+
+## 导入眼睛示例
+
+Galacean内置了眼球材质示例进一步帮助你入门。要查看此示例，请[点击](https://galacean.antgroup.com/editor/projects)。
+
+1. 在Galacean编辑器中导航到编辑器首页。
+2. 选择 **Templates** 面板，导航到模板界面，预览并且下载眼球示例到 **Project**。
+
+## 眼球剖析
+
+在开始渲染眼睛前，熟悉眼球的生物结构以便更好的使用着色器。
+
+|       参数       |                        描述                        |
+| :--------------: | :------------------------------------------------: |
+|  Sclera（巩膜）  |      巩膜是眼球外层的不透明膜，通常叫做“眼白”      |
+| Limbus（角膜缘） |      又称角巩膜缘，是角膜和巩膜（眼白）的边界      |
+|   Iris（虹膜）   |       虹膜是瞳孔中心周围的一圈颜色，呈中空环       |
+|  Pupil（瞳孔）   | 是眼球中心的黑色部分，可让光线进入眼睛并到达视网膜 |
+|  Cornea（角膜）  |           角膜是位于眼球最前端的透明部分           |
+
+## 眼睛纹理
+
+|                             纹理                             |         参数          | 描述                                                         |
+| :----------------------------------------------------------: | :-------------------: | :----------------------------------------------------------- |
+| <img src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*74fgRYw9nS4AAAAAAAAAAAAADgDwAQ/original"  /> |    Sclera Texture     | 指定控制巩膜（眼白）颜色的纹理，以及眼周的血管颜色，如果你希望眼球充满血丝，则需要修改此纹理 |
+| <img src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*Nc_XTpVNlFAAAAAAAAAAAAAADgDwAQ/original"  /> |     Iris Texture      | 控制虹膜颜色的纹理                                           |
+| <img src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*jkZ5QoeXyWUAAAAAAAAAAAAADgDwAQ/original"  /> |  Iris Normal Texture  | 指定纹理来控制眼睛虹膜的法线，决定眼睛虹膜表面的光线流动     |
+| <img src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*B8McQpjhh98AAAAAAAAAAAAADgDwAQ/original"  /> | cornea normal Texture | 指定纹理来控制巩膜的法线，提供巩膜（眼白）的细小纹路变化     |
+| <img src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*c_zmQ5DwI1wAAAAAAAAAAAAADgDwAQ/original" /> |      sclera mask      | 指定一张遮罩纹理控制巩膜/虹膜/角膜缘/瞳孔的大小，R通道控制虹膜区域，G通道控制角膜缘区域，B通道控制瞳孔缩放区域 |
+
+## 材质属性
+
+|        参数        |               描述               |
+| :----------------: | :------------------------------: |
+|    Sclera Color    |           巩膜纹理颜色           |
+|    Sclera Size     |            巩膜uv大小            |
+|  Sclera Specular   |        巩膜（眼白）金属度        |
+|  Sclera Roughness  |        巩膜（眼白）粗糙度        |
+|   Pupil Dilation   | 瞳孔大小，可调节xy方向的瞳孔大小 |
+| Limbal Ring Amount |           角膜缘的强度           |
+|   Parallax Layer   |             视差深度             |
+|     Iris Color     |             虹膜颜色             |
+|   Eye Iris Size    |             虹膜大小             |

docs/zh/graphics/shader/builtins/hair.mdx

@@ -0,0 +1,31 @@
+---
+title: 头发着色器
+---
+
+头发着色基于着色模型kajiya-Kay，近似的模拟了发丝表面双层各向异性高光，在头发渲染中俗称“天使环”。
+
+<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*k7t9RbgNMOIAAAAAAAAAAAAADgDwAQ/original"   />
+
+## 导入示例
+
+Galacean为你提供了头发示例进一步帮助你入门，要查找此示例，请[点击](https://galacean.antgroup.com/editor/projects)。
+
+1. 在Galacean编辑器中导航到编辑器首页。
+2. 选择 **Templates** 面板，导航到模板界面，预览并且下载头发示例到 **Project**。
+
+## 双层高光
+<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*IZrjTY7JbfkAAAAAAAAAAAAADgDwAQ/original"   />
+
+## 材质属性
+
+|        参数        |        描述        |
+| :----------------: | :----------------: |
+|   HairFirstWidth   | 调整头发第一层“天使环高光”宽度|
+|  HairSecondWidth   | 调整头发第二层“天使环高光”宽度 |
+| HairFirstStrength  | 头发第一层高光强度，例如你需要调节更强的高光效果，可以将数值提高 |
+| HairSecondStrength | 头发第二层高光强度，例如你需要调节更强的高光效果，可以将数值提高 |
+|  HairFirstOffest   | 头发第一层高光偏移，如果你想调整高光的位置，可以修改此值 |
+|  HairSecondOffest  | 头发第二层高光偏移，如果你想调整高光的位置，可以修改此值 |
+|   HairFirstColor   | 头发第一层高光颜色 |
+|  HairSecondColor   | 头发第二层高光颜色 |
+|                    |                    |

docs/zh/graphics/shader/builtins/skin.mdx

@@ -0,0 +1,31 @@
+---
+title: 皮肤着色器
+---
+
+皮肤采用Spherical Gaussial模型，可以灵活的自定义不同的Diffusion Profile(扩散剖面)，模拟人类皮肤或者普通的次表面散射效果。
+
+<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*ynWiSp_2n90AAAAAAAAAAAAADgDwAQ/original"   />
+
+## 导入示例
+
+Galacean为你提供了皮肤示例进一步帮助你入门，要查找此示例，请[点击](https://galacean.antgroup.com/editor/projects)。
+
+1. 在Galacean编辑器中导航到编辑器首页。
+2. 选择 **Templates** 面板，导航到模板界面，预览并且下载皮肤示例到 **Project**。
+
+## 材质属性
+
+|       参数       |           描述           |
+| :--------------: | :----------------------: |
+|     SSSColor     |     调节皮肤散射颜色     |
+| CurvatureTexture | 曲率贴图，控制散射的区域 |
+|  CurvaturePower  | 曲率的强度，最佳范围介于0-1之间  |
+
+## 细节展示
+下面的演示比较PBR和皮肤材质的不同。
+<Comparison
+  leftSrc="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*NLyOR71_nj4AAAAAAAAAAAAADgDwAQ/original"
+  leftText="PBR"
+  rightSrc="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*xfl_Ra0oj0AAAAAAAAAAAAAADgDwAQ/original"
+  rightText="SSS"
+/>

docs/zh/graphics/shader/builtins/thin.mdx

@@ -0,0 +1,36 @@
+---
+title: 薄膜干涉着色器
+---
+
+薄膜干涉着色器是指某些表面随着视角或照明角度的变化而逐渐改变颜色的现象，是由微结构或薄膜中光波的干涉引起的，常用于肥皂泡、羽毛、蝴蝶翅膀和贝壳珍珠层等矿物表层。
+
+<Image src="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*taABSY4nUcEAAAAAAAAAAAAADgDwAQ/original"   />
+
+<Callout type="info">
+对于薄膜干涉材质，颜色取决于光的入射角，光的照射能带来很好的颜色渐变，但如果你的模型是low-poly，那么将无法获得很好的颜色渐变，因为每个面都会以不同的角度反射光线。
+</Callout>
+
+
+## 导入示例
+
+Galacean为你提供了薄膜干涉示例进一步帮助你入门，要查找此示例，请[点击](https://galacean.antgroup.com/editor/projects)。
+
+1. 在Galacean编辑器中导航到编辑器首页。
+2. 选择 **Templates** 面板，导航到模板界面，预览并且下载薄膜干涉示例到 **Project**。
+
+## 材质属性
+
+|         参数          |                             描述                             |
+| :-------------------: | :----------------------------------------------------------: |
+|    iridescent ior     | 该折射率值决定了光线的弯曲程度，对于薄膜干涉而言，它影响所得光线的颜色 |
+|      iridescence      |      控制虹彩颜色强度，1对应最高强度，0将只有PBR效果       |
+| iridescence Thickness |         用于控制虹彩厚度，决定了最终薄膜干涉的层数         |
+
+## 细节展示
+下面的演示比较了PBR属性一样的情况下，仅调节iridescent ior有何不同。
+<Comparison
+  leftSrc="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*opDFQY6Cu1EAAAAAAAAAAAAADgDwAQ/original"
+  leftText="iridescent ior: 1.0"
+  rightSrc="https://mdn.alipayobjects.com/huamei_9ahbho/afts/img/A*bfIhRIAinRIAAAAAAAAAAAAADgDwAQ/original"
+  rightText="iridescent ior: 1.6"
+/>