Skip to content

Commit b218979

Browse files
davepagurekdavepagurek
committed
Add blur example
1 parent 9b00862 commit b218979

File tree

5 files changed

+157
-0
lines changed

5 files changed

+157
-0
lines changed

‎examples/blur/blur.frag‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
precision highp float;
2+
varying highp vec2 vVertTexCoord;
3+
4+
uniform sampler2D uImg;
5+
uniform sampler2D uDepth;
6+
uniform vec2 uSize;
7+
uniform float uIntensity;
8+
uniform float maxBlur;
9+
uniform int uNumSamples;
10+
uniform float uTargetZ;
11+
uniform float uNear;
12+
uniform float uFar;
13+
14+
#define PI 3.14159265359;
15+
16+
const int MAX_NUM_SAMPLES = 50;
17+
18+
float rand(vec2 co){
19+
return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);
20+
}
21+
22+
float depthToZ(float depth) {
23+
float depthNormalized = 2.0 * depth - 1.0;
24+
return 2.0 * uNear * uFar / (uFar + uNear - depthNormalized * (uFar - uNear));
25+
}
26+
27+
float calcBlur(float z, float pixelScale) {
28+
return clamp(abs(z - uTargetZ), 0.0, 0.3*pixelScale);
29+
}
30+
31+
void main() {
32+
float pixelScale = max(uSize.x, uSize.y);
33+
float total = 1.0;
34+
float origZ = depthToZ(texture2D(uDepth, vVertTexCoord).x);
35+
vec4 color = texture2D(uImg, vVertTexCoord);
36+
float blurAmt = calcBlur(origZ, pixelScale);
37+
for (int i = 0; i < MAX_NUM_SAMPLES; i++) {
38+
if (i >= uNumSamples) break;
39+
float t = (float(i + 1) / float(uNumSamples));
40+
float angle = (t*12.0) * 2. * PI;
41+
float radius = 1.0 - (t*t*t); // Sample more on the outer edge
42+
angle += 5.*rand(gl_FragCoord.xy);
43+
vec2 offset = (vec2(cos(angle),sin(angle)) * radius * uIntensity * blurAmt)/pixelScale;
44+
float z = depthToZ(texture2D(uDepth, vVertTexCoord + offset).x);
45+
float sampleBlur = calcBlur(z, pixelScale);
46+
47+
float weight = float((z >= origZ) || (sampleBlur >= blurAmt*radius + 5.));
48+
vec4 sample = texture2D(uImg, vVertTexCoord + offset);
49+
color += weight * sample;
50+
total += weight;
51+
}
52+
color /= total;
53+
gl_FragColor = color;
54+
}

‎examples/blur/blur.vert‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
precision highp float;
2+
3+
attribute vec3 aPosition;
4+
attribute vec3 aNormal;
5+
attribute vec2 aTexCoord;
6+
7+
uniform mat4 uModelViewMatrix;
8+
uniform mat4 uProjectionMatrix;
9+
uniform mat3 uNormalMatrix;
10+
11+
varying highp vec2 vVertTexCoord;
12+
13+
void main(void) {
14+
vec4 positionVec4 = vec4(aPosition, 1.0);
15+
gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
16+
vVertTexCoord = aTexCoord;
17+
}

‎examples/blur/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html><html lang="en"><head>
2+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.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+
<script src="sketch.js"></script>
10+
11+
12+
</body></html>

‎examples/blur/sketch.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
let fbo
2+
let blurShader
3+
4+
function preload() {
5+
blurShader = loadShader('blur.vert', 'blur.frag')
6+
}
7+
8+
function setup() {
9+
createCanvas(400, 400, WEBGL);
10+
fbo = createFramebuffer()
11+
}
12+
13+
function draw() {
14+
const eyeZ = (height/2) / tan(PI/6)
15+
const near = eyeZ/10
16+
const far = eyeZ*10
17+
perspective(PI/3, width/height, near, far)
18+
19+
const blurIntensity = 0.006
20+
// Since the camera is set back `eyeZ`, to focus on objects at z=0, we need
21+
// to focus eyeZ in front of the camera.
22+
const targetDepth = eyeZ
23+
24+
fbo.draw(() => {
25+
clear()
26+
push()
27+
background(255)
28+
noStroke()
29+
lights()
30+
31+
push()
32+
fill('red')
33+
translate(50*sin(millis()/500), 50*cos(millis()/500), 100*sin(millis()/800 + 100))
34+
sphere(50)
35+
pop()
36+
37+
push()
38+
fill('blue')
39+
translate(50*cos(millis()/300+12), 50*sin(millis()/600), 100*sin(millis()/800 + 1))
40+
sphere(50)
41+
pop()
42+
43+
push()
44+
fill('white')
45+
translate(0, 1000, -100)
46+
sphere(900)
47+
pop()
48+
pop()
49+
})
50+
51+
clear()
52+
53+
push()
54+
noStroke()
55+
rectMode(CENTER)
56+
shader(blurShader)
57+
blurShader.setUniform('uImg', fbo.color)
58+
blurShader.setUniform('uDepth', fbo.depth)
59+
blurShader.setUniform('uSize', [width, height])
60+
blurShader.setUniform('uIntensity', 0.05)
61+
blurShader.setUniform('uNumSamples', 15)
62+
blurShader.setUniform('uTargetZ', targetDepth)
63+
blurShader.setUniform('uNear', near)
64+
blurShader.setUniform('uFar', far)
65+
plane(width, -height)
66+
pop()
67+
}

‎examples/blur/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+
}

0 commit comments

Comments
 (0)