Unity | Shader基础知识(第十一集:什么是Normal Map法线贴图)

目录

前言

一、图片是否有法线贴图的视觉区别

二、有视觉区别的原因

三、法线贴图的作用

四、信息是如何存进去的

五、自己写一个Shader用到法线贴图

六、注意事项

七、作者的话


前言

本小节会给大家解释,什么是法线贴图?为什么法线贴图会产生深度?我们怎么自己写一个shader,用上法线贴图

一、图片是否有法线贴图的视觉区别

(如图1所示)我们本来有一张普通的图,看上去非常明显是平面的,如果加了法线贴图就会变成立体的感觉(如图2所示)。

图1 普通图片
图2 加了法线贴图的图片

二、有视觉区别的原因

平面和立体最重要的区别是有深度,多了一个维度,

但是多的这个维度是怎么在2D图片中显示出来的?

答:有了不同的深度,光线照射的情况会不一样。

例:如果我画了一座山,放在桌面上,那么这个画上面会接收到相同的光线。(如图3所示)

图3 平面的山

哪里都能照到,随便照,因为不存在遮挡关系,都是亮的。


但是如果是3D的山,光线就会存在遮挡问题,有些地方就照不到,有些地方能照到,照不到的地方接收到的就是黑色的光线,或者只能接到左边来的光线,右边来的光线只能接到一半。(如图4所示)

图4 看起来立体的山

因为有光线的加入,我们才会感觉东西立体了。

三、法线贴图的作用

我们把是否能接收到光的信息提前存进去,让该亮的地方亮,该暗的地方暗。

四、信息是如何存进去的

光线射过来的时候,都是一样的,遇到物体以后会改变他的方向。

我们把物体每一个点反射的光线方向存起来,最后再画出来就可以了。

由于每一个点都会有不同方向的反射光线(如图5所示),我们把光线的方向都用向量表示,但,全部用数字记录有点麻烦,比如(0.5,0.6,-0.2)

图5 反射光线向量

法线贴图就解决了这个问题:

图片刚好有rgb:
r(0-255)→x(-1,1)

g(0-255)→y(-1,1)

b(0-255)→z(-1,1)

例如:图一中的法线贴图(如图6所示)

图6 图1的法线贴图

图7 选取了一个点

此时,这里的rgb为(84,128,247),换成向量就为(-0.34,0.008,0.97)

同样(-0.34,0.008,0.97)换成rgb就是(84,128,247),正反都成立。

那么就可以把一大堆信息,变成一个图片,想知道这点的光线信息,就去读它的颜色。

以前我们想看立体视角,必须要模型,现在,我们只需要法线贴图,就很省性能。但是,有个缺点,就是如果看影子,它还是正圆的,毕竟是贴图造出来的幻觉,并不是真凹进去了。

图8 法线贴图的影子

PS:为什么法线贴图都是蓝色的?

如图5所示,决定光线是否会穿出纸面,被人眼看见的是z向量,z向量对应的是b(0-255)蓝色,大部分颜色都需要被我们看见,所以法线贴图大多是蓝色的。

五、自己写一个Shader用到法线贴图

Shader "Custom/006_nomalMap"
{
    Properties
    {
        //首先先放两个图片进来
        //正常图片
        _MainTexture ("Texture", 2D) = "white" {}
        //法线图片
        _MainNormal ("NormalTexture",2D) = "bump" {}
    }

    SubShader
    {
        CGPROGRAM

        //引入已有的脚本
        #pragma surface surf Lambert

        //把上面资源里的图,接收到shader语法里
        //注意事项:名字必须和上面一样
        sampler2D _MainTexture;
        sampler2D _MainNormal;

        //待会我们需要把 图片数据 转换成 坐标数据
        struct Input
        {   
            //准备接受主图的坐标数据
            float2 uv_MainTexture;
            //准备接收法线图片的坐标数据
            float2 uv_MainNormal;

            //注意事项:名字只能是上面的名字前面加uv
        };

        //写了一个方法,把shader原有的数据引入进来  把输出的接口也拿过来
        void surf(Input IN, inout SurfaceOutput o )
        {
        //改反射的内容    获取图片上的rgba改成坐标信息,但我们只要rgb的数据
         o.Albedo = tex2D(_MainTexture,IN.uv_MainTexture).rgb;

         //改法线信息    //这里因为rgb的数据是(0,1),但法线数据是(-1,1),所以需要二次转换一下
         o.Normal = UnpackNormal(tex2D(_MainNormal,IN.uv_MainNormal));

         //备注:这里的unpackNormal的全称是UnpackNormalFromTexture,
         //     意思是,从texture恢复(解压)成Normal
        }

        ENDCG
        }

        FallBack "Diffuse"
  }

六、注意事项

在使用法线贴图的时候,注意图片格式必须是法线格式。(如图9所示)

图9 贴图格式

七、作者的话

鸽了大家这么久,真对不住,主要是最近一直997,现在稍微闲一点点了,作者立马接上了。非常感谢大家的支持,爱你们哟~

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot -- 外部化配置

我们如果要对普通程序的jar包更改配置,那么我们需要对jar包解压,并在其中的配置文件中更改配置参数,然后再打包并重新运行。可以看到过程比较繁琐,SpringBoot也注意到了这个问题,其可以通过外部配置文件更新配置。 我…

前端三剑客 —— CSS (上)

上节内容中提到了 前端三剑客 —— HTML 超文本标记语言,这节内容 跟大家讲述三剑客中的第二个 CSS。 CSS 什么是CSS Cascading Style Sheel,简称CSS,中文叫层叠样式表,也叫级联样式表。主要作用是来修饰HTML页面的一种技术。 …

【C++学习】哈希表的底层实现及其在unordered_set与unordered_map中的封装

文章目录 1. unordered系列关联式容器1.1 unordered_map1.2 unordered_set1.3.底层结构 2.哈希2.1哈希概念2.2哈希冲突2.3 哈希函数2.4 哈希冲突解决2.4.1闭散列2.4.1开散列2.5开散列与闭散列比较 3.哈希的模拟实现1. 模板参数列表2. 迭代器的实现3. 增加通过key获取value操作4…

66toolkit终极网络工具系统:470+强大Web工具,助力您的网络运营与开发

一、产品介绍 66toolkit,被誉为“终极网络工具系统”(SAAS),是一款功能强大的PHP脚本。它集合了超过470种快速且易用的Web工具,为日常任务处理和开发人员提供了极大的便利。作为一款综合性的网络工具系统,…

面试题目--fork

问题: (1)fork 以后,父进程打开的文件指针位置在子进程里面是否一样?(先open再fork) (2)能否用代码简单的验证一下? (3)先fork再打开文件父子进程是否共享偏移量?父进程打开的文件指针位置在子进程里面是否一样?能否用代码简…

武汉星起航:引领亚马逊孵化新篇章,助力合作伙伴共创商业辉煌

武汉星起航电子商务有限公司自2020年成立以来,凭借其敏锐的市场洞察和深度合作模式,在跨境电商领域取得了显著的成绩。为了进一步满足市场需求,公司决定推出亚马逊一站式孵化平台,为合作伙伴提供更全面的指导和支持。 该孵化平台…

【办公类-47-01】20240404 Word内部照片批量缩小长宽(课题资料系列)

作品展示 背景需求 最近在做《运用Python优化3-6岁幼儿学习操作材料的实践研究》的课题研究资料(上半学期和下半学期)。 将CSDN里面相关的研究照片文字贴入Word后,就发现一张图片就占了A4竖版一页,太大了。我想把word里面的所有…

数学结论在dsa中的应用

1. LC 3102 最小化曼哈顿距离 VP周赛391 T4。这是个结论题目。 首先曼哈顿距离是需要两个数对而不是两个数去进行比较的,两个数之间你很轻易就知道差的绝对值最大是多少了,只要挑最大和最小两个数一减就可以了。 但是两个数对之间各项差的绝对值之和最…

Spring的注入小技巧(接口前置处理,后置处理等优化写法)

目录 1.定一个公共(前置、后置)接口 2.添加接口的实现类(就是不同的处理) 3.测试小栗子 4.执行结果 接口的前置处理或是后置处理,这样写代码更优雅,可读性高,当然更有水平更装逼。前置处理或…

【信号处理】基于变分自编码器(VAE)的图片典型增强方法实现

关于 深度学习中,经常面临图片数据量较小的问题,此时,对数据进行增强,显得比较重要。传统的图片增强方法包括剪切,增加噪声,改变对比度等等方法,但是,对于后端任务的性能提升有限。…

运算符规则

console.log(null undefined) null和undefined都是原始类型,然后把这两个转换为数字。是0NaN.看规则有一个NaN的话就得到NaN. console.log({} []); 把{}和[]转换为原始类型分别为和[Object Object]。然后特殊情况有字符串,那就拼接字符串返回[Object…

Redis数据库——群集(主从、哨兵)

目录 前言 一、主从复制 1.基本原理 2.作用 3.流程 4.搭建主动复制 4.1环境准备 4.2修改主服务器配置 4.3从服务器配置(Slave1和Slave2) 4.4查看主从复制信息 4.5验证主从复制 二、哨兵模式——Sentinel 1.定义 2.原理 3.作用 4.组成 5.…

【Java多线程(3)】线程安全问题和解决方案

目录 一、线程安全问题 1. 线程不安全的示例 2. 线程安全的概念 3. 线程不安全的原因 二、线程不安全的解决方案 1. synchronized 关键字 1.1 synchronized 的互斥特性 1.2 synchronized 的可重入特性 1.3 死锁的进一步讨论 1.4 死锁的四个必要条件(重点&…

Golang 内存管理和垃圾回收底层原理(一)

一、这篇文章我们来聊聊Golang内存管理和垃圾回收,主要注重基本底层原理讲解,进一步实战待后续文章 1、这篇我们来讨论一下Golang的内存管理 先上结构图 从图我们来讲Golang的基本内存结构,内存结构可以分为:协程缓存、中央缓存…

vue3+eachrts饼图轮流切换显示高亮数据

<template><div class"charts-box"><div class"charts-instance" ref"chartRef"></div>// 自定义legend 样式<div class"charts-note"><span v-for"(items, index) in data.dataList" cla…

jdbc连SQL server,显示1433端口连接失败解决方法

Exception in thread "main" com.microsoft.sqlserver.jdbc.SQLServerException: 通过端口 1433 连接到主机 localhost 的 TCP/IP 连接失败。错误:“connect timed out。请验证连接属性。确保 SQL Server 的实例正在主机上运行&#xff0c;且在此端口接受 TCP/IP 连接…

移动WEB开发之rem适配布局

一、rem 基础 rem 单位 rem (root em)是一个相对单位&#xff0c;类似于em&#xff0c;em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如&#xff0c;根元素&#xff08;html&#xff09;设置font-size12px; 非根元素设置width:2rem; 则换成px表示就是2…

页面自适应

后续整理下自适应的集中方法 地址

【数据库】MySQL InnoDB存储引擎详解 - 读书笔记

MySQL InnoDB存储引擎详解 - 读书笔记 InnoDB 存储引擎概述InnoDB 存储引擎的版本InnoDB 体系架构内存缓冲池LRU List、Free List 和 Flush List重做日志缓冲&#xff08;redo log buffer&#xff09;额外的内存池 存储结构表空间系统表空间独立表空间通用表空间undo表空间临时…

如何彻底删除node和npm

如何彻底删除node和npm 前言&#xff1a; 最近做个项目把本地的node更新了&#xff0c;之前是v10.14.2更新至v16.14.0 &#xff0c;想着把之前的项目起来下&#xff0c;执行npm install 结果启动不了&#xff0c;一直报npm版本不匹配需要更新本地库异常… 找了几天发现是npm 和…