update

lmj01 · Apr 3, 2024 · 6f42b39 · 6f42b39
1 parent 90bf850
commit 6f42b39
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 38 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -17,6 +17,7 @@ <h1>局部光照模型</h1>
                 <li><a href="#section4">Phong反射模型</a></li>
                 <li><a href="#section5">Blinn-Phong反射模型</a></li>
                 <li><a href="#section6">着色方法（频率）</a></li>
+                <li><a href="#section7">T-B-N</a></li>
                 <li><a href="#section99">参考与引用</a></li>
             </ol>
         </div>
@@ -77,10 +78,16 @@ <h5>Phong Shading</h5>
                 <p>按照同样的逻辑，想要精细的结果就对每个点都做一次计算着色，这样平滑很多，都<em>通过插值方法来平滑过度相邻颜色值</em>，但这是对相同模型渲染出来的结果进行比对比的结果，如果模型本身精细尺度不一样了？<em>低精度模型与高精度模型</em>的差异与着色频率有关，就是内存与空间的辩证关系。</p>
             </div>
         </div>        
+        <div>
+            <h4 id="section7">T-B-N</h4>
+            <p><em>Normal vector</em>represents 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.</p>            
+        </div>        
         <div>
             <h4 id="section99">参考与引用</h4>
             <p><a href="https://zhuanlan.zhihu.com/p/144331612">计算机图形学五：局部光照模型(Blinn-Phong 反射模型)与着色方法</a></p>
             <p><a href="https://www.comp.nus.edu.sg/~lowkl/publications/lowk_persp_interp_techrep.pdf">Perspective-Correct Interpolation透视矫正插值</a></p>
+            <p><a href="https://github.com/ssloy/tinyrenderer/wiki/Lesson-6bis:-tangent-space-normal-mapping">tangent space normal mapping</a></p>
+            <p><a href="https://gamedev.stackexchange.com/questions/51399/what-are-normal-tangent-and-binormal-vectors-and-how-are-they-used">What are normal, tangent and binormal vectors and how are they used?</a></p>
         </div>
     </div>
 </body>

diff --git 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
@@ -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--邮箱[email protected]](https://playcode.io/)
 
 ### 在线工具
 - [在线计算器及工具](https://www.rapidtables.org/zh-CN/)

diff --git 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