【cocos creator 3.x】 修改builtin-unlit 加了一个类似流光显示的mask参数

devtools/2024/11/13 9:21:11/

效果见图：

shader 代码修改如下， 主要看 USE_MASK_UVY 关键字部分修改：

// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
CCEffect %{techniques:- name: opaquepasses:- vert: unlit-vs:vertfrag: unlit-fs:fragproperties: &propsmainTexture:    { value: grey }tilingOffset:   { value: [1, 1, 0, 0] }mainColor:      { value: [1, 1, 1, 1], linear: true, editor: { type: color } }colorScale:     { value: [1, 1, 1], target: colorScaleAndCutoff.xyz }alphaThreshold: { value: 0.5, target: colorScaleAndCutoff.w, editor: { parent: USE_ALPHA_TEST } }color:          { target: mainColor, linear: true, editor: { visible: false } } # backward compabilitymask_uvpos:     { value: 0.5, target: mask.x, editor: { parent: USE_MASK_UVY } } # uv 采样中心位置mask_width:     { value: 0.1, target: mask.y, editor: { parent: USE_MASK_UVY, range: [0, 1] } } # uv 采样上下宽度范围mask_lerpwidth:     { value: 0.05, target: mask.z, editor: { parent: USE_MASK_UVY , range: [0, 1]} } # uv 采样边缘平滑宽度mask_alpha_strength:     { value: 1, target: mask.w, editor: { parent: USE_MASK_UVY } } # uv 采样透明度强度migrations: &migsproperties:mainColor:    { formerlySerializedAs: color }- &planar-shadowvert: planar-shadow-vs:vertfrag: planar-shadow-fs:fragphase: planar-shadowpropertyIndex: 0depthStencilState:depthTest: truedepthWrite: falsestencilTestFront: truestencilFuncFront: not_equalstencilPassOpFront: replacestencilRef: 0x80 # only use the leftmost bitstencilReadMask: 0x80stencilWriteMask: 0x80blendState:targets:- blend: trueblendSrc: src_alphablendDst: one_minus_src_alphablendDstAlpha: one_minus_src_alpha- &deferred-forwardvert: unlit-vs:vertfrag: unlit-fs:fragphase: deferred-forwardpropertyIndex: 0- name: transparentpasses:- vert: unlit-vs:vertfrag: unlit-fs:fragdepthStencilState: &d1depthTest: truedepthWrite: falseblendState: &b1targets:- blend: trueblendSrc: src_alphablendDst: one_minus_src_alphablendDstAlpha: one_minus_src_alphaproperties: *propsmigrations: *migs- *planar-shadow- &deferred-forward-transparentvert: unlit-vs:vertfrag: unlit-fs:fragphase: deferred-forwardpropertyIndex: 0migrations: *migsdepthStencilState: *d1blendState: *b1- name: addpasses:- vert: unlit-vs:vertfrag: unlit-fs:fragrasterizerState: &r1 { cullMode: none }depthStencilState: *d1blendState: &b2targets:- blend: trueblendSrc: src_alphablendDst: oneblendSrcAlpha: src_alphablendDstAlpha: oneproperties: *propsmigrations: *migs- &deferred-forward-addvert: unlit-vs:vertfrag: unlit-fs:fragphase: deferred-forwardrasterizerState: *r1depthStencilState: *d1blendState: *b2propertyIndex: 0migrations: *migs- name: alpha-blendpasses:- vert: unlit-vs:vertfrag: unlit-fs:fragrasterizerState: *r1depthStencilState: *d1blendState: &b3targets:- blend: trueblendSrc: src_alphablendDst: one_minus_src_alphablendSrcAlpha: src_alphablendDstAlpha: one_minus_src_alphaproperties: *propsmigrations: *migs- &deferred-forward-alpha-blendvert: unlit-vs:vertfrag: unlit-fs:fragphase: deferred-forwardrasterizerState: *r1depthStencilState: *d1blendState: *b3propertyIndex: 0migrations: *migs
}%CCProgram unlit-vs %{precision highp float;#include <legacy/input>#include <builtin/uniforms/cc-global>#include <legacy/decode-base>#include <legacy/local-batch>#include <legacy/input>#include <legacy/fog-vs>#if USE_VERTEX_COLORin lowp vec4 a_color;out lowp vec4 v_color;#endif#if USE_TEXTUREout vec2 v_uv;uniform TexCoords {vec4 tilingOffset;};#endifvec4 vert () {vec4 position;CCVertInput(position);mat4 matWorld;CCGetWorldMatrix(matWorld);#if USE_TEXTUREv_uv = a_texCoord * tilingOffset.xy + tilingOffset.zw;#if SAMPLE_FROM_RTCC_HANDLE_RT_SAMPLE_FLIP(v_uv);#endif#endif#if USE_VERTEX_COLORv_color = a_color;#endifCC_TRANSFER_FOG(matWorld * position);return cc_matProj * (cc_matView * matWorld) * position;}
}%CCProgram unlit-fs %{precision highp float;#include <legacy/output-standard>#include <legacy/fog-fs>#if USE_ALPHA_TEST#pragma define-meta ALPHA_TEST_CHANNEL options([a, r, g, b])#endif#if USE_TEXTUREin vec2 v_uv;uniform sampler2D mainTexture;#endifuniform Constant {vec4 mainColor;vec4 colorScaleAndCutoff;vec4 mask;  // USE_MASK_UVY};#if USE_VERTEX_COLORin lowp vec4 v_color;#endif#if USE_MASK_UVY// float LerpMask(float uv_y, vec4 mask) {//   float d = abs(uv_y - mask.x);  // uv y 与中心点的距离//   float a = mask.w;//   float d2 = d - mask.y;        // 距离小于 mask.y(mask宽度范围) 则显示全值//   if(d2 > 0.0) {//     if(d2 <= mask.z && mask.z > 0.0) {//       a *= (1.0 - (d2 /mask.z)); // 距离大于 mask.y 且 小于 mask.z(mask边缘平滑宽度) 则开始衰减//     } else {//       a = 0.0;//     }//   }//   return a;// }float LinearStep(float t1, float t2, float x){x = clamp((x-t1)/(t2-t1),0.0,1.0);// return x*x*(3-2*x);  // smoothstepreturn x;}#endifvec4 frag () {vec4 o = mainColor;o.rgb *= colorScaleAndCutoff.xyz;#if USE_VERTEX_COLORo.rgb *= SRGBToLinear(v_color.rgb);//use linearo.a *= v_color.a;#endif#if USE_TEXTUREvec4 texColor = texture(mainTexture, v_uv);texColor.rgb = SRGBToLinear(texColor.rgb);o *= texColor;#endif#if USE_MASK_UVY// o.a *= LerpMask(v_uv.y, mask);o.a *= LinearStep(mask.z, 0.0, abs(v_uv.y - mask.x) - mask.y) * mask.w;#endif#if USE_ALPHA_TESTif (o.ALPHA_TEST_CHANNEL < colorScaleAndCutoff.w) discard;#endifCC_APPLY_FOG(o);return CCFragOutput(o);}
}%CCProgram planar-shadow-vs %{precision highp float;#include <legacy/input>#include <builtin/uniforms/cc-global>#include <legacy/decode-base>#include <legacy/local-batch>#include <builtin/uniforms/cc-shadow>#include <common/lighting/functions>out float v_dist;vec4 vert () {vec4 position;CCVertInput(position);// World Spacemat4 matWorld, matWorldIT;CCGetWorldMatrixFull(matWorld, matWorldIT);vec3 worldPos = (matWorld * position).xyz;vec4 shadowPos = CalculatePlanarShadowPos(worldPos, cc_cameraPos.xyz, cc_mainLitDir.xyz, cc_planarNDInfo);position = CalculatePlanarShadowClipPos(shadowPos, cc_cameraPos.xyz, cc_matView, cc_matProj, cc_nearFar, cc_shadowWHPBInfo.w);v_dist = shadowPos.w;return position;}
}%CCProgram planar-shadow-fs %{precision highp float;#include <builtin/uniforms/cc-shadow>#include <legacy/output>in float v_dist;vec4 frag () {if(v_dist < 0.0)discard;return CCFragOutput(cc_shadowColor);}
}%

即加了4个参数：

mask_uvpos:     { value: 0.5, target: mask.x, editor: { parent: USE_MASK_UVY } } # uv 采样中心位置mask_width:     { value: 0.1, target: mask.y, editor: { parent: USE_MASK_UVY, range: [0, 1] } } # uv 采样上下宽度范围mask_lerpwidth:     { value: 0.05, target: mask.z, editor: { parent: USE_MASK_UVY , range: [0, 1]} } # uv 采样边缘平滑宽度mask_alpha_strength:     { value: 1, target: mask.w, editor: { parent: USE_MASK_UVY } } # uv 采样透明度强度

核心算法就一句：
    o.a *= smoothstep(mask.z, 0.0, abs(v_uv.y - mask.x) - mask.y) * mask.w; 

感觉平滑过渡反而不好，所以自己实现了一个函数 LinearStep:
    o.a *= LinearStep(mask.z, 0.0, abs(v_uv.y - mask.x) - mask.y) * mask.w;

注释掉的 LerpMask 是等价这个算法的，只不过用了 if else来实现的。


算法思路如下： 靠近 pos width内的 全部显示， 接着lerpwidth内的渐变显示， 超过这个距离的不显示：


http://www.ppmy.cn/devtools/52313.html

相关文章

Kaggle比赛：成人人口收入分类

Kaggle比赛：成人人口收入分类

拿到数据首先查看数据信息和描述 import pandas as pd import seaborn as sns import matplotlib.pyplot as plt # 加载数据&#xff08;保留原路径&#xff0c;但在实际应用中建议使用相对路径或环境变量&#xff09; data pd.read_csv(r"C:\Users\11794\Desk…
阅读更多...
VMware Workstation Ubuntu server 24 (Linux) 磁盘扩容 挂载硬盘

VMware Workstation Ubuntu server 24 (Linux) 磁盘扩容 挂载硬盘

1 Ubuntu server 关机,新增加磁盘 2 启动ubuntu虚拟机,分区和挂载磁盘 sudo fdisk /dev/sdb #查看磁盘UUID sudo blkid #创建挂载目录 sudo mkdir /mnt/data # sudo vi /etc/fstab /dev/disk/by-uuid/0b440ed0-b28b-4756-beeb-10c585e3d101 /mnt/data ext4 defaults 0 1 #加…
阅读更多...
Xlua三方库Android编译出错解决办法

Xlua三方库Android编译出错解决办法

Xlua三方库Android编译出错解决办法 最近听老师的热更教程&#xff0c;讲到xlua编译android平台会报错&#xff0c;也是看了老师的博客&#xff0c;按照方法去解决&#xff0c;然而问题并没有解决。应该是因为代码更新或者版本不一样&#xff0c;在此简单记录一下解决过程。 参…
阅读更多...
租房项目之并发缺失数据问题

租房项目之并发缺失数据问题

前奏&#xff1a;本项目是一个基于django的租房信息获取项目。本次博客牵扯到两个版本&#xff0c;集中式分布以及分布式部署&#xff08;两个版本的ui不同&#xff0c;集中式用的是老版ui&#xff0c;分布式使用的是新版ui&#xff09;&#xff1b; 项目链接&#xff1a;http…
阅读更多...
操作系统入门系列-MIT6.828（操作系统工程）学习笔记（七）---- 系统调用函数与GDB(Lab: system calls)

操作系统入门系列-MIT6.828（操作系统工程）学习笔记（七）---- 系统调用函数与GDB(Lab: system calls)

系列文章目录 操作系统入门系列-MIT6.828&#xff08;操作系统工程&#xff09;学习笔记&#xff08;一&#xff09;---- 操作系统介绍与接口示例 操作系统入门系列-MIT6.828&#xff08;操作系统工程&#xff09;学习笔记&#xff08;二&#xff09;---- 课程实验环境搭建&am…
阅读更多...
重生之 SpringBoot3 入门保姆级学习（20、场景整合 Docker 的 Redis 对接与基础使用）

重生之 SpringBoot3 入门保姆级学习（20、场景整合 Docker 的 Redis 对接与基础使用）

重生之 SpringBoot3 入门保姆级学习&#xff08;20、场景整合 Docker 的 Redis 对接与基础使用&#xff09; 6.3 整合 Redis 6.3 整合 Redis 1、创建新项目编写 application.properties 配置文件 # redis 配置 spring.data.redis.host192.168.1.4 spring.data.redis.port6379如…
阅读更多...
Java数组

Java数组

Java数组的用法 在Java中&#xff0c;数组是一种常用的数据结构&#xff0c;用于存储相同类型的多个元素&#xff0c;以下是一些关于Java数组的基本学习要点。 1. 数组的声明 声明一个数组变量&#xff0c;指定其类型&#xff0c;但此时不分配内存空间。 int[] numbers; //…
阅读更多...
你好GPT-4o——对GPT-4o发布的思考与看法

你好GPT-4o——对GPT-4o发布的思考与看法

你好GPT-4o 前言 2024年5月13日&#xff0c;OpenAI官网发布了他们的新一代自然语言处理交互系统——GPT-4o。这是OpenAI继GPT4之后又一个新的旗舰模型。 GPT-4o&#xff08;“o”代表“omni”&#xff09;是迈向更自然的人机交互的一步——它接受文本、音频、图像和视频的任意…
阅读更多...
最新文章

Copyright @ 2022~2023