@davepagurek/p5.filterrenderer 0.0.12

package/BlurRenderer.js

@@ -0,0 +1,136 @@
+class BlurRenderer extends Renderer {
+  constructor(target, options) {
+    super(target, options)
+    this.focus = (target.height / 2) / tan(PI / 6)
+    this.intensity = 0.05
+    this.dof = 0
+    this.numSamples = 15
+  }
+
+  vert() {
+    return BlurRenderer.vert
+  }
+
+  frag() {
+    return BlurRenderer.frag
+  }
+
+  focusHere() {
+    const matrix = new DOMMatrix(this.target._renderer.uMVMatrix.mat4)
+    const center = new DOMPoint(0, 0, 0)
+    const world = center.matrixTransform(matrix)
+    this.focus = -world.z
+  }
+
+  setDof(dof) {
+    this.dof = dof
+  }
+
+  setIntensity(intensity) {
+    this.intensity = intensity
+  }
+
+  setSamples(numSamples) {
+    this.numSamples = numSamples
+  }
+
+  getUniforms() {
+    return {
+      uImg: this.fbo.color,
+      uDepth: this.fbo.depth,
+      uSize: [this.target.width, this.target.height],
+      uIntensity: this.intensity,
+      uDof: this.dof,
+      uNumSamples: this.numSamples,
+      uNear: this.target._renderer._curCamera._near,
+      uFar: this.target._renderer._curCamera._far,
+      uTargetZ: this.focus,
+    }
+  }
+}
+
+p5.prototype.createBlurRenderer = function(options) {
+  return new BlurRenderer(this, options)
+}
+
+BlurRenderer.vert = `
+precision highp float;
+
+attribute vec3 aPosition;
+attribute vec3 aNormal;
+attribute vec2 aTexCoord;
+
+uniform mat4 uModelViewMatrix;
+uniform mat4 uProjectionMatrix;
+uniform mat3 uNormalMatrix;
+
+varying highp vec2 vVertTexCoord;
+
+void main(void) {
+  vec4 positionVec4 = vec4(aPosition, 1.0);
+  gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+  vVertTexCoord = aTexCoord;
+}
+`
+
+BlurRenderer.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;
+
+#define PI 3.14159265359;
+
+const int MAX_NUM_SAMPLES = 50;
+
+float rand(vec2 co){
+  return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);
+}
+
+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 + 1) / float(uNumSamples));
+      float angle = (t*12.0) * 2. * PI;
+      float radius = 1.0 - (t*t*t); // Sample more on the outer edge
+      angle += 5.*rand(gl_FragCoord.xy);
+      vec2 offset = (vec2(cos(angle),sin(angle)) * radius * uIntensity * blurAmt)/pixelScale;
+      float z = depthToZ(texture2D(uDepth, vVertTexCoord + offset).x);
+      float sampleBlur = calcBlur(z, pixelScale);
+
+      float weight = float((z >= origZ) || (sampleBlur >= blurAmt*radius + 5.));
+      vec4 sample = texture2D(uImg, vVertTexCoord + offset);
+      color += weight * sample;
+      total += weight;
+    }
+  }
+
+  color /= total;
+  gl_FragColor = color;
+}
+`

package/ContactShadowRenderer.js

@@ -0,0 +1,381 @@
+class ContactShadowRenderer extends Renderer {
+  constructor(target, options) {
+    super(target, options)
+    if (!this.target.webglVersion === WEBGL2) {
+      this.target._renderer.GL.getExtension('OES_standard_derivatives')
+    }
+    this.fbo2 = target.createFramebuffer(options)
+    this.blurShader = target.createShader(this.blurVert(), this.blurFrag())
+    this.intensity = 0.5
+    this.numShadowSamples = 15
+    this.numBlurSamples = 20
+    this.exponent = 250
+    this.bias = 0.1
+    this.searchRadius = 100
+    this.blurRadius = 50
+  }
+
+  prefix() {
+    if (this.target.webglVersion === WEBGL2) {
+      return '#version 300 es\n#define IS_WEBGL2\n'
+    } else {
+      return '#extension GL_OES_standard_derivatives : enable\n'
+    }
+  }
+
+  vert() {
+    return this.prefix() + ContactShadowRenderer.vert
+  }
+
+  frag() {
+    return this.prefix() + ContactShadowRenderer.frag
+  }
+
+  blurVert() {
+    return this.vert()
+  }
+
+  blurFrag() {
+    return this.prefix() + ContactShadowRenderer.blurFrag
+  }
+
+  setIntensity(intensity) {
+    this.intensity = intensity
+  }
+  setShadowSamples(numSamples) {
+    this.numShadowSamples = numSamples
+  }
+  setBlurSamples(numSamples) {
+    this.numBlurSamples = numSamples
+  }
+  setBlurRadius(r) {
+    this.blurRadius = r
+  }
+  setExponent(exponent) {
+    this.exponent = exponent
+  }
+  setBias(bias) {
+    this.bias = bias
+  }
+  setSearchRadius(radius) {
+    this.searchRadius = radius
+  }
+
+  getShadowUniforms() {
+    const projInfo = [
+      -2 / (this.target.width * this.target._renderer.uPMatrix.mat4[0]),
+      -2 / (this.target.height * this.target._renderer.uPMatrix.mat4[5]),
+      (1 - this.target._renderer.uPMatrix.mat4[2]) / this.target._renderer.uPMatrix.mat4[0],
+      (1 + this.target._renderer.uPMatrix.mat4[6]) / this.target._renderer.uPMatrix.mat4[5]
+    ]
+
+    return {
+      uImg: this.fbo.color,
+      uDepth: this.fbo.depth,
+      uSize: [this.target.width, this.target.height],
+      uIntensity: this.intensity,
+      uNumSamples: this.numShadowSamples,
+      uNear: this.target._renderer._curCamera.cameraNear,
+      uFar: this.target._renderer._curCamera.cameraFar,
+      uProjInfo: projInfo,
+      uExponent: this.exponent,
+      uBias: this.bias,
+      uSearchRadius: this.searchRadius,
+    }
+  }
+
+  getBlurUniforms() {
+    return {
+      uImg: this.fbo.color,
+      uDepth: this.fbo.depth,
+      uShadow: this.fbo2.color,
+      uSize: [this.target.width, this.target.height],
+      uIntensity: this.intensity,
+      uNear: this.target._renderer._curCamera.cameraNear,
+      uFar: this.target._renderer._curCamera.cameraFar,
+      uNumSamples: this.numBlurSamples,
+      uBlurRadius: this.blurRadius,
+    }
+  }
+
+  draw(cb) {
+    const shadowUniforms = this.getShadowUniforms()
+    const blurUniforms = this.getBlurUniforms()
+
+    this.fbo.draw(() => {
+      this.target.push()
+      cb()
+      this.target.pop()
+    })
+
+    this.target.push()
+    
+    this.fbo2.draw(() => {
+      this.target.push()
+      this.target.clear()
+      this.target.noStroke()
+      this.target.rectMode(CENTER)
+      this.target.shader(this.shader)
+      for (const key in shadowUniforms) {
+        this.shader.setUniform(key, shadowUniforms[key])
+      }
+      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.blurShader)
+    for (const key in blurUniforms) {
+      this.blurShader.setUniform(key, blurUniforms[key])
+    }
+    this.target.rect(0, 0, this.target.width, -this.target.height)
+    this.target.pop()
+  }
+}
+
+p5.prototype.createContactShadowRenderer = function(options) {
+  return new ContactShadowRenderer(this, options)
+}
+
+ContactShadowRenderer.vert = `
+#ifdef IS_WEBGL2
+in vec3 aPosition;
+in vec3 aNormal;
+in vec2 aTexCoord;
+#else
+attribute vec3 aPosition;
+attribute vec3 aNormal;
+attribute vec2 aTexCoord;
+#endif
+
+uniform mat4 uModelViewMatrix;
+uniform mat4 uProjectionMatrix;
+uniform mat3 uNormalMatrix;
+
+#ifdef IS_WEBGL2
+out highp vec2 vVertTexCoord;
+#else
+varying highp vec2 vVertTexCoord;
+#endif
+
+void main(void) {
+  vec4 positionVec4 = vec4(aPosition, 1.0);
+  gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+  vVertTexCoord = aTexCoord;
+}
+`
+
+ContactShadowRenderer.frag = `
+precision highp float;
+#ifdef IS_WEBGL2
+in highp vec2 vVertTexCoord;
+out highp vec4 outColor;
+#else
+varying highp vec2 vVertTexCoord;
+#endif
+
+uniform sampler2D uImg;
+uniform sampler2D uDepth;
+uniform vec2 uSize;
+uniform int uNumSamples;
+uniform float uNear;
+uniform float uFar;
+uniform vec4 uProjInfo;
+uniform float uSearchRadius;
+uniform float uIntensity;
+uniform float uExponent;
+uniform float uBias;
+
+const int MAX_NUM_SAMPLES = 100;
+
+float rand(vec2 co) {
+  return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);
+}
+float rand(vec4 co) {
+  return fract(rand(co.xz) + rand(co.xy) + rand(co.yw) + rand(co.zw));
+}
+
+vec3 worldFromScreen(vec2 offset) {
+#ifdef IS_WEBGL2
+  float z = uNear * uFar  / ((uNear - uFar) * texture(uDepth, vVertTexCoord + offset).x + uFar);
+#else
+  float z = uNear * uFar  / ((uNear - uFar) * texture2D(uDepth, vVertTexCoord + offset).x + uFar);
+#endif
+  return vec3((((vVertTexCoord + offset) * uSize) * uProjInfo.xy + uProjInfo.zw) * z, z);
+}
+
+vec2 screenFromWorld(vec3 world) {
+  return (world.xy/world.z - uProjInfo.zw)/uProjInfo.xy;
+}
+
+const float EPSILON = 0.01;
+
+mat4 axisAngleRotation(vec3 axis, float angle) {
+  axis = normalize(axis);
+  float s = sin(angle);
+  float c = cos(angle);
+  float oc = 1.0 - c;
+
+  return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
+              oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
+              oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
+              0.0,                                0.0,                                0.0,                                1.0);
+}
+vec3 adjustNormal(
+  vec3 origNormal,
+  vec3 displacementNormal,
+  vec3 noDisplacementNormal
+) {
+  // Find the rotation induced by the displacement
+  float angle = acos(dot(displacementNormal, noDisplacementNormal));
+  vec3 rawAxis = cross(displacementNormal, noDisplacementNormal);
+  if (length(rawAxis) < 0.01) {
+    return origNormal;
+  }
+  vec3 axis = normalize(rawAxis);
+  mat4 rotation = axisAngleRotation(axis, angle);
+
+  // Apply the rotation to the original normal
+  vec3 normal = (rotation * vec4(origNormal, 0.)).xyz;
+  return normal;
+}
+
+void main() {
+#ifdef IS_WEBGL2
+  vec4 color = texture(uImg, vVertTexCoord);
+#else
+  vec4 color = texture2D(uImg, vVertTexCoord);
+#endif
+  vec3 position = worldFromScreen(vec2(0., 0.));
+  vec3 normal = normalize(cross(dFdx(position), dFdy(position)));
+
+  float radiusSquared = uSearchRadius * uSearchRadius;
+
+  float occlusion = 0.;
+
+  for (int i = 0; i < MAX_NUM_SAMPLES; i++) {
+    if (i >= uNumSamples) break;
+    float t = (float(i + 1) / float(uNumSamples));
+
+    // Sample a sort of random ish coordinate in a half sphere pointing up
+    float phi = ${2 * Math.PI} * rand(vec4(gl_FragCoord.xy,t*100.,0.));
+    float theta = ${Math.PI / 2} * rand(vec4(gl_FragCoord.xy,t*100.,100.));
+    float radius = 1.0 - t*t;
+    vec3 localOff = vec3(
+      radius * cos(phi) * sin(theta),
+      radius * cos(theta),
+      radius * sin(phi) * sin(theta)
+    );
+
+    // Translate that to be a hemisphere oriented with the surface normal
+    vec3 rotatedOff = adjustNormal(localOff, normal, vec3(0., 1., 0.));
+    vec3 testPosition = position + rotatedOff * uSearchRadius;
+    vec2 screenPosition = screenFromWorld(testPosition);
+    vec2 offset = screenPosition / uSize - vVertTexCoord;
+    
+    // At that screen space coordinate, what is the position of the object we see?
+    vec3 samplePos = worldFromScreen(offset);
+
+    if (samplePos.z > mix(uNear, uFar, 0.99)) continue;
+
+    // The amount of occlusion is proportional to the *cosine* of the angle between
+    // the line connecting the object to the surface and the surface normal. This is
+    // because light coming in at an angle is more spread out and thus delivers less
+    // energy to the surface.
+    //
+    // The dot product of originToSample and the normal is proportional to this energy
+    // because dot(a, b) is equivalent to length(a)*length(b)*cos(angle_between_a_and_b)
+    vec3 originToSample = samplePos - position;
+    float squaredDistanceToSample = dot(originToSample, originToSample);
+    float vn = dot(originToSample, normal) - uBias;
+
+    // We only let stuff start making a shadow when it's within our search radius. At
+    // the edge it should not occlude, and as it gets closer, it should occlude more.
+    // We'll give it a cubic falloff so it looks smoother.
+    float f = max(radiusSquared - squaredDistanceToSample, 0.0) / radiusSquared;
+    float sampleOcclusion = f * f * f * max(vn / (EPSILON + squaredDistanceToSample), 0.0);
+
+    occlusion += sampleOcclusion;
+  }
+  occlusion = 1.0 - (occlusion / float(uNumSamples));
+  occlusion = clamp(pow(occlusion, 1.0 + uExponent), 0.0, 1.0);
+  vec4 finalColor = vec4(occlusion, occlusion, occlusion, 1.);
+#ifdef IS_WEBGL2
+  outColor = finalColor;
+#else
+  gl_FragColor = finalColor;
+#endif
+}
+`
+
+ContactShadowRenderer.blurFrag = `
+precision highp float;
+#ifdef IS_WEBGL2
+in highp vec2 vVertTexCoord;
+out highp vec4 outColor;
+#else
+varying highp vec2 vVertTexCoord;
+#endif
+
+uniform sampler2D uImg;
+uniform sampler2D uDepth;
+uniform sampler2D uShadow;
+uniform vec2 uSize;
+uniform float uNear;
+uniform float uFar;
+uniform float uIntensity;
+uniform int uNumSamples;
+uniform float uBlurRadius;
+
+#ifdef IS_WEBGL2
+#define texFn texture
+#else
+#define texFn texture2D
+#endif
+
+float depthToZ(float depth) {
+  float depthNormalized = 2.0 * depth - 1.0;
+  return 2.0 * uNear * uFar / (uFar + uNear - depthNormalized * (uFar - uNear));
+}
+
+const int MAX_NUM_SAMPLES = 100;
+
+float rand(vec2 co) {
+  return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);
+}
+float rand(vec4 co) {
+  return fract(rand(co.xz) + rand(co.xy) + rand(co.yw) + rand(co.zw));
+}
+
+void main() {
+  vec4 color = texFn(uImg, vVertTexCoord);
+
+  float origZ = depthToZ(texFn(uDepth, vVertTexCoord).x);
+  float occlusion = texFn(uShadow, vVertTexCoord).x;
+  float total = 1.;
+
+  for (int i = 0; i < MAX_NUM_SAMPLES; i++) {
+    if (i >= uNumSamples) break;
+    float t = (float(i) / float(uNumSamples - 1));
+    float angle = (t*12.0) * ${2 * Math.PI};
+    float radius = 1.0 - t;
+    angle += 5.*rand(gl_FragCoord.xy);
+
+    vec2 offset = (vec2(cos(angle),sin(angle)) * radius * uBlurRadius)/uSize;
+    float z = depthToZ(texFn(uDepth, vVertTexCoord + offset).x);
+
+    float weight = float(z >= origZ);
+    float shadowSample = texFn(uShadow, vVertTexCoord + offset).x;
+    occlusion += weight * shadowSample;
+    total += weight;
+  }
+  occlusion /= total;
+  vec4 mixedColor = vec4(color.rgb * mix(1., occlusion, uIntensity), color.a);
+#ifdef IS_WEBGL2
+  outColor = mixedColor;
+#else
+  gl_FragColor = mixedColor;
+#endif
+}
+`

package/GaussianBlurRenderer.js

@@ -0,0 +1,115 @@
+class GaussianBlurRenderer extends BlurRenderer {
+  constructor(target, options) {
+    super(target, options)
+    this.fbo2 = target.createFramebuffer(options)
+    this.intensity = 0.1
+    this.numSamples = 20
+  }
+
+  frag() {
+    return GaussianBlurRenderer.frag
+  }
+
+  getUniforms() {
+    const uniforms = super.getUniforms()
+    delete uniforms.uImg
+    return uniforms
+  }
+  
+  draw(cb) {
+    this.fbo.draw(() => {
+      this.target.push()
+      cb()
+      this.target.pop()
+    })
+
+    const uniforms = this.getUniforms()
+
+    this.target.push()
+    
+    this.fbo2.draw(() => {
+      this.target.push()
+      this.target.clear()
+      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()
+  }
+
+  remove() {
+    super.remove()
+    this.fbo2.remove()
+  }
+}
+
+p5.prototype.createGaussianBlurRenderer = function(options) {
+  return new GaussianBlurRenderer(this, options)
+}
+
+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;
+}
+`

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Dave Pagurek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,261 @@
+# p5.filterRenderer
+
+A library for p5.js WebGL mode to draw with depth blur and shadows.
+
+Read more about the motivation for this and how focal blur shaders work in <a href="https://www.davepagurek.com/blog/depth-of-field/">this blog post on the subject.</a>
+
+![image](https://user-images.githubusercontent.com/5315059/172021218-b50f6693-40a6-49a1-99af-8dd9d73f00eb.png)
+<small><em>Above: a screenshot from [a sketch](https://openprocessing.org/sketch/1590159) using blurring out-of-focus areas</em></small>
+
+## Get the library
+
+Add the library to your source code, *after* loading p5 but *before* loading your own code.
+
+### Via CDN
+```html
+<script src="https://cdn.jsdelivr.net/npm/@davepagurek/p5.filterRenderer@0.0.12/p5.Framebuffer.min.js"></script>
+```
+
+On OpenProcessing, paste this link into a new library slot:
+```
+https://cdn.jsdelivr.net/npm/@davepagurek/p5.filterRenderer@0.0.12/p5.filterRenderer.min.js
+```
+
+### Self-hosted
+[Download the minified or unminified source code from the releases tab](https://github.com/davepagurek/p5.filterRenderer/releases/), then add it to your HTML:
+```html
+<script type="text/javascript" src="p5.filterRenderer.min.js"></script>
+```
+
+
+## Usage
+
+### Depth of field blur
+
+The library provides a helper that bundles a Framebuffer with a shader that applies focal blur, leaving objects at a provided distance in focus and blurring things more the farther away from that  point they are.
+
+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">
+</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>
+
+```js
+let blurRenderer
+
+function setup() {
+  createCanvas(400, 400, WEBGL)
+  blurRenderer = createBlurRenderer()
+}
+
+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/178128839-164de943-960c-4e0a-ba6a-a7aa836ec798.png">
+</td>
+</tr>
+</table>
+
+Methods on `BlurRenderer`:
+- `BlurRenderer.prototype.draw(callback: () => void)`
+  - Draw the scene defined in the callback with blur
+- `BlurRenderer.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
+- `BlurRenderer.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.05
+- `BlurRenderer.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
+- `BlurRenderer.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 15
+
+A live example: https://davepagurek.github.io/p5.Framebuffer/examples/blur
+
+### Contact Shadows
+
+The library provides a helper that bundles a Framebuffer with a shader that applies Ambient Occlusion shadows. This approximates the shadows one would see if there was uniform light hitting an object from all sides. In practice, it adds shadows in areas where objects get close to each other.
+
+Create a shadow renderer and draw inside its `draw` callback. The renderer will add shadows to the result.
+
+<table>
+<tr>
+<td>
+
+```js
+let contactShadowRenderer
+
+function setup() {
+  createCanvas(400, 400, WEBGL)
+  contactShadowRenderer = createContactShadowRenderer()
+}
+
+function draw() {
+  contactShadowRenderer.draw(() => {
+    clear()
+    push()
+    background(255)
+    fill(255)
+    noStroke()
+    lights()
+
+    push()
+    translate(50, -50, 10)
+    sphere(50)
+    pop()
+
+    push()
+    translate(-50, 50, -10)
+    sphere(90)
+    pop()
+  })
+}
+```
+
+</td>
+<td>
+<img src="https://user-images.githubusercontent.com/5315059/178128655-22816bcd-901d-49b5-95db-753815762805.png">
+</td>
+</tr>
+</table>
+
+Methods on `ContactShadowRenderer`:
+- `ContactShadowRenderer.prototype.draw(callback: () => void)`
+  - Draw the scene defined in the callback with shadows added
+- `ContactShadowRenderer.prototype.setIntensity(intensity: number)`
+  - Control how dark shadows are: 0 is no shadows, and 1 is full darkness
+  - Defaults to 0.5
+- `ContactShadowRenderer.prototype.setShadowSamples(numSamples: number)`
+  - Control how many random samples to use in the shadow shader. More samples will be more accurate but is more computationally intensive.
+  - Defaults to 15
+- `ContactShadowRenderer.prototype.setBlurSamples(numSamples: number)`
+  - Control how many random samples to use in the blur shader. More samples will be smoother but is more computationally intensive.
+  - Defaults to 20
+- `ContactShadowRenderer.prototype.setBlurRadius(radius: number)`
+  - Sets how far the blur extends when blurring shadows, in pixels, ignoring the pixel density
+  - Defaults to 50
+- `ContactShadowRenderer.prototype.setSearchRadius(radius: number)`
+  - Control how close together objects need to be for them to cast shadows
+  - This is defined in *world space,* meaning all transformations are applied when checking distances
+  - Defaults to 100
+
+A live example: https://davepagurek.github.io/p5.Framebuffer/examples/shadows
+
+## External examples
+
+- <a href="https://openprocessing.org/sketch/1773564">Rolling Shutter</a>
+  - Uses 120 framebuffers to store previous frames of video for a slit scanning effect
+- <a href="https://openprocessing.org/sketch/1721124">Wizard Pondering Orb</a>
+  - Uses the Gaussian blur renderer
+- <a href="https://openprocessing.org/sketch/1616318">3D Text</a>
+  - Uses two framebuffers to do a feedback effect
+- <a href="https://openprocessing.org/sketch/1622863">Disassemble</a>
+  - Uses the contact shadow renderer
+- <a href="https://openprocessing.org/sketch/1590159">Train Knots</a>
+  - Uses the depth buffer in a focal blur shader
+- <a href="https://openprocessing.org/sketch/1460113">Modern Vampires of the City</a>
+  - Uses the depth buffer to create a fog effect
+
+More coming soon!

package/Renderer.js

@@ -0,0 +1,50 @@
+class Renderer {
+  constructor(target = window, options = {}) {
+    this.target = target
+    this.fbo = target.createFramebuffer(options)
+    this.shader = target.createShader(this.vert(), this.frag())
+  }
+
+  vert() {
+    throw new Error('Unimplemented')
+  }
+
+  frag() {
+    throw new Error('Unimplemented')
+  }
+
+  getUniforms() {
+    return {}
+  }
+
+  draw(cb) {
+    this.fbo.draw(() => {
+      this.target.push()
+      cb()
+      this.target.pop()
+    })
+
+    const uniforms = this.getUniforms()
+
+    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.target.rect(0, 0, this.target.width, -this.target.height)
+    this.target.pop()
+  }
+
+  remove() {
+    this.fbo.remove()
+  }
+}
+
+const superPerspective = p5.Camera.prototype.perspective
+p5.Camera.prototype.perspective = function(fovy, aspect, near, far) {
+	this._near = near === undefined ? this.defaultCameraNear : near
+	this._far = far === undefined ? this.defaultCameraFar : far
+	superPerspective.call(this, fovy, aspect, near, far)
+}

package/p5.filterRenderer.min.js

@@ -0,0 +1,4 @@
+class Renderer{constructor(t=window,e={}){this.target=t,this.fbo=t.createFramebuffer(e),this.shader=t.createShader(this.vert(),this.frag())}vert(){throw new Error("Unimplemented")}frag(){throw new Error("Unimplemented")}getUniforms(){return{}}draw(t){this.fbo.draw((()=>{this.target.push(),t(),this.target.pop()}));const e=this.getUniforms();this.target.push(),this.target.noStroke(),this.target.rectMode(CENTER),this.target.shader(this.shader);for(const t in e)this.shader.setUniform(t,e[t]);this.target.rect(0,0,this.target.width,-this.target.height),this.target.pop()}remove(){this.fbo.remove()}}const superPerspective=p5.Camera.prototype.perspective;p5.Camera.prototype.perspective=function(t,e,r,s){this._near=void 0===r?this.defaultCameraNear:r,this._far=void 0===s?this.defaultCameraFar:s,superPerspective.call(this,t,e,r,s)};
+class BlurRenderer extends Renderer{constructor(e,t){super(e,t),this.focus=e.height/2/tan(PI/6),this.intensity=.05,this.dof=0,this.numSamples=15}vert(){return BlurRenderer.vert}frag(){return BlurRenderer.frag}focusHere(){const e=new DOMMatrix(this.target._renderer.uMVMatrix.mat4),t=new DOMPoint(0,0,0).matrixTransform(e);this.focus=-t.z}setDof(e){this.dof=e}setIntensity(e){this.intensity=e}setSamples(e){this.numSamples=e}getUniforms(){return{uImg:this.fbo.color,uDepth:this.fbo.depth,uSize:[this.target.width,this.target.height],uIntensity:this.intensity,uDof:this.dof,uNumSamples:this.numSamples,uNear:this.target._renderer._curCamera._near,uFar:this.target._renderer._curCamera._far,uTargetZ:this.focus}}}p5.prototype.createBlurRenderer=function(e){return new BlurRenderer(this,e)},BlurRenderer.vert="\nprecision highp float;\n\nattribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\nvarying highp vec2 vVertTexCoord;\n\nvoid main(void) {\n  vec4 positionVec4 = vec4(aPosition, 1.0);\n  gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n  vVertTexCoord = aTexCoord;\n}\n",BlurRenderer.frag="\nprecision highp float;\nvarying highp vec2 vVertTexCoord;\n\nuniform sampler2D uImg;\nuniform sampler2D uDepth;\nuniform vec2 uSize;\nuniform float uIntensity;\nuniform float uDof;\nuniform float maxBlur;\nuniform int uNumSamples;\nuniform float uTargetZ;\nuniform float uNear;\nuniform float uFar;\n\n#define PI 3.14159265359;\n\nconst int MAX_NUM_SAMPLES = 50;\n\nfloat rand(vec2 co){\n  return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);\n}\n\nfloat depthToZ(float depth) {\n  float depthNormalized = 2.0 * depth - 1.0;\n  return 2.0 * uNear * uFar / (uFar + uNear - depthNormalized * (uFar - uNear));\n}\n\nfloat calcBlur(float z, float pixelScale) {\n  return clamp(abs(z - uTargetZ) - uDof / 2., 0.0, 0.3*pixelScale);\n}\n\nvoid main() {\n  float total = 1.0;\n  float origZ = depthToZ(texture2D(uDepth, vVertTexCoord).x);\n  vec4 color = texture2D(uImg, vVertTexCoord);\n\n  if (abs(origZ - uTargetZ) > uDof / 2.) {\n    float pixelScale = max(uSize.x, uSize.y);\n    float blurAmt = calcBlur(origZ, pixelScale);\n    for (int i = 0; i < MAX_NUM_SAMPLES; i++) {\n      if (i >= uNumSamples) break;\n      float t = (float(i + 1) / float(uNumSamples));\n      float angle = (t*12.0) * 2. * PI;\n      float radius = 1.0 - (t*t*t); // Sample more on the outer edge\n      angle += 5.*rand(gl_FragCoord.xy);\n      vec2 offset = (vec2(cos(angle),sin(angle)) * radius * uIntensity * blurAmt)/pixelScale;\n      float z = depthToZ(texture2D(uDepth, vVertTexCoord + offset).x);\n      float sampleBlur = calcBlur(z, pixelScale);\n\n      float weight = float((z >= origZ) || (sampleBlur >= blurAmt*radius + 5.));\n      vec4 sample = texture2D(uImg, vVertTexCoord + offset);\n      color += weight * sample;\n      total += weight;\n    }\n  }\n\n  color /= total;\n  gl_FragColor = color;\n}\n";
+class GaussianBlurRenderer extends BlurRenderer{constructor(t,e){super(t,e),this.fbo2=t.createFramebuffer(e),this.intensity=.1,this.numSamples=20}frag(){return GaussianBlurRenderer.frag}getUniforms(){const t=super.getUniforms();return delete t.uImg,t}draw(t){this.fbo.draw((()=>{this.target.push(),t(),this.target.pop()}));const e=this.getUniforms();this.target.push(),this.fbo2.draw((()=>{this.target.push(),this.target.clear(),this.target.noStroke(),this.target.rectMode(CENTER),this.target.shader(this.shader);for(const t in e)this.shader.setUniform(t,e[t]);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 t in e)this.shader.setUniform(t,e[t]);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()}remove(){super.remove(),this.fbo2.remove()}}p5.prototype.createGaussianBlurRenderer=function(t){return new GaussianBlurRenderer(this,t)},GaussianBlurRenderer.frag=`\nprecision highp float;\nvarying highp vec2 vVertTexCoord;\nuniform sampler2D uImg;\nuniform sampler2D uDepth;\nuniform vec2 uSize;\nuniform float uIntensity;\nuniform float uDof;\nuniform float maxBlur;\nuniform int uNumSamples;\nuniform float uTargetZ;\nuniform float uNear;\nuniform float uFar;\nuniform int uDirection;\n#define s ${.5/3}\nconst int MAX_NUM_SAMPLES = 50;\nfloat depthToZ(float depth) {\n  float depthNormalized = 2.0 * depth - 1.0;\n  return 2.0 * uNear * uFar / (uFar + uNear - depthNormalized * (uFar - uNear));\n}\nfloat calcBlur(float z, float pixelScale) {\n  return clamp(abs(z - uTargetZ) - uDof / 2., 0.0, 0.3*pixelScale);\n}\nvoid main() {\n  float total = 1.0;\n  float origZ = depthToZ(texture2D(uDepth, vVertTexCoord).x);\n  vec4 color = texture2D(uImg, vVertTexCoord);\n  if (abs(origZ - uTargetZ) > uDof / 2.) {\n    float pixelScale = max(uSize.x, uSize.y);\n    float blurAmt = calcBlur(origZ, pixelScale);\n    for (int i = 0; i < MAX_NUM_SAMPLES; i++) {\n      if (i >= uNumSamples) break;\n      float t = (float(i) / float(uNumSamples - 1));\n      float radius = (t * 2. - 1.);\n      float distAway = radius * uIntensity * blurAmt;\n      vec2 offset = (uDirection == 0 ? vec2(1.,0.) : vec2(0.,1.)) * distAway / pixelScale;\n      float z = depthToZ(texture2D(uDepth, vVertTexCoord + offset).x);\n      float sampleBlur = calcBlur(z, pixelScale);\n      float t2 = distAway / (sampleBlur * uIntensity);\n      float weight = ${1/Math.sqrt(2*Math.PI)} / s * exp(-0.5*pow(t2/s,2.));\n      vec4 sample = texture2D(uImg, vVertTexCoord + offset);\n      color += weight * sample;\n      total += weight;\n    }\n  }\n  color /= total;\n  gl_FragColor = color;\n}\n`;
+class ContactShadowRenderer extends Renderer{constructor(e,t){super(e,t),!this.target.webglVersion===WEBGL2&&this.target._renderer.GL.getExtension("OES_standard_derivatives"),this.fbo2=e.createFramebuffer(t),this.blurShader=e.createShader(this.blurVert(),this.blurFrag()),this.intensity=.5,this.numShadowSamples=15,this.numBlurSamples=20,this.exponent=250,this.bias=.1,this.searchRadius=100,this.blurRadius=50}prefix(){return this.target.webglVersion===WEBGL2?"#version 300 es\n#define IS_WEBGL2\n":"#extension GL_OES_standard_derivatives : enable\n"}vert(){return this.prefix()+ContactShadowRenderer.vert}frag(){return this.prefix()+ContactShadowRenderer.frag}blurVert(){return this.vert()}blurFrag(){return this.prefix()+ContactShadowRenderer.blurFrag}setIntensity(e){this.intensity=e}setShadowSamples(e){this.numShadowSamples=e}setBlurSamples(e){this.numBlurSamples=e}setBlurRadius(e){this.blurRadius=e}setExponent(e){this.exponent=e}setBias(e){this.bias=e}setSearchRadius(e){this.searchRadius=e}getShadowUniforms(){const e=[-2/(this.target.width*this.target._renderer.uPMatrix.mat4[0]),-2/(this.target.height*this.target._renderer.uPMatrix.mat4[5]),(1-this.target._renderer.uPMatrix.mat4[2])/this.target._renderer.uPMatrix.mat4[0],(1+this.target._renderer.uPMatrix.mat4[6])/this.target._renderer.uPMatrix.mat4[5]];return{uImg:this.fbo.color,uDepth:this.fbo.depth,uSize:[this.target.width,this.target.height],uIntensity:this.intensity,uNumSamples:this.numShadowSamples,uNear:this.target._renderer._curCamera.cameraNear,uFar:this.target._renderer._curCamera.cameraFar,uProjInfo:e,uExponent:this.exponent,uBias:this.bias,uSearchRadius:this.searchRadius}}getBlurUniforms(){return{uImg:this.fbo.color,uDepth:this.fbo.depth,uShadow:this.fbo2.color,uSize:[this.target.width,this.target.height],uIntensity:this.intensity,uNear:this.target._renderer._curCamera.cameraNear,uFar:this.target._renderer._curCamera.cameraFar,uNumSamples:this.numBlurSamples,uBlurRadius:this.blurRadius}}draw(e){const t=this.getShadowUniforms(),n=this.getBlurUniforms();this.fbo.draw((()=>{this.target.push(),e(),this.target.pop()})),this.target.push(),this.fbo2.draw((()=>{this.target.push(),this.target.clear(),this.target.noStroke(),this.target.rectMode(CENTER),this.target.shader(this.shader);for(const e in t)this.shader.setUniform(e,t[e]);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.blurShader);for(const e in n)this.blurShader.setUniform(e,n[e]);this.target.rect(0,0,this.target.width,-this.target.height),this.target.pop()}}p5.prototype.createContactShadowRenderer=function(e){return new ContactShadowRenderer(this,e)},ContactShadowRenderer.vert="\n#ifdef IS_WEBGL2\nin vec3 aPosition;\nin vec3 aNormal;\nin vec2 aTexCoord;\n#else\nattribute vec3 aPosition;\nattribute vec3 aNormal;\nattribute vec2 aTexCoord;\n#endif\n\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat3 uNormalMatrix;\n\n#ifdef IS_WEBGL2\nout highp vec2 vVertTexCoord;\n#else\nvarying highp vec2 vVertTexCoord;\n#endif\n\nvoid main(void) {\n  vec4 positionVec4 = vec4(aPosition, 1.0);\n  gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n  vVertTexCoord = aTexCoord;\n}\n",ContactShadowRenderer.frag=`\nprecision highp float;\n#ifdef IS_WEBGL2\nin highp vec2 vVertTexCoord;\nout highp vec4 outColor;\n#else\nvarying highp vec2 vVertTexCoord;\n#endif\n\nuniform sampler2D uImg;\nuniform sampler2D uDepth;\nuniform vec2 uSize;\nuniform int uNumSamples;\nuniform float uNear;\nuniform float uFar;\nuniform vec4 uProjInfo;\nuniform float uSearchRadius;\nuniform float uIntensity;\nuniform float uExponent;\nuniform float uBias;\n\nconst int MAX_NUM_SAMPLES = 100;\n\nfloat rand(vec2 co) {\n  return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);\n}\nfloat rand(vec4 co) {\n  return fract(rand(co.xz) + rand(co.xy) + rand(co.yw) + rand(co.zw));\n}\n\nvec3 worldFromScreen(vec2 offset) {\n#ifdef IS_WEBGL2\n  float z = uNear * uFar  / ((uNear - uFar) * texture(uDepth, vVertTexCoord + offset).x + uFar);\n#else\n  float z = uNear * uFar  / ((uNear - uFar) * texture2D(uDepth, vVertTexCoord + offset).x + uFar);\n#endif\n  return vec3((((vVertTexCoord + offset) * uSize) * uProjInfo.xy + uProjInfo.zw) * z, z);\n}\n\nvec2 screenFromWorld(vec3 world) {\n  return (world.xy/world.z - uProjInfo.zw)/uProjInfo.xy;\n}\n\nconst float EPSILON = 0.01;\n\nmat4 axisAngleRotation(vec3 axis, float angle) {\n  axis = normalize(axis);\n  float s = sin(angle);\n  float c = cos(angle);\n  float oc = 1.0 - c;\n\n  return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,\n              oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,\n              oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,\n              0.0,                                0.0,                                0.0,                                1.0);\n}\nvec3 adjustNormal(\n  vec3 origNormal,\n  vec3 displacementNormal,\n  vec3 noDisplacementNormal\n) {\n  // Find the rotation induced by the displacement\n  float angle = acos(dot(displacementNormal, noDisplacementNormal));\n  vec3 rawAxis = cross(displacementNormal, noDisplacementNormal);\n  if (length(rawAxis) < 0.01) {\n    return origNormal;\n  }\n  vec3 axis = normalize(rawAxis);\n  mat4 rotation = axisAngleRotation(axis, angle);\n\n  // Apply the rotation to the original normal\n  vec3 normal = (rotation * vec4(origNormal, 0.)).xyz;\n  return normal;\n}\n\nvoid main() {\n#ifdef IS_WEBGL2\n  vec4 color = texture(uImg, vVertTexCoord);\n#else\n  vec4 color = texture2D(uImg, vVertTexCoord);\n#endif\n  vec3 position = worldFromScreen(vec2(0., 0.));\n  vec3 normal = normalize(cross(dFdx(position), dFdy(position)));\n\n  float radiusSquared = uSearchRadius * uSearchRadius;\n\n  float occlusion = 0.;\n\n  for (int i = 0; i < MAX_NUM_SAMPLES; i++) {\n    if (i >= uNumSamples) break;\n    float t = (float(i + 1) / float(uNumSamples));\n\n    // Sample a sort of random ish coordinate in a half sphere pointing up\n    float phi = ${2*Math.PI} * rand(vec4(gl_FragCoord.xy,t*100.,0.));\n    float theta = ${Math.PI/2} * rand(vec4(gl_FragCoord.xy,t*100.,100.));\n    float radius = 1.0 - t*t;\n    vec3 localOff = vec3(\n      radius * cos(phi) * sin(theta),\n      radius * cos(theta),\n      radius * sin(phi) * sin(theta)\n    );\n\n    // Translate that to be a hemisphere oriented with the surface normal\n    vec3 rotatedOff = adjustNormal(localOff, normal, vec3(0., 1., 0.));\n    vec3 testPosition = position + rotatedOff * uSearchRadius;\n    vec2 screenPosition = screenFromWorld(testPosition);\n    vec2 offset = screenPosition / uSize - vVertTexCoord;\n    \n    // At that screen space coordinate, what is the position of the object we see?\n    vec3 samplePos = worldFromScreen(offset);\n\n    if (samplePos.z > mix(uNear, uFar, 0.99)) continue;\n\n    // The amount of occlusion is proportional to the *cosine* of the angle between\n    // the line connecting the object to the surface and the surface normal. This is\n    // because light coming in at an angle is more spread out and thus delivers less\n    // energy to the surface.\n    //\n    // The dot product of originToSample and the normal is proportional to this energy\n    // because dot(a, b) is equivalent to length(a)*length(b)*cos(angle_between_a_and_b)\n    vec3 originToSample = samplePos - position;\n    float squaredDistanceToSample = dot(originToSample, originToSample);\n    float vn = dot(originToSample, normal) - uBias;\n\n    // We only let stuff start making a shadow when it's within our search radius. At\n    // the edge it should not occlude, and as it gets closer, it should occlude more.\n    // We'll give it a cubic falloff so it looks smoother.\n    float f = max(radiusSquared - squaredDistanceToSample, 0.0) / radiusSquared;\n    float sampleOcclusion = f * f * f * max(vn / (EPSILON + squaredDistanceToSample), 0.0);\n\n    occlusion += sampleOcclusion;\n  }\n  occlusion = 1.0 - (occlusion / float(uNumSamples));\n  occlusion = clamp(pow(occlusion, 1.0 + uExponent), 0.0, 1.0);\n  vec4 finalColor = vec4(occlusion, occlusion, occlusion, 1.);\n#ifdef IS_WEBGL2\n  outColor = finalColor;\n#else\n  gl_FragColor = finalColor;\n#endif\n}\n`,ContactShadowRenderer.blurFrag=`\nprecision highp float;\n#ifdef IS_WEBGL2\nin highp vec2 vVertTexCoord;\nout highp vec4 outColor;\n#else\nvarying highp vec2 vVertTexCoord;\n#endif\n\nuniform sampler2D uImg;\nuniform sampler2D uDepth;\nuniform sampler2D uShadow;\nuniform vec2 uSize;\nuniform float uNear;\nuniform float uFar;\nuniform float uIntensity;\nuniform int uNumSamples;\nuniform float uBlurRadius;\n\n#ifdef IS_WEBGL2\n#define texFn texture\n#else\n#define texFn texture2D\n#endif\n\nfloat depthToZ(float depth) {\n  float depthNormalized = 2.0 * depth - 1.0;\n  return 2.0 * uNear * uFar / (uFar + uNear - depthNormalized * (uFar - uNear));\n}\n\nconst int MAX_NUM_SAMPLES = 100;\n\nfloat rand(vec2 co) {\n  return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);\n}\nfloat rand(vec4 co) {\n  return fract(rand(co.xz) + rand(co.xy) + rand(co.yw) + rand(co.zw));\n}\n\nvoid main() {\n  vec4 color = texFn(uImg, vVertTexCoord);\n\n  float origZ = depthToZ(texFn(uDepth, vVertTexCoord).x);\n  float occlusion = texFn(uShadow, vVertTexCoord).x;\n  float total = 1.;\n\n  for (int i = 0; i < MAX_NUM_SAMPLES; i++) {\n    if (i >= uNumSamples) break;\n    float t = (float(i) / float(uNumSamples - 1));\n    float angle = (t*12.0) * ${2*Math.PI};\n    float radius = 1.0 - t;\n    angle += 5.*rand(gl_FragCoord.xy);\n\n    vec2 offset = (vec2(cos(angle),sin(angle)) * radius * uBlurRadius)/uSize;\n    float z = depthToZ(texFn(uDepth, vVertTexCoord + offset).x);\n\n    float weight = float(z >= origZ);\n    float shadowSample = texFn(uShadow, vVertTexCoord + offset).x;\n    occlusion += weight * shadowSample;\n    total += weight;\n  }\n  occlusion /= total;\n  vec4 mixedColor = vec4(color.rgb * mix(1., occlusion, uIntensity), color.a);\n#ifdef IS_WEBGL2\n  outColor = mixedColor;\n#else\n  gl_FragColor = mixedColor;\n#endif\n}\n`;

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@davepagurek/p5.filterrenderer",
+  "version": "0.0.12",
+  "main": "p5.filterRenderer.min.js",
+  "author": "Dave Pagurek <dave@davepagurek.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/davepagurek/p5.filterRenderer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/davepagurek/p5.filterRenderer/issues"
+  },
+  "homepage": "https://github.com/davepagurek/p5.filterRenderer",
+  "dependencies": {},
+  "devDependencies": {
+    "minify": "^9.0.0",
+    "prettier": "^2.7.1"
+  },
+  "scripts": {
+    "build:all": "minify Renderer.js > p5.filterRenderer.min.js; minify BlurRenderer.js >> p5.filterRenderer.min.js; minify GaussianBlurRenderer.js >> p5.filterRenderer.min.js; minify ContactShadowRenderer.js >> p5.filterRenderer.min.js",
+    "build": "yarn build:all",
+    "publish": "npm publish --access public"
+  },
+  "files": [
+    "p5.filterRenderer.min.js",
+    "Renderer.js",
+    "BlurRenderer.js",
+    "GaussianBlurRenderer.js",
+    "ContactShadowRenderer.js"
+  ]
+}