会場: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. mongodb副本集与分片结合

    1.在三个不同服务器上,分别建立副本集: 202服务器: 192.8.123.202:27017 replSet = r202 192.8.123.202:27018 replSet = r202 1 ...

  2. 关于数据ajax请求

    默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false.注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. var temp; $.ajax({ asy ...

  3. ReactNative用指定的真机/模拟器运行项目

    使用模拟器运行项目: 命令行中React native项目目录下键入react-native run-ios会启动iOS模拟器, 默认是使用iPhone6,如果想要试用其他版本的模拟器则需要在reac ...

  4. ReactNative 常见红屏黄屏及终端报错

    刚开始接触RN,总是会遇到各种红屏黄屏报错,红屏是fatal error(程序无法正常运行),黄屏是Warming(非致命错误,程序可以运行但是存在潜在问题可能在某些情况下将导致fatal error ...

  5. [BZOJ4259]残缺的字符串

    Description: 给定两个带通配符的串,求可能出现几次匹配,以及这些匹配位置 Hint: \(n \le 3*10^5\) Solution: 定义匹配函数 \(P(x)=\sum_{i=x} ...

  6. BZOJ4963 : String

    用SAM支持往末尾在线添加字符的功能. 设$f[i][j]$表示右端点为i的每个左端点的答案,那么当$i$变为$i+1$时,在SAM的parent链形成的树中会新增一个叶子$p$. 对于每个节点,维护 ...

  7. js 基本包装类型 String

    为了操作基本类型值,ECMAScript提供了三个特殊的引用类型: Boolean , Number , String 举例: var s1 = "some text"; var ...

  8. Spring Boot集成JPA的Column注解命名字段无效的问题

    偶然发现,Spring Boot集成jpa编写实体类的时候,默认使用的命名策略是下划线分隔的字段命名. Spring Boot版本:1.5.4.release 数据表: id int, userNam ...

  9. 11-20 bom 浏览器对象模型

    1.window.open(url,ways) url 是打开的网页地址 ways 打开的方式 _self 2.window.close() 3.浏览器用户信息:Window.navigator 4. ...

  10. Could not commit JPA transaction RollbackException: Transaction marked as rollbackOnly

    项目调试时,报以下错误: org.springframework.transaction.TransactionSystemException: Could not commit JPA transa ...