diff --git a/ShadowEditor.Web/src/package/PackageList.js b/ShadowEditor.Web/src/package/PackageList.js
index 5359865b..d1fe1894 100644
--- a/ShadowEditor.Web/src/package/PackageList.js
+++ b/ShadowEditor.Web/src/package/PackageList.js
@@ -261,6 +261,126 @@ const PackageList = [{
     assets: [
         'assets/js/libs/pako.js'
     ]
+}, {
+    name: 'NormalMapShader',
+    assets: [
+        'assets/js/shaders/NormalMapShader.js'
+    ]
+}, {
+    name: 'FXAAShader',
+    assets: [
+        'assets/js/shaders/FXAAShader.js'
+    ]
+}, {
+    name: 'DotScreenShader',
+    assets: [
+        'assets/js/shaders/DotScreenShader.js'
+    ]
+}, {
+    name: 'RGBShiftShader',
+    assets: [
+        'assets/js/shaders/RGBShiftShader.js'
+    ]
+}, {
+    name: 'AfterimageShader',
+    assets: [
+        'assets/js/shaders/AfterimageShader.js'
+    ]
+}, {
+    name: 'BokehShader',
+    assets: [
+        'assets/js/shaders/BokehShader.js'
+    ]
+}, {
+    name: 'DigitalGlitch',
+    assets: [
+        'assets/js/shaders/DigitalGlitch.js'
+    ]
+}, {
+    name: 'HalftoneShader',
+    assets: [
+        'assets/js/shaders/HalftoneShader.js'
+    ]
+}, {
+    name: 'DepthLimitedBlurShader',
+    assets: [
+        'assets/js/shaders/DepthLimitedBlurShader.js'
+    ]
+}, {
+    name: 'UnpackDepthRGBAShader',
+    assets: [
+        'assets/js/shaders/UnpackDepthRGBAShader.js'
+    ]
+}, {
+    name: 'PixelShader',
+    assets: [
+        'assets/js/shaders/PixelShader.js'
+    ]
+}, {
+    name: 'SAOShader',
+    assets: [
+        'assets/js/shaders/SAOShader.js'
+    ]
+}, {
+    name: 'SMAAShader',
+    assets: [
+        'assets/js/shaders/SMAAShader.js'
+    ]
+}, {
+    name: 'SSAOShader',
+    assets: [
+        'assets/js/shaders/SSAOShader.js'
+    ]
+}, {
+    name: 'MaskPass',
+    assets: [
+        'assets/js/postprocessing/MaskPass.js'
+    ]
+}, {
+    name: 'AfterimagePass',
+    assets: [
+        'assets/js/postprocessing/AfterimagePass.js'
+    ]
+}, {
+    name: 'BokehPass',
+    assets: [
+        'assets/js/postprocessing/BokehPass.js'
+    ]
+}, {
+    name: 'GlitchPass',
+    assets: [
+        'assets/js/postprocessing/GlitchPass.js'
+    ]
+}, {
+    name: 'HalftonePass',
+    assets: [
+        'assets/js/postprocessing/HalftonePass.js'
+    ]
+}, {
+    name: 'SSAARenderPass',
+    assets: [
+        'assets/js/postprocessing/SSAARenderPass.js'
+    ]
+}, {
+    name: 'SAOPass',
+    assets: [
+        'assets/js/postprocessing/SAOPass.js'
+    ]
+}, {
+    name: 'SMAAPass',
+    assets: [
+        'assets/js/postprocessing/SMAAPass.js'
+    ]
+}, {
+    name: 'SSAOPass',
+    assets: [
+        'assets/js/postprocessing/SSAOPass.js'
+    ]
+}, {
+    name: 'TAARenderPass',
+    assets: [
+        'assets/js/postprocessing/TAARenderPass.js'
+    ]
 }];
 
 export default PackageList
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/render/BaseRenderer.js b/ShadowEditor.Web/src/render/BaseRenderer.js
new file mode 100644
index 00000000..63e18321
--- /dev/null
+++ b/ShadowEditor.Web/src/render/BaseRenderer.js
@@ -0,0 +1,25 @@
+var ID = -1;
+
+/**
+ * 基本渲染器
+ * @author tengge / https://github.com/tengge1
+ */
+function BaseRenderer() {
+    this.id = `${this.constructor.name}${ID--}`;
+}
+
+BaseRenderer.prototype.create = function () {
+    return new Promise(resolve => {
+        resolve();
+    });
+};
+
+BaseRenderer.prototype.render = function (scene, camera, renderer) {
+
+};
+
+BaseRenderer.prototype.dispose = function () {
+
+};
+
+export default BaseRenderer;
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/render/EditorRenderer.js b/ShadowEditor.Web/src/render/EditorRenderer.js
new file mode 100644
index 00000000..d088e720
--- /dev/null
+++ b/ShadowEditor.Web/src/render/EditorRenderer.js
@@ -0,0 +1,27 @@
+import BaseRenderer from './BaseRenderer';
+
+/**
+ * 编辑器渲染器
+ */
+function EditorRenderer() {
+    BaseRenderer.call(this);
+};
+
+EditorRenderer.prototype = Object.create(BaseRenderer.prototype);
+EditorRenderer.prototype.constructor = EditorRenderer;
+
+EditorRenderer.prototype.create = function () {
+    return new Promise(resolve => {
+        resolve();
+    });
+};
+
+EditorRenderer.prototype.render = function (scene, camera, renderer) {
+
+};
+
+EditorRenderer.prototype.dispose = function () {
+
+};
+
+export default EditorRenderer;
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/render/EffectRenderer.js b/ShadowEditor.Web/src/render/EffectRenderer.js
new file mode 100644
index 00000000..d8e04509
--- /dev/null
+++ b/ShadowEditor.Web/src/render/EffectRenderer.js
@@ -0,0 +1,27 @@
+import BaseRenderer from './BaseRenderer';
+
+/**
+ * 特效渲染器
+ */
+function EffectRenderer() {
+    BaseRenderer.call(this);
+};
+
+EffectRenderer.prototype = Object.create(BaseRenderer.prototype);
+EffectRenderer.prototype.constructor = EffectRenderer;
+
+EffectRenderer.prototype.create = function () {
+    return new Promise(resolve => {
+        resolve();
+    });
+};
+
+EffectRenderer.prototype.render = function (scene, camera, renderer) {
+
+};
+
+EffectRenderer.prototype.dispose = function () {
+
+};
+
+export default EffectRenderer;
\ No newline at end of file