Unite17 shanghai-lee jungpyo-neteasepangu-full chinese

2. LEE JUNGPYO
Technical Director of art, Netease Pangu game studio

3. Art of mobile game.
Mobile PBR Look-dev for intermediate.
Essential of optimizing and tip.

4. Audience (听众)
Mobile game graphics artists.
Shader designer.

5. Art of mobile game.
Audience / Mobilegame graphicsartists.

6. Art of mobile game.
暂时先把Unity给忘掉吧😬

7. Art of mobile game.
• 适用于手游美术的Shader?
• 回顾下过去
• 我们看下14年前，在2003年开发的PC游戏画面。
• G-Force FX 5.xxx -2003年1月发售的第五代G-Force产品。
• 简单的说就是支持DirectX 9.0 和 Opengl 2.0 。
• 大致的手机画面？
• 在座的各位，14年前又是多大呢？ 😄

8. Art of mobile game.
• 我们看下14年前，在2003年开发的PC游戏画面。
 天堂2和天堂2翼人 的画面比较。
天堂2 翼人 (2007年下半年)天堂 2 ( 2003年 10月 )

9. Art of mobile game.
• 我们看下14年前，在2003年开发的PC游戏画面。
 确切地说，刚好10年！！！
天堂2 翼人 (2007年下半年): PC 天堂2誓言 (2017年) : 手游

10. Art of mobile game.
• 表现简洁的设计和手绘风很好的案例
 龙之谷
龙之谷 (2008年) : PC

11. Art of mobile game.
• 提升手游美术效果的Shader
• 依旧是手绘插画的话，对此可能会没有兴趣。其实，审美的感觉比Shader是要来得重要的。
• 维尔福软件的大多数作品和独立游戏风之旅人就是极具代表性的例子。

12. Art of mobile game.
• 对美术风格进行以下分类
 以美术感性为中心的制作
• 与以往不同，用Shader来表现灯光效果，加强立体感的Dota2创意工坊。
 虽然是PBR，以美术感性为中心，控制细节体现等的守望先锋风格。
© 2015 Valve Corporation. All rights reserved. All trademarks are property of their respective owners in the US and other countries.

13. Art of mobile game.
• 对美术风格进行以下分类
 以美术感性为中心的制作
 虽然使用了高级Shader技术，但美术表现要来得更具shading风格
• 适用于小规模的RPG游戏，或者迷你游戏

14. Art of mobile game.
• 对美术风格进行以下分类
 以美术感性为中心的制作
 美术感性和技术理解完美结合的案例
© 2017 Georgius

15. Art of mobile game.
• 2011年，仅由包括我在内的两名开发者开发的原型。Unity3D 3.0
原型开发：3D艺术家一名 + 本人
被当选为NVIDIA TEGRA 4 Global contents
2011年的当时，也称为次世代
游戏最重要的还是趣味性，比较乏味
所以，收益不好

16. Art of mobile game.
• 在2011年，其实，也对Shader做了诸多的的改善。
• 特别是金属质感表现，或者皮肤表现等。

17. Art of mobile game.
• 适用于手游美术的Shader?
• 2012年，大多数的智能手机仅支持opengl-es 2.0。
• 2014年，随着opengl-es 2.0 extention版本的登场，部分旗舰机型开始支持opengl-es
3.0。
• 2016年之后，支持opengl-es 3.0以上的机型比重急剧上涨。
• 未来，支持opengl-es 3.1以上的智能手机会成为主流登场。
• 智能手机厂商也得拿出新的卖点，也会大力开展Vulkan营销。
• 照相机像素的竞争已经走到尽头了，剩下的就是显卡性能了。
• 电池在2016年更新过一次，暂时应该不会有大的动静。（除非等苹果开发完成wifi充
电技术。）

18. Art of mobile game.
• 手游美术中常用的Matcap shader.(Paraboloid view dependency shader)
• 性能层面的好处：尽管命令不少，实际从性能层面考虑，性价比还是挺高的。
 也因2005年Pixologic Zbrush中应用的材质球系统而出名。

19. Art of mobile game.
• 手游美术中常用的Matcap shader.(Paraboloid view dependency shader)
https://www.clicktorelease.com/code/spherical-normal-mapping/#

20. Art of mobile game.
• 手游美术中常用的Matcap shader.(Paraboloid view dependency shader)
• 性能层面的好处：尽管命令不少，实际从性能层面考虑，性价比还是挺高的。
• 始于2004年发表的Parabolic reflection。
• 优点：
• 运算快（完全代替灯光）
• 缺点：
• 灯光效果从属于视角方向。

21. Art of mobile game.
• 手游美术中常用的Matcap shader.(Paraboloid view dependency shader)
• 应用案例（韩国）
• 多数2.5D游戏都有使用
• 自行修正效果使用。
跑男 (2012年) : 手游 测试Demo (2012年) : 手游

22. Art of mobile game.
• 手游美术中常用的Matcap shader.(Paraboloid view dependency shader)
• 重要的是制作怎样的Matcap lit-sphere信息来使用。
 存在多种制作方法。
• 可以手工在Photoshop里面画。
 用Matcap creation工具来制作。(http://www.zbrushcentral.com/showthread.php?92157-MaCrea-Material-Creation-
Tool)
• 在Zbrush中使用Grab来确保素材。
• Perspective correction中是有问题的

23. Art of mobile game.
• Compare of Reflection method.
Source build for Compare through LYS from Knald tech.

24. Art of mobile game.
• Compare of Reflection method.
Source build for Compare through LYS from Knald tech.

25. Art of mobile game.
• Compare of Reflection method.
Matcap with debugging coordinate.

26. Art of mobile game.
• Compare of Reflection method.
Matcap Direct access reflection probe Roughness map combined

27. Art of mobile game.
• Compare of Reflection method.
• 非Standard shader的时候，给粗糙度贴图乘以常数2.5左右的值。

28. Art of mobile game.
• Matcap shader.(Parabolic view dependency shader)的扩展
 Dual paraboloid mapping.
 Real-time rendering-Third edition.

29. Art of mobile game.
• Dual Matcap shader.(Dual Paraboloid view in-dependency shader的扩展
• 相比于Cubemap，手机设备性能层面是有优势的。（特别是实时捕捉的时候）
 2015年，Eurographics会议上，Gratin开发者们发表过实际应用案例。
• 本人在实现过程中也检索到了。– 看来大家的想法都类似。
C.J. Zubiaga, A. Muñoz, L. Belcour, C. Bosch and P. Barla / MatCap Decomposition forDynamic Appearance Manipulation / The Eurographics Association 2015.

30. Art of mobile game.
• Dual Matcap shader.(Dual Paraboloid view in-dependency shader)的扩展
• Experimental of Debug view
// calculate the front paraboloid map texture coordinates
float2 front;
front.x = R.x / (R.z + 1);
front.y = R.y / (R.z + 1);
front.x = .5f * front.x + .5f; //bias and scale to correctly sample a d3d texture
front.y = -.5f * front.y + .5f;
// calculate the back paraboloid map texture coordinates
float2 back;
back.x = R.x / (1 - R.z);
back.y = R.y / (1 - R.z);
back.x = .5f * back.x + .5f; //bias and scale to correctly sample a d3d texture
back.y = -.5f * back.y + .5f;
float4 forward = tex2D( FrontTex, front ); // sample the front paraboloid map
float4 backward = tex2D( BackTex, back ); // sample the back paraboloid map
float4 finalColor = max(forward, backward);
http://members.gamedev.net/JasonZ/Paraboloid/DualParaboloidMappingInTheVertexShader.pdf

31. Art of mobile game.
• 手游美术中常用的Matcap shader.(Paraboloid view dependency shader)
• 为了做简单的示例，使用DOTA workshop形态为参考，构成了Shader Prototype。
 以DOTA为例，为MOD用户整理了Artwork document和Shader Document。
• 在内部还没有树立工作流程的时候是经常使用的方式。
 使用美术上相似的参考游戏的网格信息和质感信息，以MOD方式来实现。
© 2015 Valve Corporation. All rights reserved. All trademarks are property of their respective owners in the US and other countries.

32. Art of mobile game.
• 手游美术中经常用到的数据信息
 Vertex data
 Vertex depth data
 Vertex Color ( RGBA )
 Vertex Array
 1D Ramp
 2D irradiance ( Matcap / BRDF Lookup)
 Cubemap ( Reflection )
 其它各种Lookup Texture.
 VertexColor from LightProbe
 Radiance data from ReflectionProbe

33. Art of mobile game.
• Node structure.

34. Art of mobile game.
• Tweak mesh normal to each vertex
• 没有法线贴图，网格顶点很小的时候，Matcap表现的错误是比较严重的。
• 以整体块感为基准，调整顶点法线信息。

35. Art of mobile game.
• Tweak mesh normal to each vertex
• 变形的顶点信息用来表现角色的高低远近。
• 以整体块感为基准，调整顶点法线信息。

36. Art of mobile game.
• Progress node graph structure.

37. Art of mobile game.
• Using vertex color data.
• Radiosity data to vertex.
• Store vertex color data from Radiosity.
Radiosity Lighting
Mesh vertex
Baking vertex color
Get vertex color
Composite with pixel
Shader side
DCC Side

38. Art of mobile game.
• Using vertex color data.
Radiosity Lighting
Mesh vertex
Baking vertex
color
Get vertex color
Composite with
pixel
Shader side
DCC Side

39. Art of mobile game.
• Using vertex color data.
Radiosity Lighting
Mesh vertex
Baking vertex
color
Get vertex color
Composite with
pixel
Shader side
DCC Side

40. Art of mobile game.
• Normal vector.

41. Art of mobile game.
• Position data.

42. Art of mobile game.
• 获取SH信息 (Access of Spherical Harmonic data information )
Setting to Light Probes
Light setup
Bake Light map
Store into LightingData as Binary
Get SH data via
SphericalHarmonicsL2[]
Debugging to SH data table.
SH 9 Coefficient.
SH coefficient * 9 vector interpolation = 27 value stored
light probe
Direct access through shader code : half3 ShadeSH9 (half4 normal) {}

43. Art of mobile game.
• 根据需要的灯光信息烘培
• Generally pbr shading on mobile devices does not enough evident expression of shading.
• Using Baked Lighting it very useful for evident shading on mobile but that is not essential.

44. Art of mobile game.
• Press to C key You guys could be see to baked shading from Base Color.
• Substance Painter currently provide kind of two option of baked lighting filters such as baked lighting and baked lighting environment.
• This is new feature of baked lighting.
• Just turn on to color that will be use to
composite layer or some stuff if you useable.
• 根据需要的灯光信息烘培

45. Mobile PBR Look-dev for intermediate.

46. Mobile PBR Look-dev for intermediate.
• 走向PBR的时代

47. Mobile PBR Look-dev for intermediate.
• NEXT GEN?
• 我们怎样定义次世代手游画面？
• 并不止意味着PBR的使用，更确切的说，指的是硬件范式更新换代的时期。
• 随着硬件范式从PlayStation 2®升级到PlayStation 4®，渲染本身发生了很大的变化。
• 手机设备也是同样，像Metal® 或者 Vulkan®等低阶API(Low level)的登场和硬件的发展。以上，
我们可以把它定义为次世代。
•

48. Mobile PBR Look-dev for intermediate.
• PBR看似难，其实简单
• 能量守恒
• 高光由光来决定
• 完全的金属不存在Diffuse。（理论上，不存在完全的金属）
• 重申一遍，完全的金属性的色相就是高光的色相。
• 但是，在Metallic / Roughness workflow中，此颜色是记录在Base Color中使用的。（虽然有
点混淆，暂且这样理解吧）
• 光从四面八方射进来。
• 重申一遍，高光到处都存在。（Fresnel反射应该也是同样吧？）
• 那中间物质呢？
• 分子结构上的结合物质
• 碳合成纤维、塑料、陶瓷类等等。。。和涂层略有不同。 Something like this….

49. Mobile PBR Look-dev for intermediate.
• 为艺术家制作标准场景
• 尽可能还原Substance Painter的工作环境。
• IBL选定工作
• White balance.
• 精密度设定
• Unity 5.6 LookDev的使用

50. Mobile PBR Look-dev for intermediate.
• White Balance
 PBR中环境光是比较重要的。
• 为了设定质感，要选用已经进行白平衡处理的IBL素材来使用。
Wrong white balance Corrected white balance

51. Mobile PBR Look-dev for intermediate.
• TC = Kelvin = Color temperature
• TC值越高，越蓝，TC值越低越红。
• 和主美一起选定标准工作用色温。
 一般在[Daylight – Direct mid summer sunlight] 和 [Average Summer Sunlight]之间决定。
 정.

52. Mobile PBR Look-dev for intermediate.
• Color temperature check.
• Overcast daylight和Clear blue-sky sunlight IBL source的Color temperature check。
 在Asset store中下载Unity technology提供的IBL素材。
• 直接使用HDR panorama摄影的时候，用LightRoom和Photomatrix等来尽可能校正白平衡。

53. Mobile PBR Look-dev for intermediate.
• Color temperature check.
• 使用Color chart。

54. Mobile PBR Look-dev for intermediate.
• Color temperature check.
 Unity3D 5.6 experimental LookDev - 白色颜色和Colour check.

55. Mobile PBR Look-dev for intermediate.
• 在设置中，不勾选Enable Tone Mapping。

56. Mobile PBR Look-dev for intermediate.
• Substance painter matching approach.

57. Mobile PBR Look-dev for intermediate.

58. Mobile PBR Look-dev for intermediate.

59. Mobile PBR Look-dev for intermediate.
 Same IBL with same exposure value.
 Back and Front lighting compare with single IBL.
Using unity3D 5.6 LOOK DEV
 Different IBL with same exposure value.
 Different IBL with Different exposure value.

60. Mobile PBR Look-dev for intermediate.
• 2015年以后发售的大部分手机硬件都支持PBR
• Iphone 5s以上
• 安卓SDK4.3以上
• Opengl es 2.0 extension中部分机型支持PBR
 Texcubelod( )
 Texcubebias( )
 ddxx , ddyy 大部分不支持，支持😞
• PBR渲染跟线性空间渲染、Tone mapping、HDR等都有密切的关系。
 结论就是要确保PBR渲染的稳定性的话，推荐使用Opengl es 3.X以上。

61. Essential of optimizing and tip.
Audience / Mobilegame graphicsshaderdesigner.

62. Essential of optimizing and tip.
• IPC评测和比较
• 在PowerVR 6芯片组和PowerVR 8芯片组中都编译进行了比较。
• 提升速度的芯片组ALU结构改善和编译器。
Features
•Architecture improvements for better DDR compatibility
•Full support for Compute APIs – OpenCL1.2 EP,
OpenVX1.1, Vulkan1.0
•Broad and complete graphics API support – OpenGL ES
1.1/2.0/3.2, Vulkan1.0
•Extended Design Optimization Kit (DOK)s – Enabling
wide range of clock frequencies across process
technologies
•Hardware virtualization
•Hardware security

63. Essential of optimizing and tip.
• Shader code unit test with disassemble…
• IPC
• 即每一时钟周期内所执行的指令多少。
• Test tool : PowerVR tools & SDK.
• ((rimFactor * rimFactor) + (rimFactor * (rimFactor * 0.425))) * _RimPower * _GlowColor;
//half r_c = pow(rimFactor , _RimPower) * _GlowColor; 是power函数代码

64. Essential of optimizing and tip.
• Light Model 用 Basic Lambert lighting model.
• Select compiler

65. Essential of optimizing and tip.
• PVRShaderEditor Disassembly check ( After Optimal )

66. Essential of optimizing and tip.
• PVRShaderEditor Disassembly check ( Before Optimal )
Per-line Cycle Estimate Total : 32/26f : Series 6 31/24f : Series 8XE

67. Essential of optimizing and tip.
• PVRShaderEditor Disassembly check ( After Optimal )
Per-line Cycle Estimate Total : 31 : Series 6 30 : Series 8XE

68. Essential of optimizing and tip.
• Vertex buffer object. (VBO)
• 如果不使用VBO的话，在渲染的时候，每一帧，CPU都要从RAM读取数
据，然后把它传送到显卡的内存，并在显卡中完成绘制。
• VBO方式就是提前把数据传送保存在显卡的内存中，GPU可以直接从GP
U内存读取数据来进行渲染。
• 概念上区分的话，CPU SIDE就是客户端。GPU SIDE就是服务器端。

69. Essential of optimizing and tip.
• Vertex buffer
• 普遍使用的Vertex buffer attribute information
• VertexArray : position
• VertexArray : normal
• VertexArray : color
• VertexArray : tex coords 1
• VertexArray : tex coords 2
.
.
.
Copyright © 2005 Nokia Corporation.

70. Essential of optimizing and tip.
• 用两个相同的网格来做测试
• Vert : 25
• Shell border : 1 ( 4 side )

71. Essential of optimizing and tip.
• 用两个相同的网格来做测试
• Vert : 25 + ? = 30
• Shell border : 2 ( 8 side )

72. Essential of optimizing and tip.
• UV vertex position 特性
• Vert : 25 + ? = 25 Why?
• Shell border : 2 ( 8 side )
• 对于已经Split的UV vertex position没有任何变化。

73. Essential of optimizing and tip.
• 用两个相同的网格来做测试
• Vert : 108
• Shell border : 4

74. Essential of optimizing and tip.
• 用两个相同的网格来做测试
• Vert : 108
• Shell border : 8

75. Essential of optimizing and tip.
• VBO Compare
• 要确认顶点信息数量会随着UV Shell结构的不同而不一样。
• 保证UV Shell的最小化对于VBO或者性能都是有帮助的。
114 verts 120 verts

76. Essential of optimizing and tip.
• Normal texture issues…
• Standard shader最终执行归一化。
• Mobile shader最终不执行归一化。
Uncompressed PNG or TGA
Normal data type = bumpmap
DXTnm for PC platform as DX11 Swizzle R to W as normal.xy to normal.wy
Packednormal for opengl-es
Standard shader have normalizing
o.Normal = normalize(o.Normal);
o.Normal = unpackNormal(X); //not normalize
Compressed normal texture
(PVRTC,ETC,ASTC,ATC,DXT)
Compression affect to modulated
of T-space information
White point artifact of specular shading on mobile
devices.
1. o.Normal = normalize(unpackNormal(X));

77. Essential of optimizing and tip.
• Normal texture issues…
• 贴图格式别，视觉化评测
• 现象确认
• 检查法线贴图资源本身有没有问题
before after

78. Essential of optimizing and tip.
Pre normalized just texture result but compressed result
have ugly from pvrtc.
Additional Normalized in shader code result that pretty
good. But some loss to performance.
Pre normalized just texture and compressed via ASTC
is little better than PVRTC
Not normalize and 24bit true with half sizing texture
used that pretty nice but some loss to small detail.
Mobile screen is so small size compare to pc monitor.
• Normal texture issues…
• 试验的最终目标是不在Mobile shader上面增加关于像素法线的归一化命令。

79. Essential of optimizing and tip.
• Normal texture issues…
UnpackNormalDXT5nm : PCE : 8UnpackNormal : PCE : 6

80. Essential of optimizing and tip.
• Normal texture issues…
• 格式别容量和指令增加与否的比较。
FORMAT SIZE BANDWIDTH OF MEM Requirement of
instructor
RGB PVRTC 4bit 1024 0.7mb normalize
RGB ASTC 4*4 1024 1.3mb normalize
True24bit 512 0.98mb none

81. Essential of optimizing and tip.
• 不要过分依赖显示器画面。

82. Essential of optimizing and tip.
• Avoid Throttling

83. Conclusion
• 结论就是，手游画面的开发，暂时还是会以过去PC画面处理经验为基础。
• 收集哪些信息，怎样灵活使用是很重要的。
• 艺术家怎样使用参考资料也是需要值得探究的。
• 任何实时处理的开销还是比较大的。
• 适当的…近似的…需要对近似值有所了解。
• 积土成山…能节省的东西都要优化。

84. 再次感谢网易盘古游戏部引擎技术研究
中心和工作室所有开发者的支持。

85. Hiring!
hzlisijia1@corp.netease.com

86. Thank you!