首页 > 编程语言 >shader编程经典:分形--科赫曲线

shader编程经典:分形--科赫曲线

时间:2023-06-01 12:23:00浏览次数:53  
标签:cos -- uv shader 分形 vec2 dot

序言

科赫(雪花)曲线是一个经典分形图案,来一起领略下分形之美。本篇内容用到一些基础的内容,例如UV的理解和画线技巧,有需要的话可以参考合集的画圆和画线两篇文章。

示例

image
shadertoy 代码:

#define T .01

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = (fragCoord.xy-0.5 * iResolution.xy) / iResolution.y; 
    vec3 col = vec3(0.);
    float a = (4. / 6.) * 3.1415926;
    vec2 n = vec2(sin(a), cos(a));
    float s = 1.;
    int t = int(sin(iTime) * 2. + 3.);
    uv.x += .5;
    uv.y += .25;
    for (int i = 0; i < t; i++ )
    {
        s *= 3.;
        uv *= 3.;
        uv.x -= 1.5;

        uv.x = abs(uv.x);
        uv.x -= 0.5;

        uv -= n * min(0., dot(uv, n)) * 2.;
    }

    float d = length(uv - vec2(clamp(uv.x, -1., 1.), 0.));
    col += smoothstep(T, .0, d/s);
    fragColor = vec4(col, 1.);
}

注解

先简化一下问题--只考虑一次迭代
image
观察到上述代码有偏移和对称,其实我们只需要关心对称轴的一侧,来看图像的左半边的绘制
image
它大概的形状如上图中的绿色线所示,观察负半轴,负半轴绿色的线可以有紫色线沿着蓝色线为对称轴反转得到,之反转原理如下
image
(对应上述代码 uv -= n * min(0., dot(uv, n)) * 2.)

  • y 假设是对称轴
  • n 是y的法线(单位向量)
  • uv 是当前uv所在的位置
    则dot(uv, n) * n 是u',这里稍微解释下
    image
    点乘的公式:dot(a, b) = |a||b|cosθ,a是单位向量,则dot(a, b) = |b|cosθ = |b'|,b'向量 = a * |b'|
    u'与b'同理
    易求得uv'' = -dot(uv, n) * n * 2.
    uv -= dot(uv, n) * n * 2. 即从原uv点移动到了uv''所指的位置,从而画出绿线

再考虑多次迭代,其实就是不断重复上述过程,迭代uv,实现自相似(分形),其他的都比较好理解,相信大家仔细看看都能明白就不赘述了。

标签:cos,--,uv,shader,分形,vec2,dot
From: https://www.cnblogs.com/hggzhang/p/17319827.html

相关文章

  • How to fix Linux locale error All In One
    HowtofixLinuxlocaleerrorAllInOne如何修复Linux语言环境错误$cat/etc/default/localeerror❌pi@rpi3b:~/Desktop$localelocale:CannotsetLC_CTYPEtodefaultlocale:Nosuchfileordirectorylocale:CannotsetLC_ALLtodefaultlocale:???......
  • LYT-WPF-MVVM框架中的INotifyPropertyChanged
    参考文档:WPFMVVM框架中的INotifyPropertyChanged-知乎(zhihu.com)INotifyPropertyChanged接口用于通知视图或ViewModel绑定哪个属性无关紧要;它已更新。让我们举个例子来理解这个接口。以一个WPF窗口为例,其中共有三个字段:名字、姓氏和全名。在这里,名字和姓氏文本框是可编......
  • ps如何换脸无痕迹
    第一步打开PS软件,找两张照片直接拖进去第二步选择套索工具将霍建华的脸圈起来,Ctrl+J复制出来,第三步Ctrl+J复制的照片,Ctrl+T将霍建华的脸调整好大小贴到胡歌脸上,对齐好。建议:在贴图的时候,先调一下透明度,这样可以更快更齐的贴好。第四步按住Ctrl键点击霍建华的脸部图层,......
  • D. The BOSS Can Count Pairs
    D.TheBOSSCanCountPairsYouaregiventwoarrays$a$and$b$,bothoflength$n$.Yourtaskistocountthenumberofpairsofintegers$(i,j)$suchthat$1\leqi<j\leqn$and$a_i\cdota_j=b_i+b_j$.InputEachtestcontainsmultipletest......
  • /proc/sys/kernel/sysrq /proc/sysrq-trigger----强制重启/触发器
    LINUX远程强制重启/proc/sys/kernel/sysrq/proc/sysrq-trigger----触发器ttp://blog.csdn.net/beckdon/article/details/41313713http://blog.csdn.net/chinaclock/article/details/50499530http://www.cnblogs.com/justin-y-lin/p/5424555.htmlhttps://www.cnblogs.com/yang......
  • 个人总结
    1、回顾我的课程计划(第一周的计划),我的计划是掌握Java语言的增删改查,目前掌握了Java语言的增删改查,实现了目标。2、(1)《构建之法》是什么书?有哪些内容?《构建之法》是一本软件开发方面的书籍,由软件工程师陈皓撰写。《构建之法》一书主要介绍了软件开发的一些实践方法,包括架构设计......
  • Kubernetes(k8s)健康性检查:livenessprobe探测和readinessprobe探测
    目录一.系统环境二.前言三.Kubernetes健康性检查简介四.创建没有探测机制的pod五.添加livenessprobe探测5.1使用command的方式进行livenessprobe探测5.2使用httpGet的方式进行livenessprobe探测5.3使用tcpSocket的方式进行livenessprobe探测六.readinessprobe探测七.总结一.系......
  • linux设置su和sudo为不需要密码
    一设置sudo为不需要密码 有时候我们只需要执行一条root权限的命令也要su到root,是不是有些不方便?这时可以用sudo代替。默认新建的用户不在sudo组,需要编辑/etc/sudoers文件将用户加入,该文件只能使用visudo命令,1)首先需要切换到root,su-(注意有-,这和su是不同的,在用命令"su"......
  • JS 树型结构 模糊搜索 匹配到所有的节点,包括所有的父节点
    treeData就是el-tree:data要绑定的数据 :data=treeData treeOptions.data是接口返回的原始树形结构数据//根据关键字过滤后的数据consttreeData=computed(()=>{  if(!options.searchText)returntreeOptions.data;  letmhres=filterNodeMethod(opti......
  • 背景测试
    ......