Merge pull request #18 from davepagurek/gaussian

Add Gaussian blur renderer

Author: davepagurek

GaussianBlurRenderer.js

@@ -0,0 +1,118 @@
+class GaussianBlurRenderer extends BlurRenderer {
+  constructor(target) {
+    super(target)
+    this.fbo2 = target.createFramebuffer()
+    this.intensity = 0.1
+    this.numSamples = 20
+  }
+
+  frag() {
+    return GaussianBlurRenderer.frag
+  }
+
+  getUniforms() {
+    const uniforms = super.getUniforms()
+    delete uniforms.uImg
+    return uniforms
+  }
+  
+  draw(cb) {
+    const prevCamera = this.target._renderer._curCamera
+    this.fbo.draw(() => {
+      this.target.push()
+      cb()
+      this.target.pop()
+    })
+
+    const uniforms = this.getUniforms()
+
+    this.target.push()
+    this.target.setCamera(this.cam)
+    this.cam.move(0, 0, 0)
+    
+    this.fbo2.draw(() => {
+      this.target.push()
+      this.target.noStroke()
+      this.target.rectMode(CENTER)
+      this.target.shader(this.shader)
+      for (const key in uniforms) {
+        this.shader.setUniform(key, uniforms[key])
+        this.shader.setUniform('uDirection', 0)
+        this.shader.setUniform('uImg', this.fbo.color)
+      }
+      this.target.rect(0, 0, this.target.width, -this.target.height)
+      this.target.pop()
+    })
+
+    this.target.noStroke()
+    this.target.rectMode(CENTER)
+    this.target.shader(this.shader)
+    for (const key in uniforms) {
+      this.shader.setUniform(key, uniforms[key])
+    }
+    this.shader.setUniform('uDirection', 1)
+    this.shader.setUniform('uImg', this.fbo2.color)
+    this.target.rect(0, 0, this.target.width, -this.target.height)
+    this.target.pop()
+    this.target.setCamera(prevCamera)
+  }
+
+  remove() {
+    super.remove()
+    this.fbo2.remove()
+  }
+}
+
+p5.prototype.createGaussianBlurRenderer = function() {
+  return new GaussianBlurRenderer(this)
+}
+
+GaussianBlurRenderer.frag = `
+precision highp float;
+varying highp vec2 vVertTexCoord;
+uniform sampler2D uImg;
+uniform sampler2D uDepth;
+uniform vec2 uSize;
+uniform float uIntensity;
+uniform float uDof;
+uniform float maxBlur;
+uniform int uNumSamples;
+uniform float uTargetZ;
+uniform float uNear;
+uniform float uFar;
+uniform int uDirection;
+#define s ${0.5/3}
+const int MAX_NUM_SAMPLES = 50;
+float depthToZ(float depth) {
+  float depthNormalized = 2.0 * depth - 1.0;
+  return 2.0 * uNear * uFar / (uFar + uNear - depthNormalized * (uFar - uNear));
+}
+float calcBlur(float z, float pixelScale) {
+  return clamp(abs(z - uTargetZ) - uDof / 2., 0.0, 0.3*pixelScale);
+}
+void main() {
+  float total = 1.0;
+  float origZ = depthToZ(texture2D(uDepth, vVertTexCoord).x);
+  vec4 color = texture2D(uImg, vVertTexCoord);
+  if (abs(origZ - uTargetZ) > uDof / 2.) {
+    float pixelScale = max(uSize.x, uSize.y);
+    float blurAmt = calcBlur(origZ, pixelScale);
+    for (int i = 0; i < MAX_NUM_SAMPLES; i++) {
+      if (i >= uNumSamples) break;
+      float t = (float(i) / float(uNumSamples - 1));
+      float radius = (t * 2. - 1.);
+      float distAway = radius * uIntensity * blurAmt;
+      vec2 offset = (uDirection == 0 ? vec2(1.,0.) : vec2(0.,1.)) * distAway / pixelScale;
+      float z = depthToZ(texture2D(uDepth, vVertTexCoord + offset).x);
+      float sampleBlur = calcBlur(z, pixelScale);
+      float t2 = distAway / (sampleBlur * uIntensity);
+      float weight = ${1/Math.sqrt(2*Math.PI)} / s * exp(-0.5*pow(t2/s,2.));
+      vec4 sample = texture2D(uImg, vVertTexCoord + offset);
+      color += weight * sample;
+      total += weight;
+    }
+  }
+  color /= total;
+  gl_FragColor = color;
+}
+`

README.md

@@ -18,7 +18,7 @@ Add the library to your source code, *after* loading p5 but *before* loading you
 
 ### Via CDN
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@davepagurek/[email protected].5/p5.Framebuffer.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@davepagurek/[email protected].6/p5.Framebuffer.min.js"></script>
 ```
 
 ### Self-hosted
@@ -197,6 +197,81 @@ The library provides a helper that bundles a Framebuffer with a shader that appl
 
 Create a blur renderer and draw inside its `draw` callback. When you tell it to `focusHere()`, anything drawn at that transformed position will be in focus. You can use standard p5 `translate` calls to position the focal point.
 
+#### Gaussian blur
+
+This is likely the best-looking blur renderer, although it uses two render passes. Start by using this one, but look out the other `BlurRenderer` if it's slow.
+
+<table>
+<tr>
+<td>
+
+```js
+let blurRenderer
+
+function setup() {
+  createCanvas(400, 400, WEBGL)
+  blurRenderer = createGaussianBlurRenderer()
+  blurRenderer.setIntensity(0.15)
+  blurRenderer.setSamples(20)
+  blurRenderer.setDof(50)
+}
+
+function draw() {
+  blurRenderer.draw(() => {
+    clear()
+    push()
+    background(255)
+    noStroke()
+    lights()
+
+    push()
+    fill('blue')
+    translate(-80, -80, -300)
+    blurRenderer.focusHere()
+    sphere(50)
+    pop()
+
+    push()
+    fill('red')
+    sphere(50)
+    pop()
+    pop()
+  })
+}
+```
+
+</td>
+<td>
+<img src="https://user-images.githubusercontent.com/5315059/201497333-92a3f46e-91b7-4d4e-a675-f958d8d9ff50.png" width="400" height="400">
+</td>
+</tr>
+</table>
+
+Methods on `GaussianBlurRenderer`:
+- `GaussianBlurRenderer.prototype.draw(callback: () => void)`
+  - Draw the scene defined in the callback with blur
+- `GaussianBlurRenderer.prototype.focusHere()`
+  - Tell the renderer what point in space should be in focus. It will move based on any calls to `translate()` or other transformations that you have applied.
+  - Defaults to the origin
+- `GaussianBlurRenderer.prototype.setIntensity(intensity: number)`
+  - Control the intensity of the blur, between 0 and 1: the lower the intensity, the farther objects have to be from the focal point to be blurred
+  - Defaults to 0.1
+- `GaussianBlurRenderer.prototype.setDof(dof: number)`
+  - Control the depth of field (dof), which is the distance away from the focal point that is also in focus, from 0 up
+  - The lower the dof, the smaller range will be that has no blur. Blur amount will start to accumulate when objects are outside of the dof range
+  - The focal target (set by `focusHere`) is located in the centre of the clear range. So assume the focal target's depth value is `z`, then the clear range becomes from `z - dof / 2` to `z + dof / 2`.
+  - Defaults to 0
+- `GaussianBlurRenderer.prototype.setSamples(numSamples: number)`
+  - Control how many random samples to use in the blur shader. More samples will look smoother but is more computationally intensive.
+  - Defaults to 20
+
+A live example: https://davepagurek.github.io/p5.Framebuffer/examples/gaussianblur
+
+
+#### One-pass blur
+
+Another implementation of blur, but using a single shader pass. This will likely produce a grainier result, but might be faster on some systems.
+
 <table>
 <tr>
 <td>

examples/gaussianblur/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html><html lang="en"><head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>
+    <script src="../../p5.Framebuffer.js" type="text/javascript"></script>
+    <script src="../../Renderer.js" type="text/javascript"></script>
+    <script src="../../BlurRenderer.js" type="text/javascript"></script>
+    <script src="../../GaussianBlurRenderer.js" type="text/javascript"></script>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta charset="utf-8">
+
+  </head>
+  <body>
+    <script src="sketch.js"></script>
+  
+
+</body></html>

examples/gaussianblur/sketch.js

@@ -0,0 +1,37 @@
+let blurRenderer
+
+function setup() {
+  createCanvas(400, 400, WEBGL)
+  blurRenderer = createGaussianBlurRenderer()
+}
+
+function draw() {
+  blurRenderer.draw(() => {
+    clear()
+    push()
+    background(255)
+    noStroke()
+    lights()
+
+    push()
+    fill('red')
+    translate(50*sin(millis()/500), 50*cos(millis()/500), 100*sin(millis()/800 + 100))
+    sphere(50)
+    pop()
+
+    push()
+    fill('blue')
+    translate(50*cos(millis()/300+12), 50*sin(millis()/600), 100*sin(millis()/800 + 1))
+    sphere(50)
+    blurRenderer.focusHere()
+    pop()
+
+    push()
+    fill('white')
+    translate(0, 200, -100)
+    rotateX(PI/2)
+    plane(900, 900)
+    pop()
+    pop()
+  })
+}

examples/gaussianblur/style.css

@@ -0,0 +1,7 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+canvas {
+  display: block;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@davepagurek/p5.framebuffer",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "main": "p5.Framebuffer.js",
   "author": "Dave Pagurek <[email protected]>",
   "license": "MIT",
@@ -19,7 +19,7 @@
   },
   "scripts": {
     "build:core": "minify p5.Framebuffer.js > p5.Framebuffer.core.min.js",
-    "build:all": "minify p5.Framebuffer.js > p5.Framebuffer.min.js; minify Renderer.js >> p5.Framebuffer.min.js; minify BlurRenderer.js >> p5.Framebuffer.min.js; minify ContactShadowRenderer.js >> p5.Framebuffer.min.js",
+    "build:all": "minify p5.Framebuffer.js > p5.Framebuffer.min.js; minify Renderer.js >> p5.Framebuffer.min.js; minify BlurRenderer.js >> p5.Framebuffer.min.js; minify GaussianBlurRenderer.js >> p5.Framebuffer.min.js; minify ContactShadowRenderer.js >> p5.Framebuffer.min.js",
     "build": "yarn build:core && yarn build:all",
     "publish": "npm publish --access public"
   },
@@ -29,6 +29,7 @@
     "p5.Framebuffer.js",
     "Renderer.js",
     "BlurRenderer.js",
+    "GaussianBlurRenderer.js",
     "ContactShadowRenderer.js"
   ]
 }