如何进入开发一款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...