从0到1构建可视化技术体系-系统掌握图形学与可视化核心原理

 

用一句话来说,可视化就是把数据组织成容易被人理解和认知的结构,然后用图形这种更形象的方式呈现出来的理论、方法和技术。

为此,本课程来给你系统讲解可视化开发的原理和方法、数据处理的技巧以及视觉呈现的各种方式,帮助你创建出自己的可视化工具集,更高效地解决可视化开发中的问题。由此,你不仅可以实现更具冲击力的视觉效果,还能从中收获高级的前端知识,让你成为“更懂前端”的可视化人才。

资源目录

课前必学 (2讲)

开篇词 | 不写网页的前端工程师,还能干什么?

预习 | Web前端与可视化到底有什么区别?

图形基础篇 (4讲)

01 | 浏览器中实现可视化的四种方式

02 | 指令式绘图系统:如何用Canvas绘制层次关系图?

03 | 声明式图形系统:如何用SVG图形元素绘制可视化图表?

04 | GPU与渲染管线:如何用WebGL绘制最简单的几何图形?

数学篇 (5讲)

05 | 如何用向量和坐标系描述点和线段?

06 | 可视化中你必须要掌握的向量乘法知识

07 | 如何用向量和参数方程描述曲线?

08 | 如何利用三角剖分和向量操作描述并处理多边形?

09 | 如何用仿射变换对几何图形进行坐标变换?

视觉基础篇 (8讲)

10 | 图形系统如何表示颜色?

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

12 | 如何使用滤镜函数实现美颜效果?

13 | 如何给简单的图案添加纹理和复杂滤镜?

14 | 如何使用片元着色器进行几何造型?

15 | 如何用极坐标系绘制有趣图案?

16 | 如何使用噪声生成复杂的纹理?

17 | 如何使用后期处理通道增强图像效果?

视觉高级篇 (10讲)

18 | 如何生成简单动画让图形动起来?

19 | 如何用着色器实现像素动画?

20 | 如何用WebGL绘制3D物体?

21 | 如何添加相机,用透视原理对物体进行投影?

22 | 如何用仿射变换来移动和旋转3D物体?

23 | 如何模拟光照让3D场景更逼真?(上)

24 | 如何模拟光照让3D场景更逼真?(下)

25 | 如何用法线贴图模拟真实物体表面

26 | 如何绘制带宽度的曲线?

27 | 案例:如何实现简单的3D可视化图表?

性能篇 (3讲)

28 | Canvas、SVG与WebGL在性能上的优势与劣势

29 | 怎么给Canvas绘制加速?

30|怎么给WebGL绘制加速?

数据篇 (12讲)

31 | 针对海量数据,如何优化性能?

32 | 数据之美:如何选择合适的方法对数据进行可视化处理?

33 | 数据处理(一):可视化数据处理的一般方法是什么?

34 | 数据处理(二):如何处理多元变量?

35| 设计(一):如何让可视化设计更加清晰?

36 | 设计(二):如何理解可视化设计原则?

37 | 实战(一):如何使用图表库绘制常用数据图表?

38 | 实战(二):如何使用数据驱动框架绘制常用数据图表?

39 | 实战(三):如何实现地理信息的可视化?

40| 实战(四):如何实现3D地球可视化(上)?

41 | 实战(五):如何实现3D地球可视化(下)?

42 | 如何整理出我们自己的可视化工具集?

国庆策划 (2讲)

国庆策划 | 假期别闲着,一起来挑战“手势密码”

国庆策划 | 快来看看怎么用原生JavaScript实现手势解锁组件

特别放送 (6讲)

加餐1 | 作为一名程序员,数学到底要多好?

加餐2 | SpriteJS:我是如何设计一个可视化图形渲染引擎的?

用户故事 | 非前端开发,我为什么要学可视化?

加餐3 | 轻松一刻:我想和你聊聊前端的未来

加餐4 | 一篇文章,带你快速理解函数式编程

加餐5|周爱民:我想和你分享些学习的道理

结束语 (2讲)

结束语 | 可视化工程师的未来之路免费有奖征集倒计时4天!你填写毕业问卷了吗?

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注