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

Author: yyc-git

doc/TODO.org

@@ -350,6 +350,12 @@ TODO handle 依赖隔离模式
 
 * TODO “运行代码”要说明运行Client代码 
 
+* TODO 统一“概述解决方案”，与之前提出的问题对应
+
+通过模板：
+通过下面的改进来xxx：
+xxx
+
 
 * TODO give where has code, uml and how to run code and run result for each example
 

packages/管道模式/article.md

@@ -12,7 +12,7 @@
 
 ## 实现思路
 
-甲实现了一个Render模块，该模块实现了初始化WebGL、渲染、Tonemap后处理的逻辑
+甲实现了一个Render模块，该模块实现了渲染，包括初始化WebGL、渲染、Tonemap后处理这三个步骤
 
 为了处理运行环境的差异，他的思路如下；
 
@@ -155,26 +155,288 @@ tonemap for WebGL2
 
 ## 概述解决方案？
 
-TODO continue
+分离PC端和移动端的渲染逻辑：
+从Render模块中提出两个模块：RenderInPC, RenderInMobile，分别对应PC端和移动端的渲染；
+
+因为初始化WebGL、渲染、Tonemap后处理这三个步骤相对独立，所以将其拆分成单独的模块
+
 
 ## 给出UML？
+
+TODO tu
+
+Render负责判断运行环境，调用对应的渲染模块来渲染
+
+RenderInPC实现了PC端的渲染
+
+RenderInMobile实现了移动端的渲染
+
+InitWebGL2负责初始化WebGL2
+
+DeferRender实现延迟渲染
+
+TonemapForWebGL2使用WebGL2实现Tonemap后处理
+
+InitWebGL1负责初始化WebGL1
+
+ForwardRender实现前向渲染
+
+TonemapForWebGL1使用WebGL1实现Tonemap后处理
+
+
+
+
+
 ## 结合UML图，描述如何具体地解决问题？
+
+- 现在甲负责RenderInPC和对应的三个模块，乙负责RenderInMobile和对应的另外三个模块，互相不影响
+
+
+
+
 ## 给出代码？
 
 
-<!-- ## 请分析存在的问题?
-## 提出改进方向？ -->
+Client代码:
+```ts
+//假canvas
+let canvas = {
+    getContext: (_) => 1 as any
+}
+
+//指定运行环境
+globalThis.isPC = true
+
+
+let renderState = createState()
+
+renderState = render(renderState, canvas)
+```
+
+Client代码跟之前一样
+
+我们看下Renderd的createState相关代码：
+RenderStateType
+```ts
+export type renderInPCState = {
+    gl: WebGL2RenderingContext | null
+}
+
+export type renderInMobileState = {
+    gl: WebGL2RenderingContext | null
+}
+
+export type state = {
+    renderInPC: renderInPCState,
+    renderInMobile: renderInMobileState,
+}
+```
+Render
+```ts
+export let createState = (): state => {
+    return {
+        renderInPC: {
+            gl: null
+        },
+        renderInMobile: {
+            gl: null
+        }
+    }
+}
+```
+
+state使用两个字段来分别保存两个运行环境的数据，互不干扰
+
+
+我们看下Renderd的Render相关代码：
+```ts
+let _isPC = () => {
+    return globalThis.isPC
+}
+
+export let render = (state: state, canvas) => {
+    console.log(globalThis.isPC ? "is PC" : "is mobile")
+
+    if (_isPC()) {
+        state = renderInPC(state, canvas)
+    }
+    else {
+        state = renderInMobile(state, canvas)
+    }
+
+    return state
+}
+```
+
+render函数判断了运行环境，如果是PC端就调用RenderInPC模块来渲染；否则就调用RenderInMobile模块来渲染
+
+我们看下RenderInPC代码
+```ts
+export let render = (state: state, canvas) => {
+    state = initWebGL2(state, canvas)
+    state = deferRender(state)
+    state = tonemap(state)
+
+    return state
+}
+```
+
+它依次调用三个模块来执行渲染
+
+三个模块的相关代码如下：
+InitWebGL2
+```ts
+export let initWebGL2 = (state: state, canvas) => {
+    console.log("初始化WebGL2")
+
+    return {
+        ...state,
+        renderInPC: {
+            gl: canvas.getContext("webgl2")
+        }
+    }
+}
+```
+DeferRender
+```ts
+export let deferRender = (state: state) => {
+    let gl = getExnFromStrictNull(state.renderInPC.gl)
+
+    console.log("延迟渲染")
+
+    return state
+}
+```
+TonemapForWebGL2
+```ts
+export let tonemap = (state: state) => {
+    let gl = getExnFromStrictNull(state.renderInPC.gl)
+
+    console.log("tonemap for WebGL2")
+
+    return state
+}
+```
+
+
+我们看下RenderInMobile代码
+```ts
+export let render = (state: state, canvas) => {
+    state = initWebGL1(state, canvas)
+    state = forwardRender(state)
+    state = tonemap(state)
+
+    return state
+}
+```
+
+它依次调用另外三个模块来执行渲染
+
+三个模块的相关代码如下：
+InitWebGL1
+```ts
+export let initWebGL1 = (state: state, canvas) => {
+    console.log("初始化WebGL1")
+
+    return {
+        ...state,
+        renderInMobile: {
+            gl: canvas.getContext("webgl1")
+        }
+    }
+}
+```
+ForwardRender
+```ts
+export let forwardRender = (state: state) => {
+    let gl = getExnFromStrictNull(state.renderInMobile.gl)
+
+    console.log("前向渲染")
+
+    return state
+}
+```
+TonemapForWebGL1
+```ts
+export let tonemap = (state: state) => {
+    let gl = getExnFromStrictNull(state.renderInMobile.gl)
+
+    console.log("tonemap for WebGL1")
+
+    return state
+}
+```
+
+
+下面，我们运行代码，运行结果如下：
+```text
+is PC
+初始化WebGL2
+延迟渲染
+tonemap for WebGL2
+```
+
+运行结果跟之前一样
+
+
+
+
 ## 提出问题
 
 
+- 不能通过配置来指定渲染的步骤
+现在是通过函数调用的方式来执行渲染的三个步骤。
+如果不懂代码的策划人员想要自定义三个步骤的执行顺序，那就需要麻烦开发人员来修改代码，而不能够直接通过修改配置数据来自定义
+
+- 多人开发渲染的不同步骤的模块时容易造成冲突
+如果甲负责开发RenderInMobile中的InitWebGL1，乙负责开发RenderInMobile中的另外两个步骤模块，那么当他们把合并代码时容易出现代码冲突和Bug。
+这是因为这三个步骤模块之间相互依赖，即另外两个步骤模块依赖InitWebGL1模块，所以甲负责的InitWebGL1模块如果有修改，会影响到乙负责的模块
+
+
+
+
 # [给出使用模式的改进方案]
 
 ## 概述解决方案
+
+
+通过下面的改进来实现通过配置来指定渲染的步骤：
+将RenderInPC和RenderInMobile模块改为两个渲染管道
+将其中的三个步骤的模块改为独立的Job，按照JSON配置指定的执行顺序，对应的渲染管道中执行
+<!-- 每个渲染管道有自己的数据，保存在自己的state中 -->
+<!-- Job可以读写所有的渲染管道的数据，不过不是直接 -->
+<!-- 
+
+不过只依赖于管道数据的类型 -->
+
+通过下面的改进来解决冲突的问题：
+因为渲染管道中的Job是独立的，相互之间不依赖，所以甲和乙同时开发不同的Job是不会相互影响的
+
+
+
 ## 给出UML？
+
+TODO tu
+
+TODO continue
+
+
+TODO
+每个渲染管道有自己的数据，保存在自己的state中
+Job可以拿到每个渲染管道的数据，不过只依赖于管道数据的类型
+
+
+
+TODO 现在增加一个开发同学乙，负责实现RenderInMobile管道的前向渲染、Tonemap的Job
+甲负责实现RenderInPC管道的所有Job，以及RenderInMobile管道的初始化WebGL1
+
 ## 结合UML图，描述如何具体地解决问题？
 ## 给出代码？
 
 
+TODO
+这里需要实现的是能够合并甲、乙开发的同属于RenderInMobile管道的两个子管道。其中乙实现的两个Job应该在甲实现的Job之后执行，并且乙的Job需要读甲的子管道数据：WebGL1的上下文
+
 
 <!-- # 设计意图
 

packages/管道模式/draft.md

@@ -81,10 +81,10 @@
 <!-- 定制管线，适配各种运行环境 -->
 <!-- 通过JSON定制管线，适配各种运行环境 -->
 <!-- 如何通过可配置的JSON指定渲染管线中的Job的执行顺序？ -->
+管道可配置
 如何通过可配置的JSON指定渲染中各个逻辑的执行顺序？
 
 
-统一数据、抽象？
 
 多人开发，组合管线：
 在多人开发中，如何让每个人只独立开发自己负责的逻辑，并且能方便地将每个人实现的逻辑集成到渲染中？
@@ -135,6 +135,9 @@
 Job可以拿到每个渲染管道的数据，不过只依赖于管道数据的类型
 
 
+统一数据、抽象？
+
+
 
 解决第二个问题： 在多人开发中，如何让每个人只独立开发自己负责的逻辑，并且能方便地将每个人实现的逻辑集成到渲染中？
 

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

@@ -1 +1 @@
-<mxfile host="Electron" modified="2023-03-20T03:35:28.038Z" 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="NTChuD0GV-dk0BOdvc9w" version="14.6.13" type="device"><diagram id="SdKAeuxboLakCr2Ia-L-" name="第 1 页">7Vxtb9s2EP41BroBNvQu+WPiJC2GZM2WDms/DYzF2Gxl0ZPoxO6v30ki9UZKllPJXlsXARqeKEri89zxuSPbkTlbbd9GaL28oz4ORobmb0fm1cgwTHtqwF+JZcctxnSaWRYR8TObXhgeyFfMjRq3boiP40pHRmnAyLpqnNMwxHNWsaEooi/Vbk80qD51jRZYMjzMUSBb/yY+W2ZWz3AL+ztMFkvxZN3h37dCojP/kniJfPpSMpnXI3MWUcqy31bbGQ6S2RPzkt1303A1f7EIh6zLDZ++rC8ux89Pb//69MfXd+/wzd0/t2OHvxvbiQ/GPnw/b9KILemChii4LqyXEd2EPk5G1aBV9LmldA1GHYyfMWM7DibaMAqmJVsF/CoO/YsEGmiGNMSZ5YYEAR8yZihi/G7dyS6Xm+l1MYJP0IqGvjCXhsFbwj4m90w0zeLtT8m1ie7ZvH21LXW+2pUa9zgiK8xwxG3ydHMEYrqJ5rhljm3eMZnZ0p0cpbeYwmOiHXSIcIAYea4yD3ECL/J++a33lMC7GNpWcM/0snu4s+lTuzpG9qr8tjJV6iMZ9p6RYKoXmEkjwS+lLypMKRUPoKVrn4aX8NYfy42MLq4t2gVd0pbgyxMNBV8Nr0rweYDimMw/LElY4bnegeeCwNrELtO3lbqvpymPWxmybdgYfdO5wp5DqcJf+xkFG/6k3+ijxJ74hawClMaa+ZIE/i3a0U3ylYDB/ItoXS5pRL4CmEgFkaVVejwkd/JZr1KvRAfTEG3+Lll8i+iXfDlJekQ4hv73AjUtN92imIlXEetHctVH8TJ/HgrIIky4Bncn8aqZBM84YnjbilpjCLC5T74Uy6Aj1rZlaQmcagMhLSRBCeqRAezH8zfxLmZ4BYgwPDJgdI2ucQSN1BLfbMJ5/IvECTFtAX5iOSozGtCoWJiewFtrpniN5iRc3KZ3XVkKvJNZJiAhLvgDWBJ/MkDRY86CiMLLldoAl4Baxq+V+vtB5RhaWjcI7cEgtCQI78kaByTEdygELRWdPfdbPXdsWG7Fc8e6K+M+1WwZd3DyoYC3Vb47j7Bw0jfgnyBGTT1bxGASFwR8OhL0eLPK+FHy8TW/lLU+08f3kY+juDbQJjxgqN/RCtdfZBPmN9bCzMwYXQBVofU+CzdpoMmv1Ab90aJP7svfEn6UNNTdoWhoqJYQJ2B8GisIOf9uqLgwjtMJvoAOprHeFhfht0Xyty6GgdfKRsrsEuwwVayqOrsiL8WKOtAr4vupEH5ZEvAqIEryzBdIzKU414dA0C13Mi39satywZHlgqVYaoyhlpr8i/qG+tefD2rwyP8z1K4pzf0xs0Wenol8Mb92eLL4GNBEmBxYDmlEuHNl4nvL+WzZt+9zMdCsH8tqTu/iZtnS+WrZaVvNsrMqG/Wa6Q5tRwoxmRjmNAjQOiaP+WesAD0SXlLG6KpBx/YQBBxnfz5oeSq3152haGCoRGVZdkEch5gLeqmq6VAQCL5cgQqCXuCBaCcC+7p8bU90PzSkc7mnZpos7rjlTz6diYnCvU9BGi+WsAzgUKXmksJcOt32JfwAKrMkStlXiTi1E7Ui2vCTdI/YjIbwLYikBMHAtxccs5EcrjqqQ7s7wTihbKsbn9zB6GQq6FRDPQ0x9TxQfxXk+RrOMf6QrjtjXeKBKfPAVGAeoEcc3NOYMEKT8aOsb40L++AeDF7dlNW/El9vKHjl2kMtBS3nhbUsEJbH66TQVAkuIu9UJ3jnANE7g7yOEWIoCnmn3ZboT2j2sythmqPyrpqmifYxdtWcrtpVlJ6G3n7L85tcINXynYbdNy498m7cNetc7WFXzZFl80Na0WoTzeeiaxd1bNWwV6TEtqYIVcOVuhylOO5Qcb0oxHFcrng210X1yWRS6/mjFTudg1crRbFTzQBzMAZYp1it9q86B68437BImMeJ/XX3n9ZGGPi4hCNnLrOAYP6wMgHUQPVVIxjnx7byOJgcvin+GKbkFPnmVNkpnKFKhY6jiIo/4QbAftF+eJXYmVaLxLUqsenI6v2YVWLHbYQe1pmwH+izkc7QV6D3FJn/UfcHmsvFqV75sFu31o3PErgLCVxjOqniPtYNGXnTdhUiyBsM+5OIoKaUvUjST5Ky65V8vf0MbEdh7HaVYmILaf9e0zDHZZvTbLWkM71pdf3Sa8er9/Qfm+39dbe1P/ySvXG/52pfu2MSZ2deJFMsedd3n+q5faR66ihnDRblTnSOv4hy2kGlybRVrwW2BL8h/5lA49K3N1KJHYUTR6r8uKago9MeeTzLaetfjTx7n2bWSd1Q5uwthDXL+J/qXM8AMt6zrZZjPpZqA++oMt4bCPlz7m7YrQnc6aGX/5XHGfqecne99XDf2D4x9CIzPMf73qGftiOvn7pu4w11hPfs9brdfqRXUbg5LvSqRPXs9f0EfKMNekUye1zkVafwzk7fi7532n3+xBs0nuqA3hn54ZEfbp2HZvEfXGQVgOL/CTGv/wM=</diagram></mxfile>
+<mxfile host="Electron" modified="2023-04-09T04:52:16.314Z" 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="GXrtbBoBNQto-XBq1KgS" version="14.6.13" type="device"><diagram id="SdKAeuxboLakCr2Ia-L-" name="第 1 页">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</diagram></mxfile>