feat(管道模式): add article.md; update code and umls;

Author: yyc-git

doc/TODO.org

@@ -291,19 +291,22 @@ finish TODO
 
 
 
-* TODO finish block pattern article
+* DONE finish block pattern article
 
 ** DONE update article 1
 
-** TODO update article 2
+# ** TODO update article 2
 
-remove comment
+# remove comment
 
-add image
+# add image
+
+# finish TODO
 
-finish TODO
 
 
+* TODO finish pipeline pattern article
+
 
 
 
@@ -344,6 +347,10 @@ TODO handle 依赖隔离模式
 * TODO 在给出代码->结束一段代码的分析时，给出承上启下语句：总结上段代码，引出下段代码
 
 
+
+* TODO “运行代码”要说明运行Client代码 
+
+
 * TODO give where has code, uml and how to run code and run result for each example
 
     TODO give how to run rescript code(pipeline pattern should mention it!)

packages/积木模式/article.md

@@ -90,7 +90,7 @@ TODO tu
 
 Director实现了初始化和主循环 -->
 
-我们介绍新加入的模块，他们由分别由一个新同学负责开发：
+我们介绍新加入的模块，他们由分别由一个新的开发者负责开发：
 
 SceneManager负责场景的管理
 
@@ -310,10 +310,10 @@ export let getAllGameObjects = (state: engineState) => {
 
 - 模块之间互相依赖，导致团队开发效率的降低和沟通成本的增加
 
-因为这四个同学实现的模块有互相依赖的关系，所以会出现下面的情况：
-同学合并自己的代码时，容易出现大量冲突；
-一个同学修改了自己的代码，会影响到其他同学的代码；
-一个同学可能需要修改别的同学负责的模块代码，造成冲突。比如实现Render的丁可能会修改丙实现的SceneManager的代码，使其能提供某些特定的场景数据，结果在合并代码时发现SceneManager提供的是其它的数据
+因为这四个开发者实现的模块有互相依赖的关系，所以会出现下面的情况：
+开发者合并自己的代码时，容易出现大量冲突；
+一个开发者修改了自己的代码，会影响到其他开发者的代码；
+一个开发者可能需要修改别的开发者负责的模块代码，造成冲突。比如实现Render的丁可能会修改丙实现的SceneManager的代码，使其能提供某些特定的场景数据，结果在合并代码时发现SceneManager提供的是其它的数据
 
 
 <!-- # [给出可能的改进方案，分析存在的问题]?
@@ -338,7 +338,7 @@ export let getAllGameObjects = (state: engineState) => {
 积木包括积木实现和积木协议两个部分，其中积木实现是对积木协议的实现
 积木协议定义了积木提供的服务和积木包括的数据的类型，其中“服务”就是多个函数，用于实现积木的逻辑；数据是一个state，该state保存了积木的所有数据
 每个积木之间依赖的是抽象的积木协议而不是具体的积木实现
-大家首先一起定义好各个积木的协议，然后每个同学只独立开发自己的积木实现，互相之间通过积木协议交互
+大家首先一起定义好各个积木的协议，然后每个开发者只独立开发自己的积木实现，互相之间通过积木协议交互
 
 
 
@@ -381,7 +381,7 @@ Engine Block就是入口积木，Client调用它的方式如下：
 
 ## 结合UML图，描述如何具体地解决问题？
 
-- 因为不同积木之间通过积木协议进行了隔离，所以每个同学只关注于开发自己负责的积木，只要积木协议不修改，就不会互相影响，从而提升了团队的开发效率，降低了团队的沟通成本
+- 因为不同积木之间通过积木协议进行了隔离，所以每个开发者只关注于开发自己负责的积木，只要积木协议不修改，就不会互相影响，从而提升了团队的开发效率，降低了团队的沟通成本
 
 
 ## 给出代码？

packages/管道模式/article.md

@@ -0,0 +1,239 @@
+# [引入故事，提出问题]
+
+## 需求
+
+甲想要实现3D引擎中的渲染，需要同时支持PC端、移动端
+
+两个运行环境的差异如下所示：
+
+- PC端支持WebGL2，移动端只支持WebGL1
+- PC端可以使用延迟渲染的算法来渲染，移动端因为不支持multi render targets，所以只能使用前向渲染的算法来渲染
+
+
+## 实现思路
+
+甲实现了一个Render模块，该模块实现了初始化WebGL、渲染、Tonemap后处理的逻辑
+
+为了处理运行环境的差异，他的思路如下；
+
+- 在“初始化WebGL”中判断运行环境，如果是PC端就获得WebGL2的上下文，如果是移动端就获得WebGL1的上下文
+- 在“渲染”中判断运行环境，如果是PC端就使用延迟渲染算法，如果是移动端就使用前向渲染算法
+- 在“Tonemap”中判断运行环境，如果是PC端就使用WebGL2的上下文，如果是移动端就使用WebGL1的上下文
+
+
+
+## 给出UML
+
+TODO tu
+
+Render实现了渲染
+
+
+## 给出代码
+
+Client
+```ts
+//假canvas
+let canvas = {
+    getContext: (_) => 1 as any
+}
+
+//指定运行环境
+globalThis.isPC = true
+
+
+let renderState = createState()
+
+renderState = render(renderState, canvas)
+```
+
+我们首先创建了引擎的RenderState，保存渲染的所有数据；
+最后进行渲染
+
+我们看下Renderd相关代码：
+RenderStateType
+```ts
+export type state = {
+    gl: WebGLRenderingContext | WebGL2RenderingContext | null
+}
+```
+Render
+```ts
+let _isPC = () => {
+    console.log(globalThis.isPC ? "is PC" : "is mobile")
+
+    return globalThis.isPC
+}
+
+let _initWebGL = (state, canvas) => {
+    let gl = null
+
+    if (_isPC()) {
+        gl = canvas.getContext("webgl2")
+    }
+    else {
+        gl = canvas.getContext("webgl1")
+    }
+
+    return {
+        ...state,
+        gl: gl
+    }
+}
+
+let _render = (state) => {
+    if (_isPC()) {
+        let gl = getExnFromStrictNull(state.gl) as WebGL2RenderingContext
+
+        console.log("延迟渲染")
+    }
+    else {
+        let gl = getExnFromStrictNull(state.gl) as WebGLRenderingContext
+
+        console.log("前向渲染")
+    }
+
+    return state
+}
+
+let _tonemap = (state) => {
+    let gl = null
+
+    if (_isPC()) {
+        gl = getExnFromStrictNull(state.gl) as WebGL2RenderingContext
+    }
+    else {
+        gl = getExnFromStrictNull(state.gl) as WebGLRenderingContext
+    }
+
+    console.log("tonemap")
+
+    return state
+}
+
+export let createState = (): state => {
+    return {
+        gl: null
+    }
+}
+
+export let render = (state: state, canvas) => {
+    state = _initWebGL(state, canvas)
+    state = _render(state)
+    state = _tonemap(state)
+
+    return state
+}
+```
+
+在渲染的时候判断了运行环境，执行对应的逻辑
+
+
+下面，我们运行代码，运行结果如下：
+```text
+is PC
+初始化WebGL2
+延迟渲染
+tonemap for WebGL2
+```
+
+因为这里指定环境为PC端，所以执行的是PC端的渲染逻辑
+
+
+
+
+## 提出问题
+
+为了加快开发进度，甲找到了开发者乙一起开发，其中甲负责PC端的渲染实现，乙负责移动端的渲染实现
+
+- 由于两个运行环境的逻辑混杂在一起，导致两个开发者开发时互相影响，容易出现代码冲突，最终导致开发进度逐渐变慢
+
+
+
+# [给出可能的改进方案，分析存在的问题]?
+
+
+## 概述解决方案？
+
+TODO continue
+
+## 给出UML？
+## 结合UML图，描述如何具体地解决问题？
+## 给出代码？
+
+
+<!-- ## 请分析存在的问题?
+## 提出改进方向？ -->
+## 提出问题
+
+
+# [给出使用模式的改进方案]
+
+## 概述解决方案
+## 给出UML？
+## 结合UML图，描述如何具体地解决问题？
+## 给出代码？
+
+
+
+<!-- # 设计意图
+
+阐明模式的设计目标 -->
+
+# 定义
+
+## 一句话定义？
+<!-- ## 概述抽象的解决方案 -->
+## 补充说明
+## 通用UML？
+## 分析角色？
+## 角色之间的关系？
+## 角色的抽象代码？
+## 遵循的设计原则在UML中的体现？
+
+
+
+
+# 应用
+
+## 优点
+
+## 缺点
+
+## 使用场景
+
+### 场景描述
+
+<!-- ### 解决方案 -->
+
+### 具体案例
+
+<!-- ## 实现该场景需要修改模式的哪些角色？ -->
+<!-- ## 使用模式有什么好处？ -->
+
+## 注意事项
+
+
+# 扩展
+
+
+# 结合其它模式
+
+## 结合哪些模式？
+## 使用场景是什么？
+## UML如何变化？
+## 代码如何变化？
+
+
+
+
+# 最佳实践
+
+<!-- ## 结合具体项目实践经验，如何应用模式来改进项目？ -->
+## 哪些场景不需要使用模式？
+<!-- ## 哪些场景需要使用模式？ -->
+## 给出具体的实践案例？
+
+
+
+# 更多资料推荐

packages/管道模式/draft.md

@@ -84,10 +84,9 @@
 如何通过可配置的JSON指定渲染中各个逻辑的执行顺序？
 
 
+统一数据、抽象？
 
-
-<!-- 多人开发，组合管线
-    统一数据、抽象 -->
+多人开发，组合管线：
 在多人开发中，如何让每个人只独立开发自己负责的逻辑，并且能方便地将每个人实现的逻辑集成到渲染中？
 
 
@@ -247,6 +246,8 @@ is_set_state
 
     适配各种运行环境
 
+    同时支持WebGL1、WebGL2：两套管线
+
 
 # 主问题：推荐更多资料
 

packages/管道模式/story_improve/UML.drawio

@@ -1 +1 @@
-<mxfile host="Electron" modified="2023-03-20T03:35:09.179Z" agent="5.0 (Macintosh; Intel Mac OS X 11_4_0) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.6.13 Chrome/89.0.4389.128 Electron/12.0.7 Safari/537.36" etag="ImKot2INiSGIMbiTuMFp" version="14.6.13" type="device"><diagram id="fjQVvlNmNs_deAdkQ_MN" name="第 1 页">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</diagram></mxfile>
+<mxfile host="Electron" modified="2023-04-09T01:48:43.280Z" agent="5.0 (Macintosh; Intel Mac OS X 11_4_0) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/14.6.13 Chrome/89.0.4389.128 Electron/12.0.7 Safari/537.36" etag="Sv-T-asfgrMG-Jx3YXD9" version="14.6.13" type="device"><diagram id="fjQVvlNmNs_deAdkQ_MN" name="第 1 页">7Vzbcps6FP0az+Q8JIPEzTymubWdtM00mWnzKBvFJsHII3Bi9+uPMJINEhgwFzuZ9KEBIQmQ1tp7a2njgX4xW95QNJ/+IC72B1BzlwP9cgCh7gw19icuWfESQ3OSkgn13KQMbAvuvX+YF/KGk4Xn4jBTMSLEj7x5tnBMggCPo0wZopS8Zas9ET971zmaYKXgfox8tfSP50bTpHQI7W35V+xNpuLOwOLvN0OiMn+TcIpc8pYq0q8G+gUlJEqOZssL7MejJ8YlaXddcHXzYBQHUZUG539/w8Xzt8vl9c3LJbh6uR85N6e8lzBaiRfGLnt/fkpoNCUTEiD/alv6hZJF4OK4V42dbevcEjJnhYAVPuMoWvHJRIuIsKJpNPP5VRy45/HUsNOABDgpufZ8n3cZRohGvDWwksuZ06UX/RV9sePHuN2Zyc8ul7yb9ckq3ae4q+uhGQlcUZy6tTqofITiYUkV8CG+wWSGI7piFSj2UeS9ZmGDOPomm3qbpnfEY7eA2lLgXeCEMwU45pmW+gf1bJchWdAx5r2kp13uGBrZji0t2xEbgQmOlI7YWKFVqto8rhDueAFgKC+w+8HkBpZW8iLmrvrsIHlkcZaanW3RmhM1+JG8gvaK/AWf2Ttvjn0vwD9QwLhPFf6Eb97MR2tUj6ee796iFVnEWGJQG7+Isy9TQr1/JIiQIEUa9IaWqXEft+QAzZLviV3nbXQozvmzJKin5GVjuOIaFIes/p0AuLYpukVhJB5FWKr4qovC6eZ+yPcmATses9bs3Xfw5RXTCC8HuxjDr54aQyMzr6dAQPRta3EdjeN/mrK2EJjFPEsBo/68W8q8D+CXMcUoYmaQ/Xfy3wCyOjpIjAYbw4kXsiER6DiZJfBYVx7Ai3iQ+KXk7JmMflEX01DqaBHU6OonmmH5QRbBpiGbFDfTLowPf80xZX+uF8E4zO1OArSYcx8/RRtIXRCf0K39fmIWVCoK52jsBZPbdatLIwesMUQ85mnP+Q2i2H0kaESjDYQpYQ+dOmdYEzhVwbeTw+WI5AA0KsIP2F3BD+iH8cvs2f9unWl8+pi+tnWt6zPhW1MTC4dZ/z7ySWy69nTwW6f+mPbpuQ6+0BIljnLHYOs8lksc4Y6K0OonFhgaWYMITAlnBb6/LadnHxh9aeyloFiAvjrRJMyCbX2aFxk+TL2gTnRYijEwrIgxAcb2MNbMEA0VR/h77VU+457GcQ/UpIBZ089MxfPojpbjeYbWWWe+x9kz9jn3fRF6hCfrUEOpGCMnuZREHmMUvKLwA8YcG940CTryp97obuo3UkWvhn9H+DD2URh644xNl41GXgCxv6Hua72vsB9qjjyvBSvzttz8xmRtiX7he5jfLA2C/MlaE6oNQ2jIysFQy5U+UtQAdg41ZGWjPV4YBV7wW3B3IWze2jY+rOb40zU2RYQFrAwgTgFQraNhQ0GYrGvsDAW5okB68TzQz9nwMg+U9Xvc4SlF4cfzexumNPF7RTNrdDWzxoda8Ei+UPGVTaXw9hbUutOJs+1fugaOJYGwAy1aqAIfA6VlIdzxoFTM9btHqc53LTtFqRjWnbFSzxGmJe0wAMtWnI6uW91ElFdh5J97dPT2Nfq5ePo6Y/h9ZQFNYy4/L2ZzUZ8zbF2U4lATuoN6dM/QVYQlElebmoRcGu5J/qp6nKHlI6tjrluWtNcJd1Ndrt8P1VVx8FvgRX/w6OYWfiejnlkOoAGygwDO7BxBrV+iwyMlek3CciWGC+P11JjUvpLjDLN2RWeL+7JAgp3dYeqxCYkXmCm3344pcCqagmT9137mh8zdOPND3llsK0nDBjsD1/IGp9AcdG9YVAn6Ej9hmgQSh7AsZtayAMvs1bTsjEtTo/TAeDxD8/UIWX4sIYwoO5rERyfXhCamWdXbex4+6FS3zHZnw6fKn989JGLVH2Tk+fhT22tf25N0b0NXBSBT71naM6CChU9pr4gvTaS9opntTNozVSP56H2SvGOSm7adIfkQHgHJTdXgf5K8iC7vi+TNF1kdp7HnJR7tk8ZepMbCWvpMV1lOIk9NWZeVrq3MbtZWjjEUSBSWSKuWS5ejptpyXzaUAN3WKo3Zz9wbdbrost5VzmnjHNPmKC/XDmEuHQ6Vy2eqHzNkFjypUEhBQsf6vK2fwSy3LEf1K/qwz+W1ZR7YqTSS3PbIoC6S/kt9SwMq5WdUV+ZW+2KcvGdmgo5svCEB3tR6ENZMNYVlo9iDg+hqkqPLyfPpV69vTvq0XI/oOKvWw+NX6wsYqUx0+9yTtWbHkPqoHqtJPQ2djlgsP7K4Ue0na4v2+ZtQzfN6j2ITar+vhffc0a7KgypurmqqidXKbnPOFpP8cTGQZfW2CGFJH+kCTS9hhNJCfFbXrSdU01SuCX1D1D3cJtNQHjqtR2+Yj8cDpZwdbm1XdTNYiIn9r+3yLfxxhi37Jg/WUKtKVbYS99Gmma8MHrsNM19fVlK8gFb2kwtyC8madxOuNFdz3yuYm0rKhwBzOzHLIcDcT6Ch5rKkNyAPKLqZmiy6Ac3uUXXL5X7zgKNb7tfVxo5w4X5AdU2N9TUJSAVL/OaJbqXmQW7RiyAneFQ3hwv0n8Mlr05A3hfLvWZw2R/2g5iGv1NRbgL3jwtA5SA3fzO470DhVBL07RI9whK/fpJfvxszYB9or+kTyZWQfByfKcpIll1aR9C0DgPNFkOifSKgnn7q6VTPWpuq8VBbS22723C78VdoTZbaHX/UInbYB9Wzt6pH6OXL835D+bq2Sk4AdczdXteQt/5q1jeNRqaQnW5/iDepvv09Y/3qfw==</diagram></mxfile>

管道模式代码/story_before/package.json

@@ -2,7 +2,8 @@
   "name": "pipeline_pattern_story_before",
   "version": "0.0.1",
   "scripts": {
-    "watch": "tsc -w -noEmit"
+    "watch": "tsc -w -noEmit",
+    "client": "ts-node src/Client.ts"
   },
   "devDependencies": {
     "typescript": "^4.2.3"

管道模式代码/story_before/src/Client.ts

@@ -5,6 +5,7 @@ let canvas = {
     getContext: (_) => 1 as any
 }
 
+//指定运行环境
 globalThis.isPC = true