首页 > 其他分享 >shader 代码 分享:粒子的 缩放 和 位移(贝塞尔曲线控制不同粒子的位置) -- shader 绳索效果

shader 代码 分享:粒子的 缩放 和 位移(贝塞尔曲线控制不同粒子的位置) -- shader 绳索效果

时间:2024-05-23 11:34:35浏览次数:27  
标签:index 粒子 缩放 0.0 shader rope start vec3 new

原始代码:

shader_type particles;
uniform int amount : hint_range(1, 1000) = 8;
uniform float max_rope_distance : hint_range(1.0, 1000.0) = 20.0; uniform float scale : hint_range(0.0, 10.0) = 1.0;
uniform vec3 start = vec3(-5.0, 5.0, 0.0); uniform vec3 end = vec3(5.0, 5.0, 0.0); uniform vec3 curve_direction = vec3(0.0, -1.0, 0.0);
uniform vec4 color : hint_color = vec4(1.0);
uniform sampler2D color_gradient : hint_white;
void vertex() {     float new_index = float(INDEX) / float(amount - 1);         TRANSFORM[0].x = scale;     TRANSFORM[1].y = scale;     TRANSFORM[2].z = scale;     TRANSFORM[3].xyz = mix(start, end, new_index) - curve_direction * (new_index * new_index - new_index) * 4.0 * max((max_rope_distance - distance(start, end)) * 0.5, 0.0);         COLOR.rgb = texture(color_gradient, vec2(new_index, 0.0)).rgb * color.rgb; }   chatgpt-4o 解读:
这段着色器代码用于在粒子系统中创建类似绳索的结构。它通过使用二次贝塞尔曲线来确定粒子的位置,并使用颜色渐变进行视觉效果处理。下面是详细的中文解释:  

这些变量是用于控制粒子系统行为的参数:

  • amount: 粒子的数量。范围是1到1000,默认值为8。
  • max_rope_distance: 最大绳索距离,影响曲线的弯曲度。范围是1.0到1000.0,默认值为20.0。
  • scale: 粒子的缩放因子。范围是0.0到10.0,默认值为1.0。
  • start 和 end: 绳索的起点和终点,分别是vec3(-5.0, 5.0, 0.0)vec3(5.0, 5.0, 0.0)
  • curve_direction: 应用曲线的方向,默认为vec3(0.0, -1.0, 0.0),表示向下弯曲。
  • color: 粒子的基本颜色,默认是vec4(1.0)(白色)。
  • color_gradient: 颜色渐变纹理采样器,用于沿绳索应用颜色渐变。

 

void vertex() {

// 计算粒子在范围[0, 1]内的索引。

float new_index = float(INDEX) / float(amount - 1);

// 对粒子变换应用缩放。

TRANSFORM[0].x = scale;

TRANSFORM[1].y = scale;

TRANSFORM[2].z = scale;

// 使用start和end点的混合值,并应用二次贝塞尔曲线调整来计算粒子位置。

vec3 bezier_adjustment = curve_direction * (new_index * new_index - new_index) * 4.0;

float rope_factor = max((max_rope_distance - distance(start, end)) * 0.5, 0.0);

TRANSFORM[3].xyz = mix(start, end, new_index) - bezier_adjustment * rope_factor;

// 使用颜色渐变纹理根据粒子在绳索上的位置应用颜色。

COLOR.rgb = texture(color_gradient, vec2(new_index, 0.0)).rgb * color.rgb;

}


二次贝塞尔曲线(也是线性贝塞尔曲线,抛物线)公式:   

 

 

提问:

vec3 bezier_adjustment = curve_direction * (new_index * new_index - new_index) * 4.0;

float rope_factor = max((max_rope_distance - distance(start, end)) * 0.5, 0.0);

TRANSFORM[3].xyz = mix(start, end, new_index) - bezier_adjustment * rope_factor;

不明白,为什么这里 要这样写, 这不是 二次贝塞尔曲线的公式把?


chatgpt: 您提到的代码片段确实不是严格意义上的二次贝塞尔曲线的公式,但它的确是受贝塞尔曲线启发的,用于生成一种类似二次贝塞尔曲线的曲线路径。在这种情况下,它是为了在粒子系统中创建一条平滑的曲线路径。下面我们详细解释这些代码片段中的每一步及其背后的原因。

 

vec3 bezier_adjustment = curve_direction * (new_index * new_index - new_index) * 4.0;

这行代码计算了一种调整量 bezier_adjustment,它模仿了二次贝塞尔曲线的中间控制点对曲线的影响。具体解释如下:

  • curve_direction 是一个方向向量,表示曲线的方向。
  • new_index * new_index - new_index 这部分创建了一个从 0 增长到 -0.25 再返回到 0 的值,因为 new_index 在 [0, 1] 范围内。这种变化模式类似于二次贝塞尔曲线的控制点对曲线的影响。
  • * 4.0 放大调整量,使得影响更加显著。

计算绳索因子 rope_factor

float rope_factor = max((max_rope_distance - distance(start, end)) * 0.5, 0.0);

这行代码计算一个因子 rope_factor,用于确定调整量的大小。具体解释如下:

  • distance(start, end) 计算起点 start 和终点 end 之间的距离。
  • max_rope_distance 是一个给定的最大距离,用于控制曲线的最大弯曲程度。
  • (max_rope_distance - distance(start, end)) * 0.5 计算距离差的一半。
  • max(..., 0.0) 确保因子不会为负值。
 

4. 最终计算位置 TRANSFORM[3].xyz

TRANSFORM[3].xyz = mix(start, end, new_index) - bezier_adjustment * rope_factor;

这行代码将粒子的位置设置为沿着由 startend 的线性插值路径,并根据 bezier_adjustmentrope_factor 进行调整。具体解释如下:

  • mix(start, end, new_index) 计算粒子在起点 start 和终点 end 之间的线性插值位置。
  • - bezier_adjustment * rope_factor 根据 bezier_adjustmentrope_factor 调整位置,形成曲线效果。
 

对比和总结

在二次贝塞尔曲线中,通过控制点 来调节曲线的形状。而在你的代码中,通过计算  bezier_adjustment 和 rope_factor,来调整粒子沿着直线路径的平滑度和弯曲度。尽管方法不同,但最终的目的是相似的,即生成一条从起点到终点的平滑曲线。

代码中的 curve_directionbezier_adjustment 模拟了二次贝塞尔曲线的效果,并且通过 rope_factor 动态调整,使得粒子的路径可以根据距离和最大距离限制动态变化。这种方法可以在图形和动画中生成多种复杂和灵活的曲线效果。

 

补充: 普通shader 贝塞尔曲线的生成方法:   说白了,就是两种贝塞尔曲线的生成方法 

vec3 bezier(float t, vec3 P0, vec3 P1, vec3 P2) {
float u = 1.0 - t;
float tt = t * t;
float uu = u * u;
return uu * P0 + 2.0 * u * t * P1 + tt * P2;
}

// 定义控制点
vec3 start = vec3(-5.0, 5.0, 0.0);
vec3 end = vec3(5.0, 5.0, 0.0);
vec3 control = vec3(0.0, 0.0, 0.0); // 假设控制点在 (0, 0, 0)

// 计算贝塞尔曲线上的点
float t = float(INDEX) / float(amount - 1);
vec3 curve_point = bezier(t, start, control, end);

// 应用变换
TRANSFORM[3].xyz = curve_point;

 

 

 

 

   

标签:index,粒子,缩放,0.0,shader,rope,start,vec3,new
From: https://www.cnblogs.com/porter/p/18208019

相关文章

  • shader 学习的好助手 --- chatgpt4-o
    其实要看懂godot官方或者第三方写的复杂效果的shader的代码,是比较难的第一:资料比较少,塔尖上的功能,分享的人少第二:大神也是慢慢熬成的第三:这类需求,在一个项目种少,大部分都是类似CURD 第四:shader的知识方向浩瀚如海,各种理论,各种高大上的公式,就考验的定力和耐心,就单单一......
  • INTERNAL_SHADER_PARAMETER_EXPLICIT
    INTERNAL_SHADER_PARAMETER_EXPLICIT为什么了解这个宏,看另一篇《UE5MobileBasePassPixelShader.usf》这里详细了解一下这个宏,不感兴趣的可以跳过,知道这个宏用于声明在统一缓冲区(UniformBufferObject,UBO)结构体成员时,自动生成和管理相关元数据就行了。/**Declares......
  • d3 v7树图实现动态边框,新增/编辑兄弟节点、子节点,删除节点和拖拽、缩放,动态边框
    d3版本:v7。PS:在用d3之前需要先了解SVG和CSS相关知识。树图生成部分和部分效果都是用SVG相关标签完成的。 效果图:  全部代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=devi......
  • uniApp生成的h5页面禁止浏览器上缩放页面(支持安卓,ios)
    项目场景:uniapph5内嵌原生appios样式问题:1.双击和双指滑动,内嵌的h5页面均会被放大缩小2.修改ios底部的安全距离的背景色,默认是白色问题描述1.双击和双指滑动,内嵌的h5页面均会被放大缩小2.解决ios底部的安全距离和修改背景色,默认是白色解决方案:安卓只需要在h5.template.h......
  • Games101-5 shadering
    shader对不同物体应用不同的材质定义:shading!=shadowdiffusereflection漫反射光照角度不同,则反射程度也不同于此同时物体离光源越远,反射程度越低高光项镜面反射和视线比较接近的时候使用半程向量计算高光注:半程向量比较好算,反射向量比较难算指数p:cos......
  • UnityShader数学基础篇
    MathfMathf和Math1、Math是C#中封装好的用于数学计算的工具类,位于System命名空间中。2、Mathf是Unity中封装好的用于数学计算的工具结构体,位于UnityEngine命名空间中。Mathf中的常用方法1.π-PIprint(Mathf.PI);2.取绝对值-Absprint(Mathf.Abs(-10.5f));//10.5p......
  • Android WebView 加载 html页面 实现 不同分辨率 不同 dpi 缩放自适应处理 解决方案
    两种情况一起使用实现不同分辨率不同dpi缩放自适应处理//webview需要配置mWebView.getWebSetting().setUseWideViewPort(true);//让webview读取网页设置的viewport,pc版网页1、同分辨率不同dpi缩放自适应处理(也可以在android端注入相关js代码)<scripttype="text/......
  • 高DPI下windows远程桌面缩放问题
    第一步:打开注册表:HKEY_LOCAL_MACHINE>SOFTWARE>Microsoft>Windows>CurrentVersion>SideBySide新建DWORD(32bit)的项,命名为:PreferExternalManifest,打开PreferExternalManifest,将值设为1,16进制。第二步打开记事本输入如下代码:<?xmlversion="1.0"encoding=&quo......
  • 实现bmp格式图片的2倍缩小功能,并输出新的目标bmp格式文件。最后利用800*480的开发板,展
    /***********************************************************************************************************实现bmp格式图片的2倍缩小功能,并输出新的目标bmp格式文件。最后利用800*480的开发*板,展示缩放后的bmp文件****Copyright(c)2023-202418975491291......
  • BMP格式图片缩放及在LCD屏幕展示练习
    /***@brief:实现bmp格式图片的2倍缩小功能,并输出新的目标bmp格式文件。最后利用800*480的开发板,展示缩放后的bmp文件因为只是进行函数练习,未采用函数封装的做法*@[email protected]*@date2024/05/12*CopyRight(c)2023-2024ni456xinmie@1......