会場: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. [JOISC2014]たのしい家庭菜園

    [JOISC2014]たのしい家庭菜園 题目大意: 给定一个长度为\(n(n\le3\times10^5)\)的序列\(A(A_i\le10^9)\).只能交换相邻两个数,问最少需要几步可以将它变成一 ...

  2. [CC-CLPOINT]Optimal Point

    [CC-CLPOINT]Optimal Point 题目大意: 在\(k(k\le5)\)维空间中,如果点\(X\)的坐标为\((x_1,x_2,\ldots,x_k)\),点\(Y\)的坐标为\(( ...

  3. nodejs 支付宝app支付

    [链接]单笔转账到支付宝账户产品介绍更新时间:https://docs.open.alipay.com/309 const crypto = require('crypto') const momen ...

  4. 说一下Servlet里面得request和response

    当一个servlet被调用的时候,我们一般继承带协议的httpServlet,大方向上是下图这样 在这里面request和response起了什么作用呢? 来细究一下. request:1.封装了客户 ...

  5. BZOJ3655 : 神经错乱数

    注意到前3个操作都不会影响每列的情况,而第4个操作必然会将行列交换,故只要每行的和相同即可满足条件. 考虑数位DP,设$f[i][j][k][t]$表示考虑最高的$i$位,第一行的和是$j$,当前行的 ...

  6. 考前停课集训 Day7 嘞

    Day7 正如一个大佬提醒的那样,棕名是会被嘲讽的 果然…… 在洛谷里…… 算了. 不必在意. 马上就要退役了. NOIP,开始的地方,也是结束的地方. 如果一群OIer比你小 还会嘲讽你, 你就该退 ...

  7. g++ 动态库的编译及使用

    #ifndef __HELLO_H_ #define __HELLO_H_ void print(); #endif #include "hello.h" #include < ...

  8. Django——缓存

    设置缓存可采用CacheDemo中的中间件方法(https://www.cnblogs.com/siplips/p/9618034.html),对客户端浏览器缓存时间进行设定:也可采用下面的装饰器方法 ...

  9. poj3280 Cheapest Palindrome(回文串区间dp)

    https://vjudge.net/problem/POJ-3280 猛刷简单dp第一天第三题. 这个据说是[求字符串通过增减操作变成回文串的最小改动次数]的变体. 首先增减操作的实质是一样的,所以 ...

  10. flask之信号和mateclass元类

    本篇导航: flask实例化参数 信号 metaclass元类解析 一.flask实例化参数 instance_path和instance_relative_config是配合来用的:这两个参数是用来 ...