画个球啊(下)——Three.js渲染素描风格场景

工具链：建模软件3dsmax + WebGL三维图形库three.js + 记事本notepad++
外部素材：3张笔触贴图素材
参照文章： 使用 WebGL实现素描效果的渲染
源码： sphere-sketch
在线demo： Sketch-Scene (几何体场景的)

本文非教程，算是学习记录备忘，和对上面参考文章的补充，如果想实践，请两篇文章结合食用。Sphere-Sketch

本文非教程，算是学习记录备忘，和对上面参考文章的补充，如果想实践，请两篇文章结合食用。

序 · 一点废话

对于素描，我从小就是属于爱结构素描那一种，我画明暗素描的结果就是画到最后一团黑，包括自己的手。

对于3dsmax这个建模软件，以前用的过程中总是感觉“不过瘾”，差一些东西，但是差什么，具体也说不上来。

直到现在开始学习图形学后的某一天，在网上找资料时发现了这个【demo】：一个在浏览器打开的素描风格渲染的场景，而且还能够实现用鼠标进行三维交互查看。当时我的感觉只能用“惊呆了”来形容 我其实一直想实现这种功能，但是光靠3dmax是实现不了的。然后这个项目能够结合了编程、3d建模、素描元素三者，可谓是相当fit我了。还记得小时候学素描的第一堂课是画个长方体，然后介绍明暗五调子之类的，本想也画个长方体的场景致个敬的，但是既然这篇文章是下篇，那么我也依然画个球吧。ok，学习从模仿开始，一个新坑就这样挖好了.......

（不知怎么想到了这个2333 ↓↓↓）

画了十几年画，现在我们开始学习智能画画

主要步骤

首先通过3dsmax建立3D模型与贴图，用three.js读取模型显示，并根据光照贴图的信息进行素描笔触的合成(hetching)和模型描边显示，最后添加鼠标交互。大概步骤如下：

一、建模部分。用3dsmax建立一个球体和平面，打好灯光，展好模型UV，然后进行光照贴图的烘焙，最后导出模型。这一步得到的是1个obj格式的模型和1张png格式的贴图。

3dsmax 模型效果（左）与光照贴图（右）

二、编码部分。其中shader代码是关键。

1、初始化网页与3D场景。写个基本的网页和渲染循环，引入three.js库，按照库自带的套路说明，初始化场景、场景摄像机、渲染器、环境光，OBJLoader导入obj模型文件。

2、shader编码--素描笔触。模型文件此时没有材质，建立shader类型的材质作为笔触材质，一般情况下，直接吧3dsmax得到的光照贴图设置给这个材质就行，但我要做素描笔触效果，需要根据原光照贴图的深浅，将不同密度的笔触贴图素材融合在一起(hatching)。这是通过编写材质的shader代码实现的。

笔触贴图素材

笔触效果图

3、前面建立的场景和带笔触材质的模型，最终根据摄像机的角度，输出成一幅带笔触信息图片，而three.js库自带了深度材质和法线材质的，它们能各自生成一张图片，这样就有笔触、深度、法线这3张贴图。参照原文思路，浏览器最终不是直接显示我们建立的这个3D场景，而是我们新建的一个平面片模型，显示的是此模型的贴图内容，内容怎么来？就是通过这3张贴图（缓存中的）合成的。怎么合成？也是通过写这个模型的shader材质的shader代码实现的。区别于前面的材质，这个材质就叫它合成材质吧。

法线效果图

4、shader编码--合成部分。这一步有了法线信息，也可以确定渲染模型的轮廓线了。是在当前点取前后\左右的法线方向分析，具体也见参考文章。平面模型有了材质，然后建立另一台摄像机看向这个平面。区别与前面的场景摄像机，这台摄像机就叫它合成摄像机。

笔记。。。

5、交互部分。添加鼠标交互，处理视角变换到主循环中。

轮廓线

加入交互的最终效果

总结一下

这个网页程序在初始化后进入主循环，循环内做了5件事：

1、处理鼠标交互，更新场景摄像机镜头方位；

2、渲染摄像机镜头的内容，输出深度贴图到缓存；

3、渲染摄像机镜头的内容，输出法线贴图到缓存；

4、渲染摄像机镜头的内容，输出素描笔触贴图到缓存；

5、计算轮廓等，把这3张贴图合成，赋给平面片模型的材质，然后渲染合成摄像机内容输出到屏幕。

注 · 备忘自己看

• 一些shader和three.js的基础概念原博客里面有介绍，这篇文章着重是思路的总述和补充；
• 原博客利用了coffeescript库还有面向对象的设计，我为了理解原理，直接简单粗暴地直接用js实现了；
• 原博客是通过blender建模并导出成JSON文件，我是用的obj格式，场景变成1个obj文件进行导出，整个场景合并为1个模型体，因为没有前后位置关系，所以原文中的depthtexture深度贴图实际上就没有用到，不知是否JSON文件才支持1文件内多个模型体。
• hatch笔触素材图像的大小很重要。。。。原来素材的大小是256*256，我把它扩大到了1024*1024。
• 最终效果要好看，展UV那步时UV的方向尽量分清，影响最后的笔触的方向~~~

那些年 · 最后扯一点点

小时候画的素描 - 2005年前后具体时间忘了

3dsmax建模 - 2010年开始爱捣鼓

（3dsmax自带的石墨风格渲染）

本文方法 - 2018...

无论是用2B铅笔、用现有软件、还是自己编程，画完一幅画还是一件很有成就感的事情的！

本文结束。还有很多地方需要完善，比如素描笔触运用在球体场景效果合适，但是用在后面这个几何集合场景中就显得稀疏了，目前代码的封装性和可扩展性都比较低等等。改进之后，本文随缘更新。