向量到墨水：从绘画视角解析三维模型的漫画风格渲染技术

1. 从向量到墨水：三维渲二维之动漫风格渲染黄河清（改青）

2. 从向量到墨水：三维渲二维之动漫风格渲染 3D Render as 2D Cel Style. 阿里云计算有限公司改青 Source Model: Dragon Ball, BANDAI

3. 原神 Mihoyo CEL 动漫风格 Dragon Ball FighterZ, Arc System Works

4. Source: Detective Konan, TMS Entertainment 胶片图层 Celluloid Film Composition Source: Dragon Ball, Toei Animation

5. Source: Evangelion, GAINAX

6. 3Ds MAX 节点式渲染管线开发

7. Source: Arc System Works

8. 分析动漫风格的的绘画特点了解绘画语言转变到渲染的挑战具体实现技术细节分解 Source: Castle in The Sky, Ghibli Studio

9. 1300s～1600s 文艺复兴艺术的世俗化 1860s 工艺美术运动工业革命前夕 1890s 新艺术运动现代设计兴起 1950s 波普（POP）艺术当代美国文化兴起

10. Clamp Hikkikomori DC

11. 线成稿色块

12. 并不存在于现实中的线 1. 我们“看到”的线并不在那里，是大脑与生俱来的对实物的提炼。 2. 通过线表现形体是高级的绘画方式，它不能是机械的，要通过穿插、粗细、虚实变化体现空间感。漫画风格的线渲染难度在于，不仅要渲染出不存在的东西，而且还要渲染得有灵魂。

13. 线出现在哪些地方？

14.

15. “ ”

16. 量化判断条件由色相(Hue)、对比度(Contrast)、饱和度(Saturation)差值产生由深度(Depth)变化的不连续性产生由视线与物体边缘相切程度(Tangency)产生

17. 技术实现 Implementation

18. 由色相(Hue)、对比度(Contrast)、饱和度(Saturation)差值产生

19.

20. 由深度(Depth)变化的不连续性产生什么是深度（景深）？深度是如何产生的产生？

21.

22. 什么是深度数据？ 0.0 - 深 1.0 - 浅

23. 深度图像 Demo Time: Depth Map

24. 单通道渲染管线 (Single Pass Render Pipeline) 点着色器 Vertex Shader Scene Information Black 片着色器 Box Fragment Shader Render Result

25.

26. 1x 识别半径至 2x 识别半径至关联深度与线的粗细 Build the relation between depth and line weight 优化图原图

27.

28. 外边缘线 Demo Time: Outline

29. 修改后的渲染管线 (Modified Render Pipeline) Scene Information 点着色器片着色器 Vertex Shader Fragment Shader New+ Render Result

30. 多通道渲染管线 (Multi Pass Render Pipeline) Scene Information 渲染通道 Render Pass 后期通道 Post Processing Shader Pass Render Result

31. 由视线与物体相切程度(Tangency)产生

32.

33.

34. 法向量可视化 Normal Visualization

35. 细节线 Demo Time: Inner Details

36. 根据不同点积值来区分Cel分区比如： v <= 0.01 边缘线 v <= 0.1 暗部 v <= 0.15 次暗部 v <= 0.25 固有色 v >= 0.95 高光 ….

37. 光源主导的分区着色 CEL Lighting Cascading

38. 完整Demo Shader沙箱APP开源地址： https://github.com/Rubinhuang9239/shader-test-manga

39. Source: GuyDownes

40. 感谢聆听！ Thanks！