庄懂着色器_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

相关文章

OpenGL——着色器画一个点

一、 绘制 在窗口中间画一个像素点: #include <GL/glew.h>#include <GLFW/glfw3.h>#include <iostream>using namespace std;#define numVAOs 1GLuint renderingProgram;GLuint vao[numVAOs];GLuintcreateShaderProgram (){c

学习使用RenderDoc查看着色器代码

0. 准备 首先,我想要一个相对简单的程序来学习。因此,我选择了 DX11官方范例(包含在DirectX11官方SDK中)里的【Tutorial 07: Texture Mapping and Constant 】 需要安装工程,编译出exe,然后将着色器文件(Tutorial07.fx)和贴图文件(seafloor.dds)放到exe的同级目录。随后应该可以打开exe: 1. 截一帧

glsl着色器学习(九)屏幕像素空间和设置颜色

在上一篇文章中,使用的是裁剪空间进行绘制,这篇文章使用屏幕像素空间的坐标进行绘制。 上一篇的顶点着色器大概是这样子的 回归一下顶点着色的主要任务:  通常情况下,顶点着色器会进行一系列的矩阵变换操作,将输入的顶点坐标从模型空间依次经过世界空间,视图空间,最终转换到裁剪空间。 将顶点着色器改成下面这样: <script id="vertex-shader-2d" type="x-sh

glsl着色器学习(十)缩放

对二维图形进行缩放,需要用到顶点着色器,顶点着色器经过矩阵变换,会将模型空间最终转换成裁剪空间。下面就来操作矩阵 这里需要用到一个库glMatrix。 首先修改顶点着色器 <script id="vertex-shader-2d" type="x-shader/x-vertex">attribute vec4 a_position;uniform mat4 u_matrix;void m

glsl着色器学习(六点五)顶点和片元的处理顺序

在WebGL中,顶点和片元的处理顺序遵循着图形渲染管线的流程。 顶点处理阶段 顶点处理阶段是图形渲染管线的起点,在这一阶段,所有与顶点相关的操作都会被执行。 顶点着色器(Vertex Shader) 顶点着色器接收每个顶点的数据,例如顶点坐标,法线,纹理坐标等。将顶点数据上传到图形硬件的缓冲区。在顶点着色器中,对这些顶点数据进行变换和运算,例如将顶点从模型空间转换到世界空间、视图空间和

three.js 编辑器,动画,着色器, cesium 热力图,聚合点位,大量点线面, 图层,主题,文字

对于大多数的开发者来言,看了很多文档可能遇见不到什么有用的,就算有用从文档上看,把代码复制到自己的本地大多数也是不能用的,非常浪费时间和学习成本, 尤其是three.js , cesium.js 这种难度较高, 想要实现一个功能可能会查阅很多博客 ,进行很多错误尝试,费时费力。 所以,话不多说为了给各位造福利,我搭建了在线查看代码且可的调试系统,所有案例可直接访问,让你欣赏 什么叫做 - 优雅永

Vulkan教程 - 08 着色器及编译SPIR-V

着色器模块 不像是之前的API,Vulkan着色器代码一定要用字节码格式,而不是人类可读的语法如GLSL和HLSL。这个字节码就是SPIR-V,设计用于Vulkan和OpenCL。这是一个可以用于编写图形和计算着色器的格式,但是我们主要关注的是Vulkan的图形管线。使用字节码格式的优点之一是GPU厂商写的编译器将着色器代码转化为原生代码会非常简单。过去的经验表明,人类易读的语法如GLSL,某些

[OpenGL ES 3.0编程指南]4 着色器和程序

介绍创建着色器,编译它们并链接到一个程序对象。 4.1 着色器和程序 源代码提供给着色器对象,然后着色器对象被编译为一个目标文件,编译后可以连接到一个程序对象。程序对象可以连接多个着色器对象。在OpenGL ES中,每个程序对象必须连接一个顶点着色器和一个片段着色器。一般包含6个步骤: 1.创建一个顶点着色器和一个片段着色器对象 2.将源代码连接到每个着色器对象 3.编译着色器对象 4.创建一

【Cesium学习】着色器详解【待进一步总结】

在Cesium中,drawCommand 和 CustomShader 是与渲染管线和自定义渲染效果相关的两个重要概念,但它们各自有不同的作用和应用场景。下面我将分别详解这两个概念。 drawCommand drawCommand 是 Cesium 渲染引擎内部使用的一个概念,它代表了单个渲染命令,通常包含了一组需要被WebGL API绘制的顶点和相应的渲染状态(如着色器程序、材质属性等)。在

Ogre Atomsphere shader - Ogre3d大气层着色器

最近在研究ogre的shader,看了一下官网的教程,鼓捣了一下午总算是把效果搞出来,贴一下关键代码:                 createSphere("sphere",10); createSphere("Atomsphere",11);Ogre::Entity* PlanetEntity = mSceneMgr->createEntity("planet","sphere");