欲速则不达

随笔分类 -  可视化学习

摘要:在学习2D绘图的时候,我们提过很多次关于GPU的高效渲染,但是2D图形的绘制只展示了WebGL部分的能力,WebGL更强大的地方在于,它可以绘制各种3D图形,而3D图形能够极大地增强可视化的表现能力。相信很多小伙伴都对此有所耳闻,也有不少人学习WebGL,就是冲着它的3D绘图能力。接下来,文本就用一个简单的正立方体的例子来演示在WebGL中如何绘制3D物体。 阅读全文
posted @ 2024-07-10 12:10 beckyye 阅读(1645) 评论(4) 推荐(4) 编辑
摘要:可视化学习:如何生成简单动画让图形动起来在可视化展现中,动画是强化数据表达,吸引用户的重要技术手段,本文将介绍动画的三种实现形式,以及如何具体地在HTML/CSS和Shader中去实现动画。 阅读全文
posted @ 2024-06-25 16:15 beckyye 阅读(509) 评论(0) 推荐(3) 编辑
摘要:可视化学习:如何使用后期处理通道增强图像效果GPU是并行渲染的,这样的渲染很高效。但是在实际需求中,有时我们计算片元色值时,需要依赖周围像素点或者某个其他位置像素点的颜色信息,这样的话想要一次性完成绘制就无法做到,需要对纹理进行二次加工处理。 阅读全文
posted @ 2024-06-14 13:41 beckyye 阅读(268) 评论(0) 推荐(0) 编辑
摘要:可视化学习:如何使用噪声生成纹理什么是噪声呢?在自然界中,离散的随机是比较常见的,比如蝉鸣突然响起又突然停下,比如雨滴随机落在一个位置,但是随机和连续并存是更常见的情况,比如山脉的走向是随机的,但山峰之间的高度又是连续的,比如天上的云朵、水面的波纹等等。这种把随机和连续结合起来,就形成了噪声。通过利用噪声,我们就可以去模拟真实自然的图案。 阅读全文
posted @ 2024-06-03 22:37 beckyye 阅读(383) 评论(0) 推荐(0) 编辑
摘要:可视化学习:使用极坐标参数方程和SDF绘制有趣的图案本文将介绍如何使用极坐标参数方程和上一篇文章提到的距离场SDF来绘制有趣的图案。有些曲线比起直角坐标系来说,更方便使用极坐标来表示,这个时候我们可以选择通过极坐标和直角坐标的相互转换,来实现图形的绘制 阅读全文
posted @ 2024-05-22 18:17 beckyye 阅读(448) 评论(0) 推荐(2) 编辑
摘要:WebGL:使用着色器进行几何造型本文将介绍如何使用着色器来进行几何造型,说到几何图形大家一定都不陌生,比如说三角形、圆形,在WebGL中除了直接使用顶点绘制,我们还可以使用片元着色器进行造型,以下将介绍三角形的绘制,以及应用场景。 阅读全文
posted @ 2024-05-11 11:51 beckyye 阅读(235) 评论(0) 推荐(0) 编辑
摘要:WebGL实现简易的局部“马赛克”在Canvas2D中通过调用`drawImage` API就能将图像绘制到画布上,在WebGL中我们也可以绘制图像,在绘制时我们需要用到WebGL中的纹理对象,在之前实现网格背景的视频中,我使用了一个叫做纹理坐标的配置,现在要完成纹理的加载我们也需要用到纹理坐标,并且我们可以通过对纹理坐标处理实现简单的”马赛克“效果。 阅读全文
posted @ 2024-04-29 14:41 beckyye 阅读(508) 评论(0) 推荐(0) 编辑
摘要:可视化学习:使用WebGL绘制圆形,实现色盘在Canvas2D中实现圆形的绘制比较简单,只要调用`arc`指令就能在Canvas画布上绘制出一个圆形,类似的,在SVG中我们也只需要一个`circle`标签就能在页面上绘制一个圆形。那么在WebGL中我们要怎么去绘制呢? 阅读全文
posted @ 2024-04-12 14:32 beckyye 阅读(385) 评论(0) 推荐(2) 编辑
摘要:可视化学习:实现Canvas图片局部放大镜最近我在可视化课程中学习了如何在Canvas中利用像素处理来实现滤镜效果,在这节课程的结尾留了一道局部放大镜的题目,提示我们用像素处理的方式去实现这个效果,最终实现随着鼠标移动将图片局部放大,以下是我对这个效果的简单实现。 阅读全文
posted @ 2024-03-28 13:16 beckyye 阅读(543) 评论(0) 推荐(2) 编辑
摘要:在上篇文章中,我们使用WebGL实现了网格背景,当时有提到说使用WebGL来实现的好处之一,是网格背景可以与画布上的其他元素更好地融合,比如一起缩放平移,那么在WebGL中怎么实现缩放和平移呢?现在我们已经实现了网格背景,接下来我们就用网格背景作为例子来了解一下WebGL中的缩放和平移。 阅读全文
posted @ 2024-03-21 12:01 beckyye 阅读(323) 评论(0) 推荐(2) 编辑
摘要:说到颜色,前端的小伙伴们一定都不陌生,比如字体颜色、背景色等等,颜色是构建视觉效果的重要部分,所以也必然是可视化的关键部分,色彩对人的视觉感知以及情绪心理都存在不少的影响,所以了解颜色表示对可视化非常重要。那么图形系统中都有哪些颜色表示方式呢? 阅读全文
posted @ 2023-12-28 12:45 beckyye 阅读(355) 评论(0) 推荐(3) 编辑
摘要:在几年前,我就在一些博客中看到关于CSS中transform的分析,讲到它与线性代数中矩阵的关系,但当时由于使用transform比较少,再加上我毕竟是个数学学渣,对数学有点畏难心理,就有点看不下去,所以只是随便扫了两眼,就没有再继续了解了。现在在学习可视化,又遇到了这个点,又说到这是可视化的基础知识,既然这样,那看来还是逃不过去,那就再多了解一点吧。 阅读全文
posted @ 2023-12-21 13:50 beckyye 阅读(424) 评论(0) 推荐(2) 编辑
摘要:地图不同于一般图表库的使用,本文介绍了OpenLayers的简单使用,包括地图的展示、放大缩小等简单的功能,以及一些简单的交互处理。 阅读全文
posted @ 2023-12-14 12:35 beckyye 阅读(2283) 评论(2) 推荐(9) 编辑
摘要:WebGL和其他Web端的图形系统存在很大的不同,是OpenGL ES规范在浏览器的实现,它最大的不同就在于它更接近底层,可以由开发者直接操作GPU来实现绘图,性能很好,可以充分利用GPU并行计算的能力,并且WebGL还支持3D物体的渲染;WebGL最大的缺点应该就在于它的使用比较复杂,不易掌握,不同于一般的Web API使用,想要掌握好WebGL,还需要了解与WebGL相关的GLSL语言。 阅读全文
posted @ 2023-12-07 13:00 beckyye 阅读(493) 评论(0) 推荐(3) 编辑
摘要:向量运算是计算机图形学的基础,本例依旧是向量的一种应用,利用向量判断多边形边界,但是多边形的边界判断稍微有点复杂,所以除了应用向量之外,还需要借助三角剖分的相关工具。这个例子中可视化的展示采用Canvas2D来实现。 阅读全文
posted @ 2023-11-30 12:22 beckyye 阅读(313) 评论(0) 推荐(1) 编辑
摘要:向量运算是计算机图形学的基础,这个例子就是向量的一种应用,是利用向量来计算点到线段的距离,这个例子中可视化的展示采用Canvas2D来实现 阅读全文
posted @ 2023-11-21 13:20 beckyye 阅读(775) 评论(4) 推荐(3) 编辑

点击右上角即可分享
微信分享提示