update

lmj01 · Sep 5, 2024 · debd8ee · debd8ee
1 parent 6fa0184
commit debd8ee
Show file tree

Hide file tree

Showing 24 changed files with 421 additions and 194 deletions.
diff --git a/articles/2024/trend.md b/articles/2024/trend.md
@@ -1,5 +1,11 @@
 # 趋势
 
+## 工业化
+
+深入研发就会理解「工业化水平」能力，就是怎样让很多很多的人在一个项目上发挥足够好的耦合能力，安排好流水线，让生产能力很高效。
+
+工业化水平一定是基于项目经验而来的
+
 ## ui headless
 
 去年github上增长最快的一个库，是[shadcn/ui组件库](https://ui.shadcn.com/)

diff --git a/cg/Color.md b/cg/Color.md
@@ -67,8 +67,6 @@ HDR高动态范围High dynamic range，就是添加更多的动态范围到图
 
 ### Color in Web
 
-- [ThreeJs中的color](/cg/threejs/color.md)
-
 在canvas中或CSS中，可以使用某个属性来表示颜色，纯色、渐变色等
 ```js
 // CanvasRenderingContext2D.strokeStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes.
@@ -91,6 +89,35 @@ ctx.strokeStyle = canvasGradient;
     - [Color conversion & manipulation library by the editors of the CSS Color specifications ](https://github.com/LeaVerou/color.js)
     - [A comprehensive color library for JavaScript.](https://github.com/Evercoder/culori)
 
+## [Three Color management](https://threejs.org/docs/index.html#manual/en/introduction/Color-management)
+
+- [css color4](https://www.w3.org/TR/css-color-4/#predefined)
+
+- color space色彩空间有三个参数组成：color primaries原色，white point白点，transfer functions转换函数。
+- color model是语法上可选择的色域color gamut，即颜色值的坐标。在three.js中只关心RGB color model，having three coordinates r, g, b ∈ [0,1] ("closed domain") or r, g, b ∈ [0,∞] ("open domain") each representing a fraction of a primary color.
+- color gamut是由color primaries和white point决定的，在这个volume内的就是gamut，之外的不能通过通过这些值来表示
+- SRGBColorSpace和LinearSRGBColorSpace使用相同的color gamut，唯一的区别是transfer function。
+    - Linear-sRGB是线性对应于物理光强度
+    - sRGB使用非线性transfer function，更接近于人眼接收的光和通用显示设备的显示光
+- lighting calculations和其他rendering操作常常发生在线性空间中，但线性颜色值在image或framebuffer中的存储效率较低，且人眼看起来也不太对。
+- input texture输入的纹理和final rendered image最终效果图通常使用非线性的sRGB color space。
+
+
+- [[SOLVED] Why does object get dimmer/darker when light gets closer to it?](https://discourse.threejs.org/t/solved-why-does-object-get-dimmer-darker-when-light-gets-closer-to-it/3475)
+
+### linear workflow
+
+在r152中引入这个概念，
+
+- [The Importance of Being Linear](https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear)
+- [Updates to Color Management in three.js r152](https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791)
+- [Updates to lighting in three.js r155](https://discourse.threejs.org/t/updates-to-lighting-in-three-js-r155/53733)
+- [Shadow and color problems going from v64 to v161](https://discourse.threejs.org/t/shadow-and-color-problems-going-from-v64-to-v161/61640)
+
+
+```js
+```
+
 ## 参考
 
 - [The RGB-XYZ Matrix Calculator](https://www.russellcottrell.com/photo/matrixCalculator.htm)

diff --git a/cg/graphics.md b/cg/graphics.md
@@ -8,8 +8,9 @@
 - 任务调度
 - driver驱动
 
-## GPU
-> Graphics Processing Unit
+## GPU-Graphics Processing Unit
+
+- [GPU天梯排行榜](https://topic.expreview.com/GPU/)
 
 - Asynchronous accelerator for graphics异步图形加速
 - parallel problem并行处理
@@ -43,6 +44,19 @@ foreach(tile)
             call fragment shader
     store new tile FBO data
 ```
+### 强制使用显卡
+
+很多设备因为考虑性能，特别是新买的电脑，默认会是关闭独立显卡使用集成显卡来彰显耗电低的宣传。
+
+- [多显卡的强制调用n卡的方法](https://developer.download.nvidia.cn/devzone/devcenter/gamegraphics/files/OptimusRenderingPolicies.pdf)
+```c
+// 使用NVIDIA卡
+extern "C" {
+    _declspec(dllexport) DWORD NvOptiumsEnablement = 0x00000001;
+    _declspec(dllexport) int AmdPowerXpressRequestHighPerformance = 1;
+}
+```
+或是通过设置wgl的扩展接口来调用
 
 ### 参考
 

diff --git a/cg/mesh/mesh.triangle.md b/cg/mesh/mesh.triangle.md
@@ -0,0 +1,100 @@
+# 三角面片
+
+
+## Normal
+
+### threejs
+
+在文件src\core\BufferGeometry.js中有计算computeVertexNormals就是对每个顶点计算其所在面的法线
+三个点中任意两两构成共面的法向量相乘得到其面的法线，作为顶点的法线，**注意VertexNormal只算了当前面片的法线**，并没有像光照时的理论上那样把每个相邻的取均值。
+
+## Tangent
+
+### per-vertex tangent spaces    
+- [Computing Tangent Space Basis Vectors for an Arbitrary Mesh](https://terathon.com/blog/tangent-space.html)
+- [课件](https://www.cs.upc.edu/~virtual/G/index.php?dir=)
+    - [pdf](https://www.cs.upc.edu/~virtual/G/1.%20Teoria/06.%20Textures/Tangent%20Space%20Calculation.pdf)
+
+- [threejs的Tangent支持](https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.computeMikkTSpaceTangents)
+
+<details>
+<summary>顶点切线的数学推理</summary>
+
+我们期待的tangent-space是对齐纹理坐标系的，x-axis与u和y-axis与v方向都一致
+$$
+\text{如果Q表示三角形内的一点,则有式子} \newline Q - P_{0} = (u - u_{0})T + (v - v_{0})B, \newline P_{0}\text{是三角面片的一个顶点，}(u_{0},v_{0})\text{是该点的纹理坐标，向量T(tangent)和向量B(bitangent)是对齐纹理坐标的，这就是我们需要计算的。} \newline
+\text{假设三角形的三个顶点分别是}P_{0},P_{1},P_{2},\text{纹理坐标分别是}(u_{0},v_{0}),(u_{1},v_{1}),(u_{2},v_{2}), \text{算他们的向量有} \newline
+\begin{array}{c}
+    Q_{1} = P_{1} - P_{0} \newline
+    Q_{2} = P_{2} - P_{0} \newline
+    (s_{1},t_{1}) = (u_{1} - u_{0}, v_{1} - v_{0}) \newline
+    (s_{2},t_{2}) = (u_{2} - u_{0}, v_{2} - v_{0}) \newline
+\end{array} \newline
+\text{其需要求解的方程就是}
+\begin{array}{c}
+    Q_{1} = s_{1}T + t_{1}B \newline
+    Q_{2} = s_{2}T + t_{2}B \newline
+\end{array} \newline
+\text{其矩阵形式是}
+\begin{bmatrix}
+   (Q_{1})_{x} & (Q_{1})_{y} & (Q_{1})_{z} \newline
+   (Q_{2})_{x} & (Q_{2})_{y} & (Q_{2})_{z}
+\end{bmatrix} = \begin{bmatrix}
+   s_{1} & t_{1} \newline
+   s_{2} & t_{2}
+\end{bmatrix}
+\begin{bmatrix}
+   T_{x} & T_{y} & T_{z} \newline
+   B_{x} & B_{y} & B_{z}
+\end{bmatrix} \iff \begin{bmatrix}
+   T_{x} & T_{y} & T_{z} \newline
+   B_{x} & B_{y} & B_{z}
+\end{bmatrix} = \frac{1}{s_{1}t_{2} - s_{2}t_{1}}
+\begin{bmatrix}
+   t_{2} & -t_{1} \newline
+   -s_{2} & s_{1}
+\end{bmatrix}
+\begin{bmatrix}
+   (Q_{1})_{x} & (Q_{1})_{y} & (Q_{1})_{z} \newline
+   (Q_{2})_{x} & (Q_{2})_{y} & (Q_{2})_{z}
+\end{bmatrix} \newline
+\text{由三个顶点}P_{0},P_{1},P_{2}\text{组成的三角形就得到了未标准化的切线向量T和B，为了得到单个顶点的切线向量} \newline
+\text{，采取类似顶点法线的方法计算方式来计算切线，对共享该顶点的所有三角形的切线向量取均值。} \newline
+\text{针对相邻三角形不连续纹理映射的情况下，边界上的点已经复制了，它们本身也是没有相同的纹理坐标，这些边界我们就不平均其切线向量了。} \newline
+\text{加上顶点的法线向量N，就可以从切线空间tangent space转换到局部空间object space} \newline
+\begin{bmatrix}
+   T_{x} & B_{x} & N_{x} \newline
+   T_{y} & B_{y} & N_{y} \newline
+   T_{z} & B_{z} & N_{z} 
+\end{bmatrix} \newline
+\text{但是我们想要从局部空间到切线空间，计算光照时需要的光的方向light direction。} \newline
+\text{上面这个矩阵的逆不一定是其转置，因为切线向量彼此垂直或垂直于法线向量。} \newline 
+\text{此时我们可以安全地假设这三个向量至少接近正交，使用Gram-Schmidt算法去正交化它们不应该会引起任何不可接受的失真。新的切线向量如下} \newline
+\begin{array}{c}
+    T^{\prime} = T - (N \cdot T)N \newline
+    B^{\prime} = B - (N \cdot B)N - \frac{(T^{\prime} \cdot B)T^{\prime}}{(T^{\prime})^2} \newline
+\end{array} \newline
+\text{标准化新的切线向量，填入之前的位置，并转置它就得到它的逆矩阵了，这样从局部空间到切线空间的乘以下面的矩阵就得到了光的方向，} \newline 
+\text{得到光的方向点积bump map的采样值就得到正确的Lambertian漫反射的光照值。} \newline
+\begin{bmatrix}
+   T^{\prime}_{x} & T^{\prime}_{y} & T^{\prime}_{z} \newline
+   B^{\prime}_{x} & B^{\prime}_{y} & B^{\prime}_{z} \newline
+   N_{x} & N_{y} & N_{z} \newline
+\end{bmatrix} \newline
+\text{工程化时，知道T和N时就叉乘算出B，这样存储数据时只需要存储T就可以。} N \times T^{\prime} = mB^{\prime}, m = \pm 1 \text{代表了是左手坐标系还是右手坐标系，m是上面矩阵的行列式。} \newline
+\text{一种方式存储方式是}Vector4=(T^{\prime}, w)\text{，则副切线的计算可以这样得到} B^{\prime} = T^{\prime}_{w}(N \times T^{\prime})
+$$
+
+作者最后还对Bitangent和Binormal的区别进行了说明，最佳术语是副切线向量Bitangent。
+
+</details>
+
+### MikkTSpace
+- [Tangent Space Normal Maps](http://www.mikktspace.com/)
+    - [github c](https://github.com/mmikk/MikkTSpace)
+    - [MikkTSpace vertex tangent calculation for JavaScript/TypeScript/Node.js, using Web Assembly. ](https://github.com/donmccurdy/mikktspace-wasm)
+
+<details>
+<summary>MikkTSpace切线的数学推理</summary>
+
+</details>
diff --git a/cg/shader.md b/cg/shader.md
@@ -163,3 +163,6 @@ mat3(
   - Introduction
 - [OpenGL 图元处理，一些关于OpenGL的概念](https://www.jianshu.com/p/3d974e69f842)
   - [Learning practice demo for examples in OpenGL Super Bible 6th ](https://github.com/StarryThrone/OpenGL-SBible-example-code)
+
+- [Circle C++ shaders ](https://github.com/seanbaxter/shaders)
+  - The Circle shader extension aims to bring the entire capability of the OpenGL Shading Language (GLSL) into C++ as a first-class language feature. Write graphics code using Standard C++ and mark interface variables and shader functions with C++ attributes to indicate their role in the graphics pipeline. When the program is compiled, all shader declarations are lowered to the SPIR-V binary intermediate representation, which is the portable shader storage format Vulkan and OpenGL programs. 使用C++昨晚shader的超集语言，统一编译成SPIR-V二进制格式，因为这个是portable的
diff --git a/cg/threejs/bumpmap.md b/cg/threejs/bumpmap.md
diff --git a/cg/threejs/color.md b/cg/threejs/color.md
diff --git a/cg/threejs/index.md b/cg/threejs/index.md
@@ -2,7 +2,6 @@
 
 - [问题集](/cg/threejs/use.md)
 - [乱记](/cg/threejs/threejs.md)
-- [Bump map](/cg/threejs/bumpmap.md)
 - [RayCaster](/cg/threejs/raycaster.md)
 - [模型-导入-导出](/cg/threejs/model.md)
 - [Grid实现](/cg/threejs/grid.md)
@@ -12,6 +11,27 @@
 - [数学相关](/cg/threejs/math.md)
 - [灯光](/cg/tools/camera.md)
 
+## [three playcode playground](https://playcode.io/)
+邮箱[email protected]登录
+
+### 颜色
+- [THREE.jsGreaterThanR151](https://playcode.io/1992266)
+- [THREE.jsLessThanR151](https://playcode.io/1992266)
+
+## demo
+
+- [Collection of Examples Links to https://discourse.threejs.org/ and originals in source code ](https://hofk.de/main/discourse.threejs/)
+
+### [RSM-Reflective Shadow Map](http://www.klayge.org/material/3_12/GI/rsm.pdf)
+
+- [Reflective shadow map experiment with a newer version of three.](https://github.com/lmj01/rsm)
+
+### 其他
+
+- [perlin noise v2,效果看起来非常舒服](https://codepen.io/vcomics/pen/RwQgXzv)
+- [Shaky / Jumpy - Camera Interpolation Along Curve](https://discourse.threejs.org/t/shaky-jumpy-camera-interpolation-along-curve/52278/2)
+    - [Extruded tube with holes相机跟着视角变化，钻洞的效果](https://codepen.io/boytchev/pen/poxpGZN)
+
 ## 参考
 
 - [退火算法的模拟](https://github.com/algorithmx/WiresSA/blob/main/wires.html)
@@ -26,12 +46,6 @@
 - [THREE.js rendering order渲染顺序](https://segmentfault.com/a/1190000041221932/en)
 - [A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features. ](https://github.com/lmj01/camera-controls)
 
-### threejs discourse
-- [perlin noise v2,效果看起来非常舒服](https://codepen.io/vcomics/pen/RwQgXzv)
-- [Shaky / Jumpy - Camera Interpolation Along Curve](https://discourse.threejs.org/t/shaky-jumpy-camera-interpolation-along-curve/52278/2)
-    - [Extruded tube with holes相机跟着视角变化，钻洞的效果](https://codepen.io/boytchev/pen/poxpGZN)
-
-
 ### 成熟的框架
 
 - [3D framework for Svelte ](https://github.com/threlte/threlte)