塞尔达草海的模仿

塞尔达的草海 让人印象深刻,忍不住又要背诵台词:

我想起那天下午夕阳下的奔跑,那是我逝去的青春。

好了,现在回来。

如果尝试用unity内置的地形草来还原上图效果,我们会发现有点力不从心:首先,内置草的shader不支持 高光

下图是前项目我们用传统的 Blinn-Phong 光照模型添加的高光:

这里在计算光照时让 草的法线向上,大致可以模拟出塞尔达草海的高光形状。

不过,塞尔达的草可远不止于此:随风摆动,碰撞弯曲,可破坏,可点燃…

下面的视频是我们用unity对上述效果的高仿:

unity草海--塞尔达高仿

是不是有点帅,:)

本文以及后续的几篇文章陆续会介绍我们的实现方式,以及一些改进方案。

Unity地形草的局限

我们的目标是要能在 中高端移动设备 跑得起 至少60米 视野范围的草海。

如果用Unity提供的 Terrain 来刷草的话,下面的2个参数我们必须非常注意:

为了记录刷草的信息,Unity会把我们的 Terrain 栅格化,Detail Resolution 指定了格子的 划分粒度:这个值越大精度越高,同时需要的内存也越高。

比如我们把 Detail Resolution 设置成 512,那么地表会被划分成 512 x 512 个格子,每个格子是刷草的最基本单位,草的 密度 决定了每个格子草的数量。

Unity的 TerrainData 给我们提供了一个接口用于获取刷草信息:

public int[,] GetDetailLayer(int xBase, int yBase, int width, int height, int layer);

这里 GetDetailLayer 返回的是一个二维数组,数组长宽的最大值和 Detail Resolution 是对应的。

考虑到大面积草的渲染,如果以每个格子里的单株草为单位,那 drawcall 会非常高。

对此,Unity做了它的优化:把一定数量的格子合并成一个 Patch,以 Patch 为单位来渲染,这样 drawcall 就能大幅度降低,Detail Resolution Per Patch 决定了每个Patch包含的格子数量。

比如我们把 Detail Resolution Per Patch 设为 16,那么每个 Patch 就包含了 16 * 16 = 256 个格子,Unity会把这 256 格里的草合并成一个大的Mesh,用于最终的渲染。

这个时候,你可能和我有一样的疑问,GPU Instancing 跑哪去了?

按照Unity的实现方案,每个 Patch 生成的Mesh是 独立且各不相同 的,GPU Instancing 的条件并不满足…

没有 GPU Instancing 就算了,你很快会发现另一个问题,新的 Patch 进入视野时,有严重的 CPU性能开销,看一下下图的峰值:

Patch 在运行时 合并Mesh 的开销很大。

这个时候,你可能已经心灰意冷,尝试着寻找 Terrain刷草 的替代方案了。

几个插件

事实上,国内用 Terrain 做地表的手游似乎也不多,更别说用 Terrain刷草 了。

不过了解 Terrain 的做法还是必要的,我们至少知道了Unity内置刷草的大致实现方式和存在的问题,以此为基础,再去理解一些第三方插件就容易得多了。

我们刚才的痛点主要有2个:

  1. 不支持 GPU Instancing。

  2. Patch 进入视野后合并模型的CPU开销很大。

这里介绍3款插件,都号称解决了我们的痛点:

  1. uNature

  2. Advanced Terrain Grass

  3. Nature Renderer

当然这几个插件也并非十全十美,我们是需要做二次开发的。

下篇文章会介绍一下这几个插件的实现原理,以及我们的选择。

个人主页

本文的个人主页链接:https://baddogzz.github.io/2020/01/14/Unity-Grass-01/。

好了,拜拜。

移动端草海的渲染方案(一)相关推荐

  1. 美摄云非编系统——网页端实时编辑渲染方案

    美摄云非编是一款新型网页端非线性编辑工具,应用WebAssembly技术实现网页端直接渲染图像.本次LiveVideoStackCon 2020线上峰会我们邀请到了北京美摄网络科技有限公司的研发总监黄 ...

  2. 在线非线编系统——网页端实时编辑渲染方案

    本次我分享的主题是云非编系统,是一种web端视音频实时编辑渲染方案. 本次内容分为五个部分: 是美摄云非编方案的技术背景,也就是目前web端视音频编辑的现状以及我们采用新方案的原因: 是美摄云非编的技 ...

  3. 2020年的双11,阿里需要什么样的渲染方案?

    阿里妹导读:前端技术的"新陈代谢"是有目共睹的,新技术的不断发展也推动着前端应用场景的不断扩大,从 Web .Weex 到 Node.js 再到 FaaS.我们在发展中看不变的部分 ...

  4. 移动端页面性能优化方案

    移动端页面性能优化方案 加载优化 使用首屏加载 按需加载 预加载 压缩图片 减少Cookie 异步加载第三方资源 脚本执行优化 CSS优化 JavaScript执行优化 渲染优化 SEO(搜索引擎优化 ...

  5. csrutil是什么_CSR、SSR、NSR、ESR傻傻分不清楚,一文帮你理清前端渲染方案!

    01 引言 随着前端系统的越发复杂,前端的性能也受到越来越多的重视.Google也不断在推进新的性能相关指标,从原先的Performance API中的指标逐步演进成用户性能体验相关的指标. 对于用户 ...

  6. 基于FFmpeg和Wasm的Web端视频截帧方案

    作者 | 小萱 导读 基于实际业务需求,介绍了自定义Wasm截帧方案的实现原理和实现方案.解决传统的基于canvas的截帧方案所存在的问题,更高效灵活的实现截帧能力. 全文10103字,预计阅读时间2 ...

  7. CSR、SSR、NSR、ESR傻傻分不清楚,一文帮你理清前端渲染方案!

    01 引言 随着前端系统的越发复杂,前端的性能也受到越来越多的重视.Google也不断在推进新的性能相关指标,从原先的Performance API中的指标逐步演进成用户性能体验相关的指标. 对于用户 ...

  8. 浅析高端网站建设策划方案都包括哪些内容?

    当我们起初在策划高端网站建设方案时并不知道应该从哪些方面开始,我们可以从它的定义开始思考,何为高端网站,就是因为它们在建设之前就做了详细的专业策划,确保网站建设之后能够获得市场用户的喜欢,那么怎样做才 ...

  9. 移动端页面不需要在meta加_移动端适配viewport缩放方案

    1. 前言 设计师交付给前端开发一张宽度为750px的视觉稿,设计稿上元素的尺寸.颜色.位置等已做过标注,要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案. 采用viewport缩放的方案能又 ...

最新文章

  1. 2022-2028年中国数字化档案加工行业市场深度分析及发展策略分析报告
  2. 如何有效编写软件的75条建议
  3. 记忆碎片 - 2015.09.11
  4. ExcelPro《EXCEL图表之道-如…
  5. html5教学文档笔记,4.HTML 教程- (HTML5 基础)
  6. faster rcnn的tensorflow代码的理解
  7. noip2016的研究
  8. 力扣236. 二叉树的最近公共祖先(JavaScript)
  9. 美国智能机市场Android份额逼近苹果iOS
  10. Pytorch register_forward_hook()简单用法
  11. 使用 Unity* 进行并行处理的一种方法
  12. [Python]关键字is和操作符==
  13. linux文件系统,启动流程
  14. 20191226每日一句
  15. 教程丨一文了解如何在OpenSea上创建自己的NFT商店
  16. cache 提高计算机运行速度,使用cache可以提高计算机的运行速度,是什么原因?...
  17. 痛惋字幕组:想为正版付费,但没地方掏钱
  18. RC522读取NFC Forum Type2 Tag流程及代码解析——Mifare Ultralight卡片读取(采用PHY6212平台,可移植)
  19. Ubuntu 设置默认播放器、浏览器、图片查看器
  20. go vscode go mod win环境配置

热门文章

  1. Vue.js函数的生命周期
  2. 普通卷积、Depthwise(DW)卷积、Pointwise(PW)卷积、Atrous卷积
  3. 【MySQL 8.0 OCP 1Z0-908认证考试】题库精讲--第三讲mysql8.0安装配置升级(中)
  4. 计算机科学与技术0775,0775 计算机科学与技术学硕专业介绍
  5. 鼠标回报率测试软件用哪个,罗摩G5 垃圾渣鼠标...顺便发一个鼠标回报率测试软件...
  6. DEEPIN 安装软件的方法
  7. 厄米多项式(Hermite Polynomials)
  8. 【转】【2020】ACM在线模版(强烈推荐~)
  9. Spring之Bean的自动装配
  10. 【超详细】2021最新版Redis安装教程(基于Redis 6.2.x版本)