GlitchComponent

ShadowEditor.Web/src/editor2/component/postProcessing/FxaaComponent.jsx

@@ -24,7 +24,7 @@ class FxaaComponent extends React.Component {
     }
 
     render() {
-        const { show, expanded, enabled, scale } = this.state;
+        const { show, expanded, enabled } = this.state;
 
         if (!show) {
             return null;

ShadowEditor.Web/src/editor2/component/postProcessing/GlitchComponent.jsx

@@ -0,0 +1,103 @@
+import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, NumberProperty, IntegerProperty } from '../../../third_party';
+import SetGeometryCommand from '../../../command/SetGeometryCommand';
+
+/**
+ * 快速近似抗锯齿(FXAA)组件
+ * @author tengge / https://github.com/tengge1
+ */
+class GlitchComponent extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.selected = null;
+
+        this.state = {
+            show: false,
+            expanded: true,
+            enabled: false,
+            wild: false,
+        };
+
+        this.handleExpand = this.handleExpand.bind(this);
+        this.handleUpdate = this.handleUpdate.bind(this);
+
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    render() {
+        const { show, expanded, enabled, wild } = this.state;
+
+        if (!show) {
+            return null;
+        }
+
+        return <PropertyGroup title={L_GLITCH_EFFECT} show={show} expanded={expanded} onExpand={this.handleExpand}>
+            <CheckBoxProperty label={L_ENABLE_STATE} name={'enabled'} value={enabled} onChange={this.handleChange}></CheckBoxProperty>
+            <CheckBoxProperty label={L_WILD_MODE} name={'wild'} value={wild} onChange={this.handleChange}></CheckBoxProperty>
+        </PropertyGroup>;
+    }
+
+    componentDidMount() {
+        app.on(`objectSelected.GlitchComponent`, this.handleUpdate.bind(this));
+        app.on(`objectChanged.GlitchComponent`, this.handleUpdate.bind(this));
+    }
+
+    handleExpand(expanded) {
+        this.setState({
+            expanded,
+        });
+    }
+
+    handleUpdate() {
+        const editor = app.editor;
+
+        if (!editor.selected || editor.selected !== editor.scene) {
+            this.setState({
+                show: false,
+            });
+            return;
+        }
+
+        this.selected = editor.selected;
+
+        let scene = this.selected;
+        let postProcessing = scene.userData.postProcessing || {};
+
+        let state = {
+            show: true,
+            enabled: postProcessing.glitch ? postProcessing.glitch.enabled : false,
+            wild: postProcessing.glitch ? postProcessing.glitch.wild : false,
+        };
+
+        this.setState(state);
+    }
+
+    handleChange(value, name) {
+        this.setState({
+            [name]: value,
+        });
+
+        if (value === null) {
+            return;
+        }
+
+        const { enabled, wild } = Object.assign({}, this.state, {
+            [name]: value,
+        });
+
+        let scene = this.selected;
+
+        scene.userData.postProcessing = scene.userData.postProcessing || {};
+
+        Object.assign(scene.userData.postProcessing, {
+            glitch: {
+                enabled,
+                wild,
+            },
+        });
+
+        app.call(`postProcessingChanged`, this);
+    }
+}
+
+export default GlitchComponent;

ShadowEditor.Web/src/editor2/sidebar/PropertyPanel.jsx

@@ -31,6 +31,7 @@ import AfterimageComponent from '../component/postProcessing/AfterimageComponent
 import BokehComponent from '../component/postProcessing/BokehComponent.jsx';
 import DotScreenComponent from '../component/postProcessing/DotScreenComponent.jsx';
 import FxaaComponent from '../component/postProcessing/FxaaComponent.jsx';
+import GlitchComponent from '../component/postProcessing/GlitchComponent.jsx';
 
 /**
  * 属性面板
@@ -74,6 +75,7 @@ class PropertyPanel extends React.Component {
             <BokehComponent></BokehComponent>
             <DotScreenComponent></DotScreenComponent>
             <FxaaComponent></FxaaComponent>
+            <GlitchComponent></GlitchComponent>
         </PropertyGrid>;
     }
 }

ShadowEditor.Web/src/render/EffectRenderer.js

@@ -98,7 +98,7 @@ EffectRenderer.prototype.create = async function (scenes, camera, renderer) {
 
     // 毛刺特效
     if (postProcessing.glitch && postProcessing.glitch.enabled) {
-        await this.require(['DigitalGlitch', 'GlitchPass']);
+        await this.require(['CopyShader', 'DigitalGlitch', 'EffectComposer', 'RenderPass', 'ShaderPass', 'GlitchPass']);
     }
 
     this._createPostProcessing(scenes, camera, renderer);