跟月影学可视化--极客时间课程推荐/优惠

你将获得：

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

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

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

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

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

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

那可视化到底是什么呢？

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

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

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

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

课程模块设计

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

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

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

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

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

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

课前必学

• 开篇词 | 不写网页的前端工程师，还能干什么？
• 预习 | Web前端与可视化到底有什么区别？

图形基础篇

• 01 | 浏览器中实现可视化的四种方式
• 02 | 指令式绘图系统：如何用Canvas绘制层次关系图？
• 03 | 声明式图形系统：如何用SVG图形元素绘制可视化图表？
• 04 | GPU与渲染管线：如何用WebGL绘制最简单的几何图形？

数学篇

• 05 | 如何用向量和坐标系描述点和线段？
• 06 | 可视化中你必须要掌握的向量乘法知识
• 07 | 如何用向量和参数方程描述曲线？
• 08 | 如何利用三角剖分和向量操作描述并处理多边形？
• 09 | 如何用仿射变换对几何图形进行坐标变换？

特别放送

• 加餐1 | 作为一名程序员，数学到底要多好？
• 加餐2 | SpriteJS：我是如何设计一个可视化图形渲染引擎的？
• 用户故事 | 非前端开发，我为什么要学可视化？
• 加餐3 | 轻松一刻：我想和你聊聊前端的未来
• 加餐4 | 一篇文章，带你快速理解函数式编程
• 加餐5｜周爱民：我想和你分享些学习的道理

视觉基础篇

• 10 | 图形系统如何表示颜色？
• 11｜图案生成：如何生成重复图案、分形图案以及随机效果？
• 12 | 如何使用滤镜函数实现美颜效果？
• 13 | 如何给简单的图案添加纹理和复杂滤镜？
• 14 | 如何使用片元着色器进行几何造型？
• 15 | 如何用极坐标系绘制有趣图案？
• 16 | 如何使用噪声生成复杂的纹理？
• 17 | 如何使用后期处理通道增强图像效果？

视觉高级篇

• 18 | 如何生成简单动画让图形动起来？
• 19 | 如何用着色器实现像素动画？
• 20 | 如何用WebGL绘制3D物体？
• 21 | 如何添加相机，用透视原理对物体进行投影？
• 22 | 如何用仿射变换来移动和旋转3D物体？
• 23 | 如何模拟光照让3D场景更逼真？（上）
• 24 | 如何模拟光照让3D场景更逼真？（下）
• 25 | 如何用法线贴图模拟真实物体表面
• 26 | 如何绘制带宽度的曲线？
• 27 | 案例：如何实现简单的3D可视化图表？

性能篇

• 28 | Canvas、SVG与WebGL在性能上的优势与劣势
• 29 | 怎么给Canvas绘制加速？
• 30｜怎么给WebGL绘制加速？

数据篇

• 31 | 针对海量数据，如何优化性能？
• 32 | 数据之美：如何选择合适的方法对数据进行可视化处理？
• 33 | 数据处理（一）：可视化数据处理的一般方法是什么？
• 34 | 数据处理（二）：如何处理多元变量？
• 35| 设计（一）：如何让可视化设计更加清晰？
• 36 | 设计（二）：如何理解可视化设计原则？
• 37 | 实战（一）：如何使用图表库绘制常用数据图表？
• 38 | 实战（二）：如何使用数据驱动框架绘制常用数据图表？
• 39 | 实战（三）：如何实现地理信息的可视化？
• 40| 实战（四）：如何实现3D地球可视化（上）？
• 41 | 实战（五）：如何实现3D地球可视化（下）？
• 42 | 如何整理出我们自己的可视化工具集？

国庆策划

• 国庆策划 | 假期别闲着，一起来挑战“手势密码”
• 国庆策划 | 快来看看怎么用原生JavaScript实现手势解锁组件

结束语

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