#原创

跟月影学可视化－系统掌握图形学与可视化核心原理

课程介绍

课程来自于 跟月影学可视化－系统掌握图形学与可视化核心原理

你将获得

从 0 到 1 构建可视化技术体系

掌握 4 大绘图系统底层实现原理

开发适合自己的可视化工具集

案例 + 代码，实现 3D 可视化大屏

课程介绍

目前，可视化被越来越多地应用在C端和B端的互联网产品中。

比如，我们熟悉的淘宝“双十一”购物节的可视化大屏；再比如，很多企业级应用中的态势感知和指挥调度的可视化大屏，以及国家大力推动的智慧城市、智慧生活等等，这些都是通过可视化技术呈现出来的。

那可视化到底是什么呢？

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

因此，可视化工程师的日常工作，就是根据产品经理和设计师的想法，运用数学和图形学的知识，绘制出各种各样的几何图形。不过这还不够，一名优秀的可视化工程师，要能在这个基础上实现真正贴合用户需求的、灵活多变的、具有视觉震撼力并且充满创意的优秀可视化作品。

要实现这一点，离不开视觉呈现和数据处理相关的知识。但是这些知识不仅密度大，综合性也非常强。我们应该如何掌握它呢？

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

课程模块设计

根据可视化的实现方式，课程分为以下五个部分。

图形基础：带你熟悉HTML/CSS、SVG、Canvas2D和WebGL这四种图形系统，学会它们的基本用法、优点和局限性，从而能在实际应用中选择合适的图形系统，以达到最好的视觉效果。

数学基础：深入讲解向量、矩阵运算、参数方程、三角剖分以及仿射变换等内容，并配合综合运用，帮你建立一套通用的数学知识体系，适用于所有图形系统，以此来解决可视化图形呈现中的大部分问题。

视觉呈现：和你讨论像素化、动画、3D和交互等话题，结合美颜、图片处理和视觉特效等实际例子，来应用各种数学和图形学知识，帮你全面提升视觉呈现的能力，实现更高级的视觉效果。

性能优化：通过学习WebGL渲染复杂的2D、3D模型的方法，了解可视化高性能渲染的技术思路。在这一模块月影将和你分享他总结的一些成熟的方法论，帮助你在实现可视化项目的时候，解决大规模数据批量渲染的性能瓶颈问题。

数据驱动：结合3D柱状图、3D层级结构图、3D音乐可视化等案例，讲解数据处理的技巧，真正正将数据和视觉呈现结合起来，实现具有科技感的3D可视化大屏效果，最终形成完整的可视化解决方案。

文件目录

00丨开篇词丨不写网页的前端工程师，还能干什么？.m4a

00丨预习丨Web前端与可视化到底有什么区别？.html

00丨开篇词丨不写网页的前端工程师，还能干什么？.html

结束语丨可视化工程师的未来之路.pdf

用户故事丨非前端开发，我为什么要学可视化？.html

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

用户故事丨非前端开发，我为什么要学可视化？.pdf

00丨预习丨Web前端与可视化到底有什么区别？.pdf

结束语丨可视化工程师的未来之路.html

00丨开篇词丨不写网页的前端工程师，还能干什么？.pdf

00丨预习丨Web前端与可视化到底有什么区别？.m4a

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

国庆策划丨假期别闲着，一起来挑战“手势密码”.html

加餐一丨作为一名程序员，数学到底要多好？.m4a

01丨浏览器中实现可视化的四种方式.html

加餐一丨作为一名程序员，数学到底要多好？.html

国庆策划丨假期别闲着，一起来挑战“手势密码”.m4a

国庆策划丨假期别闲着，一起来挑战“手势密码”.pdf

加餐一丨作为一名程序员，数学到底要多好？.pdf

01丨浏览器中实现可视化的四种方式.m4a

01丨浏览器中实现可视化的四种方式.pdf

02丨指令式绘图系统：如何用Canvas绘制层次关系图？.html

加餐二丨SpriteJS：我是如何设计一个可视化图形渲染引擎的？.html

02丨指令式绘图系统：如何用Canvas绘制层次关系图？.m4a

加餐二丨SpriteJS：我是如何设计一个可视化图形渲染引擎的？.m4a

加餐二丨SpriteJS：我是如何设计一个可视化图形渲染引擎的？.pdf

02丨指令式绘图系统：如何用Canvas绘制层次关系图？.pdf

加餐三丨轻松一刻：我想和你聊聊前端的未来.pdf

加餐三丨轻松一刻：我想和你聊聊前端的未来.m4a

03丨声明式图形系统：如何用SVG图形元素绘制可视化图表？.html

03丨声明式图形系统：如何用SVG图形元素绘制可视化图表？.pdf

加餐三丨轻松一刻：我想和你聊聊前端的未来.html

03丨声明式图形系统：如何用SVG图形元素绘制可视化图表？.m4a

04丨GPU与渲染管线：如何用WebGL绘制最简单的几何图形？（上）.m4a

结束语丨可视化工程师的未来之路.m4a

04丨GPU与渲染管线：如何用WebGL绘制最简单的几何图形？（下）.html

加餐四丨一篇文章，带你快速理解函数式编程.html

加餐四丨一篇文章，带你快速理解函数式编程.m4a

加餐四丨一篇文章，带你快速理解函数式编程.pdf

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

04丨GPU与渲染管线：如何用WebGL绘制最简单的几何图形？（上）.pdf

04丨GPU与渲染管线：如何用WebGL绘制最简单的几何图形？（下）.m4a

用户故事丨非前端开发，我为什么要学可视化？.m4a

04丨GPU与渲染管线：如何用WebGL绘制最简单的几何图形？（上）.html

04丨GPU与渲染管线：如何用WebGL绘制最简单的几何图形？（下）.pdf

05丨如何用向量和坐标系描述点和线段？.html

加餐五｜周爱民：我想和你分享些学习的道理.html

加餐五｜周爱民：我想和你分享些学习的道理.pdf

05丨如何用向量和坐标系描述点和线段？.m4a

05丨如何用向量和坐标系描述点和线段？.pdf

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

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

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

07丨如何用向量和参数方程描述曲线？.m4a

07丨如何用向量和参数方程描述曲线？.pdf

07丨如何用向量和参数方程描述曲线？.html

08丨如何利用三角剖分和向量操作描述并处理多边形？.html

08丨如何利用三角剖分和向量操作描述并处理多边形？.m4a

08丨如何利用三角剖分和向量操作描述并处理多边形？.pdf

09丨如何用仿射变换对几何图形进行坐标变换？.pdf

09丨如何用仿射变换对几何图形进行坐标变换？.m4a

09丨如何用仿射变换对几何图形进行坐标变换？.html

10丨图形系统如何表示颜色？.pdf

10丨图形系统如何表示颜色？.m4a

10丨图形系统如何表示颜色？.html

11｜图案生成：如何生成重复图案、分形图案以及随机效果？.html

11｜图案生成：如何生成重复图案、分形图案以及随机效果？.m4a

11｜图案生成：如何生成重复图案、分形图案以及随机效果？.pdf

12丨如何使用滤镜函数实现美颜效果？.html

12丨如何使用滤镜函数实现美颜效果？.pdf

12丨如何使用滤镜函数实现美颜效果？.m4a

13丨如何给简单的图案添加纹理和复杂滤镜？.m4a

13丨如何给简单的图案添加纹理和复杂滤镜？.html

13丨如何给简单的图案添加纹理和复杂滤镜？.pdf

14丨如何使用片元着色器进行几何造型？.html

14丨如何使用片元着色器进行几何造型？.m4a

14丨如何使用片元着色器进行几何造型？.pdf

15丨如何用极坐标系绘制有趣图案？.html

15丨如何用极坐标系绘制有趣图案？.pdf

15丨如何用极坐标系绘制有趣图案？.m4a

16丨如何使用噪声生成复杂的纹理？.m4a

16丨如何使用噪声生成复杂的纹理？.html

16丨如何使用噪声生成复杂的纹理？.pdf

17丨如何使用后期处理通道增强图像效果？.m4a

17丨如何使用后期处理通道增强图像效果？.pdf

17丨如何使用后期处理通道增强图像效果？.html

18丨如何生成简单动画让图形动起来？.pdf

18丨如何生成简单动画让图形动起来？.m4a

18丨如何生成简单动画让图形动起来？.html

19丨如何用着色器实现像素动画？.m4a

19丨如何用着色器实现像素动画？.html

19丨如何用着色器实现像素动画？.pdf

20丨如何用WebGL绘制3D物体？.m4a

20丨如何用WebGL绘制3D物体？.pdf

20丨如何用WebGL绘制3D物体？.html

21丨如何添加相机，用透视原理对物体进行投影？.pdf

21丨如何添加相机，用透视原理对物体进行投影？.html

21丨如何添加相机，用透视原理对物体进行投影？.m4a

22丨如何用仿射变换来移动和旋转3D物体？.html

22丨如何用仿射变换来移动和旋转3D物体？.m4a

22丨如何用仿射变换来移动和旋转3D物体？.pdf

23丨如何模拟光照让3D场景更逼真？（上）.pdf

23丨如何模拟光照让3D场景更逼真？（上）.m4a

23丨如何模拟光照让3D场景更逼真？（上）.html

24丨如何模拟光照让3D场景更逼真？（下）.m4a

24丨如何模拟光照让3D场景更逼真？（下）.pdf

24丨如何模拟光照让3D场景更逼真？（下）.html

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

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

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

26丨如何绘制带宽度的曲线？.pdf

26丨如何绘制带宽度的曲线？.m4a

26丨如何绘制带宽度的曲线？.html

27丨案例：如何实现简单的3D可视化图表？.pdf

27丨案例：如何实现简单的3D可视化图表？.html

27丨案例：如何实现简单的3D可视化图表？.m4a

28丨Canvas、SVG与WebGL在性能上的优势与劣势.pdf

28丨Canvas、SVG与WebGL在性能上的优势与劣势.m4a

28丨Canvas、SVG与WebGL在性能上的优势与劣势.html

29丨怎么给Canvas绘制加速？.m4a

29丨怎么给Canvas绘制加速？.html

29丨怎么给Canvas绘制加速？.pdf

30｜怎么给WebGL绘制加速？.pdf

30｜怎么给WebGL绘制加速？.m4a

30｜怎么给WebGL绘制加速？.html

31丨针对海量数据，如何优化性能？.pdf

31丨针对海量数据，如何优化性能？.m4a

31丨针对海量数据，如何优化性能？.html

32丨数据之美：如何选择合适的方法对数据进行可视化处理？.m4a

32丨数据之美：如何选择合适的方法对数据进行可视化处理？.pdf

32丨数据之美：如何选择合适的方法对数据进行可视化处理？.html

33丨数据处理（一）：可视化数据处理的一般方法是什么？.m4a

33丨数据处理（一）：可视化数据处理的一般方法是什么？.pdf

33丨数据处理（一）：可视化数据处理的一般方法是什么？.html

34丨数据处理（二）：如何处理多元变量？.pdf

34丨数据处理（二）：如何处理多元变量？.html

34丨数据处理（二）：如何处理多元变量？.m4a

35丨设计（一）：如何让可视化设计更加清晰？.m4a

35丨设计（一）：如何让可视化设计更加清晰？.pdf

35丨设计（一）：如何让可视化设计更加清晰？.html

36丨设计（二）：如何理解可视化设计原则？.m4a

36丨设计（二）：如何理解可视化设计原则？.html

36丨设计（二）：如何理解可视化设计原则？.pdf

37丨实战（一）：如何使用图表库绘制常用数据图表？.html

37丨实战（一）：如何使用图表库绘制常用数据图表？.m4a

37丨实战（一）：如何使用图表库绘制常用数据图表？.pdf

38丨实战（二）：如何使用数据驱动框架绘制常用数据图表？.html

38丨实战（二）：如何使用数据驱动框架绘制常用数据图表？.pdf

38丨实战（二）：如何使用数据驱动框架绘制常用数据图表？.m4a

39丨实战（三）：如何实现地理信息的可视化？.html

39丨实战（三）：如何实现地理信息的可视化？.pdf

39丨实战（三）：如何实现地理信息的可视化？.m4a

40丨实战（四）：如何实现3D地球可视化（上）？.pdf

40丨实战（四）：如何实现3D地球可视化（上）？.m4a

40丨实战（四）：如何实现3D地球可视化（上）？.html

41丨实战（五）：如何实现3D地球可视化（下）？.pdf

41丨实战（五）：如何实现3D地球可视化（下）？.html

41丨实战（五）：如何实现3D地球可视化（下）？.m4a

42丨如何整理出我们自己的可视化工具集？.pdf

42丨如何整理出我们自己的可视化工具集？.html

42丨如何整理出我们自己的可视化工具集？.m4a