diff --git a/README.md b/README.md
index 0eb69bf..548a365 100644
--- a/README.md
+++ b/README.md
@@ -21,10 +21,11 @@
 - ⚙️We hope GuiLite is small enough to help you understand how UI works.
 - 👑You should be the master of your UI and not be tied to a specific framework.
 
-## 🔥New feature：3D
-![Hello3D-pc](doc/Hello3D-pc.gif)![Hello3D-mcu](doc/Hello3D-mcu.gif)
-
-Hello 3D has only [100+ lines code](https://github.com/idea4good/GuiLiteSamples/blob/master/Hello3D/UIcode/UIcode.cpp) for beginner, showing you how to build pseudo 3D App with GuiLite. You can run it on Windows, Linux and MCU.
+## 🔥New feature：3D tutorial
+![GuiLiteGraphic](doc/GuiLiteGraphic.gif)
+- This a 3D programm which used to show how GuiLite multi-layers work.
+- [Full video](https://www.youtube.com/watch?v=QzZJnU5KmDQ)
+- [Source code](https://github.com/idea4good/GuiLiteWeb/blob/master/Graphic/main.js)
 
 ## Features
 ### Cross platform
diff --git a/README_zh.md b/README_zh.md
index f02cc0a..1d287c6 100644
--- a/README_zh.md
+++ b/README_zh.md
@@ -20,10 +20,11 @@
 - ⚙️希望GuiLite小到足够帮助大家掌握UI工作原理，从而摆脱UI框架的束缚，构建自己独一无二的UI
 - 👑任何UI框架都不为你我而生，你才是自己真正的主人
 
-## 🔥新功能：3D
-![Hello3D-pc](doc/Hello3D-pc.gif)![Hello3D-mcu](doc/Hello3D-mcu.gif)
-
-Hello 3D 仅有[100多行代码](https://gitee.com/idea4good/GuiLiteSamples/blob/master/Hello3D/UIcode/UIcode.cpp)，用于向初学者展示：如何使用GuiLite模拟3D物理过程。该实例可支持Windows，Linux及单片机平台。
+## 🔥新功能：3D教程
+![GuiLiteGraphic](doc/GuiLiteGraphic.gif)
+- 通过3D程序，解释GuiLite滑动，及多层叠加原理
+- [完整视频](https://v.youku.com/v_show/id_XNDI4ODE1ODcwOA)
+- [Source code](https://github.com/idea4good/GuiLiteWeb/blob/master/Graphic/main.js)
 
 ## 功能介绍
 ### 卓越的跨平台能力
diff --git a/doc/GuiLiteGraphic.gif b/doc/GuiLiteGraphic.gif
new file mode 100644
index 0000000..4613b2c
Binary files /dev/null and b/doc/GuiLiteGraphic.gif differ
diff --git a/doc/Hello3D-mcu.gif b/doc/Hello3D-mcu.gif
deleted file mode 100644
index b6dfa8a..0000000
Binary files a/doc/Hello3D-mcu.gif and /dev/null differ
diff --git a/doc/Hello3D-pc.gif b/doc/Hello3D-pc.gif
deleted file mode 100644
index a65e0db..0000000
Binary files a/doc/Hello3D-pc.gif and /dev/null differ
diff --git a/doc/HowToWork-cn.md b/doc/HowToWork-cn.md
index 37af153..98b575a 100644
--- a/doc/HowToWork-cn.md
+++ b/doc/HowToWork-cn.md
@@ -62,17 +62,10 @@ widgets:
 为了发挥GPU的加速功能，也可以通过改写draw_xxx/fill_xxx函数，使用GPU特性，来提升绘制效率。
 
 ### 图层管理
-GuiLite的所有图层，如下图所示：
-![Graphic layer](GraphicLayer.png)
-
-display层：
-该层对应了物理显存，display层决定了一个显示终端的最终显示效果；通常系统中至少有一个display层。
-
-surface层：
-该层属于display层的一个部分；它为左右滑动而存在，每一张滑动页面均对应了一个surface层；surface层决定了一个滑动页面的最终显示效果；通常1个display层会对应多个surface层。
-
-frame层:
-该层属于surface层的一个部分；它现实叠加界面元素而存在。
+![Graphic layer](GraphicLayer.png)![GuiLiteGraphic](GuiLiteGraphic.gif)
+- display层：该层对应了物理显存，display层决定了一个显示终端的最终显示效果；通常系统中至少有一个display层。
+- surface层：该层属于display层的一个部分；它为左右滑动而存在，每一张滑动页面均对应了一个surface层；surface层决定了一个滑动页面的最终显示效果；通常1个display层会对应多个surface层。
+- frame层：该层属于surface层的一个部分；它现实叠加界面元素而存在。
 
 ## 文件注释
 | core 重要程度/文件名称 | 代码简介 | 推荐学习时间 |
diff --git a/doc/HowToWork.md b/doc/HowToWork.md
index 59a1f61..81dfdcc 100644
--- a/doc/HowToWork.md
+++ b/doc/HowToWork.md
@@ -63,7 +63,7 @@ Rendering include rendering method and graphic management.
 - For take GPU advantage, you can refactor draw_xxx() by using GPU feature
 
 ### Graphic layer
-![Graphic layer](GraphicLayer.png)
+![Graphic layer](GraphicLayer.png)![GuiLiteGraphic](GuiLiteGraphic.gif)
 - display layer：This layer for physical display device, one UI has only one display layer
 - surface layer: One display layer have many surface layers, one surface layer represent one flip page
 - frame layer: One surface layer has many frame layers, one frame layer represent one layer in Z direction