iT邦幫忙

2021 iThome 鐵人賽

DAY 1
2
Modern Web

成為Canvas Ninja ! ~ 理解2D渲染的精髓系列 第 1

Day1 - 序言 - 成為Canvas Ninja ~ 理解2D渲染的精髓

SO Just Who The Hell Am I?

大家好! 首先先介紹一下我自己, 我是Mizok
小弟目前人在金融相關產業擔任前端工程師,到今年為止大約有三年左右的資歷。
我在就職的這幾年一直有意識到一件事: 不知道是不是因為個人學經歷的關係(過去並不是資訊本科生畢業), 我對前端感興趣的部分也比較奇怪(?)
比起鑽研那些最新的前端框架功能/API,我發現我自己更喜歡研究瀏覽器渲染與視覺呈現方面的技術(例如物理模擬程序背後的數學運算)。
今年首次挑戰參加鐵人賽,有一部分的目標也是想把自己目前曾經研究過的東西再整理一遍,並且加以深化。
那麼話不多說,接下來就開始介紹我的參賽主題 :D

What Is Ninja?

首先必須老實說, 這個標題其實不是我想的XD, 而是來自於一本外文書
之所以取這個名字只是因為想要看起來潮潮的~然後我在這邊為這次的參賽主題畫了一個LOGO, 我覺得很酷(自己說)

Canvas Ninja

平常在國外的前端社群中提到Ninja這個詞的時候~指的是一些習慣用很自由奔放(而且又讓人看不懂)的語法,來編寫專案源碼的工程師~是一個帶有負面意義的詞
而小弟我對於自己的期許當然也不是成為那樣子的開發者XD。
Ninja這個詞彙對我來說,比較近似於對某種技藝有深度理解的人。
我期許自己不只能做到理解框架/套件怎麼使用,而且還要能深入它們背後的邏輯,並且把這部分的理解運用在自己的專案上。
這對我來說就是成為一個Ninja的必經過程。

Why Canvas?

大家都知道,IE近年已經逐漸退出市場,而這個趨勢也漸漸的對前端圈子造成了不小的影響,除了各大前端框架相繼放棄支援IE以外,過去因為IE實作問題而被限制的技術也漸漸的開始浮出水面
小弟本身因為是在金融相關的專案公司就職,對於這部分真的是非常的有感覺。

這三年以來,其實不難發現在台灣的業界中,前端專案視覺部分的複雜程度有一點一點的在逐漸提升,從過去那種用BS隨便套一套就可以交差的網頁, 到現在隨便一個Campaign Site可能就會要你用動畫引擎去實作一堆有的沒的特效。
個人覺得在未來的前端業界中,出現像遊戲公司技術美術(TA)那樣的職位,大概也是極其有可能的。

前端工程師對於技術的鑽研,其實某種程度上也是對於未來的投資。而我之所以選擇Canvas這項技術,大部分的原因也就是想要探求這門技術,它在未來是否有更多的可能性。

About The Road Map

老實說我一開始在定下這個題目的時候也很猶豫,因為一開始是打算把webgl的內容一起囊括進來這次的賽程,但是後來實際評估了一下(有先試著寫了幾篇),才意識到要在30天內把2D + Webgl 全部寫完對我而言還是太困難了,畢竟平常還有工作 :(

主題的規劃上,在賽程的前段會先從基本的2D渲染理論和技術講起,
中期開始則是會找一些實務上常見的特效範例/套件效果來作為研究目標。
目前預計會提到的技術:

  1. web 端粒子系統實作
  2. 力學效果模擬(磁力/張力/引力)
  3. 布料材質模擬
  4. 斜面碰撞模擬
  5. 像素操作
  6. 以2D渲染創造3D空間
  7. html2Canvas技術實作

敬請期待!


下一篇
Day2 - Canvas基礎概論 I - 成為Canvas Ninja ~ 理解2D渲染的精髓
系列文
成為Canvas Ninja ! ~ 理解2D渲染的精髓31

尚未有邦友留言

立即登入留言