跟月影学可视化
月影
前奇虎 360 奇舞团团长,可视化 UI 框架 SpriteJS 核心开发者,《JavaScript 王者归来》作者
30206 人已学习
新⼈⾸单¥68
登录后,你可以任选4讲全文学习
课程目录
已完结/共 54 讲
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

11|图案生成:如何生成重复图案、分形图案以及随机效果?

顶点着色器和片元着色器的代码示例
利用GPU并行计算的特点
利用CSS的linear-gradient属性定义线性渐变
生成随机旋转方向的线段
使用smoothstep函数
结合随机和动态效果
使用floor函数生成随机色块
生成噪点
局部放大图案
设置初始值和迭代次数
片元着色器中的代码示例
迭代公式构成的分形集合
使用Shader绘制重复图案的优势
使用CSS属性设置重复网格背景的技巧
使用Shader
使用background-image属性
重复图案、分形图案和随机图案是最常用的
用于修饰几何图形,增强视觉效果
基于WebGL底层简单封装的基础库 gl-renderer 的官方文档
实现图案随着缩放和移动变化的效果
实现真正的随机数
渲染彩色方块
生成随机迷宫图案
使用伪随机函数
实现分形图案
Mandelbrot Set
要点总结
绘制大批量重复图案
可视化中图案的重要性
推荐阅读
小试牛刀
随机效果
分形图案
重复图案
如何生成重复图案、分形图案以及随机效果

该思维导图由 AI 生成,仅供参考

你好,我是月影。
图案生成是可视化中非常重要的基础。有多重要呢?我们知道,可视化中的几何图形是用来表达数据的,那图案就是用来修饰这些几何图形,强化视觉效果的,所以图案一般是指几何图形上的花纹。这些花纹有的简单,有的复杂,有的规律明显,有的看上去比较随机。也正是因为图案可以如此的不同,它们才能更好地增强视觉效果。
这一节课,我们就来聊一聊图案生成的基本原理和方法论。不过,因为可视化中的图案非常多,所以今天我们主要来讲三种最常用的,分别是重复图案、分形图案和随机图案。
首先,我们来看重复图案。

如何绘制大批量重复图案

在可视化应用中,我们经常会使用重复图案。比如说,我们在显示图表的时候,经常会给背景加上一层网格,这样可以辅助用户阅读和理解图表数据。
带有网格背景的画布
那像网格这样经典的重复图案,我们应该怎样绘制它呢?这些网格看起来像是由一条一条线段组成的,是不是利用绘制线段的方式,比如我们之前学过的 Canvas2D 的绘图指令来绘制就可以了?如果你是这么想的,就把问题想得太简单了。
举个例子,如果我们将网格绘制在 Canvas2D 画布上,那网格的线条就会很多,这也就意味着我们要用大量的绘图指令来绘制。这个时候,一旦 Canvas2D 的画面改变了,我们就需要重绘全部的网格,这会大大消耗系统的性能。而且,如果将大量的时间都浪费在绘制这种重复图案上,那我们实现的代码性能可能就会很差。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入介绍了图案生成的基本原理和方法,主要讨论了重复图案、分形图案和随机图案三种常用的生成方法。重点介绍了使用着色器绘制重复图案的方法,通过WebGL和着色器实现高效绘制,避免性能瓶颈。文章详细解析了着色器绘制重复图案的具体过程,包括顶点着色器和片元着色器的代码解析,以及使用gl-renderer库进行绘制的步骤。通过实际代码演示和效果展示,读者可以快速了解如何利用着色器实现高效绘制重复图案的方法。此外,文章还介绍了分形图案的实现原理和分形公式的应用,以及如何给图案增加随机效果。通过伪随机函数和动态效果的实现,读者可以了解如何在Shader中生成随机效果和结合随机和动态效果。文章还提到了使用Shader实现网格类的效果,如生成迷宫等。总的来说,本文通过详细的技术讲解和代码示例,为读者提供了全面的图案生成方法和实现技巧,对于需要在WebGL等平台实现图案生成的开发者具有很高的参考价值。 文章还提到了WebGL的片元着色器知识,强调了片元着色器是最适合生成和绘制图案的技术。同时,鼓励读者通过实践来加深对片元着色器的理解,并展望了在接下来的课程中将会使用片元着色器创建更多有趣、炫酷的视觉效果。整体而言,本文内容涵盖了图案生成的基本原理、实现方法以及技术应用,对于对WebGL等平台图案生成感兴趣的读者具有很高的参考价值。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《跟月影学可视化》
新⼈⾸单¥68
立即购买
登录 后留言

全部留言(20)

  • 最新
  • 精选
  • 不见飞刀
    为什么vUv=uv 而不是 vUv=a_vertexPosition? 那个uv到底是个什么东西

    作者回复: uv是范围0到1的纹理坐标

    2020-08-28
    2
  • l_j_dota_1111
    webgl着色器代码,非常有趣,能够生成各种各样的图形,但是请问老师,如何培养在大脑中构建一种图形,并通过webgl着色器代码实现的一种能力呢?看到老师写的代码,非常费解,怎么想到就这样写呢?

    作者回复: 这个只能通过不断学习和实践

    2020-09-28
    3
    1
  • 不见飞刀
    我猜之所以传给片元的是uv是因为它的范围是0-1?

    作者回复: 是的

    2020-08-29
    2
    1
  • 不见飞刀
    不明白vUv不是数组套数组嘛,而且里面都是整数,这个*rows是怎么乘的,fract(vUv * rows)这个的结果是什么 另外,着色器里的代码变量有办法打印出来看么

    作者回复: 向量乘法,这个没法打出来看的

    2020-08-28
    3
    1
  • Geek_dudu
    月影老师,下面这块没太理解。 迭代公式 vec2 f(vec2 z, vec2 c) { return mat2(z, -z.y, z.x) * z + c;} mat2(z, -z.y, z.x)* z =mat2(z.x, z.y, -z.y, z.x) * vec2(z.x, z.y) = vec2(z.x*z.x-z.y*z.y, z.y*z.x+z.x+z.y) 好像和vec2 z的平方不相等吧 ,望答疑

    作者回复: 你行和列搞错了,求出来应该是vec2(x*x + y*y, 0)

    2020-07-25
    2
    1
  • 团子团
    片元着色器里面的计算逻辑完全看不懂,严重怀疑自己不适合学这门学问。

    作者回复: 最好自己动手尝试一下,理解片元着色器的关键是理解片元着色器是并行渲染,即代码同时并行执行于所有像素点,而单次执行作用于一个点。

    2021-07-15
  • 老孟
    当一个数从 0~1 周期性变化的时候, 我们只要将它乘以整数 N,然后再用 fract 取小数,就能得到 N 个周期的数值 这段是什么意思呀?0~1周期变化是指值是0和1之间吗?还是周期是1?

    作者回复: 周期变化就是连续周期变化,你仔细看文中代码和示例,自己动手试试就能理解

    2020-12-08
  • lisiur
    老师,grids 的示例我在实际运行时,发现有些线会稍粗一点,而有些线又细到消失(rows=64)。这是什么原因呢,该如何避免呢?

    作者回复: 是webgl绘制的时候吗?

    2020-07-30
    3
  • 张旭
    老师,有没有支持glsl语法高亮调试的方案推荐?

    作者回复: vscode就有相关的插件

    2020-07-21
    2
  • Kim Yin
    老师,画 grid 里面关于 cells 的解释我没太理解:“那利用 cells: [(0, 1, 2), (2, 0, 3)],我们就能将这个矩形画布剖分成两个三角形,这两个三角形的顶点下标分别是 (0, 1, 2) 和 (2, 0, 3)。” 顶点下标是什么意思?0,1,2,3 代表的是什么意思?

    作者回复: 代表的是顶点数组的索引下标,也就是positions数组里第几个点

    2020-07-17
    4
收起评论
显示
设置
留言
20
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部