Unity | Shader基础知识(第十四集:简单效果练习)

目录

前言

一、效果预览

1.弧形边缘光

二、效果制作

1. 制作弧形边缘光

2.弧形边缘光进阶

3.弧形边缘光调节渐变范围

4.边缘光突变

5.同心圆

 三、加入世界坐标做效果

1.绘制结界

2.斑马球

3.效果合并

 四、作者的碎碎念


前言

有粉丝建议说,让我继续更新Shader,我可以出一些简单常用的效果,带着大家写一下,我觉得这是个好主意。

换句话说,带着大家看一下,学到的知识,应该怎么去应用。

我会把常见的调节的一些细致过程逐步写下来,如果遇见没讲过的知识点,就详细讲解一下。

一、效果预览

1.弧形边缘光

这个效果是,对于圆形或者圆弧形的物体,在边缘发光。(如图1所示)

图1 边缘光

二、效果制作

1. 制作弧形边缘光

我们先统一一下思路,发光用到的语义是自发光,之前有讲过,详情看链接。

Unity | Shader基础知识(第十二集:颜色混合)_shade 颜色混合接口-CSDN博客

边缘发光就是当我们的视线和法线的点乘的值在0附近,或0以下的时候,就发光,也是之前讲的,看链接。(如图2所示)Unity | Shader基础知识(第十三集:编写内置着色器阶段总结和表面着色器的补充介绍)_unity viewdir-CSDN博客

图2 viewDir

后面写代码,讲太多遍的就不重新注释了,只注释没讲过的。

Shader "Custom/010"
{Properties{//设置自发光的颜色_Color("Color",Color)=(0,0.5,0.5,0)}SubShader{CGPROGRAM#pragma surface surf Lambertfloat4 _Color;struct Input{//直接获取viewDirfloat3 viewDir;};void surf(Input IN,inout SurfaceOutput o){//点乘后,如果接近1,说明在视线正中,接近0则在视线边缘          half dotp =dot(IN.viewDir,o.Normal);//设置自发光,我们需要当正中时没有颜色,就是*0,在边缘有颜色,就是*1//和上面的数字刚好相反,所以我们用(1-dotp)来得到上面的效果o.Emission =_Color.rgb*(1-dotp);}ENDCG}
}

 得到效果为(如图3所示)

图3 发光球

2.弧形边缘光进阶

大部分模型都是有自己贴图的,所以我们在发光的基础上,加上贴图

Shader "Custom/010"
{Properties{//放图片进入_MainTex("MainTex",2D)="white"{} //设置自发光的颜色_Color("Color",Color)=(0,0.5,0.5,0)}SubShader{CGPROGRAM#pragma surface surf Lambertsampler2D _MainTex;float4 _Color;struct Input{float2 uv_MainTex;//直接获取viewDirfloat3 viewDir;};void surf(Input IN,inout SurfaceOutput o){//这都是之前讲过的,不进行二次讲解了o.Albedo =tex2D(_MainTex,IN.uv_MainTex).rgb;//点乘后,如果接近1,说明在视线正中,接近0则在视线边缘          half dotp =dot(IN.viewDir,o.Normal);//设置自发光,我们需要当正中时没有颜色,就是*0,在边缘有颜色,就是*1//和上面的数字刚好相反,所以我们用(1-dotp)来得到上面的效果o.Emission =_Color.rgb*(1-dotp);}ENDCG}
}

得到的效果为(如图4所示)

图4 弧形边缘光进阶

3.弧形边缘光调节渐变范围

大部分时候,上面的发光范围都是有点大了,所以我们需要加个参数进行调节。

数学知识:

_Color.rgb*(1-dotp)中的(1-dotp)是一个线性变化的数据,变化是平均的,就像数数一样:0.1,0.2,0.3......

我们怎么才能让它的增长变快?前面一直比较小,越往后越大。

有一个非常简单的方法:平方

{0.1^{2}}{0.2^{2}}{0.3^{2}}.......

如果你觉得平方变化不满意,可以是其他次方

 所以我们增加一个参数,来改变光范围。

函数知识:

次方的公式是pow(底数,次方)

Shader "Custom/010"
{Properties{_MainTex("MainTex",2D)="white"{} _Color("Color",Color)=(0,0.5,0.5,0)//边缘光范围参数_Power("Power",Range(0.8,8)) = 3}SubShader{CGPROGRAM#pragma surface surf Lambertsampler2D _MainTex;float4 _Color;//接入参数float _Power;struct Input{float2 uv_MainTex;float3 viewDir;};void surf(Input IN,inout SurfaceOutput o){o.Albedo =tex2D(_MainTex,IN.uv_MainTex).rgb;         half dotp =dot(IN.viewDir,o.Normal);//重新设置范围变化曲线o.Emission =_Color.rgb*pow((1-dotp),_Power);}ENDCG}
}

效果(如图5所示)

图5 弧形边缘光调节渐变范围
4.边缘光突变

截止到上图,虽然我们把边缘光可以锁定在非常边缘,但它的过度还是一个渐变的,如果我希望它不要渐变,而是突然出现,怎么办?

答:做条件判断(但在此之前,为了后面计算方便,我们对数据做一个简单的处理)

我们知道前面的乘积最终结果是(-1,1),但实际我们应用时,小于-1的部分,我们完全不需要,因为都是看不见的部分和0的效果一样。

函数知识:

当数据小于0时,直接取0,当数据大于1时,直接取1,其他数据不变。

saturate()

因为前面的代码没变,这里只复制修改过的代码块。(要么太长了)

    void surf(Input IN,inout SurfaceOutput o){o.Albedo =tex2D(_MainTex,IN.uv_MainTex).rgb; //把小于0的数据都删掉half dotp =saturate(dot(IN.viewDir,o.Normal));o.Emission =_Color.rgb*pow((1-dotp),_Power);}

为了方便计算,我们把(1-dotp)也合并到上面。

    void surf(Input IN,inout SurfaceOutput o){o.Albedo =tex2D(_MainTex,IN.uv_MainTex).rgb; //合并计算half dotp =1-saturate(dot(IN.viewDir,o.Normal));o.Emission =_Color.rgb*pow(dotp,_Power);}

我们可以进行突变判断,当dotp>0.8时,显示边缘光,反之不显示。

    void surf(Input IN,inout SurfaceOutput o){o.Albedo =tex2D(_MainTex,IN.uv_MainTex).rgb; //合并计算half dotp =1-saturate(dot(IN.viewDir,o.Normal));//渐变边缘光(暂时废弃)//o.Emission =_Color.rgb*pow(dotp,_Power);//突变边缘光       //如果大于0.8,就等于1,反之等于0o.Emission =_Color.rgb*dotp>0.8?1:0;}

效果(如图6所示)

图6 突变边缘光

如果你还是希望有一点渐变,不太明显,哈哈~可以自己尝试。

        //有一点渐变o.Emission =_Color.rgb*dotp>0.8?dotp:0;
5.同心圆

同样继续利用这个规律,我们可以做出同心圆。打了注释的地方是有增加,其他地方不变。

Shader "Custom/010"
{Properties{_MainTex("MainTex",2D)="white"{} //外圈颜色_Color("Color",Color)=(0,0.5,0.5,0)//内圈颜色_Color2("Color2",Color)=(0,0.5,0.5,0)_Power("Power",Range(0.8,8)) = 3}SubShader{CGPROGRAM#pragma surface surf Lambertsampler2D _MainTex;//外圈声明float4 _Color;//内圈声明float4 _Color2;float _Power;struct Input{float2 uv_MainTex;float3 viewDir;};void surf(Input IN,inout SurfaceOutput o){o.Albedo =tex2D(_MainTex,IN.uv_MainTex).rgb; half dotp =1-saturate(dot(IN.viewDir,o.Normal));//同心圆o.Emission =dotp>0.5?_Color.rgb:_Color2.rgb;}ENDCG}
}

效果(如图7所示)

图7 同心圆

备注:多层同心圆

//多层同心圆                                            //用了个绿色
o.Emission =dotp>0.8?_Color.rgb:dotp>0.5?_Color2.rgb:float4(0,1,0,0);
图8 多层同心圆

 三、加入世界坐标做效果

1.绘制结界

动画片里经常有那种从地底下穿越上来,东西就变色了,这里也可以做这种效果,不过,我们需要先加入世界坐标。

其他的代码还是用之前的,改了改了哪里下面就替换哪部分!!!

    struct Input{float2 uv_MainTex;float3 viewDir;//加入世界坐标float3 worldPos;};

当y>0时,变色~

    void surf(Input IN,inout SurfaceOutput o){o.Albedo =tex2D(_MainTex,IN.uv_MainTex).rgb; half dotp =1-saturate(dot(IN.viewDir,o.Normal));//绘制结界o.Emission =IN.worldPos.y>0?_Color:float4(1,1,1,1);}

效果(如图9所示)

图9 结界球
2.斑马球

 我们继续对世界坐标做文章,无论我们球的y坐标是多少,我们把奇数染成白的,偶数染成黑的。

数学知识:

整数位是偶数,除以2,结果的小数位在0~0.5之间

整数位是奇数,除以2,结果的小数位在0.5~1之间

备注:你们可以验证一下

3.2/2=1.6,因为3.2的整数位3是奇数,所以结果的小数位0.6,在0.5~1之间。

函数知识:

取小数的函数。

frac()

例:frac(16.89)=0.89

因为我们的球目前本来就不大,所以我们把y坐标都乘10,然后再计算。

    void surf(Input IN,inout SurfaceOutput o){half dotp =1-saturate(dot(IN.viewDir,o.Normal));//绘制斑马                                    //黑色        //白色o.Emission = frac(IN.worldPos.y*10/2)>0.5?float4(1,1,1,1):float4(0,0,0,0);}

效果(如图10所示)

图10 斑马球
3.效果合并

我们可以把之前的边缘光效果和贴图效果再打开。

    void surf(Input IN,inout SurfaceOutput o){//打开贴图o.Albedo =tex2D(_MainTex,IN.uv_MainTex).rgb; half dotp =1-saturate(dot(IN.viewDir,o.Normal));//绘制斑马o.Emission = frac(IN.worldPos.y*10/2)>0.5?//颜色乘了边缘光那会的数值    
float4(1,1,1,1)*dotp:float4(0,0,0,0)*dotp;}

效果(如图11所示)

图11 效果合并

是不是有那味了~ 

 四、作者的碎碎念

考虑到好多宝宝,学了功能也不知道怎么去用, 专门出了这个简单应用专题,供大家练习。

喜欢的话希望大家给我点赞,收藏加关注哦~ღ( ´・ᴗ・` )比心

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

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

相关文章

JMU 数科 数据库与数据仓库期末总结(4)实验设计题

E-R图 实体-关系图 E-R图的组成要素主要包括: 实体(Entity):实体代表现实世界中可相互区别的对象或事物,如顾客、订单、产品等。在图中,实体通常用矩形表示,并在矩形内标注实体的名称。 属性…

基于c语言的简单的数据库

​‌​⁠​​​​​⁠​‬​‬‌​‍​​​‌​‌‬​‌​⁠​​‬‍‬​​⁠​‬‍​​‬​​​‬简单的数据库 - 飞书云文档 (feishu.cn) mydatabase: 实现一个简单的数据库,基于B树 (gitee.com)

纯css星空动画

让大家实现一个这样的星空动画效果,大家会怎么做? js,不! 其实使用css就能写 我也不藏着掖着,源码直接放下面了 <script setup></script><template><div class"box"><div v-for"i in 5" :key"i" :class"layer…

基于C#、Visual Studio 2017以及.NET Framework 4.5的Log4Net使用教程

在使用Log4Net记录日志时&#xff0c;以下是一个基于C#、Visual Studio 2017以及.NET Framework 4.5的详细步骤教程。这个教程适合初学者&#xff0c;会从添加Log4Net库、配置日志、编写日志记录代码等方面进行说明。 步骤1&#xff1a;安装Log4Net 通过NuGet安装 打开您的Vi…

信友队:南风的收集

C. [202406C]楠枫的收集 文件操作 时间限制: 1000ms 空间限制: 262144KB 输入文件名: 202406C.in 输出文件名: 202406C.out Accepted 100 分 题目描述 一年四季&#xff0c;寒暑交替&#xff0c;楠枫总是会收集每一个季节的树叶&#xff0c;并把它们制作成标本收集起来。当…

力扣 24.两两交换链表的结点

class Solution { public: ListNode* swapPairs(ListNode* head) { if(headnullptr ||head->nextnullptr) return head; auto tmpswapPairs(head->next->next); auto rethead->next; head->next->nexthead; head->nexttmp; return ret; } };

解放代码:识别与消除循环依赖的实战指南

目录 一、对循环依赖的基本认识 &#xff08;一&#xff09;代码中形成循环依赖的说明 &#xff08;二&#xff09;无环依赖的原则 二、识别和消除循环依赖的方法 &#xff08;一&#xff09;使用JDepend识别循环依赖 使用 Maven 集成 JDepend 分析报告识别循环依赖 &a…

用Python pillow 创建和保存GIF动画

使用pillow库来创建和保存gif GIFs:图形交换格式(gif)是一种位图图像格式&#xff0c;由美国计算机科学家Steve Wilhite于1987年6月15日领导的在线服务提供商CompuServe的一个团队开发。 一个GIF文件通常存储一个图像&#xff0c;但该格式允许在一个文件中存储多个图像。该格…

为什么要学习这么多“没用”的知识

最近也在看一些东西&#xff0c;很多很杂&#xff0c;底层的知识&#xff0c;高级的架构&#xff0c;正确且废话的方法论。。。越看越迷茫。和同学聊天&#xff0c;也在自嘲现在看的这些八股文&#xff0c;源代码&#xff0c;除了面试那几天用一下&#xff0c;可能一辈子都不会…

【Java05】Java中的多维数组

从数组底层运行机制上看&#xff0c;Java没有多维数组一说。所谓多维数组&#xff0c;是说一个引用变量指向的元素也是引用变量。 例如&#xff0c;type[] arrayName是个指向type类型元素的数组。倘若type也是数组引用变量&#xff0c;比如int[]&#xff0c;那么这个数组就可以…

中国银行信息科技运营中心、软件中心春招笔试测评面试体检全记录

本文介绍2024届春招中&#xff0c;中国银行下属各部门统一笔试&#xff0c;以及信息科技运营中心与软件中心各自的面试&#xff0c;以及编程能力测评、体检等相关环节的具体流程、相关信息等。 2024年04月投递了中国银行的信息科技类岗位&#xff0c;一共投递了4个岗位&#xf…

数字孪生定义及应用介绍

数字孪生定义及应用介绍 1 数字孪生&#xff08;Digital Twin, DT&#xff09;概述1.1 定义1.2 功能1.3 使用场景1.4 数字孪生三步走1.4.1 数字模型1.4.2 数字影子1.4.3 数字孪生 数字孪生地球平台Earth-2 参考 1 数字孪生&#xff08;Digital Twin, DT&#xff09;概述 数字孪…

QT TCP服务器和客户端示例程序

下面是一个简单的 Qt TCP 服务器和客户端示例&#xff0c;演示了如何使用 vSetDriver、vSetListener 和 vTcpServerStart 函数。假设 vSetDriver 和 vSetListener 是你定义的自定义函数。 TCP 服务器部分 tcpserver.h #ifndef TCPSERVER_H #define TCPSERVER_H#include <QT…

前端-高德地图去掉左下角Logo和版本号

前端-高德地图去掉左下角Logo和版本号 以react less 为例&#xff1a; .mapContainer{:global{.amap-logo {display: none !important; //去掉高德地图logo}.amap-copyright {opacity: 0; //去掉高德的版本号}} }

基于自编码器的心电信号异常检测(Pytorch)

代码较为简单&#xff0c;很容易读懂。 # Importing necessary libraries for TensorFlow, pandas, numpy, and matplotlib import tensorflow as tf import pandas as pd import numpy as np import matplotlib.pyplot as plt import copy# Importing the PyTorch library im…

内网穿透的原理:实现远程访问的技术揭秘

内网穿透的原理&#xff1a;实现远程访问的技术揭秘 引言 内网穿透是一种允许外部网络访问内网服务的技术。这对于远程办公、访问家庭服务器或进行开发测试非常有用。本文将探讨内网穿透的工作原理及其实现方式。 基础知识 内网&#xff08;LAN&#xff09;&#xff1a;局域…

ml307A模块连接阿里云(详细版)

1、需要的信息 MQTT连接参数、订阅或发布的主题、服务器地址、端口1883 服务器地址&#xff1a; alFMz7jnArW.iot-as-mqtt.cn-shanghai.aliyuncs.com 注&#xff1a;重要的信息阿里云信息大家不要透露&#xff0c;写完笔记会及时删除产品及设备&#xff0c;大家用自己的信息…

linux精通 4.1

2.1.3 http服务器实现 目的 reactor应用——webserver webclient 每次上课前 看大纲down code 复习&#xff1a; 不行啊 编译给的代码报错啊 给的最新的不是0430那一版就不行啊 reactor.c:(.text0x254): relocation truncated to fit: R_X86_64_PC32 against symbol begin de…

python 光伏相关packages

除了PVLIB之外&#xff0c;还有一些其他光伏&#xff08;太阳能光伏&#xff09;相关的Python包和工具。这些包提供了各种功能&#xff0c;从光伏系统建模和仿真到数据处理和可视化。以下是一些常见的光伏相关Python包&#xff1a; SolarPy: SolarPy 是一个专注于太阳能数据分析…

待学习记录清单

1、大模型相关的知识和周边知识&#xff0c;相关的论文阅读&#xff1b; 论文0&#xff1a;https://arxiv.org/abs/1706.03762 论文1&#xff1a;https://arxiv.org/pdf/2306.07962 论文2&#xff1a;https://arxiv.org/abs/2405.20323 2代码链接&#xff1a;https://github.co…