- 课程目录
- 课程介绍
-
在线阅读：开篇词 | 不写网页的前端工程师，还能干什么？
作为前端工程师，写了这么多网页之后，你是不是也遇到过前端职业发展的天花板，想要做些尝试或者突破呢？那我建议你试试可视化。
-
预习 | Web前端与可视化到底有什么区别？
可视化到底是什么？Web前端和可视化的区别？可视化领域中有哪些非常重要的工具？
-
01 | 浏览器中实现可视化的四种方式
在Web中，图形通常是通过浏览器中的渲染引擎来绘制的。那你知道一共有几种绘制图形的方式吗？它们又有什么区别吗？
-
02 | 指令式绘图系统：如何用Canvas绘制层次关系图？
怎么用图表体现出中国各个省份和城市之间的关系？Canvas2D能做什么？它有什么局限性？
-
03 | 声明式图形系统：如何用SVG图形元素绘制可视化图表？
怎么用SVG实现层次关系图？它的实现过程和Canvas的实现过程有什么区别？什么是声明式图形系统？
-
04 | GPU与渲染管线：如何用WebGL绘制最简单的几何图形？
WebGL的底层绘图原理是什么？怎么用WebGL绘制一个简单的三角形？顶点着色器能实现什么样的效果？
-
05 | 如何用向量和坐标系描述点和线段？
为什么做了很多可视化项目，解决了多个不同类型的图表展现之后，我们还是不能系统地提升自己的能力？还是会遇到各种困难？
-
06 | 可视化中你必须要掌握的向量乘法知识
关于向量乘法的知识你还记得多少？点乘和叉乘的数学和物理意义分别是什么？我们该怎么把它们运用到图形学中？
-
07 | 如何用向量和参数方程描述曲线？
不论我们用什么图形系统绘图，图形的呈现都离不开曲线。那我们该如何描述曲线呢？
-
08 | 如何利用三角剖分和向量操作描述并处理多边形？
在图形系统中，无论是2D图形还是3D图形，经过投影变换后，在屏幕上输出的都是多边形。那我们该如何描述并且处理多边形呢？
-
09 | 如何用仿射变换对几何图形进行坐标变换？
怎么快速地画出轮廓相同的图形？什么是仿射变换？有趣的“粒子效果”是怎么实现的？
-
10 | 图形系统如何表示颜色？
前端工程师只知道RGB和RGBA就够了吗？你知道Web图形系统中除了RGB还有哪几种表示颜色的方法吗？
-
11｜图案生成：如何生成重复图案、分形图案以及随机效果？
你一定见过各种各样的图案，它们有的复杂，有的规律明显，有的看上去比较随机。那你知道这些不同的图案是怎么增强视觉效果的吗？
-
12 | 如何使用滤镜函数实现美颜效果？
可视化是怎么处理数万甚至数十万的条数据的？在几何绘制方式的基础上，我们该如何优化性能？
-
13 | 如何给简单的图案添加纹理和复杂滤镜？
颜色滤镜和高斯滤镜分别是最基本的简单滤镜和复杂滤镜。除了它们以外，还有哪些滤镜吗？它们又能实现什么样的复杂效果呢？
-
14 | 如何使用片元着色器进行几何造型？
常规代码一般是顺序执行或者串行执行的，但是片元着色器中的代码执行思路并不一样。那片元着色器是怎么进行几何造型的呢？
-
15 | 如何用极坐标系绘制有趣图案？
还记得极坐标吗？在可视化中，极坐标和直角坐标的转换很常见，那怎么用极坐标画出有趣的图案呢？快来和我一起学习吧！
-
16 | 如何使用噪声生成复杂的纹理？
你知道怎么在可视化中呈现天上的云朵、水流的波纹以及被侵蚀的土地吗？这些大自然中的图案，其实都能通过随机技巧来实现。
-
17 | 如何使用后期处理通道增强图像效果？
在WebGL中，像给纹理添加平滑效果滤镜的情况，我们不能直接用着色器的运算来实现，而要通过后期处理通道来实现。
-
18 | 如何生成简单动画让图形动起来？
对于可视化展现来说，动画和3D都是用来强化数据表达，吸引用户的重要技术手段。今天我带你一起来学习简单动画的实现方法。
-
19 | 如何用着色器实现像素动画？
我们已经学会了怎么用HTML/CSS，里实现动画的三种形式。那你知道怎么用WebGL来实现吗？
-
20 | 如何用WebGL绘制3D物体？
我们知道3D图形能够极大地增强可视化的表现能力，那你知道3D图形怎么绘制吗？今天，我们从绘制最简单的三维立方体开始学习。
-
21 | 如何添加相机，用透视原理对物体进行投影？
事实上，对于同一个物体，我们在不同的位置去看，都会看到不一样的效果，那在WebGL中，我们怎么让物体呈现更真实的效果呢？
-
22 | 如何用仿射变换来移动和旋转3D物体？
在三维世界中，想要移动和旋转物体，也需要使用仿射变换。那仿射变换该怎么从二维扩展到三维几何空间呢？
-
23 | 如何模拟光照让3D场景更逼真？（上）
我们知道，物体在不同的光照下，会呈现不同的色彩。那你知道怎么让可视化实现的3D物体更自然、更逼真吗？
-
24 | 如何模拟光照让3D场景更逼真？（下）
真实世界的反射模型，其实是由镜面反射和漫反射结合起来的。你想实现更真实的3D效果吗？那你必须要掌握Phong反射模型。
-
25 | 如何用法线贴图模拟真实物体表面
我们已经学会怎么给规则几何体添加光照效果。但在真实世界中，大部分物体的表面都是凹凸不平的。这又该怎么办呢？
-
26 | 如何绘制带宽度的曲线？
在可视化中，我们经常需要绘制一些带宽度的曲线。但你知道怎么在WebGL中绘制吗？今天，我就来告诉你答案。
-
27 | 案例：如何实现简单的3D可视化图表？
图形学的基础知识这么多，到底是怎么在可视化中应用的呢？今天，我就带你完成一个小型的可视化项目。
-
28 | Canvas、SVG与WebGL在性能上的优势与劣势
性能优化，一直以来都是前端开发的难点。那可视化中的性能优化和普通的Web前端有什么不同？各个图形系统之间又有什么区别？
-
29 | 怎么给Canvas绘制加速？
想要解决性能问题，我们必须要知道真正消耗性能的点，从而结合项目需求进行有针对的处理，否则性能优化就是纸上谈兵，空中楼阁。
-
30｜怎么给WebGL绘制加速？
WebGL因为能够直接操作GPU，性能在各个图形系统中是最好的。那你知道怎样充分发挥chuWebGL在性能方面的优势吗？
-
31 | 针对海量数据，如何优化性能？
当数据量非常多的时候，经常需要针对数据和渲染的特点优化性能。但并没有固定的方法，这需要我们非常了解WebGL的渲染机制。
-
32 | 数据之美：如何选择合适的方法对数据进行可视化处理？
学可视化设计一定要学会处理数据吗？数据处理非常重要，在视觉呈现的基础上，我们也必须要学会合理地使用数据，才算学会可视化。
-
33 | 数据处理（一）：可视化数据处理的一般方法是什么？
在可视化数据处理中，当遇到数据过多或者过少的时候，你会怎么做？你知道数据处理的一半过程是什么吗？
-
34 | 数据处理（二）：如何处理多元变量？
想要更好的入门可视化，其实有一些基础的数据处理技巧可以利用。比如数据分类、从数据到图表的展现方法以及多元变量的处理方法。
-
35| 设计（一）：如何让可视化设计更加清晰？
可视化设计的目的是什么？是要用最酷炫的图形，尽可能表达出更多的信息，还是更少的信息，以及怎样才能让人一眼看到最重要信息？
-
36 | 设计（二）：如何理解可视化设计原则？
今天，我会分享给你可视化设计的四个基本原则，分别是简单清晰原则、视觉一致性原则、信息聚焦原则、高可访问性原则。
-
37 | 实战（一）：如何使用图表库绘制常用数据图表？
图表是我们在可视化中展示数据常用的方式，常见的有柱状图、折线图、饼图等等。你知道它们的制作方法吗？
-
38 | 实战（二）：如何使用数据驱动框架绘制常用数据图表？
今天，我带你一起学习使用数据驱动框架绘图的方法。它比图表库更灵活，不受图表类型对应API的制约，但没有图表库方便。
-
39 | 实战（三）：如何实现地理信息的可视化？
我们经常能看到新冠肺炎的疫情地图，你知道是怎么实现的吗？实际上，疫情地图属于地理位置信息可视化，我们今天就一起来学习。
-
40| 实战（四）：如何实现3D地球可视化（上）？
3D地球可视化是可视化应用里常见的一种形式，视觉上更炫酷，常用来实现全球地理信息相关的可视化应用，例如全球黑客攻防等等。
-
41 | 实战（五）：如何实现3D地球可视化（下）？
在可视化项目中，我们不仅要呈现视觉效果，还要允许用户与可视化大屏中呈现的内容进行交互。今天，我就和你一起添加交互细节。
-
42 | 如何整理出我们自己的可视化工具集？
你是否也因为知识面不够广、工具不够丰富，而寄望用单一的工具来解决所有问题？想要成为一名优秀的可视化工程师，这还远远不够。
-
国庆策划 | 假期别闲着，一起来挑战“手势密码”
国庆假期，快和我一起来挑战“手势密码”吧！
-
国庆策划 | 快来看看怎么用原生JavaScript实现手势解锁组件
今天，我们来公布国庆实践题的答案
-
加餐1 | 作为一名程序员，数学到底要多好？
你觉得数学在平时工作中重要吗？那你还记得多少数学知识？学到的数学知识是不是越难越好？
-
加餐2 | SpriteJS：我是如何设计一个可视化图形渲染引擎的？
你用过SpriteJS这个图形系统吗？在设计它的过程中，包含了很多我对图形系统架构的思考和取舍，我想把这些分享给你。
-
用户故事 | 非前端开发，我为什么要学可视化？
学了这么久的可视化，这门课对你有什么帮助？你有没有什么话想说？
-
加餐3 | 轻松一刻：我想和你聊聊前端的未来
“别更新了，学不动了”你是不是也经常有这种感觉？不如听听我的想法？
-
加餐4 | 一篇文章，带你快速理解函数式编程
函数式编程很受前端的同学们关注，它在JavaScript这样的脚本语言中经常被应用，而我们的课程代码中也经常会使用它。
-
加餐5｜周爱民：我想和你分享些学习的道理
昔闻人言：天下之事，最轻易者莫过于求学，最恒难者，莫过于问道。那你对于有人觉得学习难这件事，怎么看？
-
在线阅读：结束语 | 可视化工程师的未来之路
可视化依然属于比较小众的领域，但随着产品需求和技术的发展，必会有着激动人心的变化。可视化未来的路，期待继续与你一同探索！
-
有奖征集倒计时4天！你填写毕业问卷了吗？
11月13日前填写毕业问卷，将有机会获得99元课程兑换码或49元原创保温杯。
课程介绍
你将获得 从 0 到 1 构建可视化技术体系 掌握 4 大绘图系统底层实现原理 开发适合自己的可视化工具集 案例 + 代码，实现 3D 可视化大屏 讲师介绍 课程介绍...你将获得
- 从 0 到 1 构建可视化技术体系
- 掌握 4 大绘图系统底层实现原理
- 开发适合自己的可视化工具集
- 案例 + 代码，实现 3D 可视化大屏
讲师介绍
课程介绍
比如，我们熟悉的淘宝“双十一”购物节的可视化大屏；再比如，很多企业级应用中的态势感知和指挥调度的可视化大屏，以及国家大力推动的智慧城市、智慧生活等等，这些都是通过可视化技术呈现出来的。
那可视化到底是什么呢？
用一句话来说，可视化就是把数据组织成容易被人理解和认知的结构，然后用图形这种更形象的方式呈现出来的理论、方法和技术。
因此，可视化工程师的日常工作，就是根据产品经理和设计师的想法，运用数学和图形学的知识，绘制出各种各样的几何图形。不过这还不够，一名优秀的可视化工程师，要能在这个基础上实现真正贴合用户需求的、灵活多变的、具有视觉震撼力并且充满创意的优秀可视化作品。
要实现这一点，离不开视觉呈现和数据处理相关的知识。但是这些知识不仅密度大，综合性也非常强。我们应该如何掌握它呢？
为此，我们特意邀请了月影，来给你系统讲解可视化开发的原理和方法、数据处理的技巧以及视觉呈现的各种方式，帮助你创建出自己的可视化工具集，更高效地解决可视化开发中的问题。由此，你不仅可以实现更具冲击力的视觉效果，还能从中收获高级的前端知识，让你成为“更懂前端”的可视化人才。
课程模块设计
根据可视化的实现方式，课程分为以下五个部分。
图形基础：带你熟悉HTML/CSS、SVG、Canvas2D和WebGL这四种图形系统，学会它们的基本用法、优点和局限性，从而能在实际应用中选择合适的图形系统，以达到最好的视觉效果。
数学基础：深入讲解向量、矩阵运算、参数方程、三角剖分以及仿射变换等内容，并配合综合运用，帮你建立一套通用的数学知识体系，适用于所有图形系统，以此来解决可视化图形呈现中的大部分问题。
视觉呈现：和你讨论像素化、动画、3D和交互等话题，结合美颜、图片处理和视觉特效等实际例子，来应用各种数学和图形学知识，帮你全面提升视觉呈现的能力，实现更高级的视觉效果。
性能优化：通过学习WebGL渲染复杂的2D、3D模型的方法，了解可视化高性能渲染的技术思路。在这一模块月影将和你分享他总结的一些成熟的方法论，帮助你在实现可视化项目的时候，解决大规模数据批量渲染的性能瓶颈问题。
数据驱动：结合3D柱状图、3D层级结构图、3D音乐可视化等案例，讲解数据处理的技巧，真正正将数据和视觉呈现结合起来，实现具有科技感的3D可视化大屏效果，最终形成完整的可视化解决方案。
课程目录
特别放送
免费领取福利
限时活动推荐
