首页 > 其他分享 >Amplify Shader Editor学习

Amplify Shader Editor学习

时间:2024-09-06 21:14:48浏览次数:12  
标签:效果 normal float Shader Editor ans World view Amplify

半透明边缘光效果

原理

整个效果分为两部分,一个是半透明效果另一个是边缘发光,对于第一个效果来说我们只需要使用透明度混合的方法就可以办到,第二个效果的关键在于怎么辨别边缘?
我们可以用法线向量点乘视线向量来辨别.

\[ \vec{a} * \vec{b} = |a| * |b| * cos\theta,所以可以通过点乘来得到向量夹角之间的关系,仔细想一想就会发现越靠近边缘的法线与视线的夹角就越大 \]

代码

float4 _Color;
float _Emiss;
float _RimPower;
v2f vert(a2v v)
{
    v2f ans;
    ans.pos = UnityObjectToClipPos(v.vertex);
    ans.view_World = _WorldSpaceCameraPos.xyz - mul(unity_ObjectToWorld, v.vertex).xyz;
    ans.normal_World = UnityObjectToWorldNormal(v.normal);
    return ans;
}
float4 frag(v2f res) : SV_Target
{
    float3 normal_World = normalize(res.normal_World);
    float3 view_World = normalize(res.view_World);
    float NdotV = dot(normal_World, view_World);
    float rim = pow(1 - NdotV, _RimPower); // cos在[0, pi / 2]是单调递减,所以反一下
    
    float3 color = _Color.xyz * _Emiss;
    float alpha = saturate(rim * _Emiss); // 越靠近边缘rim越大,alpha越大,显色越明显
    return float4(color, alpha);
}

效果

透明流光效果

原理

透明光效果和上面的是一样的,流光效果的话只要在用uv进行采样的时候添加Time就可以了,因为加入Time变量之后每次采样的uv坐标都会边然后就会导致一个点的颜色随着Time的变化而变化,从而达到流光的效果。如果直接用模型的uv会导致整个效果像是贴在模型上一样不自然也不好看,所以我们可以使用顶点的世界坐标的xy平面坐标作为uv来采样。但是这样也有个问题就是当模型移动时流光会跟着动,故我们要将世界坐标减去模型坐标的原点(世界坐标下)

ASE

效果

MatCap技术

原理

大佬文章

ASE

效果

标签:效果,normal,float,Shader,Editor,ans,World,view,Amplify
From: https://www.cnblogs.com/monituihuo/p/18400953

相关文章

  • 图形学学习(二):Shader输入输出及自制Shader类
    在LearnOpengl学了Shader的输入输出和自制Shader类,输入输出还是好理解的,自制Shader类的讲解我感觉还是用代码更直观一些(个人感觉),这两天看了一下秋招的面试面经,想了想明年找工作的问题,刺激,十分感慨,优秀的人还是太多了,不过最重要的还是得做好自己!!!Shader的输入输出总结有两种......
  • 使用vue-json-pretty和vue-json-schema-editor-visual封装一个可视化json数据编辑器及
    一、前言        最近做了一个需求,要求实现可以对json结构进行编辑保存及字段级别的权限管控,结合目前已有的轮子和当前项目的结构,决定使用vue-json-pretty和vue-json-schema-editor-visual来实现效果如下组件支持修改左侧json数据,自动生成右侧树。也支持修改右侧树......
  • pbootcms去除ueditor编辑器图片自动添加的title和alt属性
    为了去掉UEditor上传图片时自动添加的 title 和 alt 属性,并且将 alt 属性设置为空,可以按照以下步骤进行修改:步骤1:修改 ueditor.all.min.js 文件打开文件:打开文件 \core\extend\ueditor\ueditor.all.min.js。搜索并修改代码:搜索 "imageUrlPrefix",找到以......
  • Unity Hub 安装 Editor 失败,出现 “Install failed: Validation Failed” 的解决方法
    网上有很多解决方法,但是对我来说没有什么用,还是安装不成功。所以我想到了查看错误日志,通过错误日志来把问题解决掉。要查看UnityHub的错误日志,你可以按照以下步骤操作:Windows:1.打开文件资源管理器:按Win+E打开文件资源管理器。2.导航到日志文件夹:进入以下路径......
  • 喜报!Fluent Editor 开源富文本迎来了第一位贡献者!
    你好,我是Kagol,个人公众号:前端开源星球。2024年8月20日,刚开源一周的富文本FluentEditor迎来了第一位贡献者:zzxming1Bug描述zzxming同学修复了FluentEditor富文本表格模块的一个隐藏Bug:fix:tablemodulecan'tsavebackgroundcolor#10缺陷描述:通过表格右键菜......
  • NGraphX v1.8.2发布,Bug修复及增加AiEditor接入示例并托管示例源码到Github
    本次更新包括了对启动脚本、认证流程、请求Url处理的优化,以及工作流API的改进。此外,我们还新增了AiEditor接入示例,让用户体验更直观、互动性更强。示例更新内容:启动脚本主机参数默认值修改:修改启动脚本中主机参数的默认值为127.0.0.1,以增强本地访问的安全性。如需开启......
  • quill-editor 富文本 组件封装并实现自定义上传图片
    基于quill-editor封装一个富文本组件,并实现自定义上传图片以及视频1.下载quill-editor npminstallvue-quill-editor--save2.对插件进行自定义改造(自定义字体大小选择,自定义标题,以及自定义工具栏功能) <template><divclass="edtior-box"><quill-editor......
  • EmEditor Pro v24.2.1 中文授权版
    EmEditor文本编辑器是一款功能强大且非常好用的文本编辑器!它启动速度快,可以完全代替Windows自带的记事本,足以胜任日常的文本编辑工作。良好地支持Unicode和中文字符,还支持20多种编程语言的语法突出显示。并且支持的语法种类可以不断的扩充。具有选择文本列块的功能(按ALT键拖......
  • Vue 3 + wangEditor 5 封装并使用富文本编辑器组件
    1.实现效果2.安装官网:https://www.wangeditor.com#Vue2安装yarnadd@wangeditor/editor-for-vue#或者npminstall@wangeditor/editor-for-vue--save#Vue3安装yarnadd@wangeditor/editor-for-vue@next#或者npminstall@wangeditor/editor-for-vue@next......
  • Django后台管理Xadmin使用DjangoUeditor富文本编辑器
    Django后台管理Xadmin使用DjangoUeditor富文本编辑器一、下载点击github下载https://github.com/twz915/DjangoUeditor31、下载完后解压到跟xadmin同一层级目录:2、解压后名称可能为DjangoUeditor3-master,需要改为DjangoUeditor3、进入DjangoUeditor目录,把DjangoUedit......