Shaderoo: realtime ballpoint effect

by flockaroo • 8 years ago

162 28 8 years ago

FraKtus• 8 years ago

It's a project that wants to push further than shadertoy. Here from the project documentation:

My goal was to make something similar to Shadertoy but with some extra features. Having a fixed and simple set of functionality always helps in the creative process to focus on the goal itself rather than on the several methods available to achive the goal. Therefore i didn't want to overdo it with new functionalities and only implemented features i was missing most in shadertoy. Some basic main shadertoy functionality is there, but some features are missing.

Shaderoo is based exclusively on WebGL2, so WebGL1 is not enough (unlike shadertoy, which has some WebGL1 fallbacks). check webglreport.com for compatibility.

Shaderoo uses Ace as web-editor. See here for the keyboard shortcuts.

nightcracker• 8 years ago

I think it should distinguish itself more from shadertoy - at first I didn't even realize I wasn't on shadertoy given how similar the UIs are.

mschuetz• 8 years ago

The one thing that sets it ahead from shadertoy for me is that it doesn't crash the browser, probably because they use prerendered thumbnails for the previews instead of the actual shaders. The shadertoy front page reliably kills chrome and firefox on windows. Not sure if shadertoy works better on systems that don't use ANGLE.

dahart2• 8 years ago

Did you mean to have a link to keyboard shortcuts in there?

Shaderoo looks pretty cool! Having geometry shaders makes it a very different & potentially more powerful thing than ShaderToy at the moment.

That said, there are a whole bunch of projects out there with the same goal: ShaderToy plus a few features. ShaderToy's value to me isn't really it's features though, it's IQ and his prolific sharing and persistence, and also the large user base. Replicating that and doing better will be a lot harder than replicating and extending the features. I'll be playing with it, and I wish the project much good luck!

Gys• 8 years ago

Amazing. Don't forgot to try the webcam option !

Numberwang• 8 years ago

Where is the webcam option?

Pt_• 8 years ago

also try using your webcam... -> Geom_A (above editor), first texture (below editor) - the [...] button

From the description under the preview

Sean1708• 8 years ago

I feel like I'm missing something really obvious here, but how to I get it to work without using the webcam? I'm guessing that white box in the top-left is supposed to show something other than a white box?

dwighttk• 8 years ago

it needs webgl2 to work properly

sharpercoder• 8 years ago

I love the effect. Brings back times when I used ballpoints a lot and also had a lot of spare time (college, school...).

The website has horrible contrast though. Using blue heavily in the theme is nice and appropriate. Unfortunately, it uses too many shades and combines light blue tones with white. That accounts for the bad contrast.

RankingMember• 8 years ago

Click the "theme" button to change to the dark theme.

blauditore• 8 years ago

I'm not good with shaders; can someone explain on a high level how this works?

I guess it somehow draws lines along in low-gradient directions in dark areas, with some randomization. But I can't really tell from looking at the code.

dahart2• 8 years ago

You got it right at a high level. The main bit of line drawing is the velocity calculation in the middle of the propagate() function:

    // calculate velocity change
    vec2 dvel=vec2(0);

    float dir = (float(p.idx%2)*2.-1.); // every 2nd particle is bent left/right
    
    // vel tends towards gradient
    dvel -= 10.*gu*(1.+sqrt(gl*2.))*sc;
    
    // vel tends towards/away from normal to gradient (every second particle)
    dvel -= 20.*N(gu)/(1.+1.*sqrt(gl*100.))*sc*dir;
    
    // vel bends right/left (every second particle)
    dvel += .06*N(p.vel)/(1.+gl*10.)*dir;

jcims• 8 years ago

It's fun tinkering with all of the constants throughout the script (don't forget to click Apply at the bottom). It's surprisingly robust to changes, they just flavor the image in various ways.

chimmy_chonga• 8 years ago

very cool

rijoja• 8 years ago

Would someone be so kind to post a demo for us poor souls without webgl2 support?

greggman• 8 years ago

it probably doesn't matter but I like that I can view many if not most shadertoys on my iPhone. unfortunately it doesn't look like Apple has any intention of shipping WebGL2 in Safari. There has been no significant work in WebKit on WebGL2 for over a year

geuis• 8 years ago

Any way to upload a video to this?

flockaroo• 8 years ago

you cannot upload a video directly to shaderoo.org, but you can use any video from servers that support "CORS" (Cross Origin Resource Sharing). the video-server explicitly has to support this (like e.g. dreamstime.com or shutterstock.com).

zeroxfe• 8 years ago

This is amazing. Great job.

(Consider pitching this to A-ha.)

John_KZ2• 8 years ago

Can we compare it to the original footage? I'm kind of pissed I can't find it.

sgrove• 8 years ago

If you search for `mp4` in the DOM inspector, you should find it: https://thumbs.dreamstime.com/videothumb_large8470/84708180....

John_KZ2• 8 years ago

Thanks.

CmdrKrool• 8 years ago

Change the "Buffer" dropdown in the top-middle to "Geom_A", then you can find the URL in the "Textures" below.

https://thumbs.dreamstime.com/videothumb_large8470/84708180....

royjacobs• 8 years ago

Please also add a reverse shader so we can finally watch the "Take On Me" music video the way it was shot :)

Shaderoo: realtime ballpoint effect

Related Stories