Skip to content

Commit dad2ae0

Browse files
davepagurekdavepagurek
committed
Working Renderbuffers, but only WebGL2 blitting
1 parent 80721b1 commit dad2ae0

File tree

12 files changed

+262
-24
lines changed

12 files changed

+262
-24
lines changed

‎BlurRenderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
class BlurRenderer extends Renderer {
2-
constructor(target) {
3-
super(target)
2+
constructor(target, options) {
3+
super(target, options)
44
this.focus = (target.height / 2) / tan(PI / 6)
55
this.intensity = 0.05
66
this.dof = 0

‎ContactShadowRenderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
class ContactShadowRenderer extends Renderer {
2-
constructor(target) {
3-
super(target)
2+
constructor(target, options) {
3+
super(target, options)
44
if (!this.target._renderer.hasWebGL2) {
55
this.target._renderer.GL.getExtension('OES_standard_derivatives')
66
}

‎GaussianBlurRenderer.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
class GaussianBlurRenderer extends BlurRenderer {
2-
constructor(target) {
3-
super(target)
4-
this.fbo2 = target.createFramebuffer()
2+
constructor(target, options) {
3+
super(target, options)
4+
this.fbo2 = target.createFramebuffer(options)
55
this.intensity = 0.1
66
this.numSamples = 20
77
}
@@ -17,7 +17,6 @@ class GaussianBlurRenderer extends BlurRenderer {
1717
}
1818

1919
draw(cb) {
20-
const prevCamera = this.target._renderer._curCamera
2120
this.fbo.draw(() => {
2221
this.target.push()
2322
cb()
@@ -27,8 +26,6 @@ class GaussianBlurRenderer extends BlurRenderer {
2726
const uniforms = this.getUniforms()
2827

2928
this.target.push()
30-
this.target.setCamera(this.cam)
31-
this.cam.move(0, 0, 0)
3229

3330
this.fbo2.draw(() => {
3431
this.target.push()
@@ -55,7 +52,6 @@ class GaussianBlurRenderer extends BlurRenderer {
5552
this.shader.setUniform('uImg', this.fbo2.color)
5653
this.target.rect(0, 0, this.target.width, -this.target.height)
5754
this.target.pop()
58-
this.target.setCamera(prevCamera)
5955
}
6056

6157
remove() {

‎Renderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
class Renderer {
2-
constructor(target = window) {
2+
constructor(target = window, options = {}) {
33
this.target = target
4-
this.fbo = target.createFramebuffer()
4+
this.fbo = target.createFramebuffer(options)
55
this.shader = target.createShader(this.vert(), this.frag())
66
}
77

‎examples/blur/sketch.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ let blurRenderer
22

33
function setup() {
44
createCanvas(400, 400, WEBGL)
5-
blurRenderer = createBlurRenderer()
5+
blurRenderer = createBlurRenderer({ antialias: true })
66
blurRenderer.setIntensity(0.05)
77
blurRenderer.setSamples(20)
88
}

‎examples/feedback/sketch.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ function setup() {
88
setAttributes({ alpha: true })
99

1010
// Try changing `float` to `unsigned_byte` to see it leave a trail
11-
options = { colorFormat: 'float' }
11+
options = { colorFormat: 'float', antialias: true }
1212
fboPrev = createFramebuffer(options)
1313
fboNext = createFramebuffer(options)
1414
imageMode(CENTER)

‎examples/formats/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html><html lang="en"><head>
2+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
3+
<script src="../../p5.Framebuffer.js" type="text/javascript"></script>
4+
<link rel="stylesheet" type="text/css" href="style.css">
5+
<meta charset="utf-8">
6+
7+
</head>
8+
<body>
9+
<div id="controls">
10+
<select id="webglVersion">
11+
<option value="2" selected>WebGL 2</option>
12+
<option value="1">WebGL 1</option>
13+
</select>
14+
15+
<select id="alpha">
16+
<option value="alpha" selected>Alpha</option>
17+
<option value="noAlpha">No Alpha</option>
18+
</select>
19+
20+
<select id="antialias">
21+
<option value="antialias" selected>Antialiased</option>
22+
<option value="noAntialiased">No antialiasing</option>
23+
</select>
24+
25+
<select id="format">
26+
<option value="unsigned_byte" selected>Unsigned Byte Textures</option>
27+
<option value="float">Float Textures</option>
28+
</select>
29+
</div>
30+
31+
<div id="sketch"></div>
32+
33+
<pre id="errors">
34+
</pre>
35+
36+
<script src="sketch.js"></script>
37+
38+
39+
</body></html>

‎examples/formats/sketch.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
let sketch
2+
let fbo
3+
const format = document.getElementById('format')
4+
const alpha = document.getElementById('alpha')
5+
const antialias = document.getElementById('antialias')
6+
const webglVersion = document.getElementById('webglVersion')
7+
const errors = document.getElementById('errors')
8+
9+
for (const input of [format, alpha, antialias, webglVersion]) {
10+
input.addEventListener('input', remakeSketch)
11+
}
12+
13+
function remakeSketch() {
14+
errors.textContent = ''
15+
Framebuffer.forceWebGL1 = webglVersion.value === '1'
16+
if (fbo) fbo.remove()
17+
if (sketch) sketch.remove()
18+
sketch = new p5(makeSketch)
19+
}
20+
remakeSketch()
21+
22+
function makeSketch(p5) {
23+
p5.setup = function() {
24+
try {
25+
p5.createCanvas(400, 400, p5.WEBGL).parent('sketch')
26+
if (alpha.value === 'alpha') {
27+
p5.setAttributes({ alpha: true })
28+
}
29+
fbo = p5.createFramebuffer({
30+
colorFormat: format.value,
31+
//depthFormat: format.value,
32+
antialias: antialias.value === 'antialias',
33+
})
34+
} catch (e) {
35+
errors.textContent = e.message
36+
}
37+
}
38+
39+
p5.draw = function() {
40+
// Draw to the Framebuffer
41+
fbo.draw(() => {
42+
p5.clear()
43+
p5.background(255)
44+
p5.push()
45+
p5.noStroke()
46+
p5.fill(255, 0, 0)
47+
p5.translate(0, 100*p5.sin(p5.frameCount * 0.01), 0)
48+
p5.rotateX(p5.frameCount * 0.01)
49+
p5.rotateY(p5.frameCount * 0.01)
50+
p5.box(50)
51+
p5.pop()
52+
})
53+
54+
// Do something with fbo.color or dbo.depth
55+
p5.clear()
56+
p5.background(255)
57+
58+
p5.push()
59+
p5.noStroke()
60+
p5.texture(fbo.color)
61+
p5.plane(p5.width, -p5.height)
62+
p5.pop()
63+
}
64+
65+
return p5
66+
}

‎examples/formats/style.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
html, body {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
canvas {
6+
display: block;
7+
}

‎examples/gaussianblur/sketch.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ let blurRenderer
22

33
function setup() {
44
createCanvas(400, 400, WEBGL)
5-
blurRenderer = createGaussianBlurRenderer()
5+
blurRenderer = createGaussianBlurRenderer({ antialias: true })
66
}
77

88
function draw() {

0 commit comments

Comments
 (0)