diff --git a/ShadowEditor.Web/src/editor2/component/postProcessing/AfterimageComponent.jsx b/ShadowEditor.Web/src/editor2/component/postProcessing/AfterimageComponent.jsx
index 15bbe594..add07500 100644
--- a/ShadowEditor.Web/src/editor2/component/postProcessing/AfterimageComponent.jsx
+++ b/ShadowEditor.Web/src/editor2/component/postProcessing/AfterimageComponent.jsx
@@ -38,8 +38,8 @@ class AfterimageComponent extends React.Component {
     }
 
     componentDidMount() {
-        app.on(`objectSelected.AfterimageComponent`, this.handleUpdate.bind(this));
-        app.on(`objectChanged.AfterimageComponent`, this.handleUpdate.bind(this));
+        app.on(`objectSelected.AfterimageComponent`, this.handleUpdate);
+        app.on(`objectChanged.AfterimageComponent`, this.handleUpdate);
     }
 
     handleExpand(expanded) {
diff --git a/ShadowEditor.Web/src/editor2/component/postProcessing/BokehComponent.jsx b/ShadowEditor.Web/src/editor2/component/postProcessing/BokehComponent.jsx
index 9a3acd13..c0d12fea 100644
--- a/ShadowEditor.Web/src/editor2/component/postProcessing/BokehComponent.jsx
+++ b/ShadowEditor.Web/src/editor2/component/postProcessing/BokehComponent.jsx
@@ -42,8 +42,8 @@ class BokehComponent extends React.Component {
     }
 
     componentDidMount() {
-        app.on(`objectSelected.BokehComponent`, this.handleUpdate.bind(this));
-        app.on(`objectChanged.BokehComponent`, this.handleUpdate.bind(this));
+        app.on(`objectSelected.BokehComponent`, this.handleUpdate);
+        app.on(`objectChanged.BokehComponent`, this.handleUpdate);
     }
 
     handleExpand(expanded) {
diff --git a/ShadowEditor.Web/src/editor2/component/postProcessing/DotScreenComponent.jsx b/ShadowEditor.Web/src/editor2/component/postProcessing/DotScreenComponent.jsx
index 31fc02f4..7795ba5c 100644
--- a/ShadowEditor.Web/src/editor2/component/postProcessing/DotScreenComponent.jsx
+++ b/ShadowEditor.Web/src/editor2/component/postProcessing/DotScreenComponent.jsx
@@ -38,8 +38,8 @@ class DotScreenComponent extends React.Component {
     }
 
     componentDidMount() {
-        app.on(`objectSelected.DotScreenComponent`, this.handleUpdate.bind(this));
-        app.on(`objectChanged.DotScreenComponent`, this.handleUpdate.bind(this));
+        app.on(`objectSelected.DotScreenComponent`, this.handleUpdate);
+        app.on(`objectChanged.DotScreenComponent`, this.handleUpdate);
     }
 
     handleExpand(expanded) {
diff --git a/ShadowEditor.Web/src/editor2/component/postProcessing/FxaaComponent.jsx b/ShadowEditor.Web/src/editor2/component/postProcessing/FxaaComponent.jsx
index 82401b08..c9f1ed6a 100644
--- a/ShadowEditor.Web/src/editor2/component/postProcessing/FxaaComponent.jsx
+++ b/ShadowEditor.Web/src/editor2/component/postProcessing/FxaaComponent.jsx
@@ -36,8 +36,8 @@ class FxaaComponent extends React.Component {
     }
 
     componentDidMount() {
-        app.on(`objectSelected.FxaaComponent`, this.handleUpdate.bind(this));
-        app.on(`objectChanged.FxaaComponent`, this.handleUpdate.bind(this));
+        app.on(`objectSelected.FxaaComponent`, this.handleUpdate);
+        app.on(`objectChanged.FxaaComponent`, this.handleUpdate);
     }
 
     handleExpand(expanded) {
diff --git a/ShadowEditor.Web/src/editor2/component/postProcessing/GlitchComponent.jsx b/ShadowEditor.Web/src/editor2/component/postProcessing/GlitchComponent.jsx
index b3d5d473..c931f7e7 100644
--- a/ShadowEditor.Web/src/editor2/component/postProcessing/GlitchComponent.jsx
+++ b/ShadowEditor.Web/src/editor2/component/postProcessing/GlitchComponent.jsx
@@ -38,8 +38,8 @@ class GlitchComponent extends React.Component {
     }
 
     componentDidMount() {
-        app.on(`objectSelected.GlitchComponent`, this.handleUpdate.bind(this));
-        app.on(`objectChanged.GlitchComponent`, this.handleUpdate.bind(this));
+        app.on(`objectSelected.GlitchComponent`, this.handleUpdate);
+        app.on(`objectChanged.GlitchComponent`, this.handleUpdate);
     }
 
     handleExpand(expanded) {
diff --git a/ShadowEditor.Web/src/editor2/component/postProcessing/HalftoneComponent.jsx b/ShadowEditor.Web/src/editor2/component/postProcessing/HalftoneComponent.jsx
index 1cd14627..89513508 100644
--- a/ShadowEditor.Web/src/editor2/component/postProcessing/HalftoneComponent.jsx
+++ b/ShadowEditor.Web/src/editor2/component/postProcessing/HalftoneComponent.jsx
@@ -69,8 +69,8 @@ class HalftoneComponent extends React.Component {
     }
 
     componentDidMount() {
-        app.on(`objectSelected.HalftoneComponent`, this.handleUpdate.bind(this));
-        app.on(`objectChanged.HalftoneComponent`, this.handleUpdate.bind(this));
+        app.on(`objectSelected.HalftoneComponent`, this.handleUpdate);
+        app.on(`objectChanged.HalftoneComponent`, this.handleUpdate);
     }
 
     handleExpand(expanded) {
diff --git a/ShadowEditor.Web/src/editor2/component/postProcessing/PixelComponent.jsx b/ShadowEditor.Web/src/editor2/component/postProcessing/PixelComponent.jsx
index e69de29b..6009bfe4 100644
--- a/ShadowEditor.Web/src/editor2/component/postProcessing/PixelComponent.jsx
+++ b/ShadowEditor.Web/src/editor2/component/postProcessing/PixelComponent.jsx
@@ -0,0 +1,103 @@
+import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, NumberProperty, IntegerProperty } from '../../../third_party';
+import SetGeometryCommand from '../../../command/SetGeometryCommand';
+
+/**
+ * 像素特效组件
+ * @author tengge / https://github.com/tengge1
+ */
+class PixelComponent extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.selected = null;
+
+        this.state = {
+            show: false,
+            expanded: true,
+            enabled: false,
+            pixelSize: 8,
+        };
+
+        this.handleExpand = this.handleExpand.bind(this);
+        this.handleUpdate = this.handleUpdate.bind(this);
+
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    render() {
+        const { show, expanded, enabled, pixelSize } = this.state;
+
+        if (!show) {
+            return null;
+        }
+
+        return <PropertyGroup title={L_PIXEL_EFFECT} show={show} expanded={expanded} onExpand={this.handleExpand}>
+            <CheckBoxProperty label={L_ENABLE_STATE} name={'enabled'} value={enabled} onChange={this.handleChange}></CheckBoxProperty>
+            <NumberProperty label={L_PIXEL_SIZE} name={'pixelSize'} value={pixelSize} onChange={this.handleChange}></NumberProperty>
+        </PropertyGroup>;
+    }
+
+    componentDidMount() {
+        app.on(`objectSelected.PixelComponent`, this.handleUpdate);
+        app.on(`objectChanged.PixelComponent`, this.handleUpdate);
+    }
+
+    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.pixel ? postProcessing.pixel.enabled : false,
+            pixelSize: postProcessing.pixel ? postProcessing.pixel.pixelSize : this.state.pixelSize,
+        };
+
+        this.setState(state);
+    }
+
+    handleChange(value, name) {
+        this.setState({
+            [name]: value,
+        });
+
+        if (value === null) {
+            return;
+        }
+
+        const { enabled, pixelSize } = Object.assign({}, this.state, {
+            [name]: value,
+        });
+
+        let scene = this.selected;
+
+        scene.userData.postProcessing = scene.userData.postProcessing || {};
+
+        Object.assign(scene.userData.postProcessing, {
+            halftone: {
+                enabled,
+                pixelSize,
+            },
+        });
+
+        app.call(`postProcessingChanged`, this);
+    }
+}
+
+export default PixelComponent;
\ No newline at end of file