Merge pull request #22 from davepagurek/feat/antialias

Support antialiasing

Author: davepagurek

BlurRenderer.js

@@ -1,6 +1,6 @@
 class BlurRenderer extends Renderer {
-  constructor(target) {
-    super(target)
+  constructor(target, options) {
+    super(target, options)
     this.focus = (target.height / 2) / tan(PI / 6)
     this.intensity = 0.05
     this.dof = 0

ContactShadowRenderer.js

@@ -1,6 +1,6 @@
 class ContactShadowRenderer extends Renderer {
-  constructor(target) {
-    super(target)
+  constructor(target, options) {
+    super(target, options)
     if (!this.target._renderer.hasWebGL2) {
       this.target._renderer.GL.getExtension('OES_standard_derivatives')
     }

GaussianBlurRenderer.js

@@ -1,7 +1,7 @@
 class GaussianBlurRenderer extends BlurRenderer {
-  constructor(target) {
-    super(target)
-    this.fbo2 = target.createFramebuffer()
+  constructor(target, options) {
+    super(target, options)
+    this.fbo2 = target.createFramebuffer(options)
     this.intensity = 0.1
     this.numSamples = 20
   }
@@ -17,7 +17,6 @@ class GaussianBlurRenderer extends BlurRenderer {
   }
 
   draw(cb) {
-    const prevCamera = this.target._renderer._curCamera
     this.fbo.draw(() => {
       this.target.push()
       cb()
@@ -27,8 +26,6 @@ class GaussianBlurRenderer extends BlurRenderer {
     const uniforms = this.getUniforms()
 
     this.target.push()
-    this.target.setCamera(this.cam)
-    this.cam.move(0, 0, 0)
 
     this.fbo2.draw(() => {
       this.target.push()
@@ -55,7 +52,6 @@ class GaussianBlurRenderer extends BlurRenderer {
     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() {

README.md

@@ -18,7 +18,12 @@ 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]/p5.Framebuffer.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@davepagurek/[email protected]/p5.Framebuffer.min.js"></script>
+```
+
+On OpenProcessing, paste this link into a new library slot:
+```
+https://cdn.jsdelivr.net/npm/@davepagurek/[email protected]/p5.Framebuffer.min.js
 ```
 
 ### Self-hosted
@@ -82,13 +87,51 @@ Methods:
   - `options.size: { width: number; height: number; pixelDensity: number | undefined }`
     - Optionally specify a size and pixel density separate from the main canvas or graphic
     - If unspecified, the Framebuffer will resize when its canvas does
+  - `options.antialias: boolean`
+    - Turn on antialiasing by passing `true`
+    - WebGL2 (the default, if available) will use multisampled antialiasing
+    - WebGL1 will render at 2x the pixel density of the canvas for pseudo-antialiasing
 
 Notes:
 - `draw()` uses the same p5 context as the rest of your sketch! Make sure to wrap your callback code in a `push()` and `pop()` to ensure your settings don't leak out into your non-Framebuffer code.
 - When you `resizeCanvas`, the Framebuffer will automatically resize accordingly. You probably will want to clear it and redraw to it if you had a texture cached.
 
 A live example: https://davepagurek.github.io/p5.Framebuffer/examples/simple
 
+### Framebuffer objects
+
+Methods:
+- `Framebuffer.prototype.resizeCanvas(width: number, height: number)`
+  - Resizes the Framebuffer to the specified size
+  - This turns off autosizing to match the canvas size
+- `Framebuffer.prototype.autiSized()`
+  - Returns whether or not the framebuffer will automatically match the canvas's size
+- `Framebuffer.prototype.autiSized(shouldAutoSize: boolean)`
+  - Sets whether or not the framebuffer should automatically match the canvas's size
+- `Framebuffer.prototype.pixelDensity()`
+  - Returns the current pixel density of the framebuffer
+- `Framebuffer.prototype.pixelDensity(targetDensity: number)`
+  - Sets the pixel density of the framebuffer
+  - This also turns off autosizing
+- `Framebuffer.prototype.defaultCamera()`
+  - Returns the camera associated with the framebuffer by default
+- `Framebuffer.prototype.createCamera()`
+  - Returns a new `p5.Camera` that matches the current dimensions of the framebuffer
+
+An example of changing the size: https://davepagurek.github.io/p5.Framebuffer/examples/sizes
+
+### WebGL 1
+
+By default, this library will use WebGL 2 instead of WebGL 1. To use WebGL 1 mode, add this to the top of your sketch:
+
+```js
+Framebuffer.forceWebGL1 = true
+```
+
+Note: Antialiasing in WebGL 1 mode works by rendering at 2x resolution instead of using a multisampled texture at 1x resolution.
+
+Compare the resulting quality using WebGL 1 vs 2 in this example: https://davepagurek.github.io/p5.Framebuffer/examples/formats
+
 ### Floating point textures
 
 Sometimes, you want to write code that adds on to or modifies the previous frame. You may notice weird artifacts that show up due to the fact that colors are internally stored as integers: sometimes if you overlay a color with a very small alpha, the change in color is too small to round the resulting color up to the next integer value, so it doesn't change at all.

Renderer.js

@@ -1,7 +1,7 @@
 class Renderer {
-  constructor(target = window) {
+  constructor(target = window, options = {}) {
     this.target = target
-    this.fbo = target.createFramebuffer()
+    this.fbo = target.createFramebuffer(options)
     this.shader = target.createShader(this.vert(), this.frag())
   }
 

examples/blur/sketch.js

@@ -2,7 +2,7 @@ let blurRenderer
 
 function setup() {
   createCanvas(400, 400, WEBGL)
-  blurRenderer = createBlurRenderer()
+  blurRenderer = createBlurRenderer({ antialias: true })
   blurRenderer.setIntensity(0.05)
   blurRenderer.setSamples(20)
 }

examples/feedback/sketch.js

@@ -8,7 +8,7 @@ function setup() {
   setAttributes({ alpha: true })
 
   // Try changing `float` to `unsigned_byte` to see it leave a trail
-  options = { colorFormat: 'float' }
+  options = { colorFormat: 'float', antialias: true }
   fboPrev = createFramebuffer(options)
   fboNext = createFramebuffer(options)
   imageMode(CENTER)

examples/formats/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html><html lang="en"><head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
+    <script src="../../p5.Framebuffer.js" type="text/javascript"></script>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta charset="utf-8">
+
+  </head>
+  <body>
+    <div id="controls">
+      <select id="webglVersion">
+        <option value="2" selected>WebGL 2</option>
+        <option value="1">WebGL 1</option>
+      </select>
+
+      <select id="alpha">
+        <option value="alpha" selected>Alpha</option>
+        <option value="noAlpha">No Alpha</option>
+      </select>
+
+      <select id="antialias">
+        <option value="antialias" selected>Antialiased</option>
+        <option value="noAntialiased">No antialiasing</option>
+      </select>
+
+      <select id="format">
+        <option value="unsigned_byte" selected>Unsigned Byte Textures</option>
+        <option value="float">Float Textures</option>
+      </select>
+    </div>
+
+    <div id="sketch"></div>
+
+    <pre id="errors">
+    </pre>
+
+    <script src="sketch.js"></script>
+  
+
+</body></html>

examples/formats/sketch.js

@@ -0,0 +1,66 @@
+let sketch
+let fbo
+const format = document.getElementById('format')
+const alpha = document.getElementById('alpha')
+const antialias = document.getElementById('antialias')
+const webglVersion = document.getElementById('webglVersion')
+const errors = document.getElementById('errors')
+
+for (const input of [format, alpha, antialias, webglVersion]) {
+  input.addEventListener('input', remakeSketch)
+}
+
+function remakeSketch() {
+  errors.textContent = ''
+  Framebuffer.forceWebGL1 = webglVersion.value === '1'
+  if (fbo) fbo.remove()
+  if (sketch) sketch.remove()
+  sketch = new p5(makeSketch)
+}
+remakeSketch()
+
+function makeSketch(p5) {
+  p5.setup = function() {
+    try {
+      p5.createCanvas(400, 400, p5.WEBGL).parent('sketch')
+      if (alpha.value === 'alpha') {
+        p5.setAttributes({ alpha: true })
+      }
+      fbo = p5.createFramebuffer({
+        colorFormat: format.value,
+        //depthFormat: format.value,
+        antialias: antialias.value === 'antialias',
+      })
+    } catch (e) {
+      errors.textContent = e.message
+    }
+  }
+
+  p5.draw = function() {
+    // Draw to the Framebuffer
+    fbo.draw(() => {
+      p5.clear()
+      p5.background(255)
+      p5.push()
+      p5.noStroke()
+      p5.fill(255, 0, 0)
+      p5.translate(0, 100*p5.sin(p5.frameCount * 0.01), 0)
+      p5.rotateX(p5.frameCount * 0.01)
+      p5.rotateY(p5.frameCount * 0.01)
+      p5.box(50)
+      p5.pop()
+    })
+
+    // Do something with fbo.color or dbo.depth
+    p5.clear()
+    p5.background(255)
+
+    p5.push()
+    p5.noStroke()
+    p5.texture(fbo.color)
+    p5.plane(p5.width, -p5.height)
+    p5.pop()
+  }
+
+  return p5
+}

examples/formats/style.css

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