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

这篇具有很好参考价值的文章主要介绍了shader编程经典:分形--科赫曲线。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

序言

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

示例

shader编程经典:分形--科赫曲线
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.);
}

注解

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

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

再考虑多次迭代,其实就是不断重复上述过程,迭代uv,实现自相似(分形),其他的都比较好理解,相信大家仔细看看都能明白就不赘述了。文章来源地址https://www.toymoban.com/news/detail-466990.html

到了这里,关于shader编程经典:分形--科赫曲线的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 曲线艺术编程 coding curves 第九章 旋轮曲线(ROULETTE CURVES)

    原作:Keith Peters https://www.bit-101.com/blog/2022/11/coding-curves/ 译者:池中物王二狗(sheldon) 源码:github: https://github.com/willian12345/coding-curves 曲线艺术编程系列第 9 章 一开始我本章标题我打算使用“次摆线与摆线(旋轮线)”。我想它们是两种不同类型的曲线,虽然有点儿联系。但随

    2024年02月08日
    浏览(42)
  • 曲线艺术编程 coding curves 第四章 利萨茹曲线(Lissajous Curves)

    原作:Keith Peters https://www.bit-101.com/blog/2022/11/coding-curves/ 译者:池中物王二狗(sheldon) blog: http://cnblogs.com/willian/ 源码:github: https://github.com/willian12345/coding-curves 曲线艺术编程系列第四章 确保您已知晓了最初一章中我们对示例代码的约定。 利萨茹曲线一直以来是我最喜欢的技术

    2024年02月07日
    浏览(33)
  • 曲线艺术编程 coding curves 第二章 三角函数曲线(TRIG CURVES)

    原作:Keith Peters 原文:https://www.bit-101.com/blog/2022/11/coding-curves/ 译者:池中物王二狗(sheldon) blog: http://cnblogs.com/willian/ 源码:github: https://github.com/willian12345/coding-curves 曲线艺术编程系列 第二章 这是与曲线相关最基础简单的一章,但我会用几个不同的示例来演示。我不会深入详

    2024年02月07日
    浏览(53)
  • Java面试八股文宝典:序言

    Java作为一门广泛应用于企业级应用开发的编程语言,一直以来都是技术面试中的重要话题。无论您是刚刚踏入编程世界的新手,还是经验丰富的Java开发工程师,都需要通过面试来展示自己的技能和知识。 在面试中,除了技术知识,还需要展现出解决问题、沟通能力和编程实

    2024年02月09日
    浏览(54)
  • 曲线艺术编程 coding curves 第八章 贝赛尔曲线(Bézier Curves)

    原作:Keith Peters https://www.bit-101.com/blog/2022/11/coding-curves/ 译者:池中物王二狗(sheldon) blog: http://cnblogs.com/willian/ 源码:github: https://github.com/willian12345/coding-curves 曲线艺术编程系列第8章 贝赛尔曲线 让我们回到真正的曲线上来。贝赛尔曲线编程就非常有趣领人止不住的想探索一翻

    2024年02月08日
    浏览(56)
  • 曲线艺术编程 coding curves 第六章 平托图 (Pintographs)

    原作:Keith Peters https://www.bit-101.com/blog/2022/11/coding-curves/ 译者:池中物王二狗(sheldon) blog: http://cnblogs.com/willian/ 源码:github: https://github.com/willian12345/coding-curves 曲线艺术编程系列第 6 章 另一个可用于模拟绘制复杂曲线的物理装置叫平托图(Pintograph), 事实上我真的自己弄了一个。

    2024年02月08日
    浏览(43)
  • Rx.NET in Action 中文介绍 前言及序言

    目标 可选方式 Rx 处理器(Operator) 创建 Observable Creating Observables 直接创建 By explicit logic Create Defer 根据范围创建 By specification Range Repeat Generate Timer Interval Return 使用预设 Predefined primitives Throw Never Empty 从其他类型创建 From other types FromEventPattern FromEvent FromTask FromAsync 变换 Transform

    2024年02月13日
    浏览(49)
  • 如何高度优化适用于企业自定义的AI (一) 序言

    在当前信息时代的背景下, 社会对AI的需求在不断增长. AI的快速发展得益于大数据、云计算和计算能力的提升, 使得机器学习和深度学习等技术取得了重大突破. AI在图像识别、语音识别、自然语言处理等领域展现出惊人的能力, 为企业带来了巨大的商机. 然而, 通用的AI解决方案

    2024年02月11日
    浏览(42)
  • 曲线艺术编程 coding curves 第七章 抛物线(Parabolas)

    原作:Keith Peters https://www.bit-101.com/blog/2022/11/coding-curves/ 译者:池中物王二狗(sheldon) blog: http://cnblogs.com/willian/ 源码:github: https://github.com/willian12345/coding-curves 曲线艺术编程系列第7章 我承认这一章脑暴时,再三考虑过是否要将抛物线包含进来。此篇覆盖的抛物线比起之前三章

    2024年02月08日
    浏览(41)
  • 曲线艺术编程 coding curves 第五章 谐波图形(谐振图形) HARMONOGRAPHS

    原作:Keith Peters https://www.bit-101.com/blog/2022/11/coding-curves/ 译者:池中物王二狗(sheldon) blog: http://cnblogs.com/willian/ 源码:github: https://github.com/willian12345/coding-curves 曲线艺术编程系列第 5 章 这一篇幅建立在对第四章利萨茹曲线的讨论之上。事实上谐波图形并不是一类曲线,它是一

    2024年02月08日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包