会場: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. Dell Venue 8 Pro启动盘UEFI模式32位启动,备份系统

    进入微PE工具箱官方下载页面:http://www.wepe.com.cn/download.html,选择Win8PE 32位 V1.2版下载. 或者直接百度盘下载:https://pan.baid ...

  2. 3ds max学习笔记(十五)-- 二维图形的操作

    (二维图形的创建) 1,在命令面板的[新建],单击第二个按钮: 从中选择对象名称,在视图种单击拖动进行创建,特殊:线:摁[shift]限制水平,垂直方向: 2,二维对象参数: 在渲染中启用:显示二维线 ...

  3. python 3.5 连接mysql数据库

    python 3.5 要连接mysql数据库,必须先安装pymysql模块,该模块可以操作mysql数据. 1.安装pymysql模块:使用pip进行安装 cmd打开运行模式,切换目录到pip的scr ...

  4. js小题目(持续更新)

    总是感觉之前做过的问题很久没碰的话就会忘掉,于是打算专门开一个记录小题目的随笔当题典用. 目录 五种主要数据类型进行值复制 数组去重 数组去重并计数 实现clone()方法,对五种主要数据类型进行值复 ...

  5. 关于#!/bin/bash和#!/bin/sh

    关于#!/bin/bash和#!/bin/sh   #!/bin/bash是指此脚本使用/bin/bash来解释执行. 其中,#!是一个特殊的表示符,其后,跟着解释此脚本的shell路径. bash只 ...

  6. Oracle ORA-12541,ORA-12514错误

    1.昨天发布tomcat 成功,但登录后报错,无法打开hibernate session,检查后发现数据库无法连接 2.用PL/SQL登录数据库,报 ora-12541,TNS 无监听程序,百度发现需 ...

  7. AssemblyInfo.cs文件详解

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq395537505/article/details/49661555 一.前言 .net工程的Pr ...

  8. Linux DNS 查询剖析(第四部分) | Linux 中国

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/F8qG7f9YD02Pe/article/details/82879414 在第四部分中,我将介绍容 ...

  9. svn文件夹解锁批处理

    清除svn文件的bat脚本整理 从svn上检出的项目,不在myeclipse工具中脱离svn的管辖,怎么办呢,下面有我的方法,也是借鉴别人的,用了特别好使,故推荐给大家. 首先创建一个xxx.bat文 ...

  10. Android 安全开发之 ZIP 文件目录遍历

    1.ZIP文件目录遍历简介 因为ZIP压缩包文件中允许存在"../"的字符串,攻击者可以利用多个"../"在解压时改变ZIP包中某个文件的存放位置,覆盖掉应用原 ...