

跟月影学可视化

月影

前奇虎360奇舞团团长，可视化UI框架SpriteJS核心开发者，《JavaScript王者归来》作者

新⼈⾸单¥19.9

4335 人已学习

课程目录

已更新 37 讲 / 共 45 讲

0/4登录后，你可以任选4讲全文学习。

课前必学 (2讲)



开篇词 | 不写网页的前端工程师，还能干什么？

免费

预习 | Web前端与可视化到底有什么区别？



图形基础篇 (4讲)



01 | 浏览器中实现可视化的四种方式



02 | 指令式绘图系统：如何用Canvas绘制层次关系图？



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



04 | GPU与渲染管线：如何用WebGL绘制最简单的几何图形？



数学篇 (5讲)



05 | 如何用向量和坐标系描述点和线段？



06 | 可视化中你必须要掌握的向量乘法知识



07 | 如何用向量和参数方程描述曲线？



08 | 如何利用三角剖分和向量操作描述并处理多边形？



09 | 如何用仿射变换对几何图形进行坐标变换？



视觉基础篇 (8讲)



10 | 图形系统如何表示颜色？



11｜图案生成：如何生成重复图案、分形图案以及随机效果？



12 | 如何使用滤镜函数实现美颜效果？



13 | 如何给简单的图案添加纹理和复杂滤镜？



14 | 如何使用片元着色器进行几何造型？



15 | 如何用极坐标系绘制有趣图案？



16 | 如何使用噪声生成复杂的纹理？



17 | 如何使用后期处理通道增强图像效果？



视觉高级篇 (10讲)



18 | 如何生成简单动画让图形动起来？



19 | 如何用着色器实现像素动画？



20 | 如何用WebGL绘制3D物体？



21 | 如何添加相机，用透视原理对物体进行投影？



22 | 如何用仿射变换来移动和旋转3D物体？



23 | 如何模拟光照让3D场景更逼真？（上）



24 | 如何模拟光照让3D场景更逼真？（下）



25 | 如何用法线贴图模拟真实物体表面



26 | 如何绘制带宽度的曲线？



27 | 案例：如何实现简单的3D可视化图表？



性能篇 (3讲)



28 | Canvas、SVG与WebGL在性能上的优势与劣势



29 | 怎么给Canvas绘制加速？



30｜怎么给WebGL绘制加速？



数据篇 (1讲)



31 | 针对海量数据，如何优化性能？



特别放送 (4讲)

