Catlike Coding网站文章解析 -- 1.Procedural Grid

原文英文版链接https://catlikecoding.com/unity/tutorials/procedural-grid/,里面有每一部分的untiy工程链接,文章内容也更详实。

本章内容:

  • 创建一系列点
  • 使用协程实现他们的摆放位置
  • 定义一个由三角形组成的平面
  • 自动生成法线
  • 添加纹理坐标和切线

1.渲染啥

你如果想在unity中看见什么东西,那你肯定需要一个mesh。它可能是一个由其他软件导出的3D模型或者是程序化生成的mesh。它可能是一个sprite,UI元素或者粒子特效,总之在unity里你想看到点东西你就得用mesh去渲染。

所以mesh是个啥?从概念上讲,一个mesh是图形硬件用于渲染复杂东西的一系列数据组合,它至少包括顶点的集合以及一系列三角形。三角形是最基本的2d图形,它连接了三个点,无论mesh是什么样,都是这些三角形组成了每个平面。

三角形平坦且边缘直,可以完美的展示平坦平直的东西,比如一个立方体的面。带弧度或者凹进去的平面只能通过大量小三角形近似模拟。如果这些小三角形足够小,小于一个像素,那你对这种近似就没有感知。但是对于实时的渲染不太可行,这些平面(圆弧的面)在某些角度看上去会有锯齿。

                                              Unity's default capsule, cube, and sphere, shaded vs. wireframe 

 在unity中渲染3D物体需要两个组件mesh filter 和 mesh rendere,filter指向你想要渲染的mesh(渲染what),renderer定义如何渲染(how 怎么渲染)。

 

提供一个albedo颜色贴图可以是最简单便捷的方式使得mesh渲染时富有细节。通过UV坐标,可以实现贴图的采样从而进行渲染。

2.创建一系列顶点

 如何创建自己的mesh?

  创建C#Grid类

using UnityEngine;
using System.Collections;
public class Grid : MonoBehaviour {public int xSize, ySize;
}

自动添加所需的component

[RequireComponent(typeof(MeshFilter), typeof(MeshRenderer))]
public class Grid : MonoBehaviour {public int xSize, ySize;
}

Awake方法里调用Genrate函数

private void Awake () {Generate();}

由下图所示,对于大小横向为x纵向为y的grid,实际需要的顶点数量是 (x+1) * (y+1)

 创建顶点数组并赋予其每个点位置

private void Generate () {vertices = new Vector3[(xSize + 1) * (ySize + 1)];for (int i = 0, y = 0; y <= ySize; y++) {for (int x = 0; x <= xSize; x++, i++) {vertices[i] = new Vector3(x, y);}}}

Gizmos调试

	private void OnDrawGizmos () {Gizmos.color = Color.black;for (int i = 0; i < vertices.Length; i++) {Gizmos.DrawSphere(vertices[i], 0.1f);}}

Gizmos的效果(x = 10 y = 5)

3.创建Mesh 

 之后需要为mesh设置三角形片元,这里设置的值其实是之前顶点数组的索引,也就是数组的下标。

 上边这么设置三个点,是啥也看不到的,因为这三个点在一条线上,无法组成三角形

triangles[0] = 0;
triangles[1] = 1;
triangles[2] = xSize + 1;

这么设置组成了三角形,但是也看不到,这是因为这个顺序是逆时针顺序,会被判定为背面,渲染时会被剃除

顺时针是正面,逆时针是反面

按如下设置,我们将会得到第一个三角形

		                          triangles[0] = 0;triangles[1] = xSize + 1;triangles[2] = 1;

有了第一个三角形后,我们可以绘制两个三角形拼成一个正方形

之后我们就可以生成每一行,完整代码如下 

private void Awake () {Generate();}private void Generate () {GetComponent<MeshFilter>().mesh = mesh = new Mesh();mesh.name = "Procedural Grid";vertices = new Vector3[(xSize + 1) * (ySize + 1)];for (int i = 0, y = 0; y <= ySize; y++) {for (int x = 0; x <= xSize; x++, i++) {vertices[i] = new Vector3(x, y);}}mesh.vertices = vertices;int[] triangles = new int[xSize * ySize * 6];for (int ti = 0, vi = 0, y = 0; y < ySize; y++, vi++) {for (int x = 0; x < xSize; x++, ti += 6, vi++) {triangles[ti] = vi;triangles[ti + 3] = triangles[ti + 2] = vi + 1;triangles[ti + 4] = triangles[ti + 1] = vi + xSize + 1;triangles[ti + 5] = vi + xSize + 2;}}mesh.triangles = triangles;}

最后效果如下:

 

4.生成其他顶点数据

法线

我们还没有给我们生成的mesh赋予法线,默认的法线方向是(0,0,1),这并不是我们想要的。

每个Vertex(顶点)都需要设置法线,我们可以自己再创建一个数组来设置法线。还有更好的办法,用unity提供的功能,调用mesh中的RecalculateNormals函数,它会根据之前设置好的三角形数据自动计算法线。对于某个vertex,法线的计算是对包含该vertex的所有三角形的法线取平均值,并归一化。

有了法线才能进行光照的计算 

UV坐标

默认UV坐标都是0,所以我们必须为每个vertex顶点设置UV坐标,UV坐标范围是0到1,所以设置方法如下

上边的代码不会正确的显示结果,这是因为我们应该使用float来计算UV而不是整数除法

我们可以通过设置贴图的tiling属性来达到一些效果

法线贴图

我们可以用法线贴图来给渲染增加更多效果。关于法线贴图的原理和技术请自行学习吧

 

 目前法线贴图的信息是存储在切线空间(切线空间的知识请自行学习),所以我们需要为mesh中的顶点设置切线信息。因为我们目前做出来的是一个平坦的平面,所以切线信息很好设置,平行于平面。

法线贴图在一个平面上的效果,明明是一个平面,但是视觉上却有凹凸起伏的感觉 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/246288.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GPU Gems1 - 21 实时辉光(Real-Time Glow)

这章浅墨的文章讲的很细了&#xff0c;这里基本照扒一遍加深印象&#xff0c;原文链接&#xff1a;https://zhuanlan.zhihu.com/p/36499291 【章节概览】 这章讲到2D光照效果中的辉光&#xff08;Glow&#xff09;和光晕&#xff08;Halo&#xff09;&#xff0c;展示了如何通…

Catlike Coding网站文章解析 -- 2.Procedural Grid

本章内容 创建一个闭合的cube mesh给cube添加带弧度平滑的边缘定义法线使用sub-meshes&#xff08;子mesh&#xff09;创建一个常规shader合并碰撞体1.合成一个cube 上一章https://mp.csdn.net/postedit/89474068我们已经实现了一个平面mesh。一个cube由6个平面组成&#xff…

GPU Gems1 - 23 景深技术综述

本章主要介绍如何使用GPU创建实时的景深&#xff08;Depth of Field&#xff09;效果。参考浅墨总结文章的链接https://zhuanlan.zhihu.com/p/36499291 聚焦在枪上&#xff0c;背景模糊【核心要点】 物体在距离镜头的一个范围之内能够清晰成像&#xff08;经过聚焦&#xff09…

GPU Gems1 - 22 颜色控制(Color Controls)

这章将在游戏中图像处理的讨论&#xff0c;扩展到技术和艺术上控制颜色的方法和应用&#xff0c;包括将图像从一些的色彩空间中移入移出&#xff0c;以及快速地给任何2D或3D场景加上精美的色调。 色彩校正&#xff08;Color Correction&#xff09;是几乎所有印刷和胶片成像应…

GPU Gems1 - 25 用纹理贴图进行快速过滤宽度的计算

这章介绍在片元shader中计算导数近似值的技术。这个技术把特别的值载入纹理mipmap的每个级别&#xff0c;以特殊的方式使用纹理映射硬件&#xff0c;计算出导数的结果&#xff0c;给出在屏幕上的像素间某个量的变化率。 Cg标准程序库提供ddx和ddy函数&#xff0c;计算任意关于…

c#基础知识(1)

简介&#xff1a;C# 是一个现代的、通用的、面向对象的编程语言&#xff0c;它是由微软&#xff08;Microsoft&#xff09;开发的&#xff0c;由 Ecma 和 ISO 核准认可的。 程序结构&#xff1a;引用命名空间、命名空间、类、方法、属性、语句。 数据类型&#xff1a;bool、byt…

GPU Gems1 - 24 高质量的过滤

在一些应用中&#xff0c;高质量的过滤是至关重要的&#xff0c;可以用像素shader代码执行任何过滤。GPU着色程序不用于CPU的主要之处在于&#xff1a;一般来说&#xff0c;CPU数学操作比纹理访问更快&#xff0c;而在GPU中恰恰相反。图像过滤的目的很简单&#xff1a;对于给你…

2021-04-05

见缝插针小游戏 结束动画 我们的结束动画很简单&#xff0c;就是把画面放大&#xff0c;把背景改成红色&#xff0c;再有一个停顿就可以了 1、对于放大画面和修改背景颜色的操作&#xff0c;在这里可以直接修改相机设置 我们要获取到Hierarchy窗口中的Main Camera&#xff0c;…

GPU Gems1 - 26 OpenEXR图像文件格式与HDR(The OpenEXR Image File Format and HDR)

【章节概览】 这章中&#xff0c;大名鼎鼎的工业光魔公司的Florian Kainz、Rod Bogart和DrweHess介绍了OpenEXR标准&#xff0c;这是一种当时新的高动态范围图像&#xff08;HDRI&#xff09;格式&#xff0c;在计算机成像的顶级电影中正在快速推广。对于基于图像照明的开发者…

2021-04-08

unity入门教程 创建开始界面 在场景中创建画布Canvas&#xff0c;然后制作开始界面。 首先在Canvas下新建一个空物体&#xff0c;命名为StartWnd。然后在StartWnd下新建一个Image&#xff0c;命名为imgTitle&#xff0c;SourceImage使用main图片。然后在StartWnd下新建一个Butt…

ID Tech 5 中Megatexture针对地形的D3D9 基本实现原理

看GPU Gems2中的 使用基于GPU几何体裁剪图的地形渲染&#xff08;Terrain Rendering Using GPU-Based Geometry Clipmaps&#xff09;一文&#xff0c;对Clipmap技术不是理解很好&#xff0c;所以上网搜索一番&#xff0c;发现了这篇文章&#xff0c;实在是太棒的文章&#xff…

2021-04-12

异步传输&#xff08;Asynchronous Transmission&#xff09;&#xff1a;异步传输模式(Asynchronous Transfer Mode,缩略语为ATM) 异步传输一般以字符为单位&#xff0c; 起始位&#xff1a;先发出一个逻辑”0”信号&#xff0c;表示传输字符的开始。 空闲位&#xff1a;处于逻…

[知乎] 开放世界游戏中的大地图背后有哪些实现技术?

今天看到的一篇关于大世界的技术文章&#xff0c;写的太好了&#xff0c;膜拜大佬。各位如果有时间一定要看看 原文&#xff1a;http://gulu-dev.com/post/2014-11-16-open-world#toc_10 一、程序技术篇&#xff1a;算法和架构&#xff08;Programming Algorithms & Arch…

角色控制器

一、简介 角色控制器(Character Controller)主要用于对第三人称或第一人称游戏主角的控制。 二、基本概念 第三人称游戏中的这些控制器由于无规律可循&#xff0c;所以无法遵守固定的物理规则&#xff0c;例如&#xff0c;让某辆车每小时跑 90 英里&#xff0c;但是它可能会突…

unity声音组件AudioSource的使用

一、AudioSource组件 AudioSource是音频源组件&#xff0c;其作用就是用于播放音频剪辑&#xff08;AudioClip&#xff09;资源。组件属性 &#xff08;1&#xff09;AudioClip&#xff08;音频剪辑&#xff09;&#xff1a;指定播放的音频文件。 &#xff08;2&#xff09;O…

GPU Gems2 - 2 使用基于GPU几何体裁剪图的地形渲染(Terrain Rendering Using GPU-Based Geometry Clipmaps)

【章节概览】 本章描述了一种通过顶点纹理实现的&#xff0c;基于GPU的几何体裁剪图&#xff08;Geometry Clipmaps&#xff09;技术。通过把地形几何体当做一组图像来处理&#xff0c;可以在GPU上执行几乎所有的计算&#xff0c;因此可以减少CPU的负载。且该技术较为容易实现…

协程

协程介绍 协同程序与线程差不多&#xff0c;也就是一条执行序列&#xff0c;拥有自己独立的栈&#xff0c;局部变量和指令指针&#xff0c;同时又与其它协同程序共享全局变量和其它大部分东西。线程与协同程序的主要区别在于&#xff0c;一个具有多线程的程序可以同时运行几个…

球谐光照

一.原理 球谐光照实际上是一种对光照的简化&#xff0c;对于空间上的一点&#xff0c;受到的光照在各个方向上是不同的&#xff0c;也即各向异性&#xff0c;所以空间上一点如果要完全还原光照情况&#xff0c;那就需要记录周围球面上所有方向的光照。注意这里考虑的周围环境往…

overload、override、new解释

重载、重写、覆写&#xff0c;分别指的是overload、override、new。 一、override重写&#xff0c;是在子类中重写父类中的方法&#xff0c;两个函数的函数特征&#xff08;函数名、参数类型与个数&#xff09;相同。用于扩展或修改继承的方法、属性、索引器或事件的抽象或虚拟…

图像色调,饱和度,对比度等相关定义

RGB颜色模型 RGB颜色模型也就是我们最常用的三原色&#xff0c;红绿蓝。RGB颜色模型在混色时属于加法混色&#xff0c;RGB中每种颜色数值越高&#xff0c;色彩越明亮。RBG为&#xff08;0,0,0&#xff09;时为黑色&#xff0c;RGB为&#xff08;255,255,255&#xff09;时为白…