跟月影学可视化 / 系统掌握图形学与可视化核心原理
月影
前奇虎360奇舞团团长,可视化UI框架SpriteJS核心开发者,《JavaScript王者归来》作者
  • 课程目录
  • 课程介绍
  • 开篇词 | 不写网页的前端工程师,还能干什么?

    作为前端工程师,写了这么多网页之后,你是不是也遇到过前端职业发展的天花板,想要做些尝试或者突破呢?那我建议你试试可视化。

  • 预习 | 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元原创保温杯。

2 单即赠每日一课月卡

三周年特惠,百门好课 5 折购 买 2 门课即赠 每日一课 VIP 月卡戳此了解详情

你将获得

  • 从 0 到 1 构建可视化技术体系
  • 掌握 4 大绘图系统底层实现原理
  • 开发适合自己的可视化工具集
  • 案例 + 代码,实现 3D 可视化大屏

讲师介绍

月影(吴亮),前奇虎360奇舞团团长,拥有15年开发经验的资深前端专家,熟悉JavaScript相关的开发工作,著有《JavaScript王者归来》。

月影非常热爱写代码,一直在做一线项目开发,并坚持技术输出。最近几年,月影深耕于可视化领域,深入研究图形学和渲染引擎底层技术,并且作为核心开发者,开发出了开源跨平台图形系统SpriteJS。SpriteJS默认采用WebGL渲染,针对可视化场景做了大量优化,能够高性能地渲染酷炫的可视化大屏。同时,它还有很好的跨平台能力,可以移植到任何拥有Canvas环境的平台上。

课程介绍

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

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

那可视化到底是什么呢?

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

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

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

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

课程模块设计

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

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

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

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

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

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

课程目录

特别放送

订阅须知