update

lmj01 · Jun 28, 2024 · 63c5b3b · 63c5b3b
1 parent 88da8cb
commit 63c5b3b
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 8 deletions.
diff --git a/cg/api.opengl.md b/cg/api.opengl.md
@@ -2,6 +2,8 @@
 > [The Wiki is a collection of information about OpenGL, as well as frequently asked questions about OpenGL and its API. ](https://www.khronos.org/opengl/wiki/Main_Page)
 
 - [opengl 4.x](https://registry.khronos.org/OpenGL-Refpages/gl4/)
+- [opengl4.5新增了DSA(direct_state_access)，更改VAO，VBO，EBO的新用法](https://www.khronos.org/opengl/wiki/Direct_State_Access)
+- [OpenGL Error](https://www.khronos.org/opengl/wiki/OpenGL_Error#Meaning_of_errors)
 
 Context上下文是OpenGL的核心，因为OpenGL就是一个状态机，上下文中就保存了各种状态值，是所有执行指令的基础， 这个概念比较接近底层。统一的API是由显卡驱动提供的，负责沟通驱动与系统接口的是一些跨平台的库，如glew，glad，glad是更现代的库。
 
@@ -226,4 +228,5 @@ void initOpenGl() {
 - [GLRF - OpenGL Realtime Framework](https://github.com/DunkleMango/GLRF)
     - [GLRF笔记](/cg/library/GLRF.md)
 - [g-truc creation， OpenGL Mathematics (GLM) OpenGL Image (GLI)等有关opengl的文档与知识](https://www.g-truc.net/)
+- [A Guide to Modern OpenGL Functions](https://github.com/fendevel/Guide-to-Modern-OpenGL-Functions)
 
diff --git a/cg/threejs/grid.md b/cg/threejs/grid.md
@@ -0,0 +1,15 @@
+# 网格
+
+- [无穷网格，很容易更改为ES6版本](https://github.com/Fyrestar/THREE.InfiniteGridHelper)
+    - [讨论内容](https://discourse.threejs.org/t/three-infinitegridhelper-anti-aliased/8377)
+- [Anti-Aliased Grid Shader](https://madebyevan.com/shaders/grid/)
+
+```ts
+// 这个是保持与camera的朝向关联起来，这样不会因为control的改变而改变
+this.quaternion.rotateTowards(camera.quaternion, 1);
+// 找到一个参数，把这个关系对数化，得到的数据就是0.1，1，10，100这样的阶梯数，用来实现跨度
+const distance = camera.position.length();
+const logValue = 10 ** Math.ceil(Math.log(distance) / Math.log(10));
+(<ShaderMaterial>this.material).uniforms.uSize.value = logValue / this.scaleSize;
+// 对上面的无穷网格利用这个逻辑可以面前实现网格的变化
+```
diff --git a/cg/threejs/index.md b/cg/threejs/index.md
@@ -4,6 +4,8 @@
 - [Bump map](/cg/threejs/bumpmap.md)
 - [RayCaster](/cg/threejs/raycaster.md)
 - [Loader细节](/cg/threejs/loader.md)
+- [Grid实现](/cg/threejs/grid.md)
+- [shader](/cg/threejs/shader.md)
 
 ## 参考
 
@@ -15,3 +17,4 @@
 - [use your mouse to control the camera and build an andorid](https://hofk.de/main/threejs/raycaster/raycaster.html)
 - [webgl examples](https://alteredqualia.com/)
 - [22](https://github.com/brunosimon/folio-2019)
+- [THREE.js rendering order渲染顺序](https://segmentfault.com/a/1190000041221932/en)
diff --git a/cg/threejs/shader.md b/cg/threejs/shader.md
@@ -0,0 +1,6 @@
+# [Shader](https://threejs.org/docs/index.html?q=shader#api/en/materials/ShaderMaterial)
+
+```js
+renderer.toneMapping = LinearToneMapping;
+renderer.toneMappingExposure = 0.1;
+```
diff --git a/cg/tools/curve.md b/cg/tools/curve.md
@@ -52,4 +52,6 @@ Catmull-Rom样条线是由四个控制点p0,p1,p2,p3定义的插值样条曲线
 
 [Computing Curve Skeletons from Medial Surfaces of 3D Shapes](https://diglib.eg.org/bitstream/handle/10.2312/LocalChapterEvents.TPCG.TPCG12.099-106/099-106.pdf?sequence=1)
 
-[Physically-Based Facial Modeling, Analysis, and Animation](https://web.cs.ucla.edu/~dt/papers/vca90/vca90.pdf)
+[Physically-Based Facial Modeling, Analysis, and Animation](https://web.cs.ucla.edu/~dt/papers/vca90/vca90.pdf)
+
+- [Implementation of my HPG2020 paper: Quadratic Approximation of Cubic Curves ](https://github.com/ttnghia/QuadraticApproximation)
diff --git a/dev-note/git.md b/dev-note/git.md
@@ -59,9 +59,10 @@
 此操作非常耗时
 - git stash list 罗列出所有的
 - git stash save "message" 给当前的stash加上message说明
-- git stash 等同于上面这一句
+- git stash 等同于上面这一句，系统默认添加说明
 - git stash pop [--index] [<stash>] 恢复stash中的内容
 - git stash drop [<stash>] 删除对应的stash的id
+- git stash drop stash@{3}
 - git stash clear 清楚所有的 
 
 ### diff

diff --git a/exercises/math.secondary.md b/exercises/math.secondary.md
@@ -4,7 +4,7 @@
 <details>
 <summary>数的几何变换</summary>
 让我们从另外一个角度来看到数字，会发现实数与复数一样自然！
-**对称与变换**，对称性指的是在某种操作下使物体保持不变的性质。
+<b>对称与变换</b>，对称性指的是在某种操作下使物体保持不变的性质。
 <p>1. 正方形旋转90度后，旋转对称</p>
 <p>2. 沿着直线方向移动一段距离，称为平移对称</p>
 <p>3. 放大或缩小任何几何平面图形，称为扩张/缩放对称性</p>
@@ -13,10 +13,15 @@
 现在用上面定义的几何语言来重新定义数字与运算。
 <p>现在想象有一个平面，中间有一条水平直线，把数字0放在中间，把正实数放在0的右边，把负实数放在左边，这就是熟悉的数轴。</p>
 <p>现在有一个几何对象，一条直线，将直线平移x个数字会产生什么结果呢？数字0将位于x的位置，数字1位于x+1的位置，即平移变换对应于平移方向就是加减运算</p>
-<p>现在进行扩展或缩放变换，这相当于乘法与除法运算，就看你变换的数字是大于1还是小于1，是1就是变换成自己</p>
-<p>4. 反射</p>
-<p>4. 反射</p>
-<p>4. 反射</p>
+<p>现在进行扩展或缩放变换，这相当于乘法与除法运算，就看你变换的数字是大于1还是小于1，是1就是变换成自己，恒等变换</p>
+<p>如果将数轴通过0点作发射，这种情况下就会产生1变成-1，相当于乘数是负数的乘法运算，反射对应于乘以-1.如果连续反射两次了？(-1)(-1)=1,也是恒等变换</p>
+<p>自此利用几何变换引起数轴上实数的变化，就是对应于四种基本运算。但还忽略了一种变换，那就是旋转变换。<br/>
+这时需要我们从直线上的点拓展到平面上任意点。这个认识，<b>就是平面上的几何点对应着数字，但不一定是实数</b>。<br/>
+考虑逆时针旋转90度，这时对应什么变换呢？不会是加减运算，假设是乘除运算，即逆时针旋转90度对应于乘以<b>某个数</b>，这样得到通过0的竖直的直线。
+现在需要知道乘以了某个数是什么，我们跟踪数字1的变化，因为乘以1就是恒等变换。<br/>
+数字1逆时针旋转90度得到数字(0,1),继续逆时针旋转90度得到数字-1，这样就存在一个数，满足这样的性质<var>(0,1)<sub>2</sub></var>=-1.称这个数字为i，这样逆旋转90度就是乘以数字i。<br/>
+16 世纪的时候，当时数学家发现一维数轴并不是完整的图景。他们需要“发明”这个神秘的数字，称之为虚数单位，即i² = -1，以便计算三次多项式方程的解。
+</p>
 
 </details>
 

diff --git a/web/css.md b/web/css.md
@@ -2,6 +2,7 @@
 
 
 ## Web-CSS-Standard
+
 ### meta
 ```html
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -138,6 +139,11 @@ box-model分为两类:块状block和行内inline,两种的区别:
 }
 <link rel="stylesheet" media=mediatype and|not|only (media feature)" href="customcss.css">
 ```
+```js
+// 通过css的media样式来判断当前的js页面是否属于某种情况，CSS-JS交互的接口
+const tabletMedia = window.matchMedia(StylesheetVariables.tabletMedia).matches
+```
+
 
 ### pseudo-classes
 - host, selects shadow root host用于阴影DOM限定范围的

diff --git a/web/pkg.md b/web/pkg.md
@@ -41,7 +41,7 @@ npm config list
 ```
 
 #### [workspaces](https://docs.npmjs.com/cli/v10/using-npm/workspaces)
-
+workspace在node_modules创建了一个link,指向每个子包项目,这样各个子包项目可以互相直接引入代码
 ```shell
 npm init -w ./packages/a // 创建子包
 npm install abbrev -w a