原文链接: http://www.jianshu.com/p/936752aff5a3

说明

本系列文章是对<3D iOS Games by Tutorials>一书的学习记录和部分翻译,此书对应的代码地址:https://github.com/XanderXu/3D-iOS-Games-by-Tutorials-code

系列文章

1.Hello SceneKit http://www.jianshu.com/p/fd32aa0d896a
2.physics物理效果 http://www.jianshu.com/p/d11befb651c2
3.Render Loop渲染循环 http://www.jianshu.com/p/4f6a8c878465
4.Particle Systems粒子系统 http://www.jianshu.com/p/4d21dca40c7d
5.3D空间的触摸事件 http://www.jianshu.com/p/6328c8d68409
6.Scene Editor场景编辑器 http://www.jianshu.com/p/2058ce941b08
7.Cameras相机 http://www.jianshu.com/p/3d7cc97c47bc
8.Lights灯光 http://www.jianshu.com/p/c18a7f082f49
9.Basic Collision Detection碰撞检测基础 http://www.jianshu.com/p/8e2691143970
10.Materials材质 http://www.jianshu.com/p/936752aff5a3
11.Reference Nodes引用节点 http://www.jianshu.com/p/d5e909c1a54d
12.Shadows阴影 http://www.jianshu.com/p/fb5f2cdb7f9c
13.Intermediate Collision Detection碰撞检测中级 http://www.jianshu.com/p/c7b2e1dd3c91
14.Motion Control运动控制 http://www.jianshu.com/p/046a7c5781b8
15.Transitions转场 http://www.jianshu.com/p/f2c482282e18
16.Actions动作 http://www.jianshu.com/p/ec72ec1a0e4b
17.Audio音频 http://www.jianshu.com/p/49767d2d59b3

最终的实时渲染效果图


QQ20170409-001805@2x.png

Lighting models(照明模型)


QQ20170409-001823@2x.png
  • Constant:使用一个扁平的照明模型,在计算渲染像素的颜色时,只包含ambient信息.
  • Lambert:在计算渲染像素的颜色时,只包含ambient信息和diffuse信息.
  • Blinn:在计算渲染像素的颜色时,只包含ambient信息,diffuse信息,specular信息,而且specular高光区是用Blinn-Phong法则计算的.
  • Phong:在计算渲染像素的颜色时,只包含ambient信息,diffuse信息,specular信息,而且specular高光区是用Phong法则计算的.

Materials(材质)

一般也就是textures(纹理).
纹理实际是2D图片按照几何体内部的纹理坐标系展开,包裹在3D几何体表面.所有Scene Kit内部自带的初始形状已经包含了这个坐标信息.

  • Diffuse map(颜色贴图,漫反射贴图):给几何体一个基本的颜色纹理,不考虑灯光和特效:


    QQ20170409-111646@2x.png
  • Normal map(法线贴图):在上篇文章的灯光里讲过,灯光是使用形状表面的法向量来决定照亮哪个面的.系统自带形状是使用单一的整个面的向量,而法线贴图则以RGB值定义了精确到每个像素的法向量,这样每个像素对灯光的反应都不同,形成表面崎岖不平的灯光效果.


    QQ20170409-111705@2x.png

    QQ20170409-111814@2x.png
  • Reflective map(反射贴图):以黑白图片精确定义了材质每个像素的反光程度.就是周围环境的光线在物体表面映射出的图像(实际就是天空盒子图像在物体表面的反光).


    QQ20170409-111848@2x.png

    QQ20170409-111903@2x.png

需要注意的是
反射贴图和前面两个贴法不同,不是直接拉伸包裹在几何体上面的,而是用cube mapping(立方体贴图)来完成的.想像一个立方体,六个面的纹理并排水平放置,就形成了立方体贴图:


QQ20170409-111833@2x.png

QQ20170409-114742@2x.png
  • Occlusion map(闭塞贴图):也就是ambient occlusion map(AO贴图,环境光闭塞贴图),只有当场景中有ambient light环境光时才有作用,精确定义了每个像素在环境光作用下的被照亮程度.也就是让几何体的黑色部分不被环境光照亮而变浅.

QQ20170409-111917@2x.png

QQ20170409-111930@2x.png
  • Specular map(镜面贴图,高光贴图):镜面贴图决定了几何体的镜面程度,黑色部分就是不光滑,白色就是光滑反光.会影响Normal map(法线贴图)外部光线照射反光和Reflective map(反射贴图)外部天空盒子图像反光的清晰程度


    QQ20170409-111949@2x.png

    QQ20170409-112002@2x.png
  • Emission map(发光贴图):在没有光线时,如果物体表面有荧光涂料,就会发光.发光贴图可以用来模拟这种物体.彩色贴图中,黑色不发光,亮色发光强,暗色发光弱.


    QQ20170409-112012@2x.png

    QQ20170409-112024@2x.png


    需要注意的是
    在Scene Kit中Emission map(发光贴图)并不真正发光,只是模拟发光效果而已.就是说不能照亮其他物体,不能产生阴影.这点与其他3D创作工具不同.

  • Multiply map(乘法贴图,正片叠底贴图):会影响其他所有效果.一般用来给最后的效果调整色彩或者亮度.


    QQ20170409-120113@2x.png

QQ20170409-120125@2x.png
  • Transparency map(透明贴图):黑色部分不透明,白色透明.
    注意:球体内部需要开启double-sided mode才能看到

    QQ20170409-120138@2x.png

QQ20170409-120149@2x.png

QQ20170409-143922@2x.png

skybox天空盒子

设置方法如图,暂无法用代码设置,因为代码中background是只读的


QQ20170409-140020@2x.png


当使用Cube map立方体贴图时,Scene Kit支持以下几种图像模式

1. A horizontal strip image  where `6 * image.height ==     image.width`水平排列宽高6:1
2. A vertical strip image    where `    image.height == 6 * image.width`竖直排列宽高1:6
3. A horizontal cross image  where `4 * image.height == 3 * image.width`水平十字交叉宽高3:4
4. A vertical cross image    where `3 * image.height == 4 * image.width`竖直十字交叉宽高3:4
5. A lat/long image          where `    image.height == 2 * image.width`经纬度图片宽高1:2
6. A NSArray of 6 images. This array must contain images of the exact same dimensions, in the following order, in a left-handed coordinate system: +X, -X, +Y, -Y, +Z, -Z (or Right, Left, Top, Bottom, Front, Back).图片数组6


Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐