Skip to content

Commit a430daf

Browse files
davepagurekdavepagurek
authored
Update README.md
1 parent 53b92e7 commit a430daf

File tree

1 file changed

+113
-1
lines changed

1 file changed

+113
-1
lines changed

‎README.md‎

Lines changed: 113 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Add the library to your source code, *after* loading p5 but *before* loading you
1818

1919
### Via CDN
2020
```html
21-
<script src="https://cdn.jsdelivr.net/npm/@davepagurek/[email protected].2/p5.Framebuffer.min.js"></script>
21+
<script src="https://cdn.jsdelivr.net/npm/@davepagurek/[email protected].3/p5.Framebuffer.min.js"></script>
2222
```
2323

2424
### Self-hosted
@@ -73,12 +73,124 @@ function draw() {
7373
</tr>
7474
</table>
7575

76+
Methods:
77+
- `p5.prototype.createFramebuffer(options?: Options)`
78+
- `options.colorFormat: 'float' | 'unsigned_byte'`
79+
- Specify whether to use floating point storage for the color texture
80+
- Defaults to `'unsigned_byte'`
81+
- Note: If you use floating point colors, in Firefox you must also call `setAttributes({ alpha: true })`
82+
7683
Notes:
7784
- `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.
7885
- 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.
7986

8087
A live example: https://davepagurek.github.io/p5.Framebuffer/examples/simple
8188

89+
### Floating point textures
90+
91+
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.
92+
93+
This can be fixed if you store colors as floating point values! You can specify this in an optional options object when creating a Framebuffer object.
94+
95+
<table>
96+
<tr>
97+
<td rowspan="4">
98+
99+
```js
100+
let fboPrev, fboNext
101+
let canvas
102+
103+
function setup() {
104+
canvas = createCanvas(400, 400, WEBGL)
105+
// There's a bug in Firefox where you can only make floating point textures
106+
// if they're RGBA, and it breaks if it's just RGB
107+
setAttributes({ alpha: true })
108+
109+
// Try changing `float` to `unsigned_byte` to see it leave a trail
110+
options = { colorFormat: 'float' }
111+
fboPrev = createFramebuffer(options)
112+
fboNext = createFramebuffer(options)
113+
imageMode(CENTER)
114+
rectMode(CENTER)
115+
noStroke()
116+
}
117+
118+
function draw() {
119+
// Swap prev and next so that we can use the previous frame as a texture
120+
// when drawing the current frame
121+
[fboPrev, fboNext] = [fboNext, fboPrev]
122+
123+
// Draw to the Framebuffer
124+
fboNext.draw(() => {
125+
clear()
126+
127+
background(255)
128+
129+
// Disable depth testing so that the image of the previous
130+
// frame doesn't cut off the sube
131+
_renderer.GL.disable(_renderer.GL.DEPTH_TEST)
132+
push()
133+
scale(1.003)
134+
texture(fboPrev.color)
135+
plane(width, -height)
136+
pop()
137+
138+
push()
139+
// Fade to white slowly. This will leave a permanent trail if you don't
140+
// use floating point textures.
141+
fill(255, 1)
142+
rect(0, 0, width, height)
143+
pop()
144+
_renderer.GL.enable(_renderer.GL.DEPTH_TEST)
145+
146+
push()
147+
normalMaterial()
148+
translate(100*sin(frameCount * 0.014), 100*sin(frameCount * 0.02), 0)
149+
rotateX(frameCount * 0.01)
150+
rotateY(frameCount * 0.01)
151+
box(50)
152+
pop()
153+
})
154+
155+
clear()
156+
push()
157+
texture(fboNext.color)
158+
plane(width, -height)
159+
pop()
160+
}
161+
```
162+
163+
164+
</td>
165+
<th>
166+
With <code>colorFormat: 'float'</code>
167+
</th>
168+
</tr>
169+
<tr>
170+
<td>
171+
<img src="https://user-images.githubusercontent.com/5315059/178152103-07914de2-d09f-423f-99cc-84f83c422e8b.png">
172+
</td>
173+
</tr>
174+
<tr>
175+
<th>
176+
With <code>colorFormat: 'unsigned_byte'</code> (the default)
177+
</th>
178+
</tr>
179+
<tr>
180+
<td>
181+
<img src="https://user-images.githubusercontent.com/5315059/178152105-756356b0-d741-42b6-a460-9b7b2b571f16.png">
182+
</td>
183+
</tr>
184+
</table>
185+
186+
187+
Methods:
188+
- `p5.prototype.createFramebuffer(options?: Options)`
189+
- `options.colorFormat: 'float' | 'unsigned_byte'`
190+
- Specify whether to use floating point storage for the color texture
191+
- Defaults to `'unsigned_byte'`
192+
- Note: If you use floating point colors, in Firefox you must also call `setAttributes({ alpha: true })`
193+
82194
### Depth of field blur
83195

84196
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.

0 commit comments

Comments
 (0)