From 5a5fa336cdfbc60cf816045fc5630492801cdbff Mon Sep 17 00:00:00 2001
From: liteng <930372551@qq.com>
Date: Wed, 5 Jun 2019 07:54:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ShadowEditor.Web/test/stroke.html | 54 +++++++++++++++++++++++++++----
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/ShadowEditor.Web/test/stroke.html b/ShadowEditor.Web/test/stroke.html
index a0c3c823..007f0ef8 100644
--- a/ShadowEditor.Web/test/stroke.html
+++ b/ShadowEditor.Web/test/stroke.html
@@ -22,6 +22,23 @@
     <script src="../assets/js/three.js"></script>
     <script src="../assets/js/controls/OrbitControls.js"></script>
     <script>
+        // function getUIMaterial() {
+        //     return new THREE.ShaderMaterial({
+        //         uniforms: {
+        //             texture: null,
+        //         },
+
+        //         vertexShader: [
+        //             'void main {',
+        //             '   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
+        //             '}',
+        //         ].join('\n'),
+        //         fragmentShader: [
+        //             'uniform sampler2D map',
+        //         ].join('\n'),
+        //     });
+        // }
+
         function getPrepareMaskMaterial() {
             return new THREE.ShaderMaterial({
 
@@ -240,14 +257,17 @@
             });
         }
 
+        var width = window.innerWidth;
+        var height = window.innerHeight;
+
         var scene = new THREE.Scene();
 
-        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
         camera.position.set(4.534318418390707, 2.767285132678359, 2.4065417148044856);
         camera.lookAt(new THREE.Vector3());
 
         var renderer = new THREE.WebGLRenderer();
-        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setSize(width, height);
         document.body.appendChild(renderer.domElement);
 
         new THREE.OrbitControls(camera, renderer.domElement);
@@ -269,18 +289,35 @@
         var cube = new THREE.Mesh(geometry, material);
         scene.add(cube);
 
-        // 边框相关
-        var helperCamera = new THREE.OrthographicCamera();
+        // 帮助场景
+        var helpScene = new THREE.Scene();
 
+        // 绘制目标
+        var renderTarget = new THREE.WebGLRenderTarget(width, height);
+
+        // 帮助物体
+        var helpGeometry = new THREE.PlaneBufferGeometry(width, height);
+        var helpMaterial = new THREE.MeshBasicMaterial({
+            map: renderTarget.texture,
+        });
+        var helpPlane = new THREE.Mesh(helpGeometry, helpMaterial);
+        helpPlane.rotation.x = -Math.PI / 2;
+        helpScene.add(helpPlane);
+
+        // 正交相机
+        var helpCamera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0.1, 1000);
+        helpCamera.position.y = 10;
+        helpCamera.lookAt(new THREE.Vector3());
+
+        // 深度材质
         var depthMaterial = new THREE.MeshDepthMaterial();
         depthMaterial.side = THREE.DoubleSide;
         depthMaterial.depthPacking = THREE.RGBADepthPacking;
         depthMaterial.blending = THREE.NoBlending;
 
+        // 纹理矩阵
         var textureMatrix = new THREE.Matrix4();
 
-        var renderTarget = new THREE.WebGLRenderTarget(renderer.domElement.width, renderer.domElement.width.height);
-
         var animate = function () {
             requestAnimationFrame(animate);
 
@@ -298,11 +335,14 @@
             // depth material
             scene.overrideMaterial = depthMaterial;
             renderer.setRenderTarget(renderTarget);
+            renderer.render(scene, camera);
 
             // 
             scene.overrideMaterial = null;
+
+            // 渲染帮助场景
             renderer.setRenderTarget(null);
-            renderer.render(scene, camera);
+            renderer.render(helpScene, helpCamera);
         };
 
         animate();