?你將獲得

從 0 到 1 構建可視化技術體系

掌握 4 大繪圖系統底層實現原理

開發適合自己的可視化工具集

案例 + 代碼，實現 3D 可視化大屏

系統講解可視化開發的原理和方法、數據處理的技巧以及視覺呈現的各種方式，幫助你創建出自己的可視化工具集，更高效地解決可視化開發中的問題。由此，你不僅可以實現更具沖擊力的視覺效果，還能從中收獲高級的前端知識，讓你成為“更懂前端”的可視化人才。

課程目錄

00丨開篇詞丨不寫網頁的前端工程師，還能干什么？.html

00丨開篇詞丨不寫網頁的前端工程師，還能干什么？.m4a

00丨開篇詞丨不寫網頁的前端工程師，還能干什么？.pdf

00丨預習丨Web前端與可視化到底有什么區別？.html

00丨預習丨Web前端與可視化到底有什么區別？.m4a

00丨預習丨Web前端與可視化到底有什么區別？.pdf

01丨瀏覽器中實現可視化的四種方式.html

01丨瀏覽器中實現可視化的四種方式.m4a

01丨瀏覽器中實現可視化的四種方式.pdf

02丨指令式繪圖系統：如何用Canvas繪制層次關系圖？.html

02丨指令式繪圖系統：如何用Canvas繪制層次關系圖？.m4a

02丨指令式繪圖系統：如何用Canvas繪制層次關系圖？.pdf

03丨聲明式圖形系統：如何用SVG圖形元素繪制可視化圖表？.html

03丨聲明式圖形系統：如何用SVG圖形元素繪制可視化圖表？.m4a

03丨聲明式圖形系統：如何用SVG圖形元素繪制可視化圖表？.pdf

04丨GPU與渲染管線：如何用WebGL繪制最簡單的幾何圖形？（上）.html

04丨GPU與渲染管線：如何用WebGL繪制最簡單的幾何圖形？（上）.m4a

04丨GPU與渲染管線：如何用WebGL繪制最簡單的幾何圖形？（上）.pdf

04丨GPU與渲染管線：如何用WebGL繪制最簡單的幾何圖形？（下）.html

04丨GPU與渲染管線：如何用WebGL繪制最簡單的幾何圖形？（下）.m4a

04丨GPU與渲染管線：如何用WebGL繪制最簡單的幾何圖形？（下）.pdf

05丨如何用向量和坐標系描述點和線段？.html

05丨如何用向量和坐標系描述點和線段？.m4a

05丨如何用向量和坐標系描述點和線段？.pdf

06丨可視化中你必須要掌握的向量乘法知識.html

06丨可視化中你必須要掌握的向量乘法知識.m4a

06丨可視化中你必須要掌握的向量乘法知識.pdf

07丨如何用向量和參數方程描述曲線？.html

07丨如何用向量和參數方程描述曲線？.m4a

07丨如何用向量和參數方程描述曲線？.pdf

08丨如何利用三角剖分和向量操作描述并處理多邊形？.html

08丨如何利用三角剖分和向量操作描述并處理多邊形？.m4a

08丨如何利用三角剖分和向量操作描述并處理多邊形？.pdf

09丨如何用仿射變換對幾何圖形進行坐標變換？.html

09丨如何用仿射變換對幾何圖形進行坐標變換？.m4a

09丨如何用仿射變換對幾何圖形進行坐標變換？.pdf

10丨圖形系統如何表示顏色？.html

10丨圖形系統如何表示顏色？.m4a

10丨圖形系統如何表示顏色？.pdf

11｜圖案生成：如何生成重復圖案、分形圖案以及隨機效果？.html

11｜圖案生成：如何生成重復圖案、分形圖案以及隨機效果？.m4a

11｜圖案生成：如何生成重復圖案、分形圖案以及隨機效果？.pdf

12丨如何使用濾鏡函數實現美顏效果？.html

12丨如何使用濾鏡函數實現美顏效果？.m4a

12丨如何使用濾鏡函數實現美顏效果？.pdf

13丨如何給簡單的圖案添加紋理和復雜濾鏡？.html

13丨如何給簡單的圖案添加紋理和復雜濾鏡？.m4a

13丨如何給簡單的圖案添加紋理和復雜濾鏡？.pdf

14丨如何使用片元著色器進行幾何造型？.html

14丨如何使用片元著色器進行幾何造型？.m4a

14丨如何使用片元著色器進行幾何造型？.pdf

15丨如何用極坐標系繪制有趣圖案？.html

15丨如何用極坐標系繪制有趣圖案？.m4a

15丨如何用極坐標系繪制有趣圖案？.pdf

16丨如何使用噪聲生成復雜的紋理？.html

16丨如何使用噪聲生成復雜的紋理？.m4a

16丨如何使用噪聲生成復雜的紋理？.pdf

17丨如何使用后期處理通道增強圖像效果？.html

17丨如何使用后期處理通道增強圖像效果？.m4a

17丨如何使用后期處理通道增強圖像效果？.pdf

18丨如何生成簡單動畫讓圖形動起來？.html

18丨如何生成簡單動畫讓圖形動起來？.m4a

18丨如何生成簡單動畫讓圖形動起來？.pdf

19丨如何用著色器實現像素動畫？.html

19丨如何用著色器實現像素動畫？.m4a

19丨如何用著色器實現像素動畫？.pdf

20丨如何用WebGL繪制3D物體？.html

20丨如何用WebGL繪制3D物體？.m4a

20丨如何用WebGL繪制3D物體？.pdf

21丨如何添加相機，用透視原理對物體進行投影？.html

21丨如何添加相機，用透視原理對物體進行投影？.m4a

21丨如何添加相機，用透視原理對物體進行投影？.pdf

22丨如何用仿射變換來移動和旋轉3D物體？.html

22丨如何用仿射變換來移動和旋轉3D物體？.m4a

22丨如何用仿射變換來移動和旋轉3D物體？.pdf

23丨如何模擬光照讓3D場景更逼真？（上）.html

23丨如何模擬光照讓3D場景更逼真？（上）.m4a

23丨如何模擬光照讓3D場景更逼真？（上）.pdf

24丨如何模擬光照讓3D場景更逼真？（下）.html

24丨如何模擬光照讓3D場景更逼真？（下）.m4a

24丨如何模擬光照讓3D場景更逼真？（下）.pdf

25丨如何用法線貼圖模擬真實物體表面.html

25丨如何用法線貼圖模擬真實物體表面.m4a

25丨如何用法線貼圖模擬真實物體表面.pdf

26丨如何繪制帶寬度的曲線？.html

26丨如何繪制帶寬度的曲線？.m4a

26丨如何繪制帶寬度的曲線？.pdf

27丨案例：如何實現簡單的3D可視化圖表？.html

27丨案例：如何實現簡單的3D可視化圖表？.m4a

27丨案例：如何實現簡單的3D可視化圖表？.pdf

28丨Canvas、SVG與WebGL在性能上的優勢與劣勢.html

28丨Canvas、SVG與WebGL在性能上的優勢與劣勢.m4a

28丨Canvas、SVG與WebGL在性能上的優勢與劣勢.pdf

29丨怎么給Canvas繪制加速？.html

29丨怎么給Canvas繪制加速？.m4a

29丨怎么給Canvas繪制加速？.pdf

30｜怎么給WebGL繪制加速？.html

30｜怎么給WebGL繪制加速？.m4a

30｜怎么給WebGL繪制加速？.pdf

31丨針對海量數據，如何優化性能？.html

31丨針對海量數據，如何優化性能？.m4a

31丨針對海量數據，如何優化性能？.pdf

32丨數據之美：如何選擇合適的方法對數據進行可視化處理？.html

32丨數據之美：如何選擇合適的方法對數據進行可視化處理？.m4a

32丨數據之美：如何選擇合適的方法對數據進行可視化處理？.pdf

33丨數據處理（一）：可視化數據處理的一般方法是什么？.html

33丨數據處理（一）：可視化數據處理的一般方法是什么？.m4a

33丨數據處理（一）：可視化數據處理的一般方法是什么？.pdf

34丨數據處理（二）：如何處理多元變量？.html

34丨數據處理（二）：如何處理多元變量？.m4a

34丨數據處理（二）：如何處理多元變量？.pdf

35丨設計（一）：如何讓可視化設計更加清晰？.html

35丨設計（一）：如何讓可視化設計更加清晰？.m4a

35丨設計（一）：如何讓可視化設計更加清晰？.pdf

36丨設計（二）：如何理解可視化設計原則？.html

36丨設計（二）：如何理解可視化設計原則？.m4a

36丨設計（二）：如何理解可視化設計原則？.pdf

37丨實戰（一）：如何使用圖表庫繪制常用數據圖表？.html

37丨實戰（一）：如何使用圖表庫繪制常用數據圖表？.m4a

37丨實戰（一）：如何使用圖表庫繪制常用數據圖表？.pdf

38丨實戰（二）：如何使用數據驅動框架繪制常用數據圖表？.html

38丨實戰（二）：如何使用數據驅動框架繪制常用數據圖表？.m4a

38丨實戰（二）：如何使用數據驅動框架繪制常用數據圖表？.pdf

39丨實戰（三）：如何實現地理信息的可視化？.html

39丨實戰（三）：如何實現地理信息的可視化？.m4a

39丨實戰（三）：如何實現地理信息的可視化？.pdf

40丨實戰（四）：如何實現3D地球可視化（上）？.html

40丨實戰（四）：如何實現3D地球可視化（上）？.m4a

40丨實戰（四）：如何實現3D地球可視化（上）？.pdf

41丨實戰（五）：如何實現3D地球可視化（下）？.html

41丨實戰（五）：如何實現3D地球可視化（下）？.m4a

41丨實戰（五）：如何實現3D地球可視化（下）？.pdf

42丨如何整理出我們自己的可視化工具集？.html

42丨如何整理出我們自己的可視化工具集？.m4a

42丨如何整理出我們自己的可視化工具集？.pdf

國慶策劃丨假期別閑著，一起來挑戰“手勢密碼”.html

國慶策劃丨假期別閑著，一起來挑戰“手勢密碼”.m4a

國慶策劃丨假期別閑著，一起來挑戰“手勢密碼”.pdf

國慶策劃丨快來看看怎么用原生JavaScript實現手勢解鎖組件.html

國慶策劃丨快來看看怎么用原生JavaScript實現手勢解鎖組件.m4a

國慶策劃丨快來看看怎么用原生JavaScript實現手勢解鎖組件.pdf

加餐二丨SpriteJS：我是如何設計一個可視化圖形渲染引擎的？.html

加餐二丨SpriteJS：我是如何設計一個可視化圖形渲染引擎的？.m4a

加餐二丨SpriteJS：我是如何設計一個可視化圖形渲染引擎的？.pdf

加餐三丨輕松一刻：我想和你聊聊前端的未來.html

加餐三丨輕松一刻：我想和你聊聊前端的未來.m4a

加餐三丨輕松一刻：我想和你聊聊前端的未來.pdf

加餐四丨一篇文章，帶你快速理解函數式編程.html

加餐四丨一篇文章，帶你快速理解函數式編程.m4a

加餐四丨一篇文章，帶你快速理解函數式編程.pdf

加餐五｜周愛民：我想和你分享些學習的道理.html

加餐五｜周愛民：我想和你分享些學習的道理.pdf

加餐一丨作為一名程序員，數學到底要多好？.html

加餐一丨作為一名程序員，數學到底要多好？.m4a

加餐一丨作為一名程序員，數學到底要多好？.pdf

結束語丨可視化工程師的未來之路.html

結束語丨可視化工程師的未來之路.m4a

結束語丨可視化工程師的未來之路.pdf

用戶故事丨非前端開發，我為什么要學可視化？.html

用戶故事丨非前端開發，我為什么要學可視化？.m4a

用戶故事丨非前端開發，我為什么要學可視化？.pdf