diff --git a/articles/2023/smile.md b/articles/2023/smile.md index 593fcc9..47ffd60 100644 --- a/articles/2023/smile.md +++ b/articles/2023/smile.md @@ -84,8 +84,23 @@ y轴方向上的调整, ## 交互 +通过canvas绘制一张适宽或适高的图片 + +对AI返回的点建立坐标系，以41、31牙号的中间未竖轴，垂直于41、31牙号最低的关键点为横轴建立二维坐标系，这个坐标系是为了方便调整切缘曲线。 + +### 定位问题 + +因为绘制了一张背景图后，并绘制AI返回的特定点位置信息作为初始值。现在对canvas进行放大或缩小后，坐标系的变化导致定位很难了！ + +html5中hook了一个trackTransform，但是小程序中没有对应的接口和对象，就没有实现，而是简单的处理了 + +小程序找到DOMMatrix和DOMPoint的polyfill代码，还是实现trackTransform，避免缩放后导致的问题 + +虽然可以通过颜色来定位，但是精准的位置还是存在偏差。 + ### 放大镜 -笑窗调整曲线的关键点时， + +放大镜的实现就是利用上一帧的数据重新绘制到另一个小的canvas中 ## 问题 diff --git a/cg/Filament.md b/cg/Filament.md deleted file mode 100644 index cf91bbf..0000000 --- a/cg/Filament.md +++ /dev/null @@ -1,16 +0,0 @@ -# Filament -> 为Android设计的pbr - -## 环境搭建 -### window -使用cmake构建工程 -```cmake -cd filament -mkdir build-window -cmake .. -T"LLVM" -G "Visual Studio 15 2017 Win64" -DCMAKE_CXX_COMPILER:PATH="D:\llvm\7.0.1-win64\LLVM\bin\clang-cl.exe" -DCMAKE_C_COMPILER:PATH="D:\llvm\7.0.1-win64\LLVM\bin\clang-cl.exe" -DCMAKE_LINKER:PATH="D:\llvm\7.0.1-win64\LLVM\bin\lld-link.exe" -``` -使用msbuild编译过程 -```cmake -MSBuild.exe TNT.sln /t:build /p:Configuration=release -``` - diff --git a/cg/canvas.md b/cg/canvas.md index 4f20170..77a44ac 100644 --- a/cg/canvas.md +++ b/cg/canvas.md @@ -75,10 +75,17 @@ CanvasRenderingContext2D.isPointInPath() ### 坐标系 -左上角为原点，横轴向右是X正轴， 竖轴向下是Y正轴 +左上角为原点，横轴向右是X正轴， 竖轴向下是Y正轴. 引入“当前坐标系”概念，否则没有这个概念，所有的translate，rotate，scale都是依赖原点操作的。 +[Showing how to use transform methods on the HTML5 Canvas Context to selectively zoom in and out. Drag to pan](http://phrogz.net/tmp/canvas_zoom_to_cursor.html) + +二维的变换加上平移就是3x3的矩阵变换 + +[canvas transform demo](https://playcode.io/1820156) ```js const ctx = canvas.getContent('2d'); +// 当前坐标系的原点是(0,0) +ctx.translate(50, 50); // 现在坐标系的坐标点就是(50,50) // 以中心点center缩放scale系数 ctx.translate(center.x, center.y); ctx.scale(scale, scale); @@ -87,7 +94,7 @@ ctx.translate(-center.x, -center.y); 目标坐标 = 屏幕坐标（点击产生） + （图形坐标（所求图形） - 屏幕坐标） x 缩放倍数 -如果canvas没有缩放超出视口范围，都好处理 +- [Pannable and zoomable area for graphic editors like Photoshop ](https://github.com/rokobuljan/zoompan) ## 参考 diff --git a/cg/render.md b/cg/render.md new file mode 100644 index 0000000..39fb991 --- /dev/null +++ b/cg/render.md @@ -0,0 +1,8 @@ +# Render +> 渲染器 + +## phong + +## parallax mapping +是一种类似于法线贴图的纹理技术，能显著增强模型或纹理的表面细节和凹凸感 +[GLRF_example实现了一个视差映射的demo](https://github.com/DunkleMango/GLRF_Example) diff --git a/cg/tools/curve.md b/cg/tools/curve.md index 9b9188a..23bc574 100644 --- a/cg/tools/curve.md +++ b/cg/tools/curve.md @@ -2,6 +2,13 @@ ## bezier +- [A Primer on Bézier Curves A free, online book for when you really need to know how to do Bézier things.](https://pomax.github.io/bezierinfo/) + - [github](https://github.com/lmj01/BezierInfo-2) + +## B-spline + +- [B-spline Curves: Closed Curves ](https://pages.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/B-spline/bspline-curve-closed.html) + ## Catmull-Rom [Parameterization of Catmull-Rom Curves](http://www.cemyuksel.com/research/catmullrom_param/) diff --git a/html/lighting.html b/html/lighting.html index c05d1dc..d72991a 100644 --- a/html/lighting.html +++ b/html/lighting.html @@ -17,6 +17,7 @@

局部光照模型

  • Phong反射模型
  • Blinn-Phong反射模型
  • 着色方法（频率）
    • +
  • T-B-N
  • 参考与引用
    • @@ -77,10 +78,16 @@
    Phong Shading

    按照同样的逻辑，想要精细的结果就对每个点都做一次计算着色，这样平滑很多，都通过插值方法来平滑过度相邻颜色值，但这是对相同模型渲染出来的结果进行比对比的结果，如果模型本身精细尺度不一样了？低精度模型与高精度模型的差异与着色频率有关，就是内存与空间的辩证关系。

    +
    +

    T-B-N

    +

    Normal vectorrepresents the direction pointing directly "out" from a surface, meaning it is orthogonal (at 90 degree angles to) any vector which is coplanar with (in the case of a flat surface) or tangent to (in the case of a non-flat surface) the surface at a given point.

    +

    参考与引用

    计算机图形学五：局部光照模型(Blinn-Phong 反射模型)与着色方法

    Perspective-Correct Interpolation透视矫正插值

    +

    tangent space normal mapping

    +

    What are normal, tangent and binormal vectors and how are they used?

    diff --git a/index/article.md b/index/article.md index d0faa68..3690608 100644 --- a/index/article.md +++ b/index/article.md @@ -22,6 +22,7 @@ - [Mathjax](../articles/mathjax.md) - [build System](../dev-note/buildSystem.md) - [debug](../dev-note/debug.md) +- [npm](../nodejs/npm.md) ### web @@ -36,8 +37,6 @@ #### [nodejs](../nodejs/index.md) - [测试模块](../nodejs/test.md) - [vue](../nodejs/vue.md) -- [npm](../nodejs/npm.md) -- [pnpm](../nodejs/pnpm.md) - [图像处理](../nodejs/ImageManipulation.md) - [diff算法原理](../nodejs/diff.md) - [electron框架](../nodejs/electron.md) diff --git a/index/online.md b/index/online.md index 1c79691..ac2b19c 100644 --- a/index/online.md +++ b/index/online.md @@ -41,6 +41,10 @@ ## 工具 +### 搜索技巧 + +- 指定网站搜索， 如 canvas pick color area site:stackoverflow.com + ### 文档 - [PubScholar公益学术平台](https://pubscholar.cn/) @@ -50,6 +54,9 @@ - [MDN Web Docs](https://developer.mozilla.org/en-US/) - [HandWiki is a wiki encyclopedia for collaborative editing of articles on computing, science, technology and general knowledge](https://handwiki.org/wiki/Start) +### playground + +- [Javascript Playground--邮箱meijie.lmj@outlook.com](https://playcode.io/) ### 在线工具 - [在线计算器及工具](https://www.rapidtables.org/zh-CN/) diff --git a/nodejs/npm.md b/nodejs/npm.md index 59982d4..f12964c 100644 --- a/nodejs/npm.md +++ b/nodejs/npm.md @@ -76,3 +76,21 @@ npm cache clean --force npm config list npm install -ddd 查看安装细节卡住哪里 + +# [pnpm](https://pnpm.io/) + +```javascript +pnpm i // 按照依赖 +pnpm add libName --save // 按照库 +``` + +[配置Configuring](https://pnpm.io/configuring) +因为是portable版的vscode？就容易出错？ +```js +pnpm // 回显用法 +pnpm store status // 会出现问题， +pnpm store prune // 删除有问题的 +pnpm i // 重新按照 +``` + + diff --git a/nodejs/pnpm.md b/nodejs/pnpm.md deleted file mode 100644 index e477685..0000000 --- a/nodejs/pnpm.md +++ /dev/null @@ -1,17 +0,0 @@ -# [pnpm](https://pnpm.io/) - -```javascript -pnpm i // 按照依赖 -pnpm add libName --save // 按照库 -``` - -[配置Configuring](https://pnpm.io/configuring) -因为是portable版的vscode？就容易出错？ -```js -pnpm // 回显用法 -pnpm store status // 会出现问题， -pnpm store prune // 删除有问题的 -pnpm i // 重新按照 -``` - -