update

articles/2023/app.md

@@ -0,0 +1,6 @@
+# 技术方案
+
+## C++
+
+UI: U++,
+Kaitai Struct, 二进制文件解析

blender/cycles.md

@@ -0,0 +1,5 @@
+# cycles
+
+> Cycles is a path tracing renderer focused on interactivity and ease of use, while supporting many production features.
+
+## 源文件

blender/index.md

@@ -61,6 +61,7 @@ grep -rn "XXXFunction" --include="*.c"
 - [loader -- read and write .blend format](./concepts/loader.md)
 - module editor
     - [interface](./editors/interface.md)
+- [cycles渲染器](./cycles.md)
 
 ## wiki
 

books/Learn OpenGL.md

@@ -0,0 +1,7 @@
+# [Learn OpenGL](https://learnopengl.com/)
+
+## Advanced OpenGL
+
+### Stencil testing
+
+模板测试，Object outlining的流程处理给出了一个方案

books/index.md

@@ -1,5 +1,11 @@
 # Books
 
+## reading
+- [Learn OpenGL](../books/Learn%20OpenGL.md)
+
+## readed
+- [软件设计-从专业到卓越](../books/%E8%BD%AF%E4%BB%B6%E8%AE%BE%E8%AE%A1-%E4%BB%8E%E4%B8%93%E4%B8%9A%E5%88%B0%E5%8D%93%E8%B6%8A.md)
+
 ## online
 
 - [Physically Based Rendering](https://www.pbr-book.org/3ed-2018/contents)

cg/modelFile.md

@@ -0,0 +1,61 @@
+# ModelFile
+
+- [file format documentation](https://docs.fileformat.com/)
+media-types.xhtml)
+模型文件格式
+- [Kaitai Struct是开发二进制结构解析器的工具。它提供了一种类似YAML的语言，可以简洁地定义二进制结构](http://kaitai.io/#what-is-it)
+
+## STL
+
+- [stl format](http://www.fabbers.com/tech/STL_Format)
+- [STL (STereoLithography) File Format, Binary](https://www.loc.gov/preservation/digital/formats/fdd/fdd000505.shtml)
+- [What Is an STL File? – The STL Format Simply Explained](https://all3dp.com/1/stl-file-format-3d-printing/)
+- [stl parse library](http://formats.kaitai.io/stl/javascript.html)
+
+文本ASCII格式
+```js
+solid name
+     facet normal ni nj nk
+         outer loop
+             vertex v1x v1y v1z
+             vertex v2x v2y v2z
+             vertex v3x v3y v3z
+         endloop
+     endfacet
+     ...xxxx // facet repeat
+endsolid name
+```
+二进制binary格式
+```js
+UINT8[80] – Header// 80个字节的文件名
+UINT32 – Number of triangles// 4个字节的面数
+foreach triangle
+REAL32[3] – Normal vector// normal,3个4个字节的浮点数
+REAL32[3] – Vertex 1// x,3个4个字节的浮点数
+REAL32[3] – Vertex 2// y,3个4个字节的浮点数
+REAL32[3] – Vertex 3// z,3个4个字节的浮点数
+UINT16 – Attribute byte count// attribute byte counted 2个字节
+end
+```
+总的大小字节数为80+4+50*facetCount
+
+### Tessellation
+
+Tessellation is the process of tiling a surface with one or more geometric shapes so there are no overlaps or gaps. 
+
+The basic idea was to tessellate the two-dimensional outer surface of 3D models using tiny triangles (also called “facets”) and store information about the facets in a file.
+
+#### The Vertex Rule
+
+The vertex rule states that each triangle must share two vertices with its neighboring triangles.
+
+![](../images/cg/stl-valid-and-invalid-tessellation.png)
+
+#### The Orientation Rule
+The orientation rule says that the orientation of the facet (i.e. which way is “in” the 3D object and which way is “out”) must be specified in two ways.
+
+![](../images/cg/stl-orientation-%20of-the-facet.png)
+
+### [DICOM](https://dicom.nema.org/medical/dicom/final/sup205_ft_DICOM_Encapsulation_of_STL_Models_for_3D_Manufacturing.pdf)
+
+In 2018, Working Group 17 for the Digital Imaging and Communications in Medicine (DICOM) standard published Supplement 205, DICOM Encapsulation of STL Models for 3D Manufacturing, which allows for the wrapping of a binary STL file in the standard DICOM container used for the communication and management of medical imaging information and related data. The supplement states, "The goal of encapsulating a Stereolithography (STL) 3D manufacturing model file inside a DICOM instance rather than transforming the data into a different representation is to facilitate preservation of the STL file in the exact form that it is used with extant manufacturing devices, while at the same time unambiguously associating it with the patient for whose care the model was created and the images from which the model was derived."

cg/API.md → cg/opengl.md

@@ -1,6 +1,4 @@
-# API
-
-## OpenGL
+# OpenGL
 
 Context上下文是OpenGL的核心，因为OpenGL就是一个状态机，上下文中就保存了各种状态值，是所有执行指令的基础， 这个概念比较接近底层，且跨平台的OS接口不一致，多封装成库供使用，如Freeglut，glew等。
 
@@ -19,7 +17,7 @@ OpenGL指令就是API函数，是面向过程的函数，本质就是对Context
 
 webGL也是建立在OpenGL上的，在网页中使用多个Canvas比单独在一个canvas中操作有更好的性价比。
 
-### Buffer
+## Buffer
 
 缓冲区是一个很泛的概念，很容易混肴，下面针对主要的进行说明一下
 
@@ -44,7 +42,7 @@ FBO(Frame Buffer Object)帧缓冲区对象，它并不是内存块，不实际
 
 上面说的是骨架，动笔绘画时就是绘制过程，针对没有索引提供了glDrawArrays绘制，有索引的提供了glDrawElements.
 
-#### Buffer Object
+### Buffer Object
 
 ```c
 glGenBuffers(GLsizei n, GLuint *buffers);
@@ -274,55 +272,6 @@ if(ptr)
 glBindBuffer(GL_PIXEL_PACK_BUFFER, 0);
 ```
 
-
-### Shader
-
-着色器是一种可编程的渲染管线，与其他编程语言一样，先对源码编译Compile再链接Link最后生成Program。Shader是提供给GPU运行的程序，特点就是并行处理相同的逻辑不同的数据。着色器类型有
-
-- VertexShader，逐顶点运算的持续，每个顶点都会执行一次，顶点运算过程中无法获取其他顶点的数据。典型的顶点运算有坐标变换(由模型坐标转换到归一化坐标系)、逐顶点光照等。数据输入主要是
-    - Uniform，对所有顶点都是一样的数据
-    - VertexAttribute，由Application提供输入的顶点数据
-    - Samples
-- GeometryShader
-- TessellationShader
-- Fragment(Pixel)Shader，逐像素运算，每个像素都执行一次，数据来源
-    - Uniform
-    - Vertex Varying
-    - Sampler
-
-shader的作用就是由数据生成图像
-
-- fill Vertex Array(Buffer) Objects
-- Vertex Shader Compute
-- Primitive Assembly
-- Rasterization
-- Fragment Shader
-- Pre-Fragment Operations
-    - Pixel Ownership Test剔除不属于当前Shader的像素
-    - Scissor Test剔除窗口区域之外的像素
-    - Stencil Test剔除多于的像素，属于高级的裁剪技术，如三维物体描边
-    - Depth Test根据像素离屏幕(近平面)的距离与Context中设定的测试值决定当前像素是否渲染到结果中去
-    - Blending没有剔除的像素与FrameBuffer中的ColorAttachment进行混合，混合的算法是Context中预先设定的
-    - Dithering抖动是一种针对可用颜色较少的系统，以牺牲分辨率为代价，通过颜色值的抖动来增加可用颜色的数量的技术，与硬件相关的，API提供的只是enable或disable选项
-- Framebuffer
-
-上面就是渲染图像的整个过程，前面说RenderBuffer一般是OS提供的窗口区域，就是把渲染图像立坚显示在指定窗口内，但不希望立即显示在屏幕上，而是多次渲染，这次的渲染可能是下次渲染的输入。前面的Attachment的画布就是RenderTarget渲染目标，既然可以是RenderBuffer，也可以是Texture，就是RenderToTexture就是把渲染结果放到FrameBuffer的Attachment后的Texture中。
-
-每次渲染完成后，如果不是立即显示到RenderBuffer上，而是到了Texture上，需要重新构造新的FrameBuffer，这样才能使用上次渲染的Texture作为sampler输入。多次渲染就是重复这个过程。
-
-还说一个概念，交换缓冲区SwapBuffer，上面说RenderBuffer对应到的是OS的窗口区域，如果每个窗口只有一个缓冲区时，在绘制过程中屏幕刷新就会出现画面不完整的现象，为了解决这个问题就提出的解决方案是
-- 引入至少两个缓冲区，屏幕缓冲区和离屏缓冲区，一个RenderBuffer渲染完后，交换两个缓冲区，这样图像显示就是完整的
-- 垂直同步，由于显示器的刷新一般是逐行进行的，从上往下刷新，为了防止交换缓冲区时屏幕的上下区域的图像属于不同的FrameBuffer，因此要在显示器两次刷新之间的时间内进行交换缓冲区，等待上一次显示器刷新的信号称为垂直同步信号
-- 等待交换缓冲区完成后再进行下一帧的Framebuffer渲染，这样帧率不能完全达到硬件的最高值，因此引入三缓冲区技术，一个屏幕缓冲区，两个离屏缓冲区，交换时与最新渲染的离屏缓冲区进行交换，这样尽量减少硬件的时间差导致帧率较低，影响屏幕的画面更流畅。
-
-### Render Pass
-
-Render Pass定义为一个渲染步骤。如有一个很多不同材质的球体的场景需要渲染，就可以声明一个render pass给所有球使用，因为对每一个球体，渲染结果都会输出到同一个FrameBuffer的Attachment上，所以流程上是一样的。
-
-如果说Buffer的数据可以供所有shader使用，那么在render pass中就是更加定制化的渲染， 
-
-每个pass通常对应的渲染流程中不同阶段【相同阶段通常会使用MRT，或硬件不支持，需要多个Pass；或渲染目标size不一样，也需要多个pass来渲染】。实际意义是对一个Mesh渲染多遍，是对材质抽象的一种解释，一个Technique里会包含一个或多个Pass，如DeferredLighting流程里面一个物体就需要2个Pass，一个用来计算Z，一个用来lighting；如果有阴影，又需要一个Pass；如果需要精细反射图，需要一个反射的Pass。引擎一般会把状态类似的不同Mesh的Pass一起渲染， 用Pass对材质进行排序。
-
 ## 参考
 
 - [OpenGL基础，一个韩国人写的基础知识](http://www.songho.ca/opengl/index.html)

cg/shader.md

@@ -1,15 +1,64 @@
 # Shader
 其定义是没有明确，都是不同工程项目中不同的指称。
 
-## 目前可参考的
+## 定义
+
+shader本身是一个泛概念
 
 在Vulkan/Dx12中一个shader单指一个blob，这个blob不含管线状态，仅仅表示一段可执行代码
 
 一个shader指一个带有render state的Pass(或dispatch kernel)
 
 一个shader指整个文件中所有的Pass或kernel。Unity ShaderLab把一整个文件所有的Pass的所有代码和render state都打包到一起称为一个Shader。引擎工程中很多都是这样处理的。
 
-## GLSL
+## GLSL- Shader
+
+着色器是一种可编程的渲染管线，与其他编程语言一样，先对源码编译Compile再链接Link最后生成Program。Shader是提供给GPU运行的程序，特点就是并行处理相同的逻辑不同的数据。着色器类型有
+
+- VertexShader，逐顶点运算的持续，每个顶点都会执行一次，顶点运算过程中无法获取其他顶点的数据。典型的顶点运算有坐标变换(由模型坐标转换到归一化坐标系)、逐顶点光照等。数据输入主要是
+    - Uniform，对所有顶点都是一样的数据
+    - VertexAttribute，由Application提供输入的顶点数据
+    - Samples
+- GeometryShader
+- TessellationShader
+- Fragment(Pixel)Shader，逐像素运算，每个像素都执行一次，数据来源
+    - Uniform
+    - Vertex Varying
+    - Sampler
+
+shader的作用就是由数据生成图像
+
+- fill Vertex Array(Buffer) Objects
+- Vertex Shader Compute
+- Primitive Assembly
+- Rasterization
+- Fragment Shader
+- Pre-Fragment Operations
+    - Pixel Ownership Test剔除不属于当前Shader的像素
+    - Scissor Test剔除窗口区域之外的像素
+    - Stencil Test剔除多于的像素，属于高级的裁剪技术，如三维物体描边
+    - Depth Test根据像素离屏幕(近平面)的距离与Context中设定的测试值决定当前像素是否渲染到结果中去
+    - Blending没有剔除的像素与FrameBuffer中的ColorAttachment进行混合，混合的算法是Context中预先设定的
+    - Dithering抖动是一种针对可用颜色较少的系统，以牺牲分辨率为代价，通过颜色值的抖动来增加可用颜色的数量的技术，与硬件相关的，API提供的只是enable或disable选项
+- Framebuffer
+
+上面就是渲染图像的整个过程，前面说RenderBuffer一般是OS提供的窗口区域，就是把渲染图像立坚显示在指定窗口内，但不希望立即显示在屏幕上，而是多次渲染，这次的渲染可能是下次渲染的输入。前面的Attachment的画布就是RenderTarget渲染目标，既然可以是RenderBuffer，也可以是Texture，就是RenderToTexture就是把渲染结果放到FrameBuffer的Attachment后的Texture中。
+
+每次渲染完成后，如果不是立即显示到RenderBuffer上，而是到了Texture上，需要重新构造新的FrameBuffer，这样才能使用上次渲染的Texture作为sampler输入。多次渲染就是重复这个过程。
+
+还说一个概念，交换缓冲区SwapBuffer，上面说RenderBuffer对应到的是OS的窗口区域，如果每个窗口只有一个缓冲区时，在绘制过程中屏幕刷新就会出现画面不完整的现象，为了解决这个问题就提出的解决方案是
+- 引入至少两个缓冲区，屏幕缓冲区和离屏缓冲区，一个RenderBuffer渲染完后，交换两个缓冲区，这样图像显示就是完整的
+- 垂直同步，由于显示器的刷新一般是逐行进行的，从上往下刷新，为了防止交换缓冲区时屏幕的上下区域的图像属于不同的FrameBuffer，因此要在显示器两次刷新之间的时间内进行交换缓冲区，等待上一次显示器刷新的信号称为垂直同步信号
+- 等待交换缓冲区完成后再进行下一帧的Framebuffer渲染，这样帧率不能完全达到硬件的最高值，因此引入三缓冲区技术，一个屏幕缓冲区，两个离屏缓冲区，交换时与最新渲染的离屏缓冲区进行交换，这样尽量减少硬件的时间差导致帧率较低，影响屏幕的画面更流畅。
+
+### Render Pass
+
+Render Pass定义为一个渲染步骤。如有一个很多不同材质的球体的场景需要渲染，就可以声明一个render pass给所有球使用，因为对每一个球体，渲染结果都会输出到同一个FrameBuffer的Attachment上，所以流程上是一样的。
+
+如果说Buffer的数据可以供所有shader使用，那么在render pass中就是更加定制化的渲染， 
+
+每个pass通常对应的渲染流程中不同阶段【相同阶段通常会使用MRT，或硬件不支持，需要多个Pass；或渲染目标size不一样，也需要多个pass来渲染】。实际意义是对一个Mesh渲染多遍，是对材质抽象的一种解释，一个Technique里会包含一个或多个Pass，如DeferredLighting流程里面一个物体就需要2个Pass，一个用来计算Z，一个用来lighting；如果有阴影，又需要一个Pass；如果需要精细反射图，需要一个反射的Pass。引擎一般会把状态类似的不同Mesh的Pass一起渲染， 用Pass对材质进行排序。
+
 
 ### Matrix
 

cg/threejs/index.md

@@ -2,4 +2,5 @@
 
 - [乱记](./threejs.md)
 - [Bump map](./bumpmap.md)
-- [RayCaster](./raycaster.md)
+- [RayCaster](./raycaster.md)
+- [Loader细节](./loader.md)

cg/threejs/loader.md

@@ -0,0 +1,18 @@
+# 数据加载
+
+## Loader
+相对路径为src\loaders\Loader.js，LoadingManager两个类管理封装了基础接口
+继承的加载器需要实现两个接口，一个是请求，一个是解析
+```js
+XXXLoader extends Loader {
+    load(url, onLoad, onProgress, onError) {
+
+    }
+    parse(data) {
+
+    }
+}
+```
+LoadingManager是一个独立封装的，类似一个函数，全部在constructor中实现，至少用了class的语法
+
+

cpl/python.md

@@ -47,7 +47,7 @@ pip install pyopengl
 - pip install pillow // 
 - pip install redis
 - pip install matplotlib // matplotlib是一个python 2D绘图库，利用它可以画出许多高质量的图像
-- pip install openmesh // openmesh
+- pip install openmesh // openmesh https://www.graphics.rwth-aachen.de/media/openmesh_static/Documentations/OpenMesh-6.2-Documentation/a00036.html
 
 ## python anaconda
 

index/article.md

@@ -12,12 +12,12 @@
 - [vscode](../dev-note/vscode.md)
 - [cmd](../dev-note/cmd.md)
 - [Mathjax](../articles/mathjax.md)
+- [app 2023](../articles/2023/app.md)
 
 ## 整理总结
 
 - [裁剪](../cg/culling.md)
 - [四元数](../cg/quaternion.md)
-- [3D API](../cg/API.md)
 - [透视与绘画](../articles/2023/Perspective.md)
 - [打印相关](../articles/2023/printer.md)
 - [用户 角色 权限的通用设计](../articles/2023/userRolePermission.md)

index/computerScience.md

@@ -33,6 +33,16 @@
 - [bezierjs ](https://pomax.github.io/bezierjs/)
     - [github](https://github.com/Pomax/bezierjs)
 
+### api
+
+- [OpenGL](../cg/opengl.md)
+- [Shader](../cg/shader.md)
+
+### UI
+
+- [U++ is a C++ cross-platform rapid application development framework focused on programmers productivity. It includes a set of libraries (GUI, SQL, etc.), and an integrated development environment.欧洲人用得较多](https://www.ultimatepp.org/)
+    - [github ultimatepp](https://github.com/ultimatepp)
+
 ### Engine
 
 - [Bgfx](../cg/bgfx.md)
@@ -50,6 +60,7 @@
 ### Tool
 
 - [PAG Portable Animated Graphics](https://pag.art/)
+- [3d model file](../cg/modelFile.md)
 
 ## Web
 

index/standard.md

@@ -36,6 +36,7 @@
 
 ## 其他
 
+- [Media Types](https://www.iana.org/assignments/media-types/)
 - [语义化版本控制规范 SemVer](https://semver.org/lang/zh-CN/)
 - [The BitTorrent Protocol Specification](https://www.bittorrent.org/beps/bep_0003.html)
     - [Bittorrent Protocol Specification v1.0](https://wiki.theory.org/BitTorrentSpecification)

math/transform.html

@@ -12,6 +12,14 @@
             <h1>transform in render detail</h1>
             <div class="d-flex flex-column">
                 <ol>
+                    <li>
+                        <a href="#section0">Coordinate System</a>
+                        <ol>
+                            <li><a href="#section0a">Screen Space</a></li>
+                            <li><a href="#section0b">NDC(Normalized Device Coordinate) space</a></li>
+                            <li><a href="#section0c">Raster Space</a></li>
+                        </ol>
+                    </li>
                     <li><a href="#section1">Transform a normal vector from object to eye space</a></li>
                     <li>
                         <a href="#section2">Projection matrix</a>
@@ -34,6 +42,21 @@ <h1>transform in render detail</h1>
                 <img class="img-thumbnail w-100" src="../images/cg/transform.png" />
             </div>
             <h4></h4>
+            <div class="my-3">
+                <h4 id="section0">Coordinate System</h4>
+                <div>
+                    <h5 id="section0a">Screen Space</h5>
+                    <p>Screen space is defined on the film plane. The camera projects objects in camera space onto the film plane; the parts inside the screen window are visible in the image that is generated. Depth  values in screen space range from 0 to 1, corresponding to points at the near and far clipping planes, respectively. Note that, although this is called “screen” space, it is still a 3D coordinate system, since  values are meaningful.</p>
+                </div>
+                <div>
+                    <h5 id="section0b">NDC(Normalized Device Coordinate) space</h5>
+                    <p>This is the coordinate system for the actual image being rendered. In  x and y, this space ranges from (0,0) to (1,1) , with (0,0) being the upper-left corner of the image. Depth values are the same as in screen space, and a linear transformation converts from screen to NDC space.</p>
+                </div>
+                <div>
+                    <h5 id="section0c">Raster Space</h5>
+                    <p>This is almost the same as NDC space, except the  and  coordinates range from  to.</p>
+                </div>
+            </div>
             <div>
                 <div class="d-flex flex-wrap w-100">
                     <p>