如何進入開發一款WebCAD.

接觸CAD二次開發有幾個年頭,一開始接觸的AutoLisp,寫的是一些腳本命令,爲繪圖提交效率,後來不斷摸索,開始不斷學習編程和幾何算法,通過幾年的學習開發,一直想本身作一個和AutoCAD同樣的產品,本來這個想法高不可攀,開發這麼龐大的系統是須要很是大的人力物力,也沒有不少的經驗支撐這一個項目.得力於比較瞭解CAD的開發方式,因此比較瞭解CAD軟件的設計,交互方式,和功能實現,慢慢解決了一些技術難題,WebCAD的工程纔算可以正常進行.

webCAD運行在瀏覽器上面,用現代的html5技術開發UI,我會用一些最新的特性,如es6 es7 es2018,flex佈局等,webCAD沒有打算支持舊版本的瀏覽器,甚至沒打算支持IE等落後的瀏覽器,由於那些瀏覽器連WebGL都跑不起來,因此不必支持.

支持最新的特性爲webCAD開發帶來了但願,去年當我開始瞭解三維引擎時,以爲threejs或許是個不錯的選擇,由於它社區支持良來,維護者很盡職盡責,沒有斷過對threejs的維護,而且開發者質量也還不錯,社區的質量也是比較好的,可以實現大多數CAD顯示的需求.

本來使用js開發CAD我感受是不現實的,由於js無類型可能致使代碼有大量的未知BUG,和不肯定性,動態語言帶來的代碼重構深坑我可以想象的到,由於我一開始就是學動態語言出身的,若是要保證重構代碼不發生錯誤,那麼你要寫出無數的測試代碼,纔可以保證你重構代碼不出現意外.固然,就算強類型語言,你重構代碼仍是可能形成一堆錯誤.

後面接觸到Typescript,才爲這件事帶來了但願,ts爲開發大型的webApp帶來了但願,當代碼量大時,感知智能提示和類型檢查提升了工做效率,減小了錯誤的概率.

也由於web開發在最近幾年的進步,js已經加入了一些新的特性來減小一些代碼,如js如今已經支持異步同步代碼,我用 async await實現了拾取點功能的等待.實現了同步功能,不然使用原生的js開發,可能會出現回調地獄的問題,而且對於接口的設計和插件設計帶來了不少問題.

使用新特性帶來的方即是巨大的.下面的代碼實現了等待用戶輸入一個點,等用戶輸入完成後繼續下面的動做.

let ptRes = await app.m_Editor.GetPoint();
if (ptRes.Status != PromptStatus.OK)
{
  return;
}

擁抱變化是如今新的web開發者須要適應的,據我瞭解,近幾年web開發進步的很是快,工具也變得很是多.

在webCAD中,使用了webpack做爲打包工具,而且使用了React做爲UI界面.

學習React花了我大量的時間,我一直想找到最佳實現,管理UI狀態和同步UI,最終我找到了MOBX來管理UI的狀態,使得代碼量減小而且易於維護.

由於webCAD是一個全新的項目,因此我選擇了最新的技術去實現這些功能,使用react可能對原先的web開發人員來講,並不能帶來多少工做效率的提高,可是我以爲對於代碼規範化,組件化仍是很是有意義的,而且對新技術的跟進也是很是有意義的.

在作CAD時,我也常常看github網站,查看threejs項目的問題討論,有一些問題很是有意思,值得學習,而且發現了牛人是如此的多,他們是如此的努力,值得人敬佩.

製做cad的一大障礙來自於對象選擇,爲此我花了很是多的時間去研究如何實現對象框選,一開始我查閱了 Blender OGRE 還有一些三維引擎的代碼,整體來講,獲得了一些經驗,可是卻不能知足個人要求.

設計過幾遍框選代碼後,實現了GPU選擇後,發現了該特性可能形成的顯卡內存泄漏,不知道該如何解決,而且彷佛銷燬對象須要資源,對顯卡彷佛也不是特別友好.因而後面乾脆使用了純幾何選擇.

實現幾何選擇,得益於我閱讀過軟件光柵化的文章,後面我想,我應該把點和屏幕的點對應起來,每條直接在屏幕上直接求交,這個方法之前也想過,只不過想到可能性能不夠就沒有實現.

後來仍是使用該方法解決了,期間還實現了屏幕投影,裁剪的過程.

接下去有幾個想實現的功能.

一個是鼠標光標形狀的修改,因爲如今沒有光標,鼠標是一個原生的形狀,有點不大友好,因此打算實現動態切換鼠標形狀達到光標修改.會試試SVG光標的性能.

一個是鼠標鎖定,最近的w3c標準已經支持鼠標鎖,爲視圖平移和視圖旋轉帶來更多遍歷. 若是不實現該特性,那麼用戶鼠標離開畫布時,會丟失鼠標事件.

另外還有不少有趣的功能等着我去實現,好比夾點點擊拉伸.

而且數據持久化和時間旅行(撤銷,重作)功能須要更多的代碼設計和測試.

webCAD還引入了Jest作自動化測試.學習了一段時間,不過如今仍是沒用起來,由於發現測試代碼太麻煩,沒那麼多人工.

而且因爲項目處於初期階段,API變動多是很是頻繁的,因此沒有接入過多的jest.

對於E2E用戶模擬測試,看了一下 https://github.com/GoogleChro... 也是很是不錯的,若是之後測試接入,會引入JEST 和puppeteer來作測試.

總結了一些今年五月份開始這個項目,git上面有第一個提交,學習ts和其餘不少技術也從那個時候開始.
須要學習的技術有:
web部分:html css js typescript
UI框架react
web測試:jest puppeteer
圖形框架:webgl threejs
數學:線性代數

固然還須要一些零碎的算法,如曲線偏移,曲線的布爾運算,三維布爾運算.UV等.

下面寫一些學習資料.

TypeScript :
學習ts主要看一些語言特性,瞭解語言就能夠了.

1.菜鳥教程.很人性化的,針對菜鳥的教程.
http://www.runoob.com/w3cnote...
2.中文文檔.
https://www.tslang.cn/docs/ho...

React:
學習react能夠看一些該中文文檔,瞭解一下概念
https://doc.react-china.org/

HTML/CSS/JS
css和js我就不貼了.同樣的菜鳥和mdn文檔
1.菜鳥教程
http://www.runoob.com/html/ht...
2.Mdn文檔
https://developer.mozilla.org...

Jest (使人愉快的 JavaScript 測試)
官方文檔
http://facebook.github.io/jes...

puppeteer (使用js控制chrome進行,e2e用戶行爲測試)
使用js進行無頭瀏覽器測試.
https://github.com/GoogleChro...

threejs
https://threejs.org/
https://github.com/mrdoob/thr...