From bb01a746b843a1d9c31925b970cc84b400590c36 Mon Sep 17 00:00:00 2001 From: lmj01 Date: Wed, 19 Jul 2023 16:28:50 +0800 Subject: [PATCH] update --- articles/2023/app.md | 6 ++ blender/cycles.md | 5 ++ blender/index.md | 1 + books/Learn OpenGL.md | 7 ++ books/index.md | 6 ++ cg/modelFile.md | 61 ++++++++++++++++++ cg/{API.md => opengl.md} | 57 +--------------- cg/shader.md | 53 ++++++++++++++- cg/threejs/index.md | 3 +- cg/threejs/loader.md | 18 ++++++ cpl/python.md | 2 +- images/cg/stl-orientation- of-the-facet.png | Bin 0 -> 7214 bytes .../cg/stl-valid-and-invalid-tessellation.png | Bin 0 -> 7021 bytes index/article.md | 2 +- index/computerScience.md | 11 ++++ index/standard.md | 1 + math/transform.html | 23 +++++++ nodejs/index.md | 3 +- 18 files changed, 199 insertions(+), 60 deletions(-) create mode 100644 articles/2023/app.md create mode 100644 blender/cycles.md create mode 100644 books/Learn OpenGL.md create mode 100644 cg/modelFile.md rename cg/{API.md => opengl.md} (70%) create mode 100644 cg/threejs/loader.md create mode 100644 images/cg/stl-orientation- of-the-facet.png create mode 100644 images/cg/stl-valid-and-invalid-tessellation.png diff --git a/articles/2023/app.md b/articles/2023/app.md new file mode 100644 index 0000000..dc369a2 --- /dev/null +++ b/articles/2023/app.md @@ -0,0 +1,6 @@ +# 技术方案 + +## C++ + +UI: U++, +Kaitai Struct, 二进制文件解析 \ No newline at end of file diff --git a/blender/cycles.md b/blender/cycles.md new file mode 100644 index 0000000..6676c56 --- /dev/null +++ b/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. + +## 源文件 \ No newline at end of file diff --git a/blender/index.md b/blender/index.md index 528e31b..6e6a930 100644 --- a/blender/index.md +++ b/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 diff --git a/books/Learn OpenGL.md b/books/Learn OpenGL.md new file mode 100644 index 0000000..6b5bd4a --- /dev/null +++ b/books/Learn OpenGL.md @@ -0,0 +1,7 @@ +# [Learn OpenGL](https://learnopengl.com/) + +## Advanced OpenGL + +### Stencil testing + +模板测试，Object outlining的流程处理给出了一个方案 \ No newline at end of file diff --git a/books/index.md b/books/index.md index 550aee9..6d14aa4 100644 --- a/books/index.md +++ b/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) diff --git a/cg/modelFile.md b/cg/modelFile.md new file mode 100644 index 0000000..2db43ad --- /dev/null +++ b/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." diff --git a/cg/API.md b/cg/opengl.md similarity index 70% rename from cg/API.md rename to cg/opengl.md index 91611ed..0464fbf 100644 --- a/cg/API.md +++ b/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) \ No newline at end of file diff --git a/cg/shader.md b/cg/shader.md index eb7c640..4fa6acd 100644 --- a/cg/shader.md +++ b/cg/shader.md @@ -1,7 +1,9 @@ # Shader 其定义是没有明确，都是不同工程项目中不同的指称。 -## 目前可参考的 +## 定义 + +shader本身是一个泛概念 在Vulkan/Dx12中一个shader单指一个blob，这个blob不含管线状态，仅仅表示一段可执行代码 @@ -9,7 +11,54 @@ 一个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 diff --git a/cg/threejs/index.md b/cg/threejs/index.md index 61a92ad..32cb8cc 100644 --- a/cg/threejs/index.md +++ b/cg/threejs/index.md @@ -2,4 +2,5 @@ - [乱记](./threejs.md) - [Bump map](./bumpmap.md) -- [RayCaster](./raycaster.md) \ No newline at end of file +- [RayCaster](./raycaster.md) +- [Loader细节](./loader.md) \ No newline at end of file diff --git a/cg/threejs/loader.md b/cg/threejs/loader.md new file mode 100644 index 0000000..da17f34 --- /dev/null +++ b/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的语法 + + diff --git a/cpl/python.md b/cpl/python.md index 7364720..49ceddd 100644 --- a/cpl/python.md +++ b/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 diff --git a/images/cg/stl-orientation- of-the-facet.png b/images/cg/stl-orientation- of-the-facet.png new file mode 100644 index 0000000000000000000000000000000000000000..088669fa7a73ec117c7739471087c45f910834a5 GIT binary patch literal 7214 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%0D1p;Ce1U!HuvI|4Uv@kXX3fo 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 literal 0 HcmV?d00001 diff --git a/index/article.md b/index/article.md index e07e58d..f8b9476 100644 --- a/index/article.md +++ b/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) diff --git a/index/computerScience.md b/index/computerScience.md index 20693fa..08b0b6e 100644 --- a/index/computerScience.md +++ b/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 diff --git a/index/standard.md b/index/standard.md index 46cfa66..979221f 100644 --- a/index/standard.md +++ b/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) diff --git a/math/transform.html b/math/transform.html index 113ec63..f381873 100644 --- a/math/transform.html +++ b/math/transform.html @@ -12,6 +12,14 @@

transform in render detail

    +
  1. + Coordinate System +
      +
    1. Screen Space
      2. +
    2. NDC(Normalized Device Coordinate) space
      3. +
    3. Raster Space
      4. +
    +
  2. Transform a normal vector from object to eye space
  3. Projection matrix @@ -34,6 +42,21 @@

    transform in render detail

+
+

Coordinate System

+
+
Screen Space
+

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.

+
+
+
NDC(Normalized Device Coordinate) space
+

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.

+
+
+
Raster Space
+

This is almost the same as NDC space, except the and coordinates range from to.

+
+

diff --git a/nodejs/index.md b/nodejs/index.md index dbbc79b..0a2efaa 100644 --- a/nodejs/index.md +++ b/nodejs/index.md @@ -14,4 +14,5 @@ Parcel is a zero configuration build tool for the web ## 使用的库 - [jspdf](https://github.com/parallax/jsPDF) - - [npmjs](https://www.npmjs.com/package/jspdf) \ No newline at end of file + - [npmjs](https://www.npmjs.com/package/jspdf) +- [Element Plus](https://element-plus.org/en-US/component/button.html) \ No newline at end of file