会場:San Francisco Moscone Convention Center

 
Naughty Dog的Lead Technical Artist、Andrew Maximov氏

    在GDC 2017的最后一天,Naughty Dog在题为【Technical Art Techniques of Naughty Dog: Vertex Shaders and Beyond】的分享会上,对公司的人气动态做冒险游戏【神秘海域4(Uncharted 4)】的Vertex Shader(顶点着色器)的使用实现的要素做了解说。

    登场解说的,是Naughty Dog的技术美术组长(Lead Technical Artist)Andrew Maximov。Maximov所列举的【神秘海域4】的粒子着色器所做的内容,相当的丰富和有意思。

    这次是基本上是沿袭SIGGRAPH 2016上的内容,不过因为是GDC 2017最后一天最后的一个主题,会场里包含站着听的开发者完全的满员,不得不进行入场的限制。

    所谓的Vertex Shader是什么呢,在最近GPU上的支持了没有分工区别的统一渲染架构的Unified-Shader的同时,因为计算阶段也被细分化了,不能简单的来区别了,传统的GPU绘制图形进行演算的部分,Vertex所指的是负责的3维顶点的计算,到写入到缓冲部分的计算单元。而这次分享中提到的Vertex Shader,也是如此作为上下文来使用。然后为了绘制实际的图形,通过Pixel shader的运行,得出画面上像素的颜色后,来进行绘制。

   现代的Vertex Shader是把3D的顶点数据的集合,转化为相机所看到的2D的顶点数据,在制作“绘制元素”时,把美术师制作的原始的3D的形状和颜色数据进行加工,就可以动态的制作出变化的形状和颜色。这部分Shader有着程序化(Procedural)的意义在里面。能这部分做好,实现与其他游戏的差异化,有着非常重要的意义。


【Uncharted 4 General-Purpose Vertex Processing - Naughty Dog】
Uncharted 4 General-Purpose Vertex Processing - Naughty Dog.mp4

    在【神秘海域4】中实现的很有意思的,是通过几种基本系统的组合,制作出丰富多彩的变化。以此为大前提,在整体的空间,有着控制风的风系统(Wind System)。

    
    组合这个风系统的对象,有着以一点为中心轴(Pivot)进行变形的元素,具体来讲就是以草木树枝的根为中心轴来弯曲的那样的白哦先。但是,草木随风的飘动,不光有风系统的影响,像叶子顶端激烈的晃动,是通过激烈切换法线贴图,用法线的凹凸表面来实现动画效果。这样把每个局部的动作用适当的技法组合来实现的。

    另外,使用Wind System和Pivot制作的动态效果,不光只有背景。角色的毛发和衣服随风飘动的样子也是受风系统影响的。另外毛发还受重力变化的影响。在毛发干燥的时候,是不受重力影响的,而是跟随风系统随风摆动的,而切换到下雨的场景里,头发被雨润湿后受重力影响运动也变得沉重起来。为了实现这种变法,角色在通常使用的法线贴图外,还要准备其他用途信息的法线贴图。

【头发的Pivot受风的影响控制】
 
 

    衣服飘动时候的处理也是,利用了方向信息的扩展贴图。并不是整个衬衣受风力控制,把飘动的那部分皱折用Mask的方式用法线来作出皱折的形状。然后再通过与向下Scroll的2轴向的2D法线进行混合,来作出衣服受风运动的效果。

【风对衣服的影响】
 
 
    在垂直的旗杆挂着的旗子的飘动表现,也是采用的类似的方法。旗子飘动,是参考的保存在顶点颜色中的值,通过对描述的在无风状态下沿着旗杆下垂的状态和受风影响完全横向飘动状态之间做变形(Morph),再与风系统影响的动作做混合来表现。另外那种水平放置的旗杆,旗子垂下的状态,是通过Pivot和法线的来进行风的模拟的。

【重力对头发的影响以及旗子的飘动】
 

    变形方面,又称作“Step Morph”,在脚底起伏所产生的步调的变化,足迹和脚下地面的变换,尘土粒子的控制上也被使用了。另外还有碰撞所产生的汽车的变形,是预先在顶点颜色里保存表现碰撞产生的凹凸的坐标信息。用变形状态的变化管理在Render Target中写入损坏值。在通过损坏值来对车体表面进行变形,称作“Skinned Morph Target”。

【地面的変化】
 
 

【汽车碰撞的变形】
 
 

【飞行物的控制】
 

     除了这些实现之外,为了能充实细节,控制降雨强弱的信息,也保存了作为Scale值的动画数据,再参考这个值自动变化的来使用RayCast,水面上浮动的小船和水面的涟漪的表现,可以根据小船上下移动和左右旋转的偏移自动的生成。

【雨天/水面的控制】
 
 
【人群的控制】
 

   在降低渲染处理负荷的措施上,例如Billboard的特效动画,加入了相机看不到的像素就不会描绘的优化。还有为了不会产生特效纹理的分辨率的低劣化,最低也会使用一半数据尺寸。也加入了跟随玩家角色的移动,增加角色包围网格范围内草的生成密度。
    
【负荷降低 / 优化】
 
 
 
 

    除此之外,还有很多的“小技巧”,都是使用顶点着色器的功能来实现,每个都不是什么高级技术,不过实现了那么多要素,不得不佩服这些复合技术的使用。

    Naughty Dog的下一款作品预订为【最后的生还者2 The Last of Us Part II】,虽然游戏风格不同,但可以确定的是下一款作品中肯定会实现更高密度的信息,非常的期待【The Last of US II】以及【Uncharted】系列的续作。
    

GDC2017【神秘海域 4】中所使用的顶点着色器技术的更多相关文章

  1. OpenGL ES 2.0 顶点着色器的妙用

    1.飘扬的旗帜(水面起伏) 基本原理 绘制一帧画面时由顶点着色器根据一定的规则变换各个顶点的位置,即可得到旗帜迎风飘扬的效果. 为了使旗帜的飘动过程比较平滑,采用基于正弦曲线的顶点位置变换规则.

  2. 【Android 应用开发】OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解

    最近开始关注OpenGL ES 2.0 这是真正意义上的理解的第一个3D程序 , 从零开始学习 . 案例下载地址 : http://download.csdn.net/detail/han120201 ...

  3. OpenGL ES 3.0顶点着色器(一)

    OpenGL ES 3.0流程图 1.Vertex Shader(顶点着色器) 顶点着色实现了一种通用的可编程方法操作顶点. 顶点着色器的输入包括以下几个: • Shader program.程序的顶 ...

  4. OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解

    最近开始关注OpenGL ES 2.0 这是真正意义上的理解的第一个3D程序 , 从零开始学习 . 案例下载地址 : http://download.csdn.net/detail/han120201 ...

  5. Opengl_入门学习分享和记录_03_渲染管线(二)再谈顶点着色器以及顶点属性以及属性链接

    ---恢复内容开始--- 写在前面的废话:岂可修!感觉最近好忙啊,本来今天还有同学约我出去玩的.(小声bb) 正文开始:之前已经编译好的着色器中还有一些问题,比如 layout(location=0) ...

  6. Opengl_入门学习分享和记录_02_渲染管线(一)顶点着色器&片段着色器

    写在前面的废话:今天俺又来了哈哈,真的好棒棒! 今天的内容:之前我们大概描述了,我们自己定义的顶点坐标是如何被加载到GPU之中,并且介绍了顶点缓冲对象VBO用于管理这一块内存.今天开始详细分析它的具体 ...

  7. OpenGL ES 3.0顶点着色器(二)

    #version es uniform mat4 u_mvpMatrix; in vec4 a_position; in vec4 a_color;out vec4 v_color;void main ...

  8. ThreeJS 物理材质shader源码分析(顶点着色器)

    再此之前推荐一款GLTF物理材质在线编辑器https://tinygltf.xyz/ ThreeJS 物理材质shader源码分析(顶点着色器) Threejs将shader代码分为ShaderLib ...

  9. 在pixi中使用你的自定义着色器

    通过几天的学习,对openGL.shader有了一个大致的了解. 回到学习的初衷吧,在基于pixi.js重构D3项目的时候,因为精灵层级的问题,我得按照一定的先后顺序将不同类别的精灵添加到场景中去. ...

随机推荐

  1. js 函数与类的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. BZOJ4095 : [Usaco2013 Dec]The Bessie Shuffle

    首先将排列和整个序列以及询问都反过来,问题变成给定一个位置$x$,问它经过若干轮置换后会到达哪个位置. 每次置换之后窗口都会往右滑动一个,因此其实真实置换是$p[i]-1$. 对于每个询问,求出轮数, ...

  3. 【Luogu3381】【模板】缩点

    本文同步发表于https://www.zybuluo.com/Gary-Ying/note/1235385 题目描述 给定一个n个点m条边有向图,每个点有一个权值,求一条路径,使路径经过的点权值之和最 ...

  4. usaco-5.3.3Network of Schools 校园网

    题目描述 一些学校连入一个电脑网络.那些学校已订立了协议:每个学校都会给其它的一些学校分发软件(称作“接受学校”).注意如果 B 在 A 学校的分发列表中,那么 A 不必也在 B 学校的列表中. 你要 ...

  5. 单元测试-unittest

    一.简介 unittest单元测试框架可组织执行测试用例,并且提供了丰富的断言方法,判断测试用例是否通过,最终生成测试结果. 二.属性介绍 1.unittest模块的各个属性 unittest.Tes ...

  6. C#轻量级配置文件组件EasyJsonConfig

    一.课程介绍 一.本次分享课程<C#轻量级配置文件EasyJsonConfig>适合人群如下: 1.有一定的NET开发基础. 2.喜欢阿笨的干货分享课程的童鞋们. 二.今天我们要如何优雅解 ...

  7. Exchange Online Mailbox Restoration

    User Account is already deleted in AD.User Mailbox is already deleted in Exchange. 1. Connect to Exc ...

  8. mac 下apache服务的根目录

    根据文章的介绍 http://jingyan.baidu.com/article/67508eb434539f9cca1ce4da.html apache服务的根目录是在 /Library/WebSe ...

  9. python接口自动化测试(八)-unittest-生成测试报告

    用例的管理问题解决了后,接下来要考虑的就是报告我问题了,这里生成测试报告主要用到 HTMLTestRunner.py 这个模块,下面简单介绍一下如何使用: 一.下载HTMLTestRunner下载: ...

  10. grid - 使用相同的名称命名网格线和设置网格项目位置

    1.使用repeat()函数可以给网格线分配相同的名称.这可以节省一定的时间 使用repeat()函数可以给网格线命名,这也导致多个网格线具有相同的网格线名称. 相同网格线名称指定网格线的位置和名称, ...