From a5c865987a0f686526e9757b8be62d19d186cafa Mon Sep 17 00:00:00 2001 From: liteng <930372551@qq.com> Date: Tue, 25 Dec 2018 20:14:06 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E6=9B=B4=E5=A4=9A=E6=88=AA=E5=9B=BE?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 ++ images/README.md | 11 +++++++++++ images/{history => }/scene20180917.png | Bin images/{history => }/scene20180919.png | Bin images/{history => }/scene20181007.png | Bin 5 files changed, 13 insertions(+) create mode 100644 images/README.md rename images/{history => }/scene20180917.png (100%) rename images/{history => }/scene20180919.png (100%) rename images/{history => }/scene20181007.png (100%) diff --git a/README.md b/README.md index 191a4bb7..322e489e 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,8 @@ ![image](images/scene20181223.png) +[点击此处](images/README.md)查看更多截图。 + ## 相关链接 * Three.js官网：https://threejs.org/ diff --git a/images/README.md b/images/README.md new file mode 100644 index 00000000..8d2e7ef1 --- /dev/null +++ b/images/README.md @@ -0,0 +1,11 @@ +# 更多截图 + +![image](scene20181223.png) + +![image](scene20181215.png) + +![image](scene20181007.png) + +![image](scene20180919.png) + +![image](scene20180917.png) \ No newline at end of file diff --git a/images/history/scene20180917.png b/images/scene20180917.png similarity index 100% rename from images/history/scene20180917.png rename to images/scene20180917.png diff --git a/images/history/scene20180919.png b/images/scene20180919.png similarity index 100% rename from images/history/scene20180919.png rename to images/scene20180919.png diff --git a/images/history/scene20181007.png b/images/scene20181007.png similarity index 100% rename from images/history/scene20181007.png rename to images/scene20181007.png From e0f303f97484a087b191dac358d417991cc06541 Mon Sep 17 00:00:00 2001 From: liteng <930372551@qq.com> Date: Tue, 25 Dec 2018 20:50:38 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=8D=8A=E8=89=B2?= =?UTF-8?q?=E8=B0=83=E6=A8=A1=E5=BC=8F=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ShadowEditor.Web/index.html | 4 + .../postProcessing/HalftoneComponent.js | 261 ++++++++++++++++++ .../src/editor/sidebar/PropertyPanel.js | 2 + .../src/player/component/PlayerRenderer.js | 18 ++ 4 files changed, 285 insertions(+) create mode 100644 ShadowEditor.Web/src/component/postProcessing/HalftoneComponent.js diff --git a/ShadowEditor.Web/index.html b/ShadowEditor.Web/index.html index f7d0acf2..30d5a589 100644 --- a/ShadowEditor.Web/index.html +++ b/ShadowEditor.Web/index.html @@ -46,6 +46,9 @@ + + + @@ -56,6 +59,7 @@ + diff --git a/ShadowEditor.Web/src/component/postProcessing/HalftoneComponent.js b/ShadowEditor.Web/src/component/postProcessing/HalftoneComponent.js new file mode 100644 index 00000000..cac5782e --- /dev/null +++ b/ShadowEditor.Web/src/component/postProcessing/HalftoneComponent.js @@ -0,0 +1,261 @@ +import BaseComponent from '../BaseComponent'; + +/** + * 半色调特效组件 + * @author tengge / https://github.com/tengge1 + * @param {*} options + */ +function HalftoneComponent(options) { + BaseComponent.call(this, options); + this.selected = null; +} + +HalftoneComponent.prototype = Object.create(BaseComponent.prototype); +HalftoneComponent.prototype.constructor = HalftoneComponent; + +HalftoneComponent.prototype.render = function () { + var data = { + xtype: 'div', + id: 'panel', + scope: this.id, + parent: this.parent, + cls: 'Panel', + style: { + display: 'none' + }, + children: [{ + xtype: 'row', + children: [{ + xtype: 'label', + style: { + color: '#555', + fontWeight: 'bold', + width: '100%' + }, + text: '半色调特效' + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '启用状态' + }, { + xtype: 'checkbox', + id: 'enabled', + scope: this.id, + value: false, + onChange: this.onChange.bind(this) + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '形状' + }, { + xtype: 'select', + id: 'shape', + scope: this.id, + options: { + 1: '点', + 2: '椭圆', + 3: '线', + 4: '正方形' + }, + value: 1, + onChange: this.onChange.bind(this) + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '半径' + }, { + xtype: 'number', + id: 'radius', + scope: this.id, + range: [1, 25], + value: 4, + onChange: this.onChange.bind(this) + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '红色偏转' + }, { + xtype: 'number', + id: 'rotateR', + scope: this.id, + value: 15, + onChange: this.onChange.bind(this) + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '绿色偏转' + }, { + xtype: 'number', + id: 'rotateG', + scope: this.id, + value: 45, + onChange: this.onChange.bind(this) + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '蓝色偏转' + }, { + xtype: 'number', + id: 'rotateB', + scope: this.id, + value: 30, + onChange: this.onChange.bind(this) + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '分散' + }, { + xtype: 'number', + id: 'scatter', + scope: this.id, + value: 0, + onChange: this.onChange.bind(this) + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '混合' + }, { + xtype: 'number', + id: 'blending', + scope: this.id, + range: [0, 1], + value: 1, + onChange: this.onChange.bind(this) + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '混合模式' + }, { + xtype: 'select', + id: 'blendingMode', + scope: this.id, + options: { + 1: '线性', + 2: '乘法', + 3: '相加', + 4: '变亮', + 5: '变暗' + }, + value: 1, + onChange: this.onChange.bind(this) + }] + }, { + xtype: 'row', + children: [{ + xtype: 'label', + text: '灰阶' + }, { + xtype: 'checkbox', + id: 'greyscale', + scope: this.id, + value: false, + onChange: this.onChange.bind(this) + }] + }] + }; + + var control = UI.create(data); + control.render(); + + this.app.on(`objectSelected.${this.id}`, this.onObjectSelected.bind(this)); + this.app.on(`objectChanged.${this.id}`, this.onObjectChanged.bind(this)); +}; + +HalftoneComponent.prototype.onObjectSelected = function () { + this.updateUI(); +}; + +HalftoneComponent.prototype.onObjectChanged = function () { + this.updateUI(); +}; + +HalftoneComponent.prototype.updateUI = function () { + var container = UI.get('panel', this.id); + var editor = this.app.editor; + if (editor.selected && editor.selected instanceof THREE.Scene) { + container.dom.style.display = ''; + } else { + container.dom.style.display = 'none'; + return; + } + + this.selected = editor.selected; + + var enabled = UI.get('enabled', this.id); + var shape = UI.get('shape', this.id); + var radius = UI.get('radius', this.id); + var rotateR = UI.get('rotateR', this.id); + var rotateB = UI.get('rotateB', this.id); + var rotateG = UI.get('rotateG', this.id); + var scatter = UI.get('scatter', this.id); + var blending = UI.get('blending', this.id); + var blendingMode = UI.get('blendingMode', this.id); + var greyscale = UI.get('greyscale', this.id); + + var scene = this.selected; + var postProcessing = scene.userData.postProcessing || {}; + + if (postProcessing.halftone) { + enabled.setValue(postProcessing.halftone.enabled); + shape.setValue(postProcessing.halftone.shape); + radius.setValue(postProcessing.halftone.radius); + rotateR.setValue(postProcessing.halftone.rotateR); + rotateB.setValue(postProcessing.halftone.rotateB); + rotateG.setValue(postProcessing.halftone.rotateG); + scatter.setValue(postProcessing.halftone.scatter); + blending.setValue(postProcessing.halftone.blending); + blendingMode.setValue(postProcessing.halftone.blendingMode); + greyscale.setValue(postProcessing.halftone.greyscale); + } +}; + +HalftoneComponent.prototype.onChange = function () { + var enabled = UI.get('enabled', this.id); + var shape = UI.get('shape', this.id); + var radius = UI.get('radius', this.id); + var rotateR = UI.get('rotateR', this.id); + var rotateB = UI.get('rotateB', this.id); + var rotateG = UI.get('rotateG', this.id); + var scatter = UI.get('scatter', this.id); + var blending = UI.get('blending', this.id); + var blendingMode = UI.get('blendingMode', this.id); + var greyscale = UI.get('greyscale', this.id); + + var scene = this.selected; + scene.userData.postProcessing = scene.userData.postProcessing || {}; + + Object.assign(scene.userData.postProcessing, { + halftone: { + enabled: enabled.getValue(), + shape: shape.getValue(), + radius: radius.getValue(), + rotateR: rotateR.getValue(), + rotateB: rotateB.getValue(), + rotateG: rotateG.getValue(), + scatter: scatter.getValue(), + blending: blending.getValue(), + blendingMode: blendingMode.getValue(), + greyscale: greyscale.getValue() + }, + }); +}; + +export default HalftoneComponent; \ No newline at end of file diff --git a/ShadowEditor.Web/src/editor/sidebar/PropertyPanel.js b/ShadowEditor.Web/src/editor/sidebar/PropertyPanel.js index 443b8e49..eed85adf 100644 --- a/ShadowEditor.Web/src/editor/sidebar/PropertyPanel.js +++ b/ShadowEditor.Web/src/editor/sidebar/PropertyPanel.js @@ -33,6 +33,7 @@ import AfterimageComponent from '../../component/postProcessing/AfterimageCompon import BokehComponent from '../../component/postProcessing/BokehComponent'; import FxaaComponent from '../../component/postProcessing/FxaaComponent'; import GlitchComponent from '../../component/postProcessing/GlitchComponent'; +import HalftoneComponent from '../../component/postProcessing/HalftoneComponent'; /** * 属性面板 @@ -71,6 +72,7 @@ PropertyPanel.prototype.render = function () { new BokehComponent({ app: this.app }), new FxaaComponent({ app: this.app }), new GlitchComponent({ app: this.app }), + new HalftoneComponent({ app: this.app }), new SkyComponent({ app: this.app }), new PerlinTerrainComponent({ app: this.app }), new AudioListenerComponent({ app: this.app }), diff --git a/ShadowEditor.Web/src/player/component/PlayerRenderer.js b/ShadowEditor.Web/src/player/component/PlayerRenderer.js index 1ee5f8a1..9bdeaa33 100644 --- a/ShadowEditor.Web/src/player/component/PlayerRenderer.js +++ b/ShadowEditor.Web/src/player/component/PlayerRenderer.js @@ -55,6 +55,24 @@ PlayerRenderer.prototype.create = function (scene, camera, renderer) { effects.push(effect); } + if (postProcessing.halftone && postProcessing.halftone.enabled) { + effect = new THREE.HalftonePass( + renderer.domElement.width, + renderer.domElement.height, { + shape: postProcessing.halftone.shape, + radius: postProcessing.halftone.radius, + rotateR: postProcessing.halftone.rotateR * (Math.PI / 180), + rotateB: postProcessing.halftone.rotateB * (Math.PI / 180), + rotateG: postProcessing.halftone.rotateG * (Math.PI / 180), + scatter: postProcessing.halftone.scatter, + blending: postProcessing.halftone.blending, + blendingMode: postProcessing.halftone.blendingMode, + greyscale: postProcessing.halftone.greyscale, + }); + composer.addPass(effect); + effects.push(effect); + } + if (postProcessing.bokeh && postProcessing.bokeh.enabled) { effect = new THREE.BokehPass(scene, camera, { focus: postProcessing.bokeh.focus, From 0d24e9d640f378d4b9cf4673862a0bddc34ca8f8 Mon Sep 17 00:00:00 2001 From: liteng <930372551@qq.com> Date: Tue, 25 Dec 2018 20:54:52 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=AF=B4=E6=98=8E?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 322e489e..f1f1905b 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ ## v0.1.1 即将更新 1. 修复mmd动画和音频不同步问题。支持多个mmd模型与模型动画、相机动画同步。 -2. 新增点阵化特效、颜色偏移特效、残影特效、背景虚化、快速近似抗锯齿(FXAA)、毛刺特效。 +2. 新增点阵化特效、颜色偏移特效、残影特效、背景虚化、快速近似抗锯齿(FXAA)、毛刺特效、半色调特效。 3. 新增粒子、预设体、角色面板。（暂未实现具体功能） ## 主要功能 From 19bd32f26e3d77996c9a51531e2c0c75c453d7d0 Mon Sep 17 00:00:00 2001 From: liteng <930372551@qq.com> Date: Wed, 26 Dec 2018 22:05:56 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E7=89=B9=E6=95=88=E5=8F=AF=E5=9C=A8?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E7=A7=8D=E5=8A=A8=E6=80=81=E9=A2=84?= =?UTF-8?q?=E8=A7=88=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../postProcessing/AfterimageComponent.js | 2 + .../postProcessing/BokehComponent.js | 2 + .../postProcessing/DotScreenComponent.js | 2 + .../component/postProcessing/FxaaComponent.js | 2 + .../postProcessing/GlitchComponent.js | 2 + .../postProcessing/HalftoneComponent.js | 2 + .../postProcessing/RgbShiftComponent.js | 2 + ShadowEditor.Web/src/effect/OutlineEffect.js | 125 ++++++++++++++---- ShadowEditor.Web/src/event/EventList.js | 1 + 9 files changed, 114 insertions(+), 26 deletions(-) diff --git a/ShadowEditor.Web/src/component/postProcessing/AfterimageComponent.js b/ShadowEditor.Web/src/component/postProcessing/AfterimageComponent.js index 299af11d..81f8f781 100644 --- a/ShadowEditor.Web/src/component/postProcessing/AfterimageComponent.js +++ b/ShadowEditor.Web/src/component/postProcessing/AfterimageComponent.js @@ -113,6 +113,8 @@ AfterimageComponent.prototype.onChange = function () { damp: damp.getValue() }, }); + + this.app.call(`postProcessingChanged`, this); }; export default AfterimageComponent; \ No newline at end of file diff --git a/ShadowEditor.Web/src/component/postProcessing/BokehComponent.js b/ShadowEditor.Web/src/component/postProcessing/BokehComponent.js index b8609f56..45872003 100644 --- a/ShadowEditor.Web/src/component/postProcessing/BokehComponent.js +++ b/ShadowEditor.Web/src/component/postProcessing/BokehComponent.js @@ -145,6 +145,8 @@ BokehComponent.prototype.onChange = function () { maxBlur: maxBlur.getValue(), }, }); + + this.app.call(`postProcessingChanged`, this); }; export default BokehComponent; \ No newline at end of file diff --git a/ShadowEditor.Web/src/component/postProcessing/DotScreenComponent.js b/ShadowEditor.Web/src/component/postProcessing/DotScreenComponent.js index dd194733..cefc86ac 100644 --- a/ShadowEditor.Web/src/component/postProcessing/DotScreenComponent.js +++ b/ShadowEditor.Web/src/component/postProcessing/DotScreenComponent.js @@ -113,6 +113,8 @@ DotScreenComponent.prototype.onChange = function () { scale: scale.getValue(), }, }); + + this.app.call(`postProcessingChanged`, this); }; export default DotScreenComponent; \ No newline at end of file diff --git a/ShadowEditor.Web/src/component/postProcessing/FxaaComponent.js b/ShadowEditor.Web/src/component/postProcessing/FxaaComponent.js index 03beb8ae..938e64ae 100644 --- a/ShadowEditor.Web/src/component/postProcessing/FxaaComponent.js +++ b/ShadowEditor.Web/src/component/postProcessing/FxaaComponent.js @@ -97,6 +97,8 @@ FxaaComponent.prototype.onChange = function () { enabled: enabled.getValue(), }, }); + + this.app.call(`postProcessingChanged`, this); }; export default FxaaComponent; \ No newline at end of file diff --git a/ShadowEditor.Web/src/component/postProcessing/GlitchComponent.js b/ShadowEditor.Web/src/component/postProcessing/GlitchComponent.js index 1c5a60a7..78bad0ce 100644 --- a/ShadowEditor.Web/src/component/postProcessing/GlitchComponent.js +++ b/ShadowEditor.Web/src/component/postProcessing/GlitchComponent.js @@ -112,6 +112,8 @@ GlitchComponent.prototype.onChange = function () { wild: wild.getValue() }, }); + + this.app.call(`postProcessingChanged`, this); }; export default GlitchComponent; \ No newline at end of file diff --git a/ShadowEditor.Web/src/component/postProcessing/HalftoneComponent.js b/ShadowEditor.Web/src/component/postProcessing/HalftoneComponent.js index cac5782e..ebf6eed1 100644 --- a/ShadowEditor.Web/src/component/postProcessing/HalftoneComponent.js +++ b/ShadowEditor.Web/src/component/postProcessing/HalftoneComponent.js @@ -256,6 +256,8 @@ HalftoneComponent.prototype.onChange = function () { greyscale: greyscale.getValue() }, }); + + this.app.call(`postProcessingChanged`, this); }; export default HalftoneComponent; \ No newline at end of file diff --git a/ShadowEditor.Web/src/component/postProcessing/RgbShiftComponent.js b/ShadowEditor.Web/src/component/postProcessing/RgbShiftComponent.js index 141f63bd..6970ad1f 100644 --- a/ShadowEditor.Web/src/component/postProcessing/RgbShiftComponent.js +++ b/ShadowEditor.Web/src/component/postProcessing/RgbShiftComponent.js @@ -113,6 +113,8 @@ RgbShiftComponent.prototype.onChange = function () { amount: amount.getValue() }, }); + + this.app.call(`postProcessingChanged`, this); }; export default RgbShiftComponent; \ No newline at end of file diff --git a/ShadowEditor.Web/src/effect/OutlineEffect.js b/ShadowEditor.Web/src/effect/OutlineEffect.js index 524d3f6f..b9bfc516 100644 --- a/ShadowEditor.Web/src/effect/OutlineEffect.js +++ b/ShadowEditor.Web/src/effect/OutlineEffect.js @@ -10,6 +10,7 @@ function OutlineEffect(app) { this.init(); this.app.on(`sceneLoaded.${this.id}`, this.onSceneLoaded.bind(this)); + this.app.on(`postProcessingChanged.${this.id}`, this.onPostProcessingChanged.bind(this)); }; OutlineEffect.prototype = Object.create(BaseEffect.prototype); @@ -36,39 +37,107 @@ OutlineEffect.prototype.init = function () { } var composer = new THREE.EffectComposer(renderer); + composer.passes.length = 0; - var renderPass1 = new THREE.RenderPass(scene, camera); - renderPass1.clear = true; - composer.addPass(renderPass1); + var effects = []; + var postProcessing = this.app.editor.scene.userData.postProcessing || {}; - var renderPass2 = new THREE.RenderPass(sceneHelpers, camera); - renderPass2.clear = false; - composer.addPass(renderPass2); + var effect = new THREE.RenderPass(scene, camera); + effect.clear = true; + composer.addPass(effect); + effects.push(effect); - var outlinePass = new THREE.OutlinePass(new THREE.Vector2(renderer.domElement.width, renderer.domElement.height), scene, camera); - outlinePass.edgeStrength = params.edgeStrength; - outlinePass.edgeGlow = params.edgeGlow; - outlinePass.edgeThickness = params.edgeThickness; - outlinePass.pulsePeriod = params.pulsePeriod; - // outlinePass.usePatternTexture = true; - outlinePass.visibleEdgeColor.set(params.visibleEdgeColor); - outlinePass.hiddenEdgeColor.set(params.hiddenEdgeColor); - composer.addPass(outlinePass); + effect = new THREE.RenderPass(sceneHelpers, camera); + effect.clear = false; + composer.addPass(effect); + effects.push(effect); - var loader = new THREE.TextureLoader(); + effect = new THREE.OutlinePass(new THREE.Vector2(renderer.domElement.width, renderer.domElement.height), scene, camera); + effect.edgeStrength = 10; + effect.edgeGlow = 0.4; + effect.edgeThickness = 1.8; + effect.pulsePeriod = 2; + effect.visibleEdgeColor.set('#ffffff'); + effect.hiddenEdgeColor.set('#190a05'); + composer.addPass(effect); + effects.push(effect); - // loader.load('assets/textures/tri_pattern.jpg', texture => { - // outlinePass.patternTexture = texture; - // texture.wrapS = THREE.RepeatWrapping; - // texture.wrapT = THREE.RepeatWrapping; - // }); + this.outlinePass = effect; - var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader); - effectFXAA.uniforms['resolution'].value.set(1 / renderer.domElement.width, 1 / renderer.domElement.height); - effectFXAA.renderToScreen = true; - composer.addPass(effectFXAA); + // 后期处理 + if (postProcessing.fxaa && postProcessing.fxaa.enabled) { + effect = new THREE.ShaderPass(THREE.FXAAShader); + effect.uniforms['resolution'].value.set(1 / renderer.domElement.width, 1 / renderer.domElement.height); + composer.addPass(effect); + effects.push(effect); + } + + if (postProcessing.dotScreen && postProcessing.dotScreen.enabled) { + effect = new THREE.ShaderPass(THREE.DotScreenShader); + effect.uniforms['scale'].value = postProcessing.dotScreen.scale; + composer.addPass(effect); + effects.push(effect); + } + + if (postProcessing.rgbShift && postProcessing.rgbShift.enabled) { + effect = new THREE.ShaderPass(THREE.RGBShiftShader); + effect.uniforms['amount'].value = postProcessing.rgbShift.amount; + composer.addPass(effect); + effects.push(effect); + } + + if (postProcessing.afterimage && postProcessing.afterimage.enabled) { + effect = new THREE.AfterimagePass(); + effect.uniforms['damp'].value = postProcessing.afterimage.damp; + composer.addPass(effect); + effects.push(effect); + } + + if (postProcessing.halftone && postProcessing.halftone.enabled) { + effect = new THREE.HalftonePass( + renderer.domElement.width, + renderer.domElement.height, { + shape: postProcessing.halftone.shape, + radius: postProcessing.halftone.radius, + rotateR: postProcessing.halftone.rotateR * (Math.PI / 180), + rotateB: postProcessing.halftone.rotateB * (Math.PI / 180), + rotateG: postProcessing.halftone.rotateG * (Math.PI / 180), + scatter: postProcessing.halftone.scatter, + blending: postProcessing.halftone.blending, + blendingMode: postProcessing.halftone.blendingMode, + greyscale: postProcessing.halftone.greyscale, + }); + composer.addPass(effect); + effects.push(effect); + } + + if (postProcessing.bokeh && postProcessing.bokeh.enabled) { + effect = new THREE.BokehPass(scene, camera, { + focus: postProcessing.bokeh.focus, + aperture: postProcessing.bokeh.aperture / 100000, + maxblur: postProcessing.bokeh.maxBlur, + width: renderer.domElement.width, + height: renderer.domElement.height + }); + composer.addPass(effect); + effects.push(effect); + } + + if (postProcessing.glitch && postProcessing.glitch.enabled) { + effect = new THREE.GlitchPass(); + effect.goWild = postProcessing.glitch.wild; + composer.addPass(effect); + effects.push(effect); + } + + for (var i = 0; i < effects.length; i++) { + if (i === effects.length - 1) { + effects[i].renderToScreen = true; + } else { + effects[i].renderToScreen = false; + } + } - this.outlinePass = outlinePass; this.composer = composer; }; @@ -86,4 +155,8 @@ OutlineEffect.prototype.onSceneLoaded = function () { this.init(); }; +OutlineEffect.prototype.onPostProcessingChanged = function () { + this.init(); +}; + export default OutlineEffect; \ No newline at end of file diff --git a/ShadowEditor.Web/src/event/EventList.js b/ShadowEditor.Web/src/event/EventList.js index c65b28c7..19a92eaf 100644 --- a/ShadowEditor.Web/src/event/EventList.js +++ b/ShadowEditor.Web/src/event/EventList.js @@ -72,6 +72,7 @@ var EventList = [ 'refreshScriptEditor', // 刷新脚本编辑器事件 'sceneLoaded', // 场景载入 + 'postProcessingChanged', // 后期处理设置改变 // 场景编辑区 'transformControlsChange', // 变形控件改变