update

articles/notes/work.md

@@ -6,6 +6,8 @@
 
 ## 快速目标位
 
+后台矩阵的存储是按照列存储的, 
+
 牙齿的关键点
 
 - fa 牙号放在的位置

cg/Color.md

@@ -1,21 +1,23 @@
 # [Color](https://www.color.org/index.xalter)
-> ICC International Color Consortium
-
-- [The Importance of Being Linear](https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear)
 
 色彩主观就是光线给人眼的感觉，客观地说就是人眼对可见光0.43um到0.78um的波长，不同的波长对人眼产生不同的神经信号，传递大脑的感知就是色彩，非可见光人眼是无法感知的。
 
 如果一束光，它的光子都是同一波长的，就是单色光；不同波长的光合在一起就是混合光；
 
-## Color Model & Space
+## 概念
+
+- ICC International Color Consortium
+- 亮度Lightness、Luminance
+- 明度Brightness、Value
+- 辉度Luma，把使用色觉校正的结果称为辉度
+
+### 颜色模型与颜色空间
 
 - Color Model色彩模型是指一个抽象的数学模型，用来描述一个颜色怎么样被表达成一组数字，通常会用3个或4个数值表示
 - Color Space是色彩模型有了数值具体的表述和规则，所有色彩形成一个封闭集合，并有计算属性，这个集合就是色彩空间
 
 - additive model，加性模型，根据三原色原理规定一个坐标轴分别代表RGB立体数学模型
 - 减性模型，越混合越黑
-
-
 - RGB，大多与显示设备、输入设备(数码相机、扫描仪)相关联的
     - sRGB，1996，较小色域空间，主要应用在网页浏览，在色彩调整及转换时会保存信息以备使用
     - AdobeRGB,1998，为解决sRGB不能覆盖CMYK的问题，为了显示器，主要在蓝绿色方向进行扩展，完全覆盖sRGB，基本覆盖CMYK
@@ -43,7 +45,7 @@ HSL/HSV解释：L是指从最暗的黑色到色相纯色再到白色，L最大
 
 js中canvas的颜色getImageData中setting有这个参数
 
-## Gamma Correction
+### Gamma Correction
 
 gamma校正，存在的原因有
 
@@ -62,13 +64,10 @@ gamma校正，存在的原因有
 
 HDR高动态范围High dynamic range，就是添加更多的动态范围到图片中，人眼对场景采样是有能自动**变焦频率**的，即在明暗对比度比较强烈的场景下人眼都能看得各个部分的细节，但相机等在拍照时由于变焦固定或频率很低，得到的图片就只有一个焦距上的细节，导致细节上的缺失。通过多次曝光，得到不同亮度不同焦距内的细节组合起来提高清晰度，这就是HDR。
 
-## 术语
 
-- 亮度Lightness、Luminance
-- 明度Brightness、Value
-- 辉度Luma，把使用色觉校正的结果称为辉度
+### Color in Web
 
-## web-color
+- [ThreeJs中的color](/cg/threejs/color.md)
 
 在canvas中或CSS中，可以使用某个属性来表示颜色，纯色、渐变色等
 ```js
@@ -90,4 +89,15 @@ ctx.strokeStyle = canvasGradient;
 - [Project Status, and iro.js 6.0](https://github.com/jaames/iro.js/issues/217#issuecomment-1214403290)
     - [Chroma.js is a tiny small-ish zero-dependency JavaScript library (13.5kB) for all kinds of color conversions and color scales.](https://github.com/gka/chroma.js/)
     - [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)
+    - [A comprehensive color library for JavaScript.](https://github.com/Evercoder/culori)
+
+## 参考
+
+- [The RGB-XYZ Matrix Calculator](https://www.russellcottrell.com/photo/matrixCalculator.htm)
+
+- [OpenColorIO, A complete color management solution geared towards motion picture production with an emphasis on visual effects and computer animation.](https://opencolorio.org/)
+    - [Blender Color Management](https://docs.blender.org/manual/en/latest/render/color_management.html)
+
+- [The Importance of Being Linear](https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear)
+
+- [What every coder should know about gamma](https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/)

cg/dental/orthodontics.md

@@ -0,0 +1,46 @@
+# Orthodontics
+
+## Orthodontics Study Models
+
+正畸研究模型，是一个正畸治疗过程的记录，包括正畸前、正畸中及正畸后
+
+模型由两部分组成，
+- A=Art portion，底座部分，模型的底部
+- B=Anatomic portion，解剖部分，牙齿、牙槽突、上颚
+
+![](https://mmbiz.qpic.cn/mmbiz_jpg/U5fSdEQopSEX8ibH7HFUWHxfuaqgj8HltKAqGb4VI8h0aHTSXe3Quc5sJk4CyV7AXwV1EXgtfMQ7T0a0nB0oWBg/640?wx_fmt=jpeg&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1)
+
+
+### 目的
+### 作用
+- 评估和记录牙齿解剖
+- 评估并记录弓形
+- 计算总空间需求/差异
+
+
+## 参考
+
+- [LuxCreo](https://luxcreo.com/)
+- [Graphy](https://graphy.app/)
+
+### mesh处理软件
+
+- [mesh]()
+- [blender]()
+    [github: Create, Simulate, Visualize, and Analyze Realistic 3D Cell Models ](https://github.com/mcellteam/cellblender)
+- [Meshmixer](https://meshmixer.com/)
+
+### [exocad](https://exocad.com/cn/)
+
+- [功能模块](https://shop.exocad.com/en_en/dentalcad-add-on-module.html)
+
+### github
+
+- [A software for dental mesh processing and visulization ](https://github.com/swayfreeda/DentalMeshProject)
+- [3D Dental surface segmentation with Tooth Group Network ](https://github.com/limhoyeon/ToothGroupNetwork)
+
+- [A 3D Slicer extension to use AMASSS, ALI-CBCT and ALI-IOS ](https://github.com/DCBIA-OrthoLab/SlicerAutomatedDentalTools)
+- [SJTU 2019 fall CS337 Computer Graphics Project ： 三维牙齿模型的自动化预处理](https://github.com/SJTUzhh/Dental-Pre-Processing)
+
+#### web
+- [A web/desktop application to manage your dental clinic practice. ](https://github.com/alexcorvi/apexo)

cg/dental/tooth.md

@@ -0,0 +1,16 @@
+# Tooth
+
+## DCS
+
+在牙科中，牙齿坐标系（Dental Coordinate System, DCS）是一种用于精确描述牙齿位置和方向的三维坐标系统。这种坐标系对于牙齿建模、修复、正畸治疗和种植牙手术等应用非常重要。以下是牙齿坐标系的一些基本定义和特征：
+
+- 原点（参考点）, 通常将坐标系的原点定义在牙齿的某个解剖特征上，例如牙齿的中心点或牙齿的颊尖、如某一牙齿的根尖点或牙槽嵴的特定位置
+- 轴的定义1
+    - X轴（前后方向）：通常沿着牙齿的长轴，从牙齿的颊侧（面部）指向舌侧
+    - Y轴（垂直方向）：垂直于X轴，沿着牙齿的咬合面，从牙齿的近中面（中线侧）指向远中面（耳朵侧）
+    - Z轴（高度方向）：垂直于X轴和Y轴，通常指向上方，表示牙齿的高度或深度
+- 轴的定义2
+    - Z轴：垂直于牙槽嵴平面，通常代表牙齿的垂直移动方向（如伸长或压低）
+    - X轴：平行于牙槽嵴平面，代表牙齿的近远中移动方向（如向前或向后移动）
+    - Y轴：垂直于X轴和Z轴，代表牙齿的颊舌向移动（如唇向或舌向移动）
+

cg/image/ffmpeg.md

@@ -0,0 +1,6 @@
+# ffmpeg
+
+## [ffmpeg.wasm](https://ffmpegwasm.netlify.app/docs/overview)
+
+- [github](https://github.com/ffmpegwasm/ffmpeg.wasm)
+- [example vite vue](https://github.com/ffmpegwasm/ffmpeg.wasm/blob/main/apps/vue-vite-app/src/components/FFmpegDemo.vue)

cg/image/gif.md

@@ -1,6 +1,17 @@
 # GIF
 > Graphics Interchange Format是一种位图,已8位色即256种颜色重现真彩色的图像,实际上是一种压缩文档,采样LZW压缩算法进行编码,有效减少图像在网络上的传输时间.
 
+- [fast GIF encoding](https://github.com/mattdesl/gifenc)
+- [ JavaScript GIF Codec](https://github.com/qq15725/modern-gif)
 
 - [jsgif: A GIF player in JavaScript](https://slbkbs.org/jsgif/)
-- [带你如何用js读取gif图片数据流，解码gif ](https://juejin.cn/post/7022637452066029599)
+- [带你如何用js读取gif图片数据流，解码gif ](https://juejin.cn/post/7022637452066029599)
+- [GIF (version 89a) Encoder written in TypeScript ](https://github.com/nobuoka/GifWriter.js/)
+- [Full-featured JavaScript GIF encoder that runs in your browser.](https://terikon.github.io/gif.js.optimized/)
+- [JavaScript GIF encoding library ](https://github.com/jnordberg/gif.js)
+
+## [gif-writer](http://nobuoka.github.io/GifWriter.js/)
+
+这个编译环境是gradlew，需要Java环境
+
+- [github](https://github.com/nobuoka/GifWriter.js)

cg/image/index.md

@@ -10,6 +10,7 @@
 - [JPEG](/cg/image/JPEG.md)
     - [Image Process](/cg/image/ImageProcessing.md)
 - [tiff](/cg/image/tiff.md)
+- [ffmpeg](/cg/image/ffmpeg.md)
 
 
 - [ImageMagick](/cg/image/imageMagick.md)

cg/threejs/color.md

@@ -0,0 +1,28 @@
+# [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
+```

cg/threejs/index.md

@@ -8,6 +8,7 @@
 - [Grid实现](/cg/threejs/grid.md)
 - [shader](/cg/threejs/shader.md)
 - [material材质](/cg/threejs/material.md)
+- [数学相关](/cg/threejs/math.md)
 
 ## 参考
 
@@ -21,3 +22,4 @@
 - [22](https://github.com/brunosimon/folio-2019)
 - [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)
+

cg/threejs/math.md

@@ -0,0 +1,50 @@
+# Math
+
+## 矩阵
+
+矩阵存储有两种方式
+
+- 行存储，横向，row-major order
+- 列存储，竖向，column-major order
+
+three.js的Matrix4对外的接口使用row-major order方式，内部存储结构使用column-major order。
+
+旋转矩阵的乘法有两种
+
+- 前乘（左乘）pre-multiply，用于坐标系相对于固定坐标系进行旋转，因为固定坐标系的必须先存在，新的矩阵应用就是后旋转.
+
+$R_{AB}=R_{B}R_{A}$ ，表示先旋转A，再旋转B
+
+- 后乘（右乘）post-multiply，用于欧拉角系统，每个旋转矩阵都以前一个坐标系为基准
+
+$R_{BA}=R_{A}R_{B}$，表示先旋转B，再旋转A
+
+```javascript
+// Vector3
+// v_p dot v_mv_i dot position
+project( camera ) {
+    return this.applyMatrix4( camera.matrixWorldInverse ).applyMatrix4( camera.projectionMatrix );
+}
+// v_p_i dot m_model dot position
+unproject( camera ) {
+    return this.applyMatrix4( camera.projectionMatrixInverse ).applyMatrix4( camera.matrixWorld );
+}
+// Object3D
+const matrix = new Matrix4(); // local transform
+const matrixWorld = new Matrix4(); // the global transform of the object没有父节点时，等于matrix
+applyMatrix4( matrix ) {
+    if ( this.matrixAutoUpdate ) this.updateMatrix();
+    this.matrix.premultiply( matrix ); // 把矩阵应用到当前对象，就是使用前置相乘的方法
+    this.matrix.decompose( this.position, this.quaternion, this.scale );
+}
+updateMatrix() { // 更新矩阵，由当前的位置，朝向，缩放重新构建坐标系
+    this.matrix.compose( this.position, this.quaternion, this.scale );
+    this.matrixWorldNeedsUpdate = true;
+}
+// 乘以矩阵时
+// 当外部数据elementsArray是传入的时行主序时， 需要转置，以保持内部的列存储逻辑
+const mat = new Matrix4().fromArray(elementsArray).transpose() 
+```
+
+$M_{l}M_{w}=$
+

cg/threejs/threejs.md

@@ -1,19 +1,6 @@
 
 # threejs-core
 
-## Object3D
-
-```javascript
-matrix = new Matrix4(); // local transform
-matrixWorld = new Matrix4(); // the global transform of the object没有父节点时，等于matrix
-matrixViewMatrix;
-normalMatrix;
-```
-### updateMatrix
-```javascript
-matrix.compose(position, quaternion, scale); // 构造local matrix transform
-```
-
 ## EventDispatcher
 
 事件系统是一个交互库必备，threejs的event使用了js的event事件

cg/tools/gizmo.md

@@ -1,7 +1,12 @@
 
 # Gizmo
-> 小部件
+
 
 - [izmo control library for 3D object manipulation (4x4 matrix) ](https://github.com/CedricGuillemet/LibGizmo)
 - [ImGui GIZMO widget - 3D object manipulator / orientator](https://github.com/BrutPitt/imGuIZMO.quat)
-- [Immediate mode 3D gizmo for scene editing and other controls based on Dear Imgui ](https://github.com/CedricGuillemet/ImGuizmo)
+- [Immediate mode 3D gizmo for scene editing and other controls based on Dear Imgui ](https://github.com/CedricGuillemet/ImGuizmo)
+
+## threejs
+
+- [讨论](https://discourse.threejs.org/t/how-to-make-transform-controls-not-to-move-with-camera/21584)
+    - [src code](https://jsfiddle.net/v2680nta/1/)