About this file
The soft, glowing circles of out-of-focus lights, drifting slowly upwards through a dusky plum haze. Lights sit at three depths: many small far ones, a middle layer, and a few large, very soft ones close to the lens. Each one fades in, rises a little and fades away, with the faint bright rim that real lens blur gives.
Gold, pink and lilac on plum by default: a romantic background for wedding, beauty, fragrance and evening pages, invitations and title cards. Set the two background colours and three light colours, and how many lights there are, their size, blur and glow. The demo has three presets: Plum dusk, Champagne night and Lilac haze.
What you get: a GLSL ES 3.00 fragment shader for plain WebGL2, an ES module that returns a three.js ShaderMaterial, a Shadertoy version, and a demo page that runs offline with a small settings panel. For video editors there is a 10-second 1920 x 1080 H.264 loop that plays end to start without a seam.
It runs in one pass with no textures needed, at about 2.3 ms of GPU time per frame at 1920 x 1080 on a recent laptop. The README covers set-up in WebGL2, three.js and Shadertoy, every uniform with its default and range, and performance notes.
What you download
6 files · 6.0 MB · MD, HTML, MP4, FRAG, GLSL, JS
- README.md10 KB MD
- dreamy-bokeh-demo.html25 KB HTML
- dreamy-bokeh-loop-1080p.mp46.0 MB MP4
- dreamy-bokeh.frag8 KB FRAG
- dreamy-bokeh.shadertoy.glsl7 KB GLSL
- dreamy-bokeh.three.js9 KB JS
Details
- Shelf
- Shaders
- Type
- Single file
- Topics
- animated backgroundbackgroundbokehdreamyfairy lightsgirlyglowglslhero sectionlightsplumromanticshadershadertoythree jsvideo loopwebglwedding
- Licence
- Personal or commercial
What the licence allows
Personal licence
- Use it in projects for yourself, for learning, and in your portfolio.
- Change it and combine it with other work.
- Keep using it forever. The licence does not expire.
- Use it in anything that earns money, including client work and monetised video.
- Use it in a product, a game or an app that is sold or carries ads.
- Resell, redistribute or share the file.
- Put it into a dataset used to train a model.
Commercial licence
- Use it in unlimited commercial projects, including client work.
- Ship it inside products you sell: games, apps, films, print runs, print-on-demand.
- Use it in monetised and sponsored content, and in broadcast.
- Change it, and keep the result. No credit required, though it is always welcome.
- Keep using it forever. The licence does not expire.
- Resell or redistribute the asset as an asset, on its own or in a pack.
- Register it, or anything substantially it, as a logo or trademark.
- Put it into a dataset used to train a model.
Better together
Also in this pack
Shaders