From debd8ee518b1645e1e201193c120aadc7ab669ea Mon Sep 17 00:00:00 2001 From: lmj01 Date: Thu, 5 Sep 2024 10:41:02 +0800 Subject: [PATCH] update --- articles/2024/trend.md | 6 ++ cg/Color.md | 31 +++++++- cg/graphics.md | 18 ++++- cg/mesh/mesh.triangle.md | 100 +++++++++++++++++++++++++ cg/shader.md | 3 + cg/threejs/bumpmap.md | 116 ----------------------------- cg/threejs/color.md | 28 ------- cg/threejs/index.md | 28 +++++-- cg/threejs/material.md | 99 +++++++++++++++++++++++- cg/threejs/model.md | 8 +- cg/threejs/shader.md | 6 -- cg/threejs/use.md | 25 +++++-- cg/tools/tone.mapping.md | 6 +- cpl/cplusplus.md | 1 + dev-note/git.md | 27 ++++--- exercises/book-info.md | 7 ++ exercises/finite.element.md | 41 ++++++++++ exercises/index.md | 1 + exercises/numerical.calculation.md | 2 + index/community.md | 6 ++ index/computerScience.md | 1 + index/online.md | 2 + index/standard.md | 11 +++ web/library.md | 42 +++++++---- 24 files changed, 421 insertions(+), 194 deletions(-) create mode 100644 cg/mesh/mesh.triangle.md delete mode 100644 cg/threejs/bumpmap.md delete mode 100644 cg/threejs/color.md delete mode 100644 cg/threejs/shader.md create mode 100644 exercises/finite.element.md diff --git a/articles/2024/trend.md b/articles/2024/trend.md index 4f57bc9..57998a3 100644 --- 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 index a23e2a8..1588f9b 100644 --- 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 index 712a5e0..bbd58c0 100644 --- 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 new file mode 100644 index 0000000..0f7f77c --- /dev/null +++ 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) + +
+顶点切线的数学推理 + +我们期待的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。 + +
+ +### 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) + +
+MikkTSpace切线的数学推理 + +
diff --git a/cg/shader.md b/cg/shader.md index 5305f32..f9b86a6 100644 --- 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的 \ No newline at end of file diff --git a/cg/threejs/bumpmap.md b/cg/threejs/bumpmap.md deleted file mode 100644 index 8cb33df..0000000 --- a/cg/threejs/bumpmap.md +++ /dev/null @@ -1,116 +0,0 @@ -# BumpMap - -先看文档中bumpMap的描述 -The texture to create a bump map. The black and white values map to the perceived depth in relation to the lights. Bump doesn't actually affect the geometry of the object, only the lighting. If a normal map is defined this will be ignored. -黑色和白色值映射到与灯光相关的感知深度 - -对MeshPhongMaterial中的normalMap -对应的shader在src/renderers/shaders/ShaderLib -meshphong_vert.glsl.js -meshphong_frag.glsl.js -在vs中include了normal_pars_vertex -```js -export default /* glsl */` -#ifndef FLAT_SHADED - - varying vec3 vNormal; - - #ifdef USE_TANGENT - - varying vec3 vTangent; - varying vec3 vBitangent; - - #endif - -#endif -`; -``` -关键词USE_TANGENT，在src/renderers/webgl/WebGLProgram.js中出现了定义 -```js -function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) { - -} -``` -函数中定义了两个 -bumpMap和vertexTangents -```js -parameters.bumpMap ? '#define USE_BUMPMAP' : '', -parameters.vertexTangents ? '#define USE_TANGENT' : '', -``` -全局搜索vertexTangents发现已经remove了 -搜索目录src/renderers/shaders/ShaderChunk下USE_BUMPMAP -bumpmap_pars_fragment.glsl.js和normal_fragment_maps.glsl.js -bumpmap_pars_fragment代码如下 -```js -export default /* glsl */` -#ifdef USE_BUMPMAP - - uniform sampler2D bumpMap; - uniform float bumpScale; - - // Bump Mapping Unparametrized Surfaces on the GPU by Morten S. Mikkelsen - // http://api.unrealengine.com/attachments/Engine/Rendering/LightingAndShadows/BumpMappingWithoutTangentSpace/mm_sfgrad_bump.pdf - - // Evaluate the derivative of the height w.r.t. screen-space using forward differencing (listing 2) - - vec2 dHdxy_fwd() { - - vec2 dSTdx = dFdx( vUv ); - vec2 dSTdy = dFdy( vUv ); - - float Hll = bumpScale * texture2D( bumpMap, vUv ).x; - float dBx = bumpScale * texture2D( bumpMap, vUv + dSTdx ).x - Hll; - float dBy = bumpScale * texture2D( bumpMap, vUv + dSTdy ).x - Hll; - - return vec2( dBx, dBy ); - - } - - vec3 perturbNormalArb( vec3 surf_pos, vec3 surf_norm, vec2 dHdxy, float faceDirection ) { - - // Workaround for Adreno 3XX dFd*( vec3 ) bug. See #9988 - - vec3 vSigmaX = vec3( dFdx( surf_pos.x ), dFdx( surf_pos.y ), dFdx( surf_pos.z ) ); - vec3 vSigmaY = vec3( dFdy( surf_pos.x ), dFdy( surf_pos.y ), dFdy( surf_pos.z ) ); - vec3 vN = surf_norm; // normalized - - vec3 R1 = cross( vSigmaY, vN ); - vec3 R2 = cross( vN, vSigmaX ); - - float fDet = dot( vSigmaX, R1 ) * faceDirection; - - vec3 vGrad = sign( fDet ) * ( dHdxy.x * R1 + dHdxy.y * R2 ); - return normalize( abs( fDet ) * surf_norm - vGrad ); - - } - -#endif -`; -``` -normal_framgment_maps的代码如下 -```js -export default /* glsl */` - -#ifdef OBJECTSPACE_NORMALMAP -#elif defined( TANGENTSPACE_NORMALMAP ) -#elif defined( USE_BUMPMAP ) - - normal = perturbNormalArb( - vViewPosition, normal, dHdxy_fwd(), faceDirection ); - -#endif -`; -``` -在src/renderers/shaders/ShaderChunk中搜normal -可以看到在common.glsl.js中定义了 -```js -export default /* glsl */` -struct GeometricContext { - vec3 position; - vec3 normal; - vec3 viewDir; -#ifdef USE_CLEARCOAT - vec3 clearcoatNormal; -#endif -}; -` -``` diff --git a/cg/threejs/color.md b/cg/threejs/color.md deleted file mode 100644 index 1b84477..0000000 --- a/cg/threejs/color.md +++ /dev/null @@ -1,28 +0,0 @@ -# [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 -``` \ No newline at end of file diff --git a/cg/threejs/index.md b/cg/threejs/index.md index 7470a0f..d806fc3 100644 --- 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/) +邮箱meijie.lmj@outlook.com登录 + +### 颜色 +- [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) diff --git a/cg/threejs/material.md b/cg/threejs/material.md index 6b68b9d..86accd7 100644 --- a/cg/threejs/material.md +++ b/cg/threejs/material.md @@ -29,4 +29,101 @@ For extending the default fog in the shaders without any postprocessing, you cou It would require some changes to use this with the THREE.EffectComposer, sorry. I’m using a custom framework on top of THREE, not the EfffectComposer for example. -- [描述fog的一个思路应用，效果很好](https://discourse.threejs.org/t/tesseract-open-world-planetary-engine/1473/7) \ No newline at end of file +- [描述fog的一个思路应用，效果很好](https://discourse.threejs.org/t/tesseract-open-world-planetary-engine/1473/7) + +## [Shader](https://threejs.org/docs/index.html?q=shader#api/en/materials/ShaderMaterial) + +在源码src\renderers\webgl\WebGLProgram.js中函数WebGLProgram组装最后的代码到prefixVertex, prefixFragment + +```js +renderer.toneMapping = LinearToneMapping; +renderer.toneMappingExposure = 0.1; +``` + +### BumpMap + +先看文档中bumpMap的描述 +The texture to create a bump map. The black and white values map to the perceived depth in relation to the lights. Bump doesn't actually affect the geometry of the object, only the lighting. If a normal map is defined this will be ignored. +黑色和白色值映射到与灯光相关的感知深度 + +对MeshPhongMaterial中的normalMap对应的shader在src/renderers/shaders/ShaderLib目录下有文件：meshphong_vert.glsl.js和meshphong_frag.glsl.js +在vs中include了normal_pars_vertex +```js +export default /* glsl */` +#ifndef FLAT_SHADED + + varying vec3 vNormal; + + #ifdef USE_TANGENT + + varying vec3 vTangent; + varying vec3 vBitangent; + + #endif + +#endif +`; +``` +全局搜索vertexTangents发现已经remove了 +搜索目录src/renderers/shaders/ShaderChunk下USE_BUMPMAP +bumpmap_pars_fragment.glsl.js和normal_fragment_maps.glsl.js +bumpmap_pars_fragment代码如下 +```js +export default /* glsl */` +#ifdef USE_BUMPMAP + + uniform sampler2D bumpMap; + uniform float bumpScale; + + // Bump Mapping Unparametrized Surfaces on the GPU by Morten S. Mikkelsen + // http://api.unrealengine.com/attachments/Engine/Rendering/LightingAndShadows/BumpMappingWithoutTangentSpace/mm_sfgrad_bump.pdf + + // Evaluate the derivative of the height w.r.t. screen-space using forward differencing (listing 2) + + vec2 dHdxy_fwd() { + + vec2 dSTdx = dFdx( vUv ); + vec2 dSTdy = dFdy( vUv ); + + float Hll = bumpScale * texture2D( bumpMap, vUv ).x; + float dBx = bumpScale * texture2D( bumpMap, vUv + dSTdx ).x - Hll; + float dBy = bumpScale * texture2D( bumpMap, vUv + dSTdy ).x - Hll; + + return vec2( dBx, dBy ); + + } + + vec3 perturbNormalArb( vec3 surf_pos, vec3 surf_norm, vec2 dHdxy, float faceDirection ) { + + // Workaround for Adreno 3XX dFd*( vec3 ) bug. See #9988 + + vec3 vSigmaX = vec3( dFdx( surf_pos.x ), dFdx( surf_pos.y ), dFdx( surf_pos.z ) ); + vec3 vSigmaY = vec3( dFdy( surf_pos.x ), dFdy( surf_pos.y ), dFdy( surf_pos.z ) ); + vec3 vN = surf_norm; // normalized + + vec3 R1 = cross( vSigmaY, vN ); + vec3 R2 = cross( vN, vSigmaX ); + + float fDet = dot( vSigmaX, R1 ) * faceDirection; + + vec3 vGrad = sign( fDet ) * ( dHdxy.x * R1 + dHdxy.y * R2 ); + return normalize( abs( fDet ) * surf_norm - vGrad ); + + } + +#endif +`; +``` +normal_framgment_maps的代码如下, 扰动当前的normal +```js +export default /* glsl */` + +#ifdef OBJECTSPACE_NORMALMAP +#elif defined( TANGENTSPACE_NORMALMAP ) +#elif defined( USE_BUMPMAP ) + + normal = perturbNormalArb( - vViewPosition, normal, dHdxy_fwd(), faceDirection ); + +#endif +`; +``` diff --git a/cg/threejs/model.md b/cg/threejs/model.md index fbe19a4..5d149a5 100644 --- a/cg/threejs/model.md +++ b/cg/threejs/model.md @@ -25,7 +25,13 @@ LoadingManager是一个独立封装的，类似一个函数，全部在construct ```js /** * 使用方法，传入 - * str JSON.stringify(scene.toJSON()) + * str JSON.stringify(scene.toJSON(), null, 2) + * 如果报错如下 + * Uncaught RangeError: Invalid string length + * at JSON.stringify () + * 则是scene对象中的geometries中的模型数据太大导致的，需要对geometry一个个单独导出 + * 问题本质是JSON.stringify超出JS引起或内存的限制导致的 + * 其实抓取网页的数据逻辑也是如此的操作 */ (function(str, type, filename){ const encode = new TextEncoder(); diff --git a/cg/threejs/shader.md b/cg/threejs/shader.md deleted file mode 100644 index 16f6ad9..0000000 --- a/cg/threejs/shader.md +++ /dev/null @@ -1,6 +0,0 @@ -# [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/threejs/use.md b/cg/threejs/use.md index b1978a9..c01be5e 100644 --- a/cg/threejs/use.md +++ b/cg/threejs/use.md @@ -18,6 +18,14 @@ ## camera +### animate + +视觉效果好，就需要一个连续变化的过程，在这个过程中给人感觉，而不是一触即得的效果，很僵硬和死板。 +场景的旋转、翻滚等变化也是连续性是最接受的，眼睛跟着视觉变动。 +- 连续性，随着时间的变化进行插值过程，最好是关于时间的变化 + - transition +- 约束性，不能太随意，造成某种视觉上的fake突然出现 + ### light 2024-8-27 @@ -51,21 +59,26 @@ camera的近远曲线的趋势。 ![投影切换](/images/cg/switch-persp-ortho.png "Switch persp to ortho and ortho to persp") ![log graph](/images/cg/desmos-graph-log.svg "log graph") -## flickering +## GumRendering + +### 渲染 + +牙龈根据关键点生成了面片数据，包含了顶点、uv、索引。 +前端对生成的数据进行了处理，处理顶点法线，position,uv,normal,tangent。 +又根据uv和tangent算出了一个uv2和tangent2. 至于为什么有这样的逻辑？忙猜是逆向过程中看到这样的逻辑。 + +### flickering +2024-7-19 接手公司项目时，使用他们的代码拷贝过来，产生了一个问题，就是渲染时牙龈边沿处的跳动。 牙龈根据牙齿数据来生成，目前存在牙龈穿过牙齿的现象。 -### 2024-7-19 - 渲染边沿出现跳动flicker的现象通常由几个常见的原因组成 - z-fighting, 是webgl常见的问题，当两个表面或多个表面非常接近时，它们的深度值可能会重叠，导致在渲染时不知道切换那个表面,可以增加一个偏移来避免 -#### 2024-7-24 - **精度影响** -Camera的Near值定义了相机视锥体的近裁剪平面。当Near值设置得过小时，GPU在渲染近处物体时可能需要更高的深度精度来区分不同物体的前后关系，这可能导致深度缓冲（Depth Buffer）中的精度不足，进而引发Z-Fighting现象。 +- Camera的Near值定义了相机视锥体的近裁剪平面。当Near值设置得过小时，GPU在渲染近处物体时可能需要更高的深度精度来区分不同物体的前后关系，这可能导致深度缓冲（Depth Buffer）中的精度不足，进而引发Z-Fighting现象。 Z-Fighting表现为物体表面出现闪烁或重叠的视觉效果，尤其是在两个物体非常接近且面向相机时更为明显。解决Z-Fighting：通过增加Near值，可以减少对深度精度的要求，从而在一定程度上缓解Z-Fighting问题。但这需要在视觉效果和场景需求之间做出权衡，因为过大的Near值可能会使近处物体的一部分被裁剪掉。 diff --git a/cg/tools/tone.mapping.md b/cg/tools/tone.mapping.md index 579a8ff..505b338 100644 --- a/cg/tools/tone.mapping.md +++ b/cg/tools/tone.mapping.md @@ -19,4 +19,8 @@ Don't confuse luminance with luma - luma is the equivalent of the luminance comp [High Dynamic Range Imaging Book, R. Mantiuk et al](https://www.cl.cam.ac.uk/%7Erkm38/pdfs/mantiuk15hdri.pdf) [Filmic Worlds Blog - John Hable](http://filmicworlds.com/blog/) [Tone Mapping (slides) - R. Mantiuk](https://www.cl.cam.ac.uk/%7Erkm38/pdfs/tone_mapping.pdf) -[Dynamic Range, Exposure and Tone Mapping - Seena Burns](https://seenaburns.com/dynamic-range/) \ No newline at end of file +[Dynamic Range, Exposure and Tone Mapping - Seena Burns](https://seenaburns.com/dynamic-range/) + +## [Tone Mappers]() + +- [github A collection of tone mappers for the display of 3D graphics ](https://github.com/KhronosGroup/ToneMapping) \ No newline at end of file diff --git a/cpl/cplusplus.md b/cpl/cplusplus.md index d710042..7bffb78 100644 --- a/cpl/cplusplus.md +++ b/cpl/cplusplus.md @@ -6,6 +6,7 @@ - [TMP -- Template Meta Programming](/cpl/cpp/tmp.md) - [CRTP -- Curiously Recurring Template Pattern](/cpl/cpp/crtp.md) +- [C++代码的查询搜索-号称有一亿的代码](https://cpp.hotexamples.com/) ## 语言特性 diff --git a/dev-note/git.md b/dev-note/git.md index 99d35a1..4170ae0 100644 --- a/dev-note/git.md +++ b/dev-note/git.md @@ -143,21 +143,16 @@ pox.xml merge=ours ```shell git checkout branch-with-history 切换到带有历史记录的分支中 git checkout -b XXX 新建本地分支XXX -git reset --hard commit-id 回滚分支XXX上的某个提交点 -git reset --soft HEAD^ 撤销上一个提交，回到staging状态 +git reset --hard commit-id 回滚分支XXX上的某个提交点 彻底回退到某个版本，同时回退暂存区和版本库和工作区 +git reset --soft HEAD^ 撤销上一个提交，回到staging状态 回退到某个版本，只回退到暂存区 git reset --soft HEAD~2 撤销多个提交 git reflog --show 查看操作记录 git checkout -b branName commit-id +git rebase 以服务器远程仓库为基准 +git reset --hard origin/master 强制用服务器覆盖本地的修改 +git reset --hard xxxx // 退回到那个版本 +git reset --mixed默认不带参，只回退暂存区和本地版本库 ``` -此时代码就是某个提交点的，就可以修改了 - -- git reset --hard彻底回退到某个版本，同时回退暂存区和版本库和工作区 -- git reset --soft回退到某个版本，只回退到暂存区 -- git reset --mixed默认不带参，只回退暂存区和本地版本库 -- git reset --hard origin/master 强制用服务器覆盖本地的修改 -- git reset --hard xxxx // 退回到那个版本 -- git rebase 以服务器远程仓库为基准 - ## 删除 - git remote prune origin 删去本地显示远程已经删除的分支 @@ -171,6 +166,12 @@ git checkout -b branName commit-id - 删除.git/config文件的相关字段 - 删除子模块的目录 +清空历史记录中得某个大文件，如视频文件 +- git filter-branch --force --index-filter "git rm --cached --ignore-unmatch assets/video/mydentalx-2024-7-3.mp4" --prune-empty +- git reflog expire --expire=now --all +- git gc --prune=now +- git gc --aggressive --prune=now + ## 合并 - git cherry-pick 合并某个commit，只能在本地操作，本地分支要有这个commit记录才可以合并 @@ -248,6 +249,10 @@ git remote add origin git@github.com:Username/Repositories_Name.git # 现在这 - svn merge -r 608:602 "" // 从r608回滚到r602 - svn info // +## [Git Large File Storage](https://git-lfs.com/) + +如果你在命令行用 git push > 50MB 的文件，你会收到一个 warning，但是你仍然可以正常 push，但是 > 100MB 的时候就无法 push 了。如果你是在浏览器要上传文件的话，这个限制更为严重，不能超过 25MB，这是 Github 对仓库的限制。Git lfs 就是用于解决这个问题 + ## 规范 ### angular diff --git a/exercises/book-info.md b/exercises/book-info.md index 070116d..9e7ee32 100644 --- a/exercises/book-info.md +++ b/exercises/book-info.md @@ -2,10 +2,12 @@ - [物理科学和技术中使用的数学符号](https://std.samr.gov.cn/gb/search/gbDetailed?id=71F772D812E4D3A7E05397BE0A0AB82A) - [pdf](https://journal.cricaas.com.cn/attached/file/20210517/20210517161953_566.pdf) +- [在线英语语法书籍--旋元佑](https://llwslc.github.io/grammar-club/) ## 线性代数 - [Serge Lang《linear algebra》](https://book.douban.com/subject/2314300/) +- [Sheldon Axler《Linear Algebra Done Right》4th 作者官网提供了中英文两个版本可下载](https://linear.axler.net/) ## 分析 @@ -22,3 +24,8 @@ - 不需要测度论知识，从可数或有限样本空间中来学习概率论 - [Rick Durrett《Probability: Theory and Examples》]() - 概率论有左手和右手。左手是使用测度论工具进行的严谨的基础工作。右手‘以概率方式思考’，将问题简化为赌博情况、抛硬币和物理粒子的运动。 + +## 其他 + +- [德国赫尔曼·外尔《对称》](https://book.douban.com/subject/30308531/) + - 相似性与自同构，用几何描述代数词，这样理解起来很容易，也很轻松，不需要很多抽象的感悟，由直观到具体化 diff --git a/exercises/finite.element.md b/exercises/finite.element.md new file mode 100644 index 0000000..75ef62e --- /dev/null +++ b/exercises/finite.element.md @@ -0,0 +1,41 @@ +# 有限元 + +有限单元（Finite Element）是一种用于分析和解决复杂物理问题的数值方法。其基本思想是将一个复杂的连续体或结构划分为多个较小且相对简单的单元（通常称为有限单元），然后通过求解这些单元上的问题来近似整个结构的行为。 + +每个有限单元是通过节点（即单元边界上的特定点）相互连接的，并具有自己的局部坐标系和特定的物理属性。通过组装所有有限单元的方程，最终得到一个全局方程组，该方程组可以用来求解整个结构的应力、应变、位移、温度场等问题。 + +有限元的理论性研究，即基础研究，关注的是有限元法的数学原理、数值分析、收敛性、稳定性和误差分析等。这类研究通常不直接涉及具体的工程应用，而是致力于为有限元法提供更加坚实的理论基础。 + +## 研究方向 + +### 变分原理与弱形式 + +- 变分原理：有限元法的理论基础源于变分原理，即从一个物理问题出发，通过构造一个能量泛函，寻找其极值来求解问题。这种方法将偏微分方程问题转化为变分问题，奠定了有限元法的数学基础。 + +- 弱形式：通过引入弱形式，可以将原问题中的偏微分方程弱化，使其适用于更广泛的函数空间，尤其是分段连续的有限元函数空间。这一过程使得问题在有限维空间中可以近似求解。 + +### 有限元函数空间 + +- Sobolev空间：研究有限元法中的函数空间，如Sobolev空间，对理解有限元解的性质至关重要。Sobolev空间是定义在非整数阶导数上的函数空间，适用于处理更广泛的物理问题。 +- 插值理论：研究如何构造适合不同问题的有限元函数空间，以及这些空间的插值性质，这是保证有限元法精度的基础。 + +### 误差分析 + +- 误差估计：这是有限元基础研究中的核心内容之一。研究如何估计有限元解与实际解之间的误差，尤其是a priori和a posteriori误差估计。a priori误差估计提供了关于网格划分和形函数选择的指导，而a posteriori误差估计用于自适应网格划分，提升解的精度。 +- 超收敛性：超收敛性现象是指在某些特殊情况下，有限元解在某些点或沿某些方向的误差收敛速度比通常情况要快。研究这种现象有助于更好地理解有限元法的误差行为。 + +### 收敛性和稳定性分析 + +- Lax-Milgram定理：这是有限元法收敛性和稳定性分析的基础之一。它提供了弱形式问题存在唯一解的条件，并为有限元法的数值解提供了收敛性保证。 +- Céa定理：该定理用于分析有限元法的收敛性，它表明有限元解的误差上界与最佳近似解的误差成比例，是误差估计的重要工具。 + +### 高阶有限元与多重网格法 +- 高阶有限元方法：研究如何构造和分析高阶有限元方法，这些方法可以在更少的单元下提供更高的精度，但同时也增加了计算复杂度。 +- 多重网格法：这是提高有限元求解效率的重要理论之一。通过不同层次的网格协同工作，可以显著加速求解过程，同时保持较高的精度。 +### 非线性有限元理论 +- 非线性问题：涉及非线性材料行为、大变形、接触问题等。非线性有限元理论研究如何从理论上保证这些问题的有限元解的存在性、唯一性和收敛性。 +- 迭代求解算法：如牛顿-拉夫森法的收敛性分析和改进，为有效求解非线性问题奠定了理论基础。 +### 多尺度与多物理场问题 + +- 多尺度分析：研究如何在有限元框架下处理具有不同尺度的物理现象，确保小尺度现象对大尺度解的影响被正确捕捉。 +- 耦合问题：理论研究如何有效耦合不同的物理场（如热-力、电-磁等），确保耦合有限元方法的稳定性和收敛性。 \ No newline at end of file diff --git a/exercises/index.md b/exercises/index.md index a9fd24c..799997f 100644 --- a/exercises/index.md +++ b/exercises/index.md @@ -15,6 +15,7 @@ - [组合](/exercises/combinatorics.md) - [微积分](/exercises/differential.integral.md) - [数值计算](/exercises/numerical.calculation.md) + - [有限元](/exercises/finite.element.md) - [几何](/exercises/geometry.md) - [线性代数](/exercises/linear.algebra.md) - [多项式](/exercises/polynomial.md) diff --git a/exercises/numerical.calculation.md b/exercises/numerical.calculation.md index c2d89c5..0c62808 100644 --- a/exercises/numerical.calculation.md +++ b/exercises/numerical.calculation.md @@ -2,6 +2,8 @@ 数值方法帮助了数学的发展，很多时候计算的人不关心是否存在根，而是用给定的方法，即算法，先计算出来看看结果才是重点，反过来又支持了算法的稳定性。 +- [有限元](/exercises/finite.element.md) + ## 夹逼法 > "夹逼法" 在数学中是一种求解数值的方法，特别是在逼近理论中。在英文中，它通常被翻译为 "squeezing theorem" 或 "sandwich theorem" >> 这个术语描述的是一种技巧，通过证明一个未知的数值位于两个已知数值之间，并且这两个已知数值可以无限逼近未知数值，从而证明未知数值的特定属性或精确值。 diff --git a/index/community.md b/index/community.md index 603bf4b..6d14ce5 100644 --- a/index/community.md +++ b/index/community.md @@ -73,6 +73,12 @@ languages including common scripting languages such as Javascript, Perl, PHP, Py - IODs Information Object Definitions信息对象定义 - SOPs Service-Object Pairs服务对象配对， +### DICOM + +- IODs Information Object Definitions信息对象定义 +- SOPs Service-Object Pairs服务对象配对， + + ## 开源Tools - [这是一款开源、多语言、自托管的项目管理工具，兼容了 Trello 和 Notion 的特点](https://www.focalboard.com/) diff --git a/index/computerScience.md b/index/computerScience.md index 28863eb..26c2b18 100644 --- a/index/computerScience.md +++ b/index/computerScience.md @@ -54,6 +54,7 @@ ### 网格 - [HalfEdge半边结构](/cg/tools/half-edge.md) - [网格划分](/cg/mesh/mesh-generation.md) +- [三角面片](/cg/mesh/mesh.triangle.md) - [NURBS](/cg/mesh/NURBS.md) - [曲线](/cg/tools/curve.md) - [几何](/cg/geometry.md) diff --git a/index/online.md b/index/online.md index 2f7a404..8ad70be 100644 --- a/index/online.md +++ b/index/online.md @@ -35,6 +35,8 @@ - [李逸-数学教授-基本分析讲义](https://math.seu.edu.cn/ly/list.htm) - [A Graphics Guy's Note](https://agraphicsguynotes.com/posts/) - [figma的博客,有关figma实现的一些思路和总结,值得借鉴](https://www.figma.com/blog/) +- [奇安信X实验室--网格安全博客](https://blog.xlab.qianxin.com/) +- [JavaScript和WASM专家software engineer and/or computer scientist and/or generalist nerd](https://cfallin.org/) - [Denis Bakhvalov, 关于性能优化的一个博客](https://easyperf.net/) - [SaschaWillems,业余贡献实时3D以Khronos标准软件开发者](https://www.saschawillems.de/) diff --git a/index/standard.md b/index/standard.md index b354b41..776382e 100644 --- a/index/standard.md +++ b/index/standard.md @@ -55,6 +55,17 @@ - [DCMTK](https://dcmtk.org/) - [DCMTK on github](https://github.com/DCMTK/dcmtk) +## [ Object Management Group (OMG)](https://www.omg.org/) + +The Object Management Group® Standards Development Organization (OMG® SDO) is a global, open membership, non-profit consortium. + +### [The DDS specification describes a Data-Centric Publish-Subscribe (DCPS) model for distributed application communication and integration.](https://www.omg.org/spec/DDS/About-DDS/) + +- [eprosima Fast DDS is a C++ implementation of the DDS (Data Distribution Service) standard of the OMG (Object Management Group).](https://github.com/eProsima/Fast-DDS) +- [fast-dds doc api](https://fast-dds.docs.eprosima.com/en/latest/index.html) + + + ## 其他 - [Media Types](https://www.iana.org/assignments/media-types/) diff --git a/web/library.md b/web/library.md index 5d9fb25..d6e3b72 100644 --- a/web/library.md +++ b/web/library.md @@ -2,10 +2,11 @@ 相关库，工作中使用过，分析并学习的库 -## Quill +## 富文本 +### Quill > quill富文本编辑器 -### dev +#### dev 安装sharp npm config get userconfig 获取配置信息 @@ -26,12 +27,12 @@ npm install rollup-plugin-rawsvg --save-dev - 2024-1, 作者发布新版2.0了，暂时不去私自编译了，可以直接使用npm包了。之前这样处理是因为作者有很长一个版本的锁定，没有正式发布，版本后不能切换到开放模式，自己打包提取核心功能以便工程需要。 -### modules +#### modules -#### clipboard +##### clipboard 复制剪切板 -#### image +##### image 内部的image的sanitize时，只支持http,https,data这三种模型，其他情况会赋值为'//:0' 比如拦截时，url需要临时设置成blob:http @@ -41,20 +42,20 @@ image.sanitize = (url) => url; ``` -### [delta](https://github.com/quilljs/delta) +#### [delta](https://github.com/quilljs/delta) Delta 是用于描述富文本文档结构的内容与变更。由于其描述的通用性，quill.js 将其独立维护。它的数据结构是基于 JSON 格式的，方便服务间进行互解析 [An O(ND) Difference Algorithm and Its Variations](https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.4.6927&rep=rep1&type=pdf)在[github上的实现](https://github.com/jhchen/fast-diff) [Diff, Match and Patch library](https://neil.fraser.name/news/2007/10/09/)在[GitHub](https://github.com/google/diff-match-patch/)上的地址 -### [parchment](https://github.com/quilljs/parchment) +#### [parchment](https://github.com/quilljs/parchment) Parchment is Quill's document model. It is a parallel tree structure to the DOM tree, and provides functionality useful for content editors, like Quill. A Parchment tree is made up of Blots, which mirror a DOM node counterpart. Blots can provide structure, formatting, and/or content. Attributors can also provide lightweight formatting information. 通过Parchment你可以自定义出Quill能够识别的内容和格式，或者添加全新的内容和格式。 [一个例子](https://kang-bing-kui.gitbook.io/quill/zhi-nan-guides/clonewithparchment) -## [tinymce](https://www.tiny.cloud/docs/tinymce/latest/) +### [tinymce](https://www.tiny.cloud/docs/tinymce/latest/) > 自己需要一个编辑器，用来编辑并保存为HTML5格式，且需要数学公式，就需要这个强大的编辑器 - [github项目](https://github.com/lmj01/tinymce) @@ -63,20 +64,31 @@ Parchment is Quill's document model. It is a parallel tree structure to the DOM 插件的写法可参考安装后的code插件来写。 modules\tinymce\src\core\main\ts\api\Options.ts -## [node-gyp](https://github.com/nodejs/node-gyp) +## Node +### [node-gyp](https://github.com/nodejs/node-gyp) node-gyp is a cross-platform command-line tool written in Node.js for compiling native addon modules for Node.js. It contains a vendored copy of the gyp-next project that was previously used by the Chromium team and extended to support the development of Node.js native addons. -## [PartyKit simplifies developing multiplayer applications.](https://github.com/partykit/partykit) +## 功能类 + +### [UMI](https://umijs.org/) +- [笔记](/articles/2024/umi.md) + +### [UglifyJS 3](https://github.com/lmj01/UglifyJS) + +JavaScript parser / mangler / compressor / beautifier toolkit + +### [redux - A JS library for predictable and maintainable global state management](https://redux.js.org/) +Redux 是一个用于 JavaScript 应用程序的状态容器，它提供了一种可预测化的状态管理方式 + +## 分布式 +### [PartyKit simplifies developing multiplayer applications.](https://github.com/partykit/partykit) With PartyKit, you can focus on building multiplayer apps or adding real-time experiences to your existing projects with as little as one line of code. Meanwhile, PartyKit will handle operational complexity and real-time infrastructure scaling. - [doc](https://docs.partykit.io/) -## [UMI](https://umijs.org/) -- [笔记](/articles/2024/umi.md) ## 展示类 - ### jszip ```javascript @@ -119,6 +131,10 @@ reveal.js is an open source HTML presentation framework. ### [mxGraph](https://jgraph.github.io/mxgraph/) +### [A lightweight JavaScript library for creating particles ](https://github.com/VincentGarreau/particles.js) +轻量级生成式的粒子显示 +[demo and doc](https://marcbruederlin.github.io/particles.js/) + # 其他库 - [Compact GUI for fine-tuning parameters and monitoring value changes 比dat.GUI更舒服的库](https://github.com/cocopon/tweakpane)