Shaderoo: realtime ballpoint effect | Hacker News Reader

Shaderoo: realtime ballpoint effect

shaderoo.org

162 pointsflockaroo28 comments

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.

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.

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.

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!

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.

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

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

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

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

Where is the webcam option?

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

From the description under the preview

Does not work for me, Win10 + Nvidia GeForce GTX 950.

> first texture (below editor)

AWESOME!

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?

it needs webgl2 to work properly

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.

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;

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.

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

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

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

Thanks.

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....

This is amazing. Great job.

(Consider pitching this to A-ha.)

Any way to upload a video to this?

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).

very cool

Reply on news.ycombinator.com