Use 2x resolution in WebGL 1 mode

Author: davepagurek

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.

p5.Framebuffer.js

@@ -165,7 +165,7 @@ class Framebuffer {
       throw new Error('Unable to create a framebuffer')
     }
     this.framebuffer = framebuffer
-    if (this.antialias) {
+    if (this.antialias && this._renderer.hasWebGL2) {
       this.aaFramebuffer = gl.createFramebuffer()
       if (!this.aaFramebuffer) {
         throw new Error('Unable to create a framebuffer')
@@ -187,6 +187,10 @@ class Framebuffer {
     return cam;
   }
 
+  defaultCamera() {
+    return this.cam
+  }
+
   resizeCanvas(width, height) {
     this.autoSized = false
     this.width = width
@@ -226,7 +230,9 @@ class Framebuffer {
     return gl.UNSIGNED_INT
   }
   glInternalFormat(hasAlpha) {
-    if (this.antialias) return this.glInternalRenderbufferFormat(hasAlpha)
+    if (this.antialias && this._renderer.hasWebGL2) {
+      return this.glInternalRenderbufferFormat(hasAlpha)
+    }
     const gl = this._renderer.GL
     if (this._renderer.hasWebGL2 && this.colorFormat === gl.FLOAT) {
       return hasAlpha ? gl.RGBA16F : gl.RGB16F
@@ -306,8 +312,8 @@ class Framebuffer {
       gl.TEXTURE_2D,
       0,
       this.glInternalFormat(hasAlpha),
-      this.width * this.density,
-      this.height * this.density,
+      this.width * this.density * this.aaDensity,
+      this.height * this.density * this.aaDensity,
       0,
       this.glFormat(hasAlpha),
       this.colorFormat,
@@ -328,8 +334,8 @@ class Framebuffer {
       gl.TEXTURE_2D,
       0,
       this.glDepthInternalFormat(),
-      this.width * this.density,
-      this.height * this.density,
+      this.width * this.density * this.aaDensity,
+      this.height * this.density * this.aaDensity,
       0,
       gl.DEPTH_COMPONENT,
       this.depthFormat,
@@ -353,7 +359,7 @@ class Framebuffer {
     )
 
     // Create separate framebuffer for antialiasing
-    if (this.antialias) {
+    if (this.antialias && this._renderer.hasWebGL2) {
       this.colorRenderbuffer = gl.createRenderbuffer()
       gl.bindRenderbuffer(gl.RENDERBUFFER, this.colorRenderbuffer)
       if (this._renderer.hasWebGL2) {
@@ -365,6 +371,7 @@ class Framebuffer {
           this.height * this.density,
         )
       } else {
+        // TODO: use this in WebGL 1
         gl.renderbufferStorage(
           gl.RENDERBUFFER,
           gl.getParameter(gl.MAX_SAMPLES),
@@ -385,6 +392,7 @@ class Framebuffer {
           this.height * this.density,
         )
       } else {
+        // TODO: use this in WebGL 1
         gl.renderbufferStorage(
           gl.RENDERBUFFER,
           gl.getParameter(gl.MAX_SAMPLES),
@@ -416,8 +424,8 @@ class Framebuffer {
         minFilter: 'nearest',
         magFilter: 'nearest',
       },
-      this.width * this.density,
-      this.height * this.density,
+      this.width * this.density * this.aaDensity,
+      this.height * this.density * this.aaDensity,
     )
     this._renderer.textures.push(depthP5Texture)
 
@@ -428,8 +436,8 @@ class Framebuffer {
         glMinFilter: 'nearest',
         glMagFilter: 'nearest',
       },
-      this.width * this.density,
-      this.height * this.density,
+      this.width * this.density * this.aaDensity,
+      this.height * this.density * this.aaDensity,
     )
     this._renderer.textures.push(colorP5Texture)
 
@@ -449,15 +457,15 @@ class Framebuffer {
     const p5TextureIdx = this._renderer.textures.findIndex(
       (t) => t.src === texture,
     )
-      if (p5TextureIdx !== -1) {
-        this._renderer.textures.splice(p5TextureIdx, 1)
-      }
+    if (p5TextureIdx !== -1) {
+      this._renderer.textures.splice(p5TextureIdx, 1)
+    }
   }
 
   draw(cb) {
     const gl = this._renderer.GL
     const prevFramebuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING)
-    if (this.antialias) {
+    if (this.antialias && this._renderer.hasWebGL2) {
       gl.bindFramebuffer(gl.FRAMEBUFFER, this.aaFramebuffer)
     } else {
       gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer)
@@ -490,15 +498,15 @@ class Framebuffer {
       this._renderer._curCamera.cameraMatrix.mat4[15]
     )
     cb()
-    if (this.antialias) {
+    if (this.antialias && this._renderer.hasWebGL2) {
       gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this.aaFramebuffer)
       gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, this.framebuffer)
       for (const [flag, filter] of [[gl.COLOR_BUFFER_BIT, gl.LINEAR, gl.DEPTH_BUFFER_BIT, gl.NEAREST]]) {
         gl.blitFramebuffer(
           0, 0,
           this.width * this.density * this.aaDensity, this.height * this.density * this.aaDensity,
           0, 0,
-          this.width * this.density, this.height * this.density,
+          this.width * this.density * this.aaDensity, this.height * this.density * this.aaDensity,
           flag,
           filter,
         )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@davepagurek/p5.framebuffer",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "p5.Framebuffer.js",
   "author": "Dave Pagurek <[email protected]>",
   "license": "MIT",