跟月影學(xué)可視化 系統(tǒng)掌握?qǐng)D形學(xué)與可視化核心原理

?你將獲得

從 0 到 1 構(gòu)建可視化技術(shù)體系

掌握 4 大繪圖系統(tǒng)底層實(shí)現(xiàn)原理

開(kāi)發(fā)適合自己的可視化工具集

案例 + 代碼，實(shí)現(xiàn) 3D 可視化大屏

系統(tǒng)講解可視化開(kāi)發(fā)的原理和方法、數(shù)據(jù)處理的技巧以及視覺(jué)呈現(xiàn)的各種方式，幫助你創(chuàng)建出自己的可視化工具集，更高效地解決可視化開(kāi)發(fā)中的問(wèn)題。由此，你不僅可以實(shí)現(xiàn)更具沖擊力的視覺(jué)效果，還能從中收獲高級(jí)的前端知識(shí)，讓你成為“更懂前端”的可視化人才。

課程目錄

00丨開(kāi)篇詞丨不寫網(wǎng)頁(yè)的前端工程師，還能干什么？.html

00丨開(kāi)篇詞丨不寫網(wǎng)頁(yè)的前端工程師，還能干什么？.m4a

00丨開(kāi)篇詞丨不寫網(wǎng)頁(yè)的前端工程師，還能干什么？.pdf

00丨預(yù)習(xí)丨Web前端與可視化到底有什么區(qū)別？.html

00丨預(yù)習(xí)丨Web前端與可視化到底有什么區(qū)別？.m4a

00丨預(yù)習(xí)丨Web前端與可視化到底有什么區(qū)別？.pdf

01丨瀏覽器中實(shí)現(xiàn)可視化的四種方式.html

01丨瀏覽器中實(shí)現(xiàn)可視化的四種方式.m4a

01丨瀏覽器中實(shí)現(xiàn)可視化的四種方式.pdf

02丨指令式繪圖系統(tǒng)：如何用Canvas繪制層次關(guān)系圖？.html

02丨指令式繪圖系統(tǒng)：如何用Canvas繪制層次關(guān)系圖？.m4a

02丨指令式繪圖系統(tǒng)：如何用Canvas繪制層次關(guān)系圖？.pdf

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

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

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

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

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

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

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

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

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

05丨如何用向量和坐標(biāo)系描述點(diǎn)和線段？.html

05丨如何用向量和坐標(biāo)系描述點(diǎn)和線段？.m4a

05丨如何用向量和坐標(biāo)系描述點(diǎn)和線段？.pdf

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

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

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

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

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

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

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

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

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

09丨如何用仿射變換對(duì)幾何圖形進(jìn)行坐標(biāo)變換？.html

09丨如何用仿射變換對(duì)幾何圖形進(jìn)行坐標(biāo)變換？.m4a

09丨如何用仿射變換對(duì)幾何圖形進(jìn)行坐標(biāo)變換？.pdf

10丨圖形系統(tǒng)如何表示顏色？.html

10丨圖形系統(tǒng)如何表示顏色？.m4a

10丨圖形系統(tǒng)如何表示顏色？.pdf

11｜圖案生成：如何生成重復(fù)圖案、分形圖案以及隨機(jī)效果？.html

11｜圖案生成：如何生成重復(fù)圖案、分形圖案以及隨機(jī)效果？.m4a

11｜圖案生成：如何生成重復(fù)圖案、分形圖案以及隨機(jī)效果？.pdf

12丨如何使用濾鏡函數(shù)實(shí)現(xiàn)美顏效果？.html

12丨如何使用濾鏡函數(shù)實(shí)現(xiàn)美顏效果？.m4a

12丨如何使用濾鏡函數(shù)實(shí)現(xiàn)美顏效果？.pdf

13丨如何給簡(jiǎn)單的圖案添加紋理和復(fù)雜濾鏡？.html

13丨如何給簡(jiǎn)單的圖案添加紋理和復(fù)雜濾鏡？.m4a

13丨如何給簡(jiǎn)單的圖案添加紋理和復(fù)雜濾鏡？.pdf

14丨如何使用片元著色器進(jìn)行幾何造型？.html

14丨如何使用片元著色器進(jìn)行幾何造型？.m4a

14丨如何使用片元著色器進(jìn)行幾何造型？.pdf

15丨如何用極坐標(biāo)系繪制有趣圖案？.html

15丨如何用極坐標(biāo)系繪制有趣圖案？.m4a

15丨如何用極坐標(biāo)系繪制有趣圖案？.pdf

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

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

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

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

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

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

18丨如何生成簡(jiǎn)單動(dòng)畫讓圖形動(dòng)起來(lái)？.html

18丨如何生成簡(jiǎn)單動(dòng)畫讓圖形動(dòng)起來(lái)？.m4a

18丨如何生成簡(jiǎn)單動(dòng)畫讓圖形動(dòng)起來(lái)？.pdf

19丨如何用著色器實(shí)現(xiàn)像素動(dòng)畫？.html

19丨如何用著色器實(shí)現(xiàn)像素動(dòng)畫？.m4a

19丨如何用著色器實(shí)現(xiàn)像素動(dòng)畫？.pdf

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

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

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

21丨如何添加相機(jī)，用透視原理對(duì)物體進(jìn)行投影？.html

21丨如何添加相機(jī)，用透視原理對(duì)物體進(jìn)行投影？.m4a

21丨如何添加相機(jī)，用透視原理對(duì)物體進(jìn)行投影？.pdf

22丨如何用仿射變換來(lái)移動(dòng)和旋轉(zhuǎn)3D物體？.html

22丨如何用仿射變換來(lái)移動(dòng)和旋轉(zhuǎn)3D物體？.m4a

22丨如何用仿射變換來(lái)移動(dòng)和旋轉(zhuǎn)3D物體？.pdf

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

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

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

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

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

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

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

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

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

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

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

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

27丨案例：如何實(shí)現(xiàn)簡(jiǎn)單的3D可視化圖表？.html

27丨案例：如何實(shí)現(xiàn)簡(jiǎn)單的3D可視化圖表？.m4a

27丨案例：如何實(shí)現(xiàn)簡(jiǎn)單的3D可視化圖表？.pdf

28丨Canvas、SVG與WebGL在性能上的優(yōu)勢(shì)與劣勢(shì).html

28丨Canvas、SVG與WebGL在性能上的優(yōu)勢(shì)與劣勢(shì).m4a

28丨Canvas、SVG與WebGL在性能上的優(yōu)勢(shì)與劣勢(shì).pdf

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

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

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

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

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

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

31丨針對(duì)海量數(shù)據(jù)，如何優(yōu)化性能？.html

31丨針對(duì)海量數(shù)據(jù)，如何優(yōu)化性能？.m4a

31丨針對(duì)海量數(shù)據(jù)，如何優(yōu)化性能？.pdf

32丨數(shù)據(jù)之美：如何選擇合適的方法對(duì)數(shù)據(jù)進(jìn)行可視化處理？.html

32丨數(shù)據(jù)之美：如何選擇合適的方法對(duì)數(shù)據(jù)進(jìn)行可視化處理？.m4a

32丨數(shù)據(jù)之美：如何選擇合適的方法對(duì)數(shù)據(jù)進(jìn)行可視化處理？.pdf

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

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

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

34丨數(shù)據(jù)處理（二）：如何處理多元變量？.html

34丨數(shù)據(jù)處理（二）：如何處理多元變量？.m4a

34丨數(shù)據(jù)處理（二）：如何處理多元變量？.pdf

35丨設(shè)計(jì)（一）：如何讓可視化設(shè)計(jì)更加清晰？.html

35丨設(shè)計(jì)（一）：如何讓可視化設(shè)計(jì)更加清晰？.m4a

35丨設(shè)計(jì)（一）：如何讓可視化設(shè)計(jì)更加清晰？.pdf

36丨設(shè)計(jì)（二）：如何理解可視化設(shè)計(jì)原則？.html

36丨設(shè)計(jì)（二）：如何理解可視化設(shè)計(jì)原則？.m4a

36丨設(shè)計(jì)（二）：如何理解可視化設(shè)計(jì)原則？.pdf

37丨實(shí)戰(zhàn)（一）：如何使用圖表庫(kù)繪制常用數(shù)據(jù)圖表？.html

37丨實(shí)戰(zhàn)（一）：如何使用圖表庫(kù)繪制常用數(shù)據(jù)圖表？.m4a

37丨實(shí)戰(zhàn)（一）：如何使用圖表庫(kù)繪制常用數(shù)據(jù)圖表？.pdf

38丨實(shí)戰(zhàn)（二）：如何使用數(shù)據(jù)驅(qū)動(dòng)框架繪制常用數(shù)據(jù)圖表？.html

38丨實(shí)戰(zhàn)（二）：如何使用數(shù)據(jù)驅(qū)動(dòng)框架繪制常用數(shù)據(jù)圖表？.m4a

38丨實(shí)戰(zhàn)（二）：如何使用數(shù)據(jù)驅(qū)動(dòng)框架繪制常用數(shù)據(jù)圖表？.pdf

39丨實(shí)戰(zhàn)（三）：如何實(shí)現(xiàn)地理信息的可視化？.html

39丨實(shí)戰(zhàn)（三）：如何實(shí)現(xiàn)地理信息的可視化？.m4a

39丨實(shí)戰(zhàn)（三）：如何實(shí)現(xiàn)地理信息的可視化？.pdf

40丨實(shí)戰(zhàn)（四）：如何實(shí)現(xiàn)3D地球可視化（上）？.html

40丨實(shí)戰(zhàn)（四）：如何實(shí)現(xiàn)3D地球可視化（上）？.m4a

40丨實(shí)戰(zhàn)（四）：如何實(shí)現(xiàn)3D地球可視化（上）？.pdf

41丨實(shí)戰(zhàn)（五）：如何實(shí)現(xiàn)3D地球可視化（下）？.html

41丨實(shí)戰(zhàn)（五）：如何實(shí)現(xiàn)3D地球可視化（下）？.m4a

41丨實(shí)戰(zhàn)（五）：如何實(shí)現(xiàn)3D地球可視化（下）？.pdf

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

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

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

國(guó)慶策劃丨假期別閑著，一起來(lái)挑戰(zhàn)“手勢(shì)密碼”.html

國(guó)慶策劃丨假期別閑著，一起來(lái)挑戰(zhàn)“手勢(shì)密碼”.m4a

國(guó)慶策劃丨假期別閑著，一起來(lái)挑戰(zhàn)“手勢(shì)密碼”.pdf

國(guó)慶策劃丨快來(lái)看看怎么用原生JavaScript實(shí)現(xiàn)手勢(shì)解鎖組件.html

國(guó)慶策劃丨快來(lái)看看怎么用原生JavaScript實(shí)現(xiàn)手勢(shì)解鎖組件.m4a

國(guó)慶策劃丨快來(lái)看看怎么用原生JavaScript實(shí)現(xiàn)手勢(shì)解鎖組件.pdf

加餐二丨SpriteJS：我是如何設(shè)計(jì)一個(gè)可視化圖形渲染引擎的？.html

加餐二丨SpriteJS：我是如何設(shè)計(jì)一個(gè)可視化圖形渲染引擎的？.m4a

加餐二丨SpriteJS：我是如何設(shè)計(jì)一個(gè)可視化圖形渲染引擎的？.pdf

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

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

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

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

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

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

加餐五｜周愛(ài)民：我想和你分享些學(xué)習(xí)的道理.html

加餐五｜周愛(ài)民：我想和你分享些學(xué)習(xí)的道理.pdf

加餐一丨作為一名程序員，數(shù)學(xué)到底要多好？.html

加餐一丨作為一名程序員，數(shù)學(xué)到底要多好？.m4a

加餐一丨作為一名程序員，數(shù)學(xué)到底要多好？.pdf

結(jié)束語(yǔ)丨可視化工程師的未來(lái)之路.html

結(jié)束語(yǔ)丨可視化工程師的未來(lái)之路.m4a

結(jié)束語(yǔ)丨可視化工程師的未來(lái)之路.pdf

用戶故事丨非前端開(kāi)發(fā)，我為什么要學(xué)可視化？.html

用戶故事丨非前端開(kāi)發(fā)，我為什么要學(xué)可視化？.m4a

用戶故事丨非前端開(kāi)發(fā)，我為什么要學(xué)可視化？.pdf