<NME> FastGaussianBlurShader.js
<BEF> ADDFILE
<MSG> add example: fast gaussian blur

<DFF> @@ -0,0 +1,92 @@
+/**
+ * @author shawn0326 / https://github.com/shawn0326
+ *
+ * https://github.com/Jam3/glsl-fast-gaussian-blur
+ * http://rastergrid.com/blog/2010/09/efficient-gaussian-blur-with-linear-sampling/
+ *
+ */
+
+zen3d.FastGaussianBlurShader = {
+
+	defines: {
+		"SAMPLERS": 9
+	},
+
+	uniforms: {
+		"tDiffuse": null,
+		"resolution": [1 / 1024, 1 / 512],
+		"direction": [1, 0]
+	},
+
+	vertexShader: [
+
+		"attribute vec3 a_Position;",
+		"attribute vec2 a_Uv;",
+
+		"uniform mat4 u_Projection;",
+		"uniform mat4 u_View;",
+		"uniform mat4 u_Model;",
+
+		"varying vec2 v_Uv;",
+
+		"void main() {",
+
+		"v_Uv = a_Uv;",
+		"gl_Position = u_Projection * u_View * u_Model * vec4( a_Position, 1.0 );",
+
+		"}"
+
+	].join("\n"),
+
+	fragmentShader: `
+        uniform sampler2D tDiffuse;
+        uniform vec2 resolution;
+        uniform vec2 direction;
+        varying vec2 v_Uv;
+
+        #if (SAMPLERS == 5) 
+            vec4 blur(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
+                vec4 color = vec4(0.0);
+                vec2 off1 = vec2(1.3333333333333333) * direction;
+                color += texture2D(image, uv) * 0.29411764705882354;
+                color += texture2D(image, uv + (off1 * resolution)) * 0.35294117647058826;
+                color += texture2D(image, uv - (off1 * resolution)) * 0.35294117647058826;
+                return color; 
+            }
+        #endif
+        #if (SAMPLERS == 9)
+            vec4 blur(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
+                vec4 color = vec4(0.0);
+                vec2 off1 = vec2(1.3846153846) * direction;
+                vec2 off2 = vec2(3.2307692308) * direction;
+                color += texture2D(image, uv) * 0.2270270270;
+                color += texture2D(image, uv + (off1 * resolution)) * 0.3162162162;
+                color += texture2D(image, uv - (off1 * resolution)) * 0.3162162162;
+                color += texture2D(image, uv + (off2 * resolution)) * 0.0702702703;
+                color += texture2D(image, uv - (off2 * resolution)) * 0.0702702703;
+                return color;
+            }
+        #endif
+        #if (SAMPLERS == 13)
+            vec4 blur(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
+                vec4 color = vec4(0.0);
+                vec2 off1 = vec2(1.411764705882353) * direction;
+                vec2 off2 = vec2(3.2941176470588234) * direction;
+                vec2 off3 = vec2(5.176470588235294) * direction;
+                color += texture2D(image, uv) * 0.1964825501511404;
+                color += texture2D(image, uv + (off1 * resolution)) * 0.2969069646728344;
+                color += texture2D(image, uv - (off1 * resolution)) * 0.2969069646728344;
+                color += texture2D(image, uv + (off2 * resolution)) * 0.09447039785044732;
+                color += texture2D(image, uv - (off2 * resolution)) * 0.09447039785044732;
+                color += texture2D(image, uv + (off3 * resolution)) * 0.010381362401148057;
+                color += texture2D(image, uv - (off3 * resolution)) * 0.010381362401148057;
+                return color;
+            }
+        #endif
+
+        void main() {
+            gl_FragColor = blur(tDiffuse, v_Uv, resolution, direction);
+        }
+    `
+
+};
\ No newline at end of file

{'commit': 'diff --git a/examples/custompass_blur.html b/examples/custompass_blur.html\nnew file mode 100644\nindex 00000000..7c4ad6b2\n--- /dev/null\n+++ b/examples/custompass_blur.html\n@@ -0,0 +1,176 @@\n+<!DOCTYPE html>\n+<html>\n+<head>\n+\t<meta charset="utf-8">\n+\t<title>zen3d - custom pass blur</title>\n+\t<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">\n+\t<style>\n+\t\tbody {\n+\t\t\tfont-family: Monospace;\n+\t\t\tbackground-color: #f0f0f0;\n+\t\t\tmargin: 0px;\n+\t\t\toverflow: hidden;\n+\t\t}\n+        #info {\n+\t\t\tposition: absolute;\n+\t\t\ttop: 0px;\n+\t\t\twidth: 100%;\n+\t\t\tpadding: 5px;\n+\t\t\ttext-align:center;\n+\t\t\tcolor: white;\n+\t\t}\n+\t</style>\n+\t<script src="../build/zen3d.js"></script>\n+\t<script src="./files/dat.gui.min.js"></script>\n+\t<script src="./js/loaders/AssimpJsonLoader.js"></script>\n+\t<script src="./js/shaders/CopyShader.js"></script>\n+\t<script src="./js/shaders/FastGaussianBlurShader.js"></script>\n+\t<script src="./js/shaders/FXAAShader.js"></script>\n+</head>\n+<body>\n+\n+    <div id="info">\n+        <a href="http://github.com/shawn0326/zen-3d" target="_blank">zen3d</a> - custom pass blur\n+    </div>\n+\n+\t<script>\n+\n+\t\t(function() {\n+\t\t\tvar width = window.innerWidth || 2;\n+\t        var height = window.innerHeight || 2;\n+\n+\t        var canvas = document.createElement( \'canvas\' );\n+\t        canvas.width = width;\n+\t        canvas.height = height;\n+\t\t\tdocument.body.appendChild( canvas );\n+\n+\t        var scene = new zen3d.Scene();\n+\n+\t\t\tvar jeep = "resources/models/assimp/jeep/jeep.assimp.json";\n+\t\t\tvar interior = "resources/models/assimp/interior/interior.assimp.json";\n+\n+\t\t\tvar loader1 = new zen3d.AssimpJsonLoader();\n+\t\t\tloader1.load(jeep, function(object) {\n+\t\t\t\tobject.scale.set(0.4, 0.4, 0.4);\n+\t\t\t\tobject.traverse(function(obj) {\n+\t\t\t\t\tif(obj.type === zen3d.OBJECT_TYPE.MESH) {\n+\t\t\t\t\t\tobj.castShadow = true;\n+\t\t\t\t\t}\n+\t\t\t\t});\n+\t\t\t\tscene.add(object);\n+\t\t\t});\n+\n+\t\t\tvar loader2 = new zen3d.AssimpJsonLoader();\n+\t\t\tloader2.load(interior, function(object) {\n+\t\t\t\tobject.traverse(function(obj) {\n+\t\t\t\t\tif(obj.type === zen3d.OBJECT_TYPE.MESH) {\n+\t\t\t\t\t\tobj.receiveShadow = true;\n+\t\t\t\t\t}\n+\t\t\t\t});\n+\t\t\t\tscene.add(object);\n+\t\t\t});\n+\n+\t\t\tvar ambientLight = new zen3d.AmbientLight(0xffffff);\n+\t        scene.add(ambientLight);\n+\n+\t        var spotLight = new zen3d.SpotLight(0xffffff, 1.5, 30, Math.PI / 5, 0.3);\n+\t        spotLight.euler.set(Math.PI / 2, 0, 0);\n+\t        spotLight.position.set(0, 10, 0);\n+\t\t\tspotLight.castShadow = true;\n+\t        scene.add(spotLight);\n+\n+\t\t\tvar camera = new zen3d.Camera();\n+\t\t\tcamera.gammaInput = true;\n+\t\t\tcamera.gammaOutput = true;\n+\t        camera.position.set(0, 4, 10);\n+\t        camera.lookAt(new zen3d.Vector3(0, 0, 0), new zen3d.Vector3(0, 1, 0));\n+\t        camera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);\n+\t        scene.add(camera);\n+\n+\t\t\t// custom pass\n+\t\t\tvar backRenderTarget = new zen3d.RenderTargetBack(canvas);\n+\t\t\tvar tempRenderTarget1 = new zen3d.RenderTarget2D(width, height);\n+\t\t\ttempRenderTarget1.texture.minFilter = zen3d.WEBGL_TEXTURE_FILTER.LINEAR;\n+        \ttempRenderTarget1.texture.magFilter = zen3d.WEBGL_TEXTURE_FILTER.LINEAR;\n+\t\t\tvar tempRenderTarget2 = new zen3d.RenderTarget2D(width, height);\n+\t\t\ttempRenderTarget2.texture.minFilter = zen3d.WEBGL_TEXTURE_FILTER.LINEAR;\n+        \ttempRenderTarget2.texture.magFilter = zen3d.WEBGL_TEXTURE_FILTER.LINEAR;\n+        \n+\t\t\tvar gl = canvas.getContext("webgl", {\n+\t\t\t\tantialias: true, // antialias\n+\t\t\t\talpha: false, // effect performance, default false\n+\t\t\t\t// premultipliedAlpha: false, // effect performance, default false\n+\t\t\t\tstencil: true\n+\t\t\t});\n+\t\t\tvar glCore = new zen3d.WebGLCore(gl);\n+\n+\t\t\tvar shadowMapPass = new zen3d.ShadowMapPass();\n+\t\t\tvar blurPass = new zen3d.ShaderPostPass(zen3d.FastGaussianBlurShader);\n+\t\t\tblurPass.uniforms["resolution"] = [1 / width, 1 / height];\n+\n+\t\t\t// gui\n+\t\t\tvar params = { radius: 5 };\n+\t\t\tvar gui = new dat.GUI();\n+\t\t\tgui.add(params, "radius", 0, 10, 0.01);\n+\t\t\tgui.add(blurPass.material.defines, "SAMPLERS", [5, 9, 13]).onChange(val => {\n+\t\t\t\tblurPass.material.needsUpdate = true;\n+\t\t\t});\n+\n+\t        function loop(count) {\n+\t\t\t\trequestAnimationFrame(loop);\n+\n+\t\t\t\t// rotate camera\n+\t\t\t\tcamera.position.x = 10 * Math.sin(count / 1000 * .5);\n+\t\t\t\tcamera.position.z = 10 * Math.cos(count / 1000 * .5);\n+\t\t\t\tcamera.lookAt(new zen3d.Vector3(0, 0, 0), new zen3d.Vector3(0, 1, 0));\n+\n+\t\t\t\t// do render pass\n+\t\t\t\tscene.updateMatrix();\n+\t\t\t\tscene.updateLights();\n+\n+\t\t\t\tshadowMapPass.render(glCore, scene);\n+\n+\t\t\t\tglCore.renderTarget.setRenderTarget(tempRenderTarget1);\n+\n+\t\t\t\tglCore.state.colorBuffer.setClear(0, 0, 0, 0);\n+            \tglCore.clear(true, true, true);\n+\n+\t\t\t\tglCore.render(scene, camera);\n+\n+\t\t\t\tvar iterations = Math.floor(params.radius / 2) * 2 + 2;\n+\t\t\t\tlet read = tempRenderTarget1, write = tempRenderTarget2, temp;\n+\t\t\t\tglCore.state.colorBuffer.setClear(0, 0, 0, 0);\n+\t\t\t\tfor (var i = 0; i < iterations; i++) {\n+\t\t\t\t\tvar radius = params.radius * (1 + i) / iterations;\n+\t\t\t\t\tglCore.renderTarget.setRenderTarget(i === (iterations - 1) ? backRenderTarget : write);\n+\t\t\t\t\tglCore.clear(true, true, true);\n+\t\t\t\t\tblurPass.uniforms.tDiffuse = read.texture;\n+\t\t\t\t\tblurPass.uniforms.direction[0] = i % 2 === 0 ? radius : 0;\n+\t\t\t\t\tblurPass.uniforms.direction[1] = i % 2 === 1 ? radius : 0;\n+\t\t\t\t\tblurPass.render(glCore);\n+\n+\t\t\t\t\ttemp = read;\n+\t\t\t\t\tread = write;\n+\t\t\t\t\twrite = temp;\n+\t\t\t\t}\n+\t        }\n+\n+\t        loop(0);\n+\n+\t\t\tfunction onWindowResize() {\n+\t\t\t\twidth = window.innerWidth || 2;\n+\t\t        height = window.innerHeight || 2;\n+\n+\t\t\t\tcamera.setPerspective(45 / 180 * Math.PI, width / height, 1, 1000);\n+\n+\t\t\t\tbackRenderTarget.resize(width, height);\n+\t\t\t\ttempRenderTarget1.resize(width, height);\n+\t\t\t\ttempRenderTarget2.resize(width, height);\n+\n+\t\t\t\tblurPass.uniforms["resolution"] = [1 / width, 1 / height];\n+\t\t\t}\n+\t\t\twindow.addEventListener("resize", onWindowResize, false);\n+\t\t})();\n+\t</script>\n+</body>\n+</html>\n\\ No newline at end of file\ndiff --git a/examples/files.js b/examples/files.js\nindex e475cccf..3280af45 100644\n--- a/examples/files.js\n+++ b/examples/files.js\n@@ -105,6 +105,7 @@ var files = {\n \t\t"custompass_ssao",\n \t\t"custompass_taa",\n \t\t"custompass_bloom",\n+\t\t"custompass_blur",\n \t\t"custompass_msaa"\n \t],\n \t"deferred": [\ndiff --git a/examples/js/shaders/FastGaussianBlurShader.js b/examples/js/shaders/FastGaussianBlurShader.js\nnew file mode 100644\nindex 00000000..830ce664\n--- /dev/null\n+++ b/examples/js/shaders/FastGaussianBlurShader.js\n@@ -0,0 +1,92 @@\n+/**\n+ * @author shawn0326 / https://github.com/shawn0326\n+ *\n+ * https://github.com/Jam3/glsl-fast-gaussian-blur\n+ * http://rastergrid.com/blog/2010/09/efficient-gaussian-blur-with-linear-sampling/\n+ *\n+ */\n+\n+zen3d.FastGaussianBlurShader = {\n+\n+\tdefines: {\n+\t\t"SAMPLERS": 9\n+\t},\n+\n+\tuniforms: {\n+\t\t"tDiffuse": null,\n+\t\t"resolution": [1 / 1024, 1 / 512],\n+\t\t"direction": [1, 0]\n+\t},\n+\n+\tvertexShader: [\n+\n+\t\t"attribute vec3 a_Position;",\n+\t\t"attribute vec2 a_Uv;",\n+\n+\t\t"uniform mat4 u_Projection;",\n+\t\t"uniform mat4 u_View;",\n+\t\t"uniform mat4 u_Model;",\n+\n+\t\t"varying vec2 v_Uv;",\n+\n+\t\t"void main() {",\n+\n+\t\t"v_Uv = a_Uv;",\n+\t\t"gl_Position = u_Projection * u_View * u_Model * vec4( a_Position, 1.0 );",\n+\n+\t\t"}"\n+\n+\t].join("\\n"),\n+\n+\tfragmentShader: `\n+        uniform sampler2D tDiffuse;\n+        uniform vec2 resolution;\n+        uniform vec2 direction;\n+        varying vec2 v_Uv;\n+\n+        #if (SAMPLERS == 5) \n+            vec4 blur(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n+                vec4 color = vec4(0.0);\n+                vec2 off1 = vec2(1.3333333333333333) * direction;\n+                color += texture2D(image, uv) * 0.29411764705882354;\n+                color += texture2D(image, uv + (off1 * resolution)) * 0.35294117647058826;\n+                color += texture2D(image, uv - (off1 * resolution)) * 0.35294117647058826;\n+                return color; \n+            }\n+        #endif\n+        #if (SAMPLERS == 9)\n+            vec4 blur(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n+                vec4 color = vec4(0.0);\n+                vec2 off1 = vec2(1.3846153846) * direction;\n+                vec2 off2 = vec2(3.2307692308) * direction;\n+                color += texture2D(image, uv) * 0.2270270270;\n+                color += texture2D(image, uv + (off1 * resolution)) * 0.3162162162;\n+                color += texture2D(image, uv - (off1 * resolution)) * 0.3162162162;\n+                color += texture2D(image, uv + (off2 * resolution)) * 0.0702702703;\n+                color += texture2D(image, uv - (off2 * resolution)) * 0.0702702703;\n+                return color;\n+            }\n+        #endif\n+        #if (SAMPLERS == 13)\n+            vec4 blur(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n+                vec4 color = vec4(0.0);\n+                vec2 off1 = vec2(1.411764705882353) * direction;\n+                vec2 off2 = vec2(3.2941176470588234) * direction;\n+                vec2 off3 = vec2(5.176470588235294) * direction;\n+                color += texture2D(image, uv) * 0.1964825501511404;\n+                color += texture2D(image, uv + (off1 * resolution)) * 0.2969069646728344;\n+                color += texture2D(image, uv - (off1 * resolution)) * 0.2969069646728344;\n+                color += texture2D(image, uv + (off2 * resolution)) * 0.09447039785044732;\n+                color += texture2D(image, uv - (off2 * resolution)) * 0.09447039785044732;\n+                color += texture2D(image, uv + (off3 * resolution)) * 0.010381362401148057;\n+                color += texture2D(image, uv - (off3 * resolution)) * 0.010381362401148057;\n+                return color;\n+            }\n+        #endif\n+\n+        void main() {\n+            gl_FragColor = blur(tDiffuse, v_Uv, resolution, direction);\n+        }\n+    `\n+\n+};\n\\ No newline at end of file\n', 'commit_subject': 'add example: fast gaussian blur', 'repo_name': 'shawn0326/zen-3d', 'committer': {'name': 'ShawnXie', 'email': '42b7c09476605f2d3029cbf0b282a691785de43b@163.com', 'time_sec': '1565686366', 'tz_offset': '480', 'date': {'seconds': '1565686366'}}, 'commit_tree': '0a167f22ce2bec70c1750f5aa767ff1804b0ecdf', 'commit_message': 'add example: fast gaussian blur\n', 'language_name': 'JavaScript', 'license': 'mit', 'hunks': '@@ -0,0 +1,92 @@\n+/**\n+ * @author shawn0326 / https://github.com/shawn0326\n+ *\n+ * https://github.com/Jam3/glsl-fast-gaussian-blur\n+ * http://rastergrid.com/blog/2010/09/efficient-gaussian-blur-with-linear-sampling/\n+ *\n+ */\n+\n+zen3d.FastGaussianBlurShader = {\n+\n+\tdefines: {\n+\t\t"SAMPLERS": 9\n+\t},\n+\n+\tuniforms: {\n+\t\t"tDiffuse": null,\n+\t\t"resolution": [1 / 1024, 1 / 512],\n+\t\t"direction": [1, 0]\n+\t},\n+\n+\tvertexShader: [\n+\n+\t\t"attribute vec3 a_Position;",\n+\t\t"attribute vec2 a_Uv;",\n+\n+\t\t"uniform mat4 u_Projection;",\n+\t\t"uniform mat4 u_View;",\n+\t\t"uniform mat4 u_Model;",\n+\n+\t\t"varying vec2 v_Uv;",\n+\n+\t\t"void main() {",\n+\n+\t\t"v_Uv = a_Uv;",\n+\t\t"gl_Position = u_Projection * u_View * u_Model * vec4( a_Position, 1.0 );",\n+\n+\t\t"}"\n+\n+\t].join("\\n"),\n+\n+\tfragmentShader: `\n+        uniform sampler2D tDiffuse;\n+        uniform vec2 resolution;\n+        uniform vec2 direction;\n+        varying vec2 v_Uv;\n+\n+        #if (SAMPLERS == 5) \n+            vec4 blur(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n+                vec4 color = vec4(0.0);\n+                vec2 off1 = vec2(1.3333333333333333) * direction;\n+                color += texture2D(image, uv) * 0.29411764705882354;\n+                color += texture2D(image, uv + (off1 * resolution)) * 0.35294117647058826;\n+                color += texture2D(image, uv - (off1 * resolution)) * 0.35294117647058826;\n+                return color; \n+            }\n+        #endif\n+        #if (SAMPLERS == 9)\n+            vec4 blur(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n+                vec4 color = vec4(0.0);\n+                vec2 off1 = vec2(1.3846153846) * direction;\n+                vec2 off2 = vec2(3.2307692308) * direction;\n+                color += texture2D(image, uv) * 0.2270270270;\n+                color += texture2D(image, uv + (off1 * resolution)) * 0.3162162162;\n+                color += texture2D(image, uv - (off1 * resolution)) * 0.3162162162;\n+                color += texture2D(image, uv + (off2 * resolution)) * 0.0702702703;\n+                color += texture2D(image, uv - (off2 * resolution)) * 0.0702702703;\n+                return color;\n+            }\n+        #endif\n+        #if (SAMPLERS == 13)\n+            vec4 blur(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {\n+                vec4 color = vec4(0.0);\n+                vec2 off1 = vec2(1.411764705882353) * direction;\n+                vec2 off2 = vec2(3.2941176470588234) * direction;\n+                vec2 off3 = vec2(5.176470588235294) * direction;\n+                color += texture2D(image, uv) * 0.1964825501511404;\n+                color += texture2D(image, uv + (off1 * resolution)) * 0.2969069646728344;\n+                color += texture2D(image, uv - (off1 * resolution)) * 0.2969069646728344;\n+                color += texture2D(image, uv + (off2 * resolution)) * 0.09447039785044732;\n+                color += texture2D(image, uv - (off2 * resolution)) * 0.09447039785044732;\n+                color += texture2D(image, uv + (off3 * resolution)) * 0.010381362401148057;\n+                color += texture2D(image, uv - (off3 * resolution)) * 0.010381362401148057;\n+                return color;\n+            }\n+        #endif\n+\n+        void main() {\n+            gl_FragColor = blur(tDiffuse, v_Uv, resolution, direction);\n+        }\n+    `\n+\n+};\n\\ No newline at end of file\n', 'addition_count': 92, 'deletion_count': 0, 'src_file': '/dev/null', 'tgt_file': 'b/examples/js/shaders/FastGaussianBlurShader.js', 'file_extension': '.js', 'before_file': 'ADDFILE', 'message': 'add example: fast gaussian blur\n', 'author_name': 'ShawnXie', 'lang': 'js'}