webGL之three.js入门3--材料篇

这几天在看李鹏程翻译的[美]Jos Dirksen的《Three.js开发指南》，看到第八章了，现在来总结一下threejs中材料的相关知识。顺带也看完了上海交大的张雯莉出的《threejs入门指南》，我所学所写都是基于书和threejs官网的一些例子。

这两本书的电子版：链接: http://pan.baidu.com/s/1hrTqJGg 密码: e8ay

---

Threejs r85版的材质解析：

相比之前的版本代码，新版本有所改动，各位同学看书的时候，最好对照着Github上面最新的代码。

LineBasicMaterial：可以用于THREE.Line几何体，从而创建着色的直线。

LineDashedMaterial：类似line基础材质，但可以创建虚线效果。

MeshBasicMaterial（网格基础材质）：为几何体赋予一种简单的颜色，或者显示几何体的线框 。忽略光线的作用，是什么颜色，就直接显示什么颜色，但也由于这种材质忽略了光照的作用，那么它也不会有任何阴影的效果。

MeshDepthMaterial（网格深度材质）：根据网格到相机的距离，该材质决定如何给网格染色 ，根据物体上每一点到摄像机的远近来显示颜色，远的显示黑色，近的显示白色。

MeshNormalMaterial（网格法向材质）：根据物体表面的法向量计算颜色 ,决定光的发射方向、在计算光照、阴影时提供信息、为物体表面上色。法向量所指的方向决定每个面从MeshNormalMaterial材质获取的颜色。在平面上添加表示法向量的箭头：使用THREE.ArrowHelper。

MeshLambertMaterial（网格朗伯材质）：考虑光照的影响，可以创建颜色暗淡，不光亮的物体 。ambient：对环境光的反射能力 ，和AmbientLight光源一起使用。该颜色会与AmbientLight光源的颜色相乘。默认是白色。 emissive：该材质发射的属性。材质的自发光颜色，可以用来表现光源的颜色 。不像是光源，只是一种纯粹的、不受其他光照影响的颜色。默认是黑色。Lambert 材质（MeshLambertMaterial）是符合 Lambert 光照模型的材质。 Lambert 光照模型的主要特点是只考虑漫反射而不考虑镜面反射的效果，因而对于金属、镜子等需要镜面反射效果的物体就不适应，对于其他大部分物体的漫反射效果都是适用的。
Idiffuse = Kd * Id * cos(theta) ，Idiffuse 是漫反射光强， Kd 是物体表面的漫反射属性， Id 是光强， theta 是光的入射角弧度。

MeshPhongMaterial（网格phong式材质=镜面反射材质）：考虑光照的影响，可以创建光亮的物体 。对于金属、镜面的表现尤为适合。 specular：指定该材质的光亮程度及其高光部分的颜色。如果将他设置成跟color属性相同的颜色，将会得到一种更加类似金属的材质。如果设置为灰色，材质将变得更像塑料。 
Ispecular = Ks * Is * (cos(alpha)) ^ n ，Ispecular 是镜面反射的光强， Ks 是材质表面镜面反射系数， Is 是光源强度，alpha 是反射光与视线的夹角， n 是高光指数，越大则高光光斑越小。 shininess 属性控制光照模型中的 n 值。

MeshFaceMaterial（网格面材质）：这是一种容器，可以在该容器中为物体的各个表面上设置不同的颜色 。

ShaderMaterial（着色器材质）：使用自定义的着色器程序，直接控制顶点的放置方式，以及像素的着色方式。个人觉得这个比较复杂，但是应用应该比其他几种都要广泛一点，需要一些webGL的基础。

SpriteMaterial： 粒子材质，适用于粒子系统，用来模拟雪花小雨什么的。

---

3Dmax的几种material
blinn有局部高光，lambert没有。因此，blinn适合做一些有反光的物体，例如玻璃，反光金属等等，lambert做一些不能反光的物体，例如木头、纸，桌子这类不存在高光的物体。 multi-layer（双非圆型高光）：组合了两个 Anisotropic（非圆型高光），每一个反光都可以拥有不同的颜色和角度，适用于表现抛光的表面特殊效果，例如缎纹、丝绸和光芒四射的油漆等（其中roughness为粗糙度，值为0时，与使用Blinn效果一样）。 oren-nayer-Blinn它是Blinn的变种，看起来更柔和，更适合做一些较为粗糙的效果。例如织物和陶器等通常也可以用于模拟布、土坯和人的皮肤等效果。 phong （平滑）：这种类型常用于表现玻璃制品、塑料等非常光滑的表面，它所呈现的反光是柔和的，这一点区别于 blinn（圆形高光）。 strauss （金属）：也用于金属材质，它是metal的简化版，参数较少。但比金属材质做出的金属质感要好，制作的材质比较逼真。但不能调整自发光。 translicent shader（半透明）：专用于表现半透明的物体表面，例如蜡烛、玉饰品、彩绘玻璃等。这是3D MAX5.0新增的类型。参数中：Translucent Color:指定透明色，即穿透物体的散射光颜色。FilterColor设置穿透一个半透明物体的光的颜色。Opacity可以设置浓度的百分比。

---

补充：R69以后，粒子系统中的ParticleBasicMaterial 重命名为PointCloudMaterial，ParticleSystem重命名为PointCloud，貌似删掉了Particle这个组件，粒子系统里面只用Sprite。

再补充一点最近看到的有用的资料和网站，供学习之用。

threejs api doc中文翻译：http://techbrood.com/threejs/docs/，个人觉得可以当做参考手册查阅，总比去看英文api方便一些。

webGL中文网的翻译教程：http://www.hewebgl.com/article/articledir/1，看完了初级教程，我就来看书了。

webGL基础教程：http://www.hiwebgl.com/?p=42，看一点threejs，再看这个教程，就觉得世界都清晰了。或者：http://webgl-lesson.wysaid.org/

如果自己想编辑shader，就得学习GLSL语言：http://blog.csdn.net/racehorse/article/details/6593719。这个大牛的教程很全很厉害。

看完粒子系统可以试着写个太阳系：https://zhuanlan.zhihu.com/p/20796329

几个ThreeJS应用的网站，看看例子：

http://voxeljs.com/

https://3dwarehouse.sketchup.com/index.html

http://techbrood.com/?q=WebGL

ThreeJS的SVG库：d3-ThreeD库还有几个开源的svg库：D3.js(https://d3js.org/和http://d3.decembercafe.org/index.html)和Raphael.js

如果想了解webVR，可以点一下以下教程：

cardBoard：http://blog.csdn.net/tencent_bugly/article/details/52414003

下面是几个相关的网页：

官方API：https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API

https://sketchfab.com/

https://vizor.io/

http://vr.chromeexperiments.com/

https://www.beloola.com/sfgiants

https://www.gomo.se/

http://alteredqualia.com/

https://github.com/D1plo1d

http://www.floorplanner.com/pro

http://exocortex.com/

几个shader网站：

http://glslsandbox.com/

http://www.cambridgeincolour.com/tutorials/gamma-correction.htm

http://www.geeks3d.com/

再就是数据可视化的库：我调研了好几个3D部分做的好的就是echarts和amcharts（free部分），highcharts二维数据可视化做的很炫酷。