课程简介：

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

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

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

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

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

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

课程目录：

├──00丨开篇词丨不写网页的前端工程师，还能干什么？.html 4.83M
├──00丨开篇词丨不写网页的前端工程师，还能干什么？.m4a 10.52M
├──00丨开篇词丨不写网页的前端工程师，还能干什么？.pdf 2.01M
├──00丨预习丨Web前端与可视化到底有什么区别？.html 4.10M
├──00丨预习丨Web前端与可视化到底有什么区别？.m4a 8.41M
├──00丨预习丨Web前端与可视化到底有什么区别？.pdf 3.01M
├──01丨浏览器中实现可视化的四种方式.html 3.74M
├──01丨浏览器中实现可视化的四种方式.m4a 13.49M
├──01丨浏览器中实现可视化的四种方式.pdf 2.29M
├──02丨指令式绘图系统：如何用Canvas绘制层次关系图？.html 2.51M
├──02丨指令式绘图系统：如何用Canvas绘制层次关系图？.m4a 14.59M
├──02丨指令式绘图系统：如何用Canvas绘制层次关系图？.pdf 1.62M
├──03丨声明式图形系统：如何用SVG图形元素绘制可视化图表？.html 3.62M
├──03丨声明式图形系统：如何用SVG图形元素绘制可视化图表？.m4a 11.78M
├──03丨声明式图形系统：如何用SVG图形元素绘制可视化图表？.pdf 1.30M
├──04丨GPU与渲染管线：如何用WebGL绘制最简单的几何图形？（上）.html 2.66M
├──04丨GPU与渲染管线：如何用WebGL绘制最简单的几何图形？（上）.m4a 8.42M
├──04丨GPU与渲染管线：如何用WebGL绘制最简单的几何图形？（上）.pdf 1.77M
├──04丨GPU与渲染管线：如何用WebGL绘制最简单的几何图形？（下）.html 2.39M
├──04丨GPU与渲染管线：如何用WebGL绘制最简单的几何图形？（下）.m4a 9.12M
├──04丨GPU与渲染管线：如何用WebGL绘制最简单的几何图形？（下）.pdf 1.57M
├──05丨如何用向量和坐标系描述点和线段？.html 3.97M
├──05丨如何用向量和坐标系描述点和线段？.m4a 12.18M
├──05丨如何用向量和坐标系描述点和线段？.pdf 2.75M
├──06丨可视化中你必须要掌握的向量乘法知识.html 2.54M
├──06丨可视化中你必须要掌握的向量乘法知识.m4a 7.06M
├──06丨可视化中你必须要掌握的向量乘法知识.pdf 1.58M
├──07丨如何用向量和参数方程描述曲线？.html 3.72M
├──07丨如何用向量和参数方程描述曲线？.m4a 10.57M
├──07丨如何用向量和参数方程描述曲线？.pdf 2.09M
├──08丨如何利用三角剖分和向量操作描述并处理多边形？.html 3.86M
├──08丨如何利用三角剖分和向量操作描述并处理多边形？.m4a 13.80M
├──08丨如何利用三角剖分和向量操作描述并处理多边形？.pdf 1.79M
├──09丨如何用仿射变换对几何图形进行坐标变换？.html 3.90M
├──09丨如何用仿射变换对几何图形进行坐标变换？.m4a 14.31M
├──09丨如何用仿射变换对几何图形进行坐标变换？.pdf 2.40M
├──10丨图形系统如何表示颜色？.html 3.06M
├──10丨图形系统如何表示颜色？.m4a 12.68M
├──10丨图形系统如何表示颜色？.pdf 2.29M
├──11｜图案生成：如何生成重复图案、分形图案以及随机效果？.html 11.29M
├──11｜图案生成：如何生成重复图案、分形图案以及随机效果？.m4a 14.43M
├──11｜图案生成：如何生成重复图案、分形图案以及随机效果？.pdf 3.15M
├──12丨如何使用滤镜函数实现美颜效果？.html 5.90M
├──12丨如何使用滤镜函数实现美颜效果？.m4a 14.00M
├──12丨如何使用滤镜函数实现美颜效果？.pdf 3.86M
├──13丨如何给简单的图案添加纹理和复杂滤镜？.html 9.21M
├──13丨如何给简单的图案添加纹理和复杂滤镜？.m4a 10.02M
├──13丨如何给简单的图案添加纹理和复杂滤镜？.pdf 5.50M
├──14丨如何使用片元着色器进行几何造型？.html 35.67M
├──14丨如何使用片元着色器进行几何造型？.m4a 10.47M
├──14丨如何使用片元着色器进行几何造型？.pdf 3.01M
├──15丨如何用极坐标系绘制有趣图案？.html 7.63M
├──15丨如何用极坐标系绘制有趣图案？.m4a 10.45M
├──15丨如何用极坐标系绘制有趣图案？.pdf 2.59M
├──16丨如何使用噪声生成复杂的纹理？.html 24.13M
├──16丨如何使用噪声生成复杂的纹理？.m4a 8.28M
├──16丨如何使用噪声生成复杂的纹理？.pdf 4.57M
├──17丨如何使用后期处理通道增强图像效果？.html 8.96M
├──17丨如何使用后期处理通道增强图像效果？.m4a 9.56M
├──17丨如何使用后期处理通道增强图像效果？.pdf 3.35M
├──18丨如何生成简单动画让图形动起来？.html 3.51M
├──18丨如何生成简单动画让图形动起来？.m4a 9.72M
├──18丨如何生成简单动画让图形动起来？.pdf 1.50M
├──19丨如何用着色器实现像素动画？.html 9.80M
├──19丨如何用着色器实现像素动画？.m4a 8.14M
├──19丨如何用着色器实现像素动画？.pdf 1.36M
├──20丨如何用WebGL绘制3D物体？.html 4.62M
├──20丨如何用WebGL绘制3D物体？.m4a 7.72M
├──20丨如何用WebGL绘制3D物体？.pdf 1.55M
├──21丨如何添加相机，用透视原理对物体进行投影？.html 3.71M
├──21丨如何添加相机，用透视原理对物体进行投影？.m4a 8.13M
├──21丨如何添加相机，用透视原理对物体进行投影？.pdf 1.73M
├──22丨如何用仿射变换来移动和旋转3D物体？.html 4.54M
├──22丨如何用仿射变换来移动和旋转3D物体？.m4a 8.95M
├──22丨如何用仿射变换来移动和旋转3D物体？.pdf 1.63M
├──23丨如何模拟光照让3D场景更逼真？（上）.html 9.42M
├──23丨如何模拟光照让3D场景更逼真？（上）.m4a 7.10M
├──23丨如何模拟光照让3D场景更逼真？（上）.pdf 2.22M
├──24丨如何模拟光照让3D场景更逼真？（下）.html 5.66M
├──24丨如何模拟光照让3D场景更逼真？（下）.m4a 7.60M
├──24丨如何模拟光照让3D场景更逼真？（下）.pdf 1.57M
├──25丨如何用法线贴图模拟真实物体表面.html 7.69M
├──25丨如何用法线贴图模拟真实物体表面.m4a 6.76M
├──25丨如何用法线贴图模拟真实物体表面.pdf 1.85M
├──26丨如何绘制带宽度的曲线？.html 3.03M
├──26丨如何绘制带宽度的曲线？.m4a 7.93M
├──26丨如何绘制带宽度的曲线？.pdf 1.69M
├──27丨案例：如何实现简单的3D可视化图表？.html 15.11M
├──27丨案例：如何实现简单的3D可视化图表？.m4a 9.14M
├──27丨案例：如何实现简单的3D可视化图表？.pdf 2.39M
├──28丨Canvas、SVG与WebGL在性能上的优势与劣势.html 3.56M
├──28丨Canvas、SVG与WebGL在性能上的优势与劣势.m4a 10.53M
├──28丨Canvas、SVG与WebGL在性能上的优势与劣势.pdf 2.38M
├──29丨怎么给Canvas绘制加速？.html 20.70M
├──29丨怎么给Canvas绘制加速？.m4a 12.04M
├──29丨怎么给Canvas绘制加速？.pdf 2.25M
├──30｜怎么给WebGL绘制加速？.html 5.28M
├──30｜怎么给WebGL绘制加速？.m4a 11.18M
├──30｜怎么给WebGL绘制加速？.pdf 1.67M
├──31丨针对海量数据，如何优化性能？.html 7.17M
├──31丨针对海量数据，如何优化性能？.m4a 8.63M
├──31丨针对海量数据，如何优化性能？.pdf 2.83M
├──32丨数据之美：如何选择合适的方法对数据进行可视化处理？.html 9.28M
├──32丨数据之美：如何选择合适的方法对数据进行可视化处理？.m4a 8.19M
├──32丨数据之美：如何选择合适的方法对数据进行可视化处理？.pdf 2.64M
├──33丨数据处理（一）：可视化数据处理的一般方法是什么？.html 2.52M
├──33丨数据处理（一）：可视化数据处理的一般方法是什么？.m4a 9.79M
├──33丨数据处理（一）：可视化数据处理的一般方法是什么？.pdf 1.59M
├──34丨数据处理（二）：如何处理多元变量？.html 4.16M
├──34丨数据处理（二）：如何处理多元变量？.m4a 7.58M
├──34丨数据处理（二）：如何处理多元变量？.pdf 3.01M
├──35丨设计（一）：如何让可视化设计更加清晰？.html 3.59M
├──35丨设计（一）：如何让可视化设计更加清晰？.m4a 8.40M
├──35丨设计（一）：如何让可视化设计更加清晰？.pdf 2.35M
├──36丨设计（二）：如何理解可视化设计原则？.html 3.44M
├──36丨设计（二）：如何理解可视化设计原则？.m4a 8.51M
├──36丨设计（二）：如何理解可视化设计原则？.pdf 2.28M
├──37丨实战（一）：如何使用图表库绘制常用数据图表？.html 3.59M
├──37丨实战（一）：如何使用图表库绘制常用数据图表？.m4a 6.98M
├──37丨实战（一）：如何使用图表库绘制常用数据图表？.pdf 2.18M
├──38丨实战（二）：如何使用数据驱动框架绘制常用数据图表？.html 8.77M
├──38丨实战（二）：如何使用数据驱动框架绘制常用数据图表？.m4a 10.04M
├──38丨实战（二）：如何使用数据驱动框架绘制常用数据图表？.pdf 1.39M
├──39丨实战（三）：如何实现地理信息的可视化？.html 4.72M
├──39丨实战（三）：如何实现地理信息的可视化？.m4a 8.27M
├──39丨实战（三）：如何实现地理信息的可视化？.pdf 1.91M
├──40丨实战（四）：如何实现3D地球可视化（上）？.html 12.97M
├──40丨实战（四）：如何实现3D地球可视化（上）？.m4a 6.92M
├──40丨实战（四）：如何实现3D地球可视化（上）？.pdf 1.69M
├──41丨实战（五）：如何实现3D地球可视化（下）？.html 17.29M
├──41丨实战（五）：如何实现3D地球可视化（下）？.m4a 8.04M
├──41丨实战（五）：如何实现3D地球可视化（下）？.pdf 1.43M
├──42丨如何整理出我们自己的可视化工具集？.html 5.76M
├──42丨如何整理出我们自己的可视化工具集？.m4a 8.67M
├──42丨如何整理出我们自己的可视化工具集？.pdf 4.14M
├──国庆策划丨假期别闲着，一起来挑战“手势密码”.html 2.76M
├──国庆策划丨假期别闲着，一起来挑战“手势密码”.m4a 679.41kb
├──国庆策划丨假期别闲着，一起来挑战“手势密码”.pdf 1.68M
├──国庆策划丨快来看看怎么用原生JavaScript实现手势解锁组件.html 3.01M
├──国庆策划丨快来看看怎么用原生JavaScript实现手势解锁组件.m4a 549.26kb
├──国庆策划丨快来看看怎么用原生JavaScript实现手势解锁组件.pdf 1.96M
├──加餐二丨SpriteJS：我是如何设计一个可视化图形渲染引擎的？.html 10.49M
├──加餐二丨SpriteJS：我是如何设计一个可视化图形渲染引擎的？.m4a 10.19M
├──加餐二丨SpriteJS：我是如何设计一个可视化图形渲染引擎的？.pdf 2.20M
├──加餐三丨轻松一刻：我想和你聊聊前端的未来.html 2.10M
├──加餐三丨轻松一刻：我想和你聊聊前端的未来.m4a 6.44M
├──加餐三丨轻松一刻：我想和你聊聊前端的未来.pdf 1.42M
├──加餐四丨一篇文章，带你快速理解函数式编程.html 3.69M
├──加餐四丨一篇文章，带你快速理解函数式编程.m4a 8.28M
├──加餐四丨一篇文章，带你快速理解函数式编程.pdf 1.96M
├──加餐五｜周爱民：我想和你分享些学习的道理.html 1.89M
├──加餐五｜周爱民：我想和你分享些学习的道理.pdf 1.46M
├──加餐一丨作为一名程序员，数学到底要多好？.html 7.42M
├──加餐一丨作为一名程序员，数学到底要多好？.m4a 11.43M
├──加餐一丨作为一名程序员，数学到底要多好？.pdf 4.06M
├──结束语丨可视化工程师的未来之路.html 2.89M
├──结束语丨可视化工程师的未来之路.m4a 4.42M
├──结束语丨可视化工程师的未来之路.pdf 1.93M
├──用户故事丨非前端开发，我为什么要学可视化？.html 2.13M
├──用户故事丨非前端开发，我为什么要学可视化？.m4a 5.89M
└──用户故事丨非前端开发，我为什么要学可视化？.pdf 1.38M