• Stars
    star
    824
  • Rank 55,348 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated about 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Simulating depth of field with particles on a shader

Blurry

Simulating depth of field with particles on a shader


Live demo here

How to use

Inside libs/createScene.js you can code the scene you want to render, only lines and quads are supported atm, here's an example on how to populate the lines array:

function createScene(frame) {   // frame is used to make animations, I'll update soon the readme to explain how that's done
    // lines is a global array
    lines.push({
        // first vertex of the line
        x1: x1,
        y1: y1,
        z1: z1,
    
        // second vertex of the line
        x2: x2,
        y2: y2,
        z2: z2,
    
        // color of the first vertex, can take values bigger than 1.0
        c1r: 1, 
        c1g: 0,
        c1b: 0,

        // color of the second vertex, can take values bigger than 1.0
        c2r: 0, 
        c2g: 0,
        c2b: 1,

        // optional, if $useLengthSampling is set to true this variable will change the weight this lines has in the distribution of points for each line
        weight: 1,
    });


    let quad = new Quad(0,0,0, /* <- starting position */ 0,0,1,1 /* texture uvs */)
                   .scale(0.5)
                   .color(100, 50, 10)
                   .translate(0, 1, 0)
                   .rotate(0, 0, 1, /* <- rotation axis */, 0.5 /* <- rotation angle */)
    // quads is a global array
    quads.push(quad);
}

Quads can make use of a single texture, specified in libs/globals.js


You can change various parameters of the renderer by adding a setGlobals() function inside libs/createScene.js

function setGlobals() {
    // camera parameters
    cameraPosition = new THREE.Vector3(0, 0, 100);
    cameraTarget   = new THREE.Vector3(0, 0, 0);

    cameraFocalDistance = 49.19;
    bokehStrength = 0.095;
    exposure = 0.0019;
    // set to 1 to have non-linear increase in focal strength
    focalPowerFunction = 0;

    // how much light fades as you get out of the focal plane
    distanceAttenuation = 0;

    // how big lines should be on screen when they're in the focal plane
    minimumLineSize = 0.015;

    // how many render calls are made each frame
    drawCallsPerFrame = 5;

    // texture used by quads when specifying uvs
    quadsTexturePath = "assets/textures/ExportedFont1.bmp";


    // wether each line has assigned a quantity of points proportional to its length or a fixed number instead
    useLengthSampling = false;

    // if $useLengthSampling is false, every line will by rendered by default with $pointsPerLine points, same for $pointsPerQuad
    pointsPerLine     = 25;
    pointsPerQuad     = 500;

    // if $useLengthSampling is true, every line will be drawn with an amount of points that 
    // is proportional to the line's length, (or quad's area length for $quadPointsPerFrame)
    // use $pointsPerFrame/$quadPointsPerFrame to determine how many points will be drawn in 
    // a single drawcall. Keep in mind that each line/quad is drawn with
    // at least one point
    pointsPerFrame = 100000;
    quadPointsPerFrame = 50000;

    // wether to use a bokeh texture or not, keep an eye on render times
    // since they will be a bit slower when using bokeh textures
    useBokehTexture  = false;
    bokehTexturePath = "assets/bokeh/c1.png";
    // static background color (is additive with the rest of the scene)
    backgroundColor  = [21/255, 16/255, 16/255];
}

setGlobals() will be called once at startup

The threejs source attached in the repo was modified to always disable frustum culling (check libs/main.js to see the exact changes)

Credits

The DOF displacement algorithm was taken from This blog post

More Repositories

1

Lumen-2D

2D javascript renderer using web workers
JavaScript
459
star
2

legendary-cursor

Makes your cursor's swings legendary
JavaScript
203
star
3

SS-refraction-through-depth-peeling-in-threejs

Screen space refraction through depth peeling in threejs
JavaScript
193
star
4

R3F-in-practice

A collection of simple R3F projects
JavaScript
183
star
5

Physarum-experiments

Experiments with the physarum transport model in three.js
JavaScript
101
star
6

Realtime-path-tracing-in-chrome

A (bad) attempt at implementing wavelet filtering and temporal reprojection in threejs
JavaScript
79
star
7

GLSL-path-tracer

Simple glsl-path tracer made in webGL2 + threejs
JavaScript
65
star
8

Domenicobrz.github.io

JavaScript
59
star
9

SSPT-in-threejs

JavaScript
44
star
10

Threejs-in-practice

JavaScript
35
star
11

Dual-Contouring-javascript-implementation

JavaScript
33
star
12

WebGL-dispersion-caustics

Faking dispersion caustics by accumulating photons in a texture
JavaScript
29
star
13

WebGL2-Screen-space-reflections

An implementation of the SSR algorithm in webgl2
JavaScript
26
star
14

threejs-glass-absorption

Faking glass absorption through depth peeling
JavaScript
19
star
15

SSR-TAA-in-threejs-

JavaScript
18
star
16

Simple-Raytracer

C++
18
star
17

R3F-takes-flight

Repo for the project of a youtube video
JavaScript
16
star
18

Variable-width-lines-algorithm

Quick webGL implementation of an algorithm to create variable width lines supporting miter and bevel join
JavaScript
14
star
19

R3F-IP-Meteor-Impact

JavaScript
12
star
20

WebGL-Soft-shadows-through-backprojection

An implementation of the Backprojection algorithm from Gaël Guennebaud research at Eurographics Symposium on Rendering
JavaScript
11
star
21

WebGL-simple-raytracer

A simple raytracer supporting lambertian materials
JavaScript
8
star
22

C2-Renderer

TypeScript
6
star
23

Circle-packing-simulation

Simple simulation of push-away interaction between circles helped by GLSL shaders
JavaScript
6
star
24

Line-Integral-Convolution

Implementation of Line integral convolution in javascript with WebGL
JavaScript
6
star
25

Flip-Clock-Countdown

A flip-clock good looking alternative for your countdown components
JavaScript
5
star
26

CarShow

JavaScript
3
star
27

WebGL-clock-widget

A light weight 3D clock widget made with raw webGL
JavaScript
3
star
28

GenToaster-recursive-squares

JavaScript
2
star
29

GenToaster-noise-line-rows

JavaScript
2
star
30

GenToaster-fragmented-cubes

JavaScript
2
star