Giter VIP home page Giter VIP logo

blurry's Introduction

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

blurry's People

Contributors

domenicobrz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

blurry's Issues

Animating geometry?

Hi,

Really nice library! I was wondering if you had any tips to animate geometry in a performant manner?

I started playing with the demos by trying to recompute lines and calling createLinesWrapper() at an interval but it seems to be a very expensive operation.

how to change screenbackground color

hi, i have tried to set backgroundColor in globals.jswith no success.

// static background color (is additive with the rest of the scene)
var backgroundColor  = [255/255, 255/255, 255/255];

how can i render the scene with white background ?

High resolution export?

Hi, I'd like to export the canvas at high resolution for printing. I've tried using this library but the output doesn't look sharp (see crop at 100% zoom):

Screen Shot 2020-09-03 at 1 05 23 PM

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.