feat(skybox): add skybox(by add job);

add and pass run test:examples->skybox; update wonder-webgl version;
Wonder-Technology · May 11, 2019 · b1bd64f · b1bd64f
1 parent 785be19
commit b1bd64f
Show file tree

Hide file tree

Showing 41 changed files with 831 additions and 88 deletions.
diff --git a/config/no_worker/job/init_jobs.json b/config/no_worker/job/init_jobs.json
@@ -46,5 +46,8 @@
     },
     {
         "name": "init_script"
+    },
+    {
+        "name": "init_skybox"
     }
 ]
diff --git a/config/no_worker/job/loop_jobs.json b/config/no_worker/job/loop_jobs.json
@@ -57,5 +57,8 @@
     },
     {
         "name": "render_imgui"
+    },
+    {
+        "name": "render_skybox"
     }
 ]
diff --git a/config/no_worker/pipeline/init_pipelines.json b/config/no_worker/pipeline/init_pipelines.json
@@ -49,6 +49,9 @@
         },
         {
           "name": "init_script"
+        },
+        {
+          "name": "init_skybox"
         }
       ]
     }

diff --git a/config/no_worker/pipeline/loop_pipelines.json b/config/no_worker/pipeline/loop_pipelines.json
@@ -52,6 +52,9 @@
             },
             {
                 "name": "render_imgui"
+            },
+            {
+                "name": "render_skybox"
             }
         ]
     }

diff --git a/config/render/shader/shader_libs.json b/config/render/shader/shader_libs.json
@@ -619,6 +619,35 @@
       }
     ]
   },
+  {
+    "name": "skybox",
+    "glsls": [
+      {
+        "type": "vs",
+        "name": "webgl1_skybox_vertex"
+      },
+      {
+        "type": "fs",
+        "name": "webgl1_skybox_fragment"
+      }
+    ],
+    "variables": {
+      "uniforms": [
+        {
+          "name": "u_skyboxCubeMapSampler",
+          "from": "no_material_shader",
+          "field": "skyboxCubeMap",
+          "type": "samplerCube"
+        },
+        {
+          "name": "u_skyboxVMatrix",
+          "from": "no_material_shader",
+          "field": "skyboxVMatrix",
+          "type": "mat4"
+        }
+      ]
+    }
+  },
   {
     "name": "end",
     "variables": {

diff --git a/config/render/shader/shaders.json b/config/render/shader/shaders.json
@@ -215,6 +215,22 @@
           "name": "end"
         }
       ]
+    },
+    {
+      "name": "skybox",
+      "shader_libs": [
+        {
+          "type": "group",
+          "name": "top"
+        },
+        {
+          "name": "skybox"
+        },
+        {
+          "type": "group",
+          "name": "end"
+        }
+      ]
     }
   ]
 }
diff --git a/examples/asset/image/skybox/nx.jpg b/examples/asset/image/skybox/nx.jpg
diff --git a/examples/asset/image/skybox/ny.jpg b/examples/asset/image/skybox/ny.jpg
diff --git a/examples/asset/image/skybox/nz.jpg b/examples/asset/image/skybox/nz.jpg
diff --git a/examples/asset/image/skybox/px.jpg b/examples/asset/image/skybox/px.jpg
diff --git a/examples/asset/image/skybox/py.jpg b/examples/asset/image/skybox/py.jpg
diff --git a/examples/asset/image/skybox/pz.jpg b/examples/asset/image/skybox/pz.jpg
diff --git a/examples/config/no_worker/job/init_jobs.json b/examples/config/no_worker/job/init_jobs.json
@@ -46,5 +46,8 @@
     },
     {
         "name": "init_script"
+    },
+    {
+        "name": "init_skybox"
     }
 ]
diff --git a/examples/config/no_worker/job/loop_jobs.json b/examples/config/no_worker/job/loop_jobs.json
@@ -57,5 +57,8 @@
     },
     {
         "name": "render_imgui"
+    },
+    {
+        "name": "render_skybox"
     }
 ]
diff --git a/examples/config/no_worker/pipeline/init_pipelines.json b/examples/config/no_worker/pipeline/init_pipelines.json
@@ -49,6 +49,9 @@
         },
         {
           "name": "init_script"
+        },
+        {
+          "name": "init_skybox"
         }
       ]
     }

diff --git a/examples/config/no_worker/pipeline/loop_pipelines.json b/examples/config/no_worker/pipeline/loop_pipelines.json
@@ -52,6 +52,9 @@
             },
             {
                 "name": "render_imgui"
+            },
+            {
+                "name": "render_skybox"
             }
         ]
     }

diff --git a/examples/config/render/shader/shader_libs.json b/examples/config/render/shader/shader_libs.json
@@ -619,6 +619,35 @@
       }
     ]
   },
+  {
+    "name": "skybox",
+    "glsls": [
+      {
+        "type": "vs",
+        "name": "webgl1_skybox_vertex"
+      },
+      {
+        "type": "fs",
+        "name": "webgl1_skybox_fragment"
+      }
+    ],
+    "variables": {
+      "uniforms": [
+        {
+          "name": "u_skyboxCubeMapSampler",
+          "from": "no_material_shader",
+          "field": "skyboxCubeMap",
+          "type": "samplerCube"
+        },
+        {
+          "name": "u_skyboxVMatrix",
+          "from": "no_material_shader",
+          "field": "skyboxVMatrix",
+          "type": "mat4"
+        }
+      ]
+    }
+  },
   {
     "name": "end",
     "variables": {

diff --git a/examples/config/render/shader/shaders.json b/examples/config/render/shader/shaders.json
@@ -215,6 +215,22 @@
           "name": "end"
         }
       ]
+    },
+    {
+      "name": "skybox",
+      "shader_libs": [
+        {
+          "type": "group",
+          "name": "top"
+        },
+        {
+          "name": "skybox"
+        },
+        {
+          "type": "group",
+          "name": "end"
+        }
+      ]
     }
   ]
 }
diff --git a/examples/skybox/index.html b/examples/skybox/index.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>skybox</title>
+</head>
+
+<body>
+    <script src="../../test/e2e/js/AssetTool.js"></script>
+    <script src="../../test/e2e/js/LightBoxesTool.js"></script>
+    <script src="../../test/e2e/js/PositionTool.js"></script>
+    <script src="../../test/e2e/js/LightTool.js"></script>
+    <script src="../../test/e2e/js/CameraTool.js"></script>
+    <script src="../../test/e2e/js/LightMaterialTool.js"></script>
+    <script src="../../dist/wd.js"></script>
+
+    <script>
+        window.onload = function () {
+            return AssetTool.loadConfig(["../config/setting.json", "../config/"], null, function () {
+                var nx = new Image();
+                nx.src = "../asset/image/skybox/nx.jpg";
+                nx.onload = () => {
+
+                    var px = new Image();
+                    px.src = "../asset/image/skybox/px.jpg";
+                    px.onload = () => {
+
+
+
+                        var ny = new Image();
+                        ny.src = "../asset/image/skybox/ny.jpg";
+                        ny.onload = () => {
+
+
+
+                            var py = new Image();
+                            py.src = "../asset/image/skybox/py.jpg";
+                            py.onload = () => {
+
+
+                                var nz = new Image();
+                                nz.src = "../asset/image/skybox/nz.jpg";
+                                nz.onload = () => {
+
+                                    var pz = new Image();
+                                    pz.src = "../asset/image/skybox/pz.jpg";
+                                    pz.onload = () => {
+
+                                        return initSample(
+                                            [
+                                                px, nx, py, ny, pz, nz
+                                            ],
+                                            wd.unsafeGetState());
+
+
+                                    };
+
+                                };
+
+
+
+                            };
+
+
+
+
+                        };
+
+
+                    };
+
+
+                };
+
+
+
+            });
+
+            function initSample(
+                [
+                    px, nx, py, ny, pz, nz
+                ],
+                state
+            ) {
+                var state = wd.setSkyboxImage(
+                    [
+                        px, nx, py, ny, pz, nz
+                    ], state
+                );
+
+
+                var [state, box] = LightBoxesTool.createBox(state);
+
+
+                var state = wd.setAmbientLightColor([0.2, 0.2, 0.2], state);
+
+
+                var [state, directionLightGameObject] = LightTool.createDirectionLight(state);
+
+                var transform = wd.unsafeGetGameObjectTransformComponent(directionLightGameObject, state);
+
+                var state = wd.setTransformLocalEulerAngles(transform, [0, 180, 0], state);
+
+
+
+
+                var [state, cameraGameObject] = LightBoxesTool.createCamera(state);
+
+
+
+                var [state, cameraController] = wd.createArcballCameraController(state);
+
+                var state =
+                    wd.setArcballCameraControllerDistance(cameraController, 50, state);
+
+
+
+                var state =
+                    wd.setArcballCameraControllerWheelSpeed(cameraController, 1, state);
+
+                var state = wd.addGameObjectArcballCameraControllerComponent(cameraGameObject, cameraController, state);
+
+
+                var state =
+                    wd.bindArcballCameraControllerEvent(
+                        cameraController, state
+                    );
+
+
+                wd.startDirector(state);
+            }
+        };
+    </script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -75,11 +75,11 @@
     "wonder-imgui": "^0.0.34",
     "wonder-log": "^0.2.11",
     "wonder-most-animation-frame": "0.0.3",
-    "wonder-webgl": "^0.0.7"
+    "wonder-webgl": "^0.0.9"
   },
   "resolutions": {
     "wonder-log": "^0.2.11",
-    "wonder-webgl": "^0.0.7",
+    "wonder-webgl": "^0.0.9",
     "wonder-commonlib": "0.2.31",
     "wonder-bs-jest": "0.3.0",
     "wonder-bs-puppeteer": "^0.1.6"

diff --git a/src/Index.re b/src/Index.re
@@ -542,6 +542,10 @@ let useByShaderIndex = RenderJobAPI.useByShaderIndex;
 
 let getShaderIndex = RenderJobAPI.getShaderIndex;
 
+let setSkyboxNeedUpdateCubeTexture = JobDataAPI.setSkyboxNeedUpdateCubeTexture;
+
+let setSkyboxImage = JobDataAPI.setSkyboxImage;
+
 let setGameObjectsNeedDrawOutline = JobDataAPI.setGameObjectsNeedDrawOutline;
 
 let setOutlineColor = JobDataAPI.setOutlineColor;

diff --git a/src/api/jiehuo/JieHuoAPI.re b/src/api/jiehuo/JieHuoAPI.re
diff --git a/src/api/jobData/JobDataAPI.re b/src/api/jobData/JobDataAPI.re
@@ -10,4 +10,32 @@ let setGameObjectsNeedDrawOutline = (gameObjectsNeedDrawOutline, state) =>
   OperateOutlineDataJobDataMainService.setGameObjectsNeedDrawOutline(
     gameObjectsNeedDrawOutline,
     state,
-  );
+  );
+
+let setSkyboxImage =
+    ((pxImage, nxImage, pyImage, nyImage, pzImage, nzImage), state) => {
+  ...state,
+  jobDataRecord: {
+    ...state.jobDataRecord,
+    skyboxData: {
+      ...state.jobDataRecord.skyboxData,
+      nxImage: Some(nxImage),
+      pxImage: Some(pxImage),
+      nyImage: Some(nyImage),
+      pyImage: Some(pyImage),
+      nzImage: Some(nzImage),
+      pzImage: Some(pzImage),
+    },
+  },
+};
+
+let setSkyboxNeedUpdateCubeTexture = (needUpdateCubeTexture, state) => {
+  ...state,
+  jobDataRecord: {
+    ...state.jobDataRecord,
+    skyboxData: {
+      ...state.jobDataRecord.skyboxData,
+      needUpdateCubeTexture,
+    },
+  },
+};