庄懂着色器_L21_CyberPunk

2023-12-04 14:39
文章标签 着色器 庄懂 cyberpunk l21

本文主要是介绍庄懂着色器_L21_CyberPunk,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

庄懂-BoyanTata的个人空间_哔哩哔哩_Bilibili


案例_赛博小人
模型准备
平常所说的1U,2U对应Unity的是0U,1U
3Dsmax的顺序是从1开始的;Unity_UV的顺序是从0开始的
特效贴图制作
再需要一张模型的Position纹理
低频信息就是在整个纹理上,它的过渡比较平缓,它没有很高的相邻的对比,所以这张纹理不需要太大
烘焙了一张位置的模型信息,用这个位置信息去算它这个3D_Noise_噪声强度,并这个噪声强度转化到模型的UV空间,又把它拍平到它的UV空间的一个2D的Noise上(这张图是256*256,也是低频信号 )
Edge_Detect 边缘检测节点
Flood Fill连接Flood Fill To Random GrayScale是SD常用的作图套路
代码部分
Shader "AP01/L21/CyberPunk"
{Properties{[Header(Texture)]_MainTex    ("RGB:基础颜色 A:环境遮罩", 2D) = "white" {}[Normal] _NormTex   ("RGB:法线贴图", 2D)                = "bump" {}_SpecTex    ("RGB:高光颜色 A:高光次幂", 2D)     = "gray" {}_EmitTex    ("RGB:环境贴图", 2d)                = "black" {}_Cubemap    ("RGB:环境贴图", cube)              = "_Skybox" {}[Header(Diffuse)]_MainCol    ("基本色",      Color)              = (0.5, 0.5, 0.5, 1.0)_EnvDiffInt ("环境漫反射强度",  Range(0, 1))    = 0.2_EnvUpCol   ("环境天顶颜色", Color)             = (1.0, 1.0, 1.0, 1.0)_EnvSideCol ("环境水平颜色", Color)             = (0.5, 0.5, 0.5, 1.0)_EnvDownCol ("环境地表颜色", Color)             = (0.0, 0.0, 0.0, 0.0)[Header(Specular)][PowerSlider(2)] _SpecPow    ("高光次幂",    Range(1, 90))       = 30_EnvSpecInt ("环境镜面反射强度", Range(0, 5))   = 0.2_FresnelPow ("菲涅尔次幂", Range(0, 5))         = 1_CubemapMip ("环境球Mip", Range(0, 7))          = 0[Header(Emission)][HideInInspect] _EmitInt    ("自发光强度", range(1, 10))         = 1[Header(Effect)]_EffMap01   ("特效纹理1", 2D)                   = "gray" {}_EffMap02   ("特效纹理2", 2D)                   = "gray" {}[HDR]_EffCol     ("光效颜色", color)                 = (0.0, 0.0, 0.0, 0.0)_EffParams  ("X:波密度 Y:波速度 Z:混乱度 W:消散强度", vector) = (0.03, 3.0, 0.3, 2.5)}SubShader{Tags { "Queue"="Transparent" "RenderType"="Transparent" }Pass{Name "FORWARD"Tags { "LightMode"="ForwardBase" }Blend One OneMinusSrcAlpha          // 修改混合方式One/SrcAlpha OneMinusSrcAlphaCGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"// 追加投影相关包含文件#include "AutoLight.cginc"#include "Lighting.cginc"#include "../../Lesson11/cginc/MyCginc.cginc"   // 修改Cginc引用路径#pragma multi_compile_fwdbase_fullshadows#pragma target 3.0// 输入参数// Textureuniform sampler2D _MainTex; uniform float4 _MainTex_ST;uniform sampler2D _NormTex;uniform sampler2D _SpecTex;uniform sampler2D _EmitTex;uniform samplerCUBE _Cubemap;// Diffuseuniform float3 _MainCol;uniform float _EnvDiffInt;uniform float3 _EnvUpCol;uniform float3 _EnvSideCol;uniform float3 _EnvDownCol;// Specularuniform float _SpecPow;uniform float _FresnelPow;uniform float _EnvSpecInt;uniform float _CubemapMip;// Emissionuniform float _EmitInt;// Effectuniform sampler2D _EffMap01;uniform sampler2D _EffMap02;uniform float3 _EffCol;uniform float4 _EffParams;// 输入结构struct VertexInput{float4 vertex   : POSITION;   // 顶点信息 Get✔float2 uv0      : TEXCOORD0;  // UV信息 Get✔float2 uv1      : TEXCOORD1;  // UV信息 Get✔float4 normal   : NORMAL;     // 法线信息 Get✔float4 tangent  : TANGENT;    // 切线信息 Get✔float4 color    : COLOR;      // 追加顶点色信息};// 输出结构struct VertexOutput{float4 pos    : SV_POSITION;  // 屏幕顶点位置float2 uv0      : TEXCOORD0;  // UV0float2 uv1      : TEXCOORD1;  // UV0float4 posWS    : TEXCOORD2;  // 世界空间顶点位置float3 nDirWS   : TEXCOORD3;  // 世界空间法线方向float3 tDirWS   : TEXCOORD4;  // 世界空间切线方向float3 bDirWS   : TEXCOORD5;  // 世界空间副切线方向float4 effectMask : TEXCOORD6;  // 追加effectMask输出LIGHTING_COORDS(7, 8)          // 投影相关};// 动画方法 inout顶点信息 返回effct相关遮罩float4 CyberpunkAnim(float noise, float mask, float3 normal, inout float3 vertex){// 生成锯齿波Maskfloat baseMask = abs(frac(vertex.y * _EffParams.x - _Time.x * _EffParams.y) - 0.5) * 2.0;baseMask = min(1.0, baseMask * 2.0);// 用Noise偏移锯齿波baseMask += (noise - 0.5) * _EffParams.z;// SmoothStep出各级Maskfloat4 effectMask = float4(0.0, 0.0, 0.0, 0.0);effectMask.x = smoothstep(0.0, 0.9, baseMask);effectMask.y = smoothstep(0.2, 0.7, baseMask);effectMask.z = smoothstep(0.4, 0.5, baseMask);// 将顶点色遮罩存入EffectMaskeffectMask.w = mask;// 计算顶点动画vertex.xz += normal.xz * (1.0 - effectMask.y) * _EffParams.w * mask;// 返回EffectMaskreturn effectMask;}// 输入结构>>>顶点Shader>>>输出结构VertexOutput vert (VertexInput v){// 采样纹理float noise = tex2Dlod(_EffMap02, float4(v.uv1, 0.0, 0.0)).r;// 输出结构VertexOutput o = (VertexOutput)0;// 计算顶点动画 同时获取EffectMasko.effectMask = CyberpunkAnim(noise, v.color.r, v.normal.xyz, v.vertex.xyz);o.pos = UnityObjectToClipPos(v.vertex);         // 顶点位置 OS>CSo.uv0 = v.uv0 * _MainTex_ST.xy + _MainTex_ST.zw;// 传递UVo.uv1 = v.uv1;o.posWS = mul(unity_ObjectToWorld, v.vertex);   // 顶点位置 OS>WSo.nDirWS = UnityObjectToWorldNormal(v.normal);  // 法线方向 OS>WSo.tDirWS = normalize(mul(unity_ObjectToWorld, float4(v.tangent.xyz, 0.0)).xyz); // 切线方向 OS>WSo.bDirWS = normalize(cross(o.nDirWS, o.tDirWS) * v.tangent.w);  // 副切线方向TRANSFER_VERTEX_TO_FRAGMENT(o)                  // 投影相关return o;                                           // 返回输出结构}// 输出结构>>>像素float4 frag(VertexOutput i) : COLOR{// 准备向量float3 nDirTS = UnpackNormal(tex2D(_NormTex, i.uv0)).rgb;float3x3 TBN = float3x3(i.tDirWS, i.bDirWS, i.nDirWS);float3 nDirWS = normalize(mul(nDirTS, TBN));float3 vDirWS = normalize(_WorldSpaceCameraPos.xyz - i.posWS.xyz);float3 vrDirWS = reflect(-vDirWS, nDirWS);float3 lDirWS = _WorldSpaceLightPos0.xyz;float3 lrDirWS = reflect(-lDirWS, nDirWS);// 准备点积结果float ndotl = dot(nDirWS, lDirWS);float vdotr = dot(vDirWS, lrDirWS);float vdotn = dot(vDirWS, nDirWS);// 采样纹理float4 var_MainTex = tex2D(_MainTex, i.uv0);float4 var_SpecTex = tex2D(_SpecTex, i.uv0);float3 var_EmitTex = tex2D(_EmitTex, i.uv0).rgb;float3 var_Cubemap = texCUBElod(_Cubemap, float4(vrDirWS, lerp(_CubemapMip, 0.0, var_SpecTex.a))).rgb;// 光照模型(直接光照部分)float3 baseCol = var_MainTex.rgb * _MainCol;float lambert = max(0.0, ndotl);float specCol = var_SpecTex.rgb;float specPow = lerp(1, _SpecPow, var_SpecTex.a);float phong = pow(max(0.0, vdotr), specPow);float shadow = LIGHT_ATTENUATION(i);float3 dirLighting = (baseCol * lambert + specCol * phong) * _LightColor0 * shadow;// 光照模型(环境光照部分) 3Col环境色方法float3 envCol = TriColAmbient(nDirWS, _EnvUpCol, _EnvSideCol, _EnvDownCol);float fresnel = pow(max(0.0, 1.0 - vdotn), _FresnelPow);    // 菲涅尔float occlusion = var_MainTex.a;float3 envLighting = (baseCol * envCol * _EnvDiffInt + var_Cubemap * fresnel * _EnvSpecInt * var_SpecTex.a) * occlusion;// 光照模型(自发光部分)float3 emission = var_EmitTex * _EmitInt * (sin(_Time.z) * 0.5 + 0.5);// 特效部分// 采样EffMap02float3 _EffMap01_var = tex2D(_EffMap01, i.uv1).xyz;float meshMask = _EffMap01_var.x;float faceRandomMask = _EffMap01_var.y;float faceSlopeMask = _EffMap01_var.z;// 获取EffectMaskfloat smallMask = i.effectMask.x;float midMask = i.effectMask.y;float bigMask = i.effectMask.z;float baseMask = i.effectMask.w;// 计算Opacityfloat bigOpacity = saturate(floor(min(faceRandomMask, 0.999999) + midMask));float midOpacity = saturate(floor(min(faceSlopeMask, 0.999999) + bigMask));float opacity = lerp(1.0, min(bigOpacity, midOpacity), baseMask);// 叠加自发光float meshEmitInt = (bigMask - smallMask) * meshMask;meshEmitInt = meshEmitInt * meshEmitInt;emission += _EffCol * meshEmitInt * baseMask;// 返回结果float3 finalRGB = dirLighting + envLighting + emission;return float4(finalRGB * opacity, opacity);}ENDCG}}FallBack "Diffuse"
}
知识点

这篇关于庄懂着色器_L21_CyberPunk的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/453832

相关文章

【Unity Shader】片段着色器(Fragment Shader)的概念及其使用方法

在Unity和图形编程中,片段着色器(Fragment Shader)是渲染管线中的一个阶段,负责计算屏幕上每个像素(片段)的颜色和特性。片段着色器通常在顶点着色器和任何几何处理之后运行,是决定最终像素颜色的关键步骤。 Fragment Shader的概念: 像素处理:片段着色器处理经过顶点着色器和几何着色器处理后,映射到屏幕空间的像素。颜色计算:它计算每个像素的颜色值,这可能包括纹理采样、光

UE4_材质_湿度着色器及Desaturation算法_ben材质教程

学习笔记,不喜勿喷!侵权立删,祝愿美好生活越来越好。 效果图: 原图: 1、使用初学者内容包的材质 我们这里使用虚幻自带的材质M_Brick_Clay_Old,复制一个更名为M_Brickclayoldwet材质。 2、添加去饱和度Desaturation节点 添加几个功能,让表面看起来是湿的,是什么能使表面看起来是湿的呢?东西的表面吸收水会使表面颜色变深,

第九章 Three.js 高级材质与着色器 (一)

材质和着色器在Three.js中扮演着至关重要的角色,它们决定了物体的外观和视觉效果。在本章中,我们将深入学习Three.js中的高级材质和自定义着色器,以创建复杂和精美的视觉效果。 9.1 基本材质回顾 在开始深入探讨高级材质之前,回顾一下Three.js提供的几种基本材质: MeshBasicMaterial: 不受光照影响的材质。MeshStandardMaterial: 基于物理的标

OpenGL ES _ 着色器_语法

OpenGL ES _ 入门_01OpenGL ES _ 入门_02OpenGL ES _ 入门_03OpenGL ES _ 入门_04OpenGL ES _ 入门_05OpenGL ES _ 入门练习_01OpenGL ES _ 入门练习_02OpenGL ES _ 入门练习_03OpenGL ES _ 入门练习_04OpenGL ES _ 入门练习_05OpenGL ES _ 入门练习_06

OpenGL ES _ 着色器_程序

OpenGL ES _ 入门_01OpenGL ES _ 入门_02OpenGL ES _ 入门_03OpenGL ES _ 入门_04OpenGL ES _ 入门_05OpenGL ES _ 入门练习_01OpenGL ES _ 入门练习_02OpenGL ES _ 入门练习_03OpenGL ES _ 入门练习_04OpenGL ES _ 入门练习_05OpenGL ES _ 入门练习_06

unity 定点着色器输入值

unity shader有3中类型,分别是固定着色器,顶点片段着色器和表面着色器, 固定着色器固定功能着色器为固定功能渲染管线的具体表现,功能较简单兼容比较老的机器基本都快被淘汰了。 表面着色器是对定点片源着色器的封装,封装了好多创建的光照模型,降低shader的书写门槛,但是不方便理解shader实现原理。 定点和片段着色器,顾名思义是由定点着色器和片段着色器组成的,灵活度比较高,但是需要有一定

从渲染管线到着色器Shader实践

浏览器渲染管线原理 浏览器渲染管线是浏览器将HTML、CSS和JavaScript转换为用户可见的网页的过程。这一过程涉及多个步骤,包括解析、布局、绘制和合成等。下面是浏览器渲染管线的详细原理: 解析(Parsing): HTML解析:浏览器下载HTML内容后,首先进行HTML解析,将HTML文本转换为DOM(文档对象模型)树。DOM树是一个以HTML标签为节点的树状结构,表示了文档的内容和

Unity的着色器

在Unity中,材质(Material)、着色器(Shader)和纹理(Texture)三者的关系非常密切。一个材质指定使用一个着色器,着色器则决定了材质可以使用的属性;一个着色器可以设置一个或多个纹理。 属性列表(properties)里的属性会显示在材质面板。HLSL代码需要访问列表中的属性时,要先根据变量类型映射进行声明。 每一个着色器(shader)有一个或多个子着色器(subshad

OpenGL 处理 16位 unsigned int数据图像 以及着色器

当处理16位unsigned int数据图像时,你需要考虑使用OpenGL来加载和处理这些图像。在OpenGL中,你可以使用glTexImage2D函数来加载纹理数据。下面是一个简单的教程,演示如何加载16位unsigned int数据图像: 步骤 1: 准备图像数据 首先,确保你有一张16位unsigned int数据格式的图像。你可以从文件中加载图像,也可以通过代码生成图像数据。无论如何,

Unity3D 5 官方教程:标准着色器之材质参数(三)

法线贴图(凹凸贴图) 法线贴图是凹凸贴图的一种。它们是允许向模型添加如凹凸、沟槽和抓痕这样,仿佛被实素几何学表现那样发光的表面细节的一种特定纹理。 例如,用户可能希望展示一个有沟槽,以及螺钉或铆钉的表面,比如飞机的外壳。一种实现的方法是将细节作为几何学建模,如下图所示。 一块用实素几何学建模的,带细节的平面金属。 根据具体情形,有这样微小的用“真实”几何学建模的细节通常不是好的办法