diff --git a/ShadowEditor.Web/src/editor2/component/postProcessing/FxaaComponent.jsx b/ShadowEditor.Web/src/editor2/component/postProcessing/FxaaComponent.jsx
index d30ef1af..82401b08 100644
--- a/ShadowEditor.Web/src/editor2/component/postProcessing/FxaaComponent.jsx
+++ b/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;
diff --git a/ShadowEditor.Web/src/editor2/component/postProcessing/GlitchComponent.jsx b/ShadowEditor.Web/src/editor2/component/postProcessing/GlitchComponent.jsx
index e69de29b..e22a7a9c 100644
--- a/ShadowEditor.Web/src/editor2/component/postProcessing/GlitchComponent.jsx
+++ b/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
+
+
+ ;
+ }
+
+ 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;
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/editor2/sidebar/PropertyPanel.jsx b/ShadowEditor.Web/src/editor2/sidebar/PropertyPanel.jsx
index b0462946..7392982d 100644
--- a/ShadowEditor.Web/src/editor2/sidebar/PropertyPanel.jsx
+++ b/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 {
+
;
}
}
diff --git a/ShadowEditor.Web/src/render/EffectRenderer.js b/ShadowEditor.Web/src/render/EffectRenderer.js
index bb16bce5..5df838b4 100644
--- a/ShadowEditor.Web/src/render/EffectRenderer.js
+++ b/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);