From 10b4e3ce6fcdda9bd563ea3ed2600305fa224f4b Mon Sep 17 00:00:00 2001
From: liteng <930372551@qq.com>
Date: Fri, 1 Feb 2019 22:07:30 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E7=9D=80=E8=89=B2?=
 =?UTF-8?q?=E5=99=A8=E6=9D=90=E8=B4=A8=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../test/three/ShaderMaterialTest.html        | 60 +++++++++++++++----
 .../{simple.frag.glsl => simple_frag.glsl}    |  0
 .../test/three/shader/simple_vertex.glsl      |  2 +-
 3 files changed, 51 insertions(+), 11 deletions(-)
 rename ShadowEditor.Web/test/three/shader/{simple.frag.glsl => simple_frag.glsl} (100%)

diff --git a/ShadowEditor.Web/test/three/ShaderMaterialTest.html b/ShadowEditor.Web/test/three/ShaderMaterialTest.html
index 2ade0479..0846e490 100644
--- a/ShadowEditor.Web/test/three/ShaderMaterialTest.html
+++ b/ShadowEditor.Web/test/three/ShaderMaterialTest.html
@@ -44,21 +44,61 @@
         dirLight.position.set(1, 2, 3);
         scene.add(dirLight);
 
-        var geometry = new THREE.BoxBufferGeometry(1, 1, 1);
-
-        var material = new THREE.MeshPhongMaterial({
-            color: 0xff0000
-        });
-
-        var mesh = new THREE.Mesh(geometry, material);
-        scene.add(mesh);
-
         var render = function () {
             requestAnimationFrame(render);
             renderer.render(scene, camera);
         };
 
-        render();
+        var fetchShader = function (url) {
+            return new Promise(resolve => {
+                fetch(url).then(response => {
+                    if (response.ok) {
+                        response.text().then(text => {
+                            resolve(text);
+                        });
+                    }
+                });
+            });
+        }
+
+        var promise1 = fetchShader('shader/simple_vertex.glsl');
+        var promise2 = fetchShader('shader/simple_frag.glsl');
+
+        Promise.all([promise1, promise2]).then(result => {
+            var geometry = new THREE.BoxBufferGeometry(1, 1, 1);
+
+            var material = new THREE.RawShaderMaterial({
+                color: 0xff0000,
+                uniforms: {
+                    color: {
+                        type: 'v3',
+                        value: new THREE.Vector3(1.0, 0.0, 0.0),
+                    },
+                    ambientColor: {
+                        type: 'v3',
+                        value: new THREE.Vector3(0.4, 0.4, 0.4)
+                    },
+                    lightPosition: {
+                        type: 'v3',
+                        value: dirLight.position
+                    },
+                    diffuseColor: {
+                        type: 'v3',
+                        value: new THREE.Vector3(0, 1, 0)
+                    },
+                    shininess: {
+                        type: 'f',
+                        value: 0.6
+                    }
+                },
+                vertexShader: result[0],
+                fragmentShader: result[1],
+            });
+
+            var mesh = new THREE.Mesh(geometry, material);
+            scene.add(mesh);
+            render();
+        });
     </script>
 </body>
 
diff --git a/ShadowEditor.Web/test/three/shader/simple.frag.glsl b/ShadowEditor.Web/test/three/shader/simple_frag.glsl
similarity index 100%
rename from ShadowEditor.Web/test/three/shader/simple.frag.glsl
rename to ShadowEditor.Web/test/three/shader/simple_frag.glsl
diff --git a/ShadowEditor.Web/test/three/shader/simple_vertex.glsl b/ShadowEditor.Web/test/three/shader/simple_vertex.glsl
index 2a844fab..dd97d347 100644
--- a/ShadowEditor.Web/test/three/shader/simple_vertex.glsl
+++ b/ShadowEditor.Web/test/three/shader/simple_vertex.glsl
@@ -15,6 +15,6 @@ varying vec3 vNormal;
 void main() {
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
     
-    vPosition = modelMatrix * vec4(position, 1.0);
+    vPosition = vec3(modelMatrix * vec4(position, 1.0));
     vNormal = normal;
 }
\ No newline at end of file