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

课程介绍

课程来自和悦可视化-图形与可视化核心原理的系统掌握

标题="和月映雪可视化图解-系统掌握图形与可视化核心原理" alt="和月映雪可视化图解-系统掌握图形与可视化核心原理">

你会得到

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

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

开发自己的可视化工具集

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

课程介绍

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

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

那么可视化到底是什么？

总而言之，可视化就是将数据组织成易于理解和识别的结构，然后以图形等更为生动的方式呈现的理论、方法和技术。

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

这需要视觉呈现和数据处理方面的知识。但是这些知识不仅密集，而且非常全面。我们应该如何掌握呢？

为此，我们特地请来了月影，系统地为大家讲解可视化开发的原理与方法、数据处理技巧以及各种可视化呈现方式，帮助您打造属于自己的可视化工具集，更高效地解决问题。可视化开发中的问题。如此一来，你不仅可以获得更有冲击力的视觉效果，还能从中获得高级的前端知识，让你成为“更懂前端”的可视化人才。

标题="和月映雪可视化-系统掌握图形可视化插图核心原理1" alt="和月映雪可视化-系统掌握图形可视化插图核心原理1">

课程模块设计

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

图形基础：熟悉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

加餐2丨SpriteJS：我如何设计可视化图形渲染引擎？ .html

02丨教学绘图系统：如何使用Canvas绘制层次图？ .m4a

加餐2丨SpriteJS：我如何设计可视化图形渲染引擎？ .m4a

加餐2丨SpriteJS：我如何设计可视化图形渲染引擎？ .pdf

02丨教学绘图系统：如何使用Canvas绘制层次图？ .pdf

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

加餐3丨放松时刻：想和你聊聊前端的未来.m4a

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

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

加餐三丨放松片刻：我想和你谈谈前端的未来.html

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

04丨GPU与渲染管线：如何用WebGL画出最简单的几何图形？ (上).m4a

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

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

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

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

加餐4丨一篇带你快速理解函数式编程的文章.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

极客时间