From 4cbcc0d2b4342909ea56b902dda4e066ef87d3a2 Mon Sep 17 00:00:00 2001 From: tengge1 <930372551@qq.com> Date: Thu, 6 Jun 2019 21:13:51 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=AE=80=E5=8C=96=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ShadowEditor.Web/test/js/OutlinePass.js | 31 ++++++------------------- ShadowEditor.Web/test/stroke.html | 3 ++- 2 files changed, 9 insertions(+), 25 deletions(-) diff --git a/ShadowEditor.Web/test/js/OutlinePass.js b/ShadowEditor.Web/test/js/OutlinePass.js index f0602f7f..68fee09d 100644 --- a/ShadowEditor.Web/test/js/OutlinePass.js +++ b/ShadowEditor.Web/test/js/OutlinePass.js @@ -7,8 +7,6 @@ THREE.OutlinePass = function (resolution, scene, camera, selectedObjects) { this.renderCamera = camera; this.selectedObjects = selectedObjects; - this.downSampleRatio = 1; - THREE.Pass.call(this); this.resolution = new THREE.Vector2(resolution.x, resolution.y); @@ -20,21 +18,17 @@ THREE.OutlinePass = function (resolution, scene, camera, selectedObjects) { antialias: true, }; - this.resx = Math.round(this.resolution.x / this.downSampleRatio); - this.resy = Math.round(this.resolution.y / this.downSampleRatio); - this.renderTargetMaskBuffer = new THREE.WebGLRenderTarget(this.resolution.x, this.resolution.y, pars); this.renderTargetMaskBuffer.texture.generateMipmaps = false; this.edgeDetectionMaterial = this.getEdgeDetectionMaterial(); - this.renderTargetEdgeBuffer1 = new THREE.WebGLRenderTarget(this.resx, this.resy, pars); + this.renderTargetEdgeBuffer1 = new THREE.WebGLRenderTarget(this.resolution.x, this.resolution.y, pars); this.renderTargetEdgeBuffer1.texture.generateMipmaps = false; var copyShader = THREE.CopyShader; this.copyUniforms = THREE.UniformsUtils.clone(copyShader.uniforms); - this.copyUniforms["opacity"].value = 1.0; this.materialCopy = new THREE.ShaderMaterial({ uniforms: this.copyUniforms, @@ -49,10 +43,10 @@ THREE.OutlinePass = function (resolution, scene, camera, selectedObjects) { this.oldClearColor = new THREE.Color(); this.oldClearAlpha = 1; - this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); + this.camera = new THREE.OrthographicCamera(-this.resolution.x / 2, this.resolution.x / 2, this.resolution.y / 2, -this.resolution.y / 2, 0, 1); this.scene = new THREE.Scene(); - this.quad = new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), null); + this.quad = new THREE.Mesh(new THREE.PlaneBufferGeometry(this.resolution.x, this.resolution.y), null); this.quad.frustumCulled = false; this.scene.add(this.quad); }; @@ -65,9 +59,6 @@ THREE.OutlinePass.prototype = Object.assign(Object.create(THREE.Pass.prototype), this.oldClearColor.copy(renderer.getClearColor()); this.oldClearAlpha = renderer.getClearAlpha(); - var oldAutoClear = renderer.autoClear; - - renderer.autoClear = false; renderer.setClearColor(0xffffff, 1); @@ -78,13 +69,13 @@ THREE.OutlinePass.prototype = Object.assign(Object.create(THREE.Pass.prototype), // 3. Apply Edge Detection Pass this.quad.material = this.edgeDetectionMaterial; this.edgeDetectionMaterial.uniforms["maskTexture"].value = this.renderTargetMaskBuffer.texture; - this.edgeDetectionMaterial.uniforms["texSize"].value.set(this.resx, this.resy); + this.edgeDetectionMaterial.uniforms["texSize"].value.set(this.resolution.x, this.resolution.y); + renderer.setRenderTarget(this.renderTargetEdgeBuffer1); renderer.clear(); renderer.render(this.scene, this.camera); renderer.setClearColor(this.oldClearColor, this.oldClearAlpha); - renderer.autoClear = oldAutoClear; this.quad.material = this.materialCopy; this.copyUniforms["tDiffuse"].value = this.renderTargetEdgeBuffer1.texture; @@ -101,12 +92,9 @@ THREE.OutlinePass.prototype = Object.assign(Object.create(THREE.Pass.prototype), "texSize": { value: new THREE.Vector2(0.5, 0.5) }, - "visibleEdgeColor": { + "edgeColor": { value: new THREE.Vector3(1.0, 0.0, 0.0) }, - "hiddenEdgeColor": { - value: new THREE.Vector3(0.0, 1.0, 0.0) - }, }, vertexShader: "varying vec2 vUv;\n\ @@ -118,8 +106,7 @@ THREE.OutlinePass.prototype = Object.assign(Object.create(THREE.Pass.prototype), fragmentShader: "varying vec2 vUv;\ uniform sampler2D maskTexture;\ uniform vec2 texSize;\ - uniform vec3 visibleEdgeColor;\ - uniform vec3 hiddenEdgeColor;\ + uniform vec3 edgeColor;\ \ void main() {\n\ vec2 invSize = 1.0 / texSize;\ @@ -131,10 +118,6 @@ THREE.OutlinePass.prototype = Object.assign(Object.create(THREE.Pass.prototype), float diff1 = (c1.r - c2.r)*0.5;\ float diff2 = (c3.r - c4.r)*0.5;\ float d = length( vec2(diff1, diff2) );\ - float a1 = min(c1.g, c2.g);\ - float a2 = min(c3.g, c4.g);\ - float visibilityFactor = min(a1, a2);\ - vec3 edgeColor = 1.0 - visibilityFactor > 0.001 ? visibleEdgeColor : hiddenEdgeColor;\ gl_FragColor = vec4(edgeColor, 1.0) * vec4(d);\ }" }); diff --git a/ShadowEditor.Web/test/stroke.html b/ShadowEditor.Web/test/stroke.html index f0e1a09b..f05e95ab 100644 --- a/ShadowEditor.Web/test/stroke.html +++ b/ShadowEditor.Web/test/stroke.html @@ -29,7 +29,8 @@ var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); - var renderer = new THREE.WebGLRenderer({ antialias: true, }); + var renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.autoClear = false; renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);