系统掌握图形学与可视化核心原理
从 0 到 1 构建可视化技术体系
掌握 4 大绘图系统底层实现原理
开发适合自己的可视化工具集
案例 + 代码,实现 3D 可视化大屏
根据可视化的实现方式,课程分为以下五个部分。
图形基础:带你熟悉 HTML/CSS、SVG、Canvas2D 和 WebGL 这四种图形系统,学会它们的基本用法、优点和局限性,从而能在实际应用中选择合适的图形系统,以达到最好的视觉效果。
数学基础:深入讲解向量、矩阵运算、参数方程、三角剖分以及仿射变换等内容,并配合综合运用,帮你建立一套通用的数学知识体系,适用于所有图形系统,以此来解决可视化图形呈现中的大部分问题。
视觉呈现:和你讨论像素化、动画、3D 和交互等话题,结合美颜、图片处理和视觉特效等实际例子,来应用各种数学和图形学知识,帮你全面提升视觉呈现的能力,实现更高级的视觉效果。
性能优化:通过学习 WebGL 渲染复杂的 2D、3D 模型的方法,了解可视化高性能渲染的技术思路。在这一模块月影将和你分享他总结的一些成熟的方法论,帮助你在实现可视化项目的时候,解决大规模数据批量渲染的性能瓶颈问题。
数据驱动:结合 3D 柱状图、3D 层级结构图、3D 音乐可视化等案例,讲解数据处理的技巧,真正正将数据和视觉呈现结合起来,实现具有科技感的 3D 可视化大屏效果,最终形成完整的可视化解决方案。
〖课程截图〗:
├──jk53801-跟月影学可视化
| ├──0-21
| | ├──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
| | ├──加餐一丨作为一名程序员,数学到底要多好?_.html 7.42M
| | ├──加餐一丨作为一名程序员,数学到底要多好?_.m4a 11.43M
| | └──加餐一丨作为一名程序员,数学到底要多好?_.pdf 4.06M
| └──22-32
| | ├──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
| | ├──加餐二丨SpriteJS:我是如何设计一个可视化图形渲染引擎的?_.html 10.49M
| | ├──加餐二丨SpriteJS:我是如何设计一个可视化图形渲染引擎的?_.m4a 10.19M
| | ├──加餐二丨SpriteJS:我是如何设计一个可视化图形渲染引擎的?_.pdf 2.20M
| | ├──加餐三丨轻松一刻:我想和你聊聊前端的未来_.html 2.10M
| | ├──加餐三丨轻松一刻:我想和你聊聊前端的未来_.m4a 6.44M
| | ├──加餐三丨轻松一刻:我想和你聊聊前端的未来_.pdf 1.42M
| | ├──加餐一丨作为一名程序员,数学到底要多好?_.html 7.42M
| | ├──加餐一丨作为一名程序员,数学到底要多好?_.m4a 11.43M
| | ├──加餐一丨作为一名程序员,数学到底要多好?_.pdf 4.06M
| | ├──用户故事丨非前端开发,我为什么要学可视化?_.html 2.13M
| | ├──用户故事丨非前端开发,我为什么要学可视化?_.m4a 5.89M
| | └──用户故事丨非前端开发,我为什么要学可视化?_.pdf 1.38M
评论0