11|图案生成:如何生成重复图案、分形图案以及随机效果?
该思维导图由 AI 生成,仅供参考
如何绘制大批量重复图案
- 深入了解
- 翻译
- 解释
- 总结
本文深入介绍了图案生成的基本原理和方法,主要讨论了重复图案、分形图案和随机图案三种常用的生成方法。重点介绍了使用着色器绘制重复图案的方法,通过WebGL和着色器实现高效绘制,避免性能瓶颈。文章详细解析了着色器绘制重复图案的具体过程,包括顶点着色器和片元着色器的代码解析,以及使用gl-renderer库进行绘制的步骤。通过实际代码演示和效果展示,读者可以快速了解如何利用着色器实现高效绘制重复图案的方法。此外,文章还介绍了分形图案的实现原理和分形公式的应用,以及如何给图案增加随机效果。通过伪随机函数和动态效果的实现,读者可以了解如何在Shader中生成随机效果和结合随机和动态效果。文章还提到了使用Shader实现网格类的效果,如生成迷宫等。总的来说,本文通过详细的技术讲解和代码示例,为读者提供了全面的图案生成方法和实现技巧,对于需要在WebGL等平台实现图案生成的开发者具有很高的参考价值。 文章还提到了WebGL的片元着色器知识,强调了片元着色器是最适合生成和绘制图案的技术。同时,鼓励读者通过实践来加深对片元着色器的理解,并展望了在接下来的课程中将会使用片元着色器创建更多有趣、炫酷的视觉效果。整体而言,本文内容涵盖了图案生成的基本原理、实现方法以及技术应用,对于对WebGL等平台图案生成感兴趣的读者具有很高的参考价值。
《跟月影学可视化》,新⼈⾸单¥68
全部留言(20)
- 最新
- 精选
- 不见飞刀为什么vUv=uv 而不是 vUv=a_vertexPosition? 那个uv到底是个什么东西
作者回复: uv是范围0到1的纹理坐标
2020-08-282 - l_j_dota_1111webgl着色器代码,非常有趣,能够生成各种各样的图形,但是请问老师,如何培养在大脑中构建一种图形,并通过webgl着色器代码实现的一种能力呢?看到老师写的代码,非常费解,怎么想到就这样写呢?
作者回复: 这个只能通过不断学习和实践
2020-09-2831 - 不见飞刀我猜之所以传给片元的是uv是因为它的范围是0-1?
作者回复: 是的
2020-08-2921 - 不见飞刀不明白vUv不是数组套数组嘛,而且里面都是整数,这个*rows是怎么乘的,fract(vUv * rows)这个的结果是什么 另外,着色器里的代码变量有办法打印出来看么
作者回复: 向量乘法,这个没法打出来看的
2020-08-2831 - 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-2521 - 团子团片元着色器里面的计算逻辑完全看不懂,严重怀疑自己不适合学这门学问。
作者回复: 最好自己动手尝试一下,理解片元着色器的关键是理解片元着色器是并行渲染,即代码同时并行执行于所有像素点,而单次执行作用于一个点。
2021-07-15 - 老孟当一个数从 0~1 周期性变化的时候, 我们只要将它乘以整数 N,然后再用 fract 取小数,就能得到 N 个周期的数值 这段是什么意思呀?0~1周期变化是指值是0和1之间吗?还是周期是1?
作者回复: 周期变化就是连续周期变化,你仔细看文中代码和示例,自己动手试试就能理解
2020-12-08 - lisiur老师,grids 的示例我在实际运行时,发现有些线会稍粗一点,而有些线又细到消失(rows=64)。这是什么原因呢,该如何避免呢?
作者回复: 是webgl绘制的时候吗?
2020-07-303 - 张旭老师,有没有支持glsl语法高亮调试的方案推荐?
作者回复: vscode就有相关的插件
2020-07-212 - Kim Yin老师,画 grid 里面关于 cells 的解释我没太理解:“那利用 cells: [(0, 1, 2), (2, 0, 3)],我们就能将这个矩形画布剖分成两个三角形,这两个三角形的顶点下标分别是 (0, 1, 2) 和 (2, 0, 3)。” 顶点下标是什么意思?0,1,2,3 代表的是什么意思?
作者回复: 代表的是顶点数组的索引下标,也就是positions数组里第几个点
2020-07-174