How to make a rain on a windshield shader in ShaderToy [video]

https://www.youtube.com/watch?v=52TMliAWocY

by adamnemecek • 9 years ago

133 31 9 years ago

MichailP2• 9 years ago

Is there a blazingly fast library for ray object intersection? Ideally usable from python? As I understand, ShaderToy uses implicit object description, and calculates ray object intersection numerically. It is somewhat of a abuse of OpenGL, since a scene in ShaderToy only has 2 triangles covering the screen, and the rest is calculated using pixel shader which calculates ray object intersections. I would like to have result of this intermediate calculation (point of ray object intersection).

boulos• 9 years ago

There's Embree, but I don't know (or think) they would have thought to make Python bindings. I'm not sure how fast Mitsuba is, but since Wenzel wrote his own C++ to Python wrapper I'd wager that there are Python bindings for that.

What's your use case?

MichailP2• 9 years ago

I want to make simple FDTD mesher, maybe with non rectangular grid. For this I would need ray-object intersections and point to object shortest distance. Thanks for pointing out Embree, I was not familiar with that library.

gmueckl• 9 years ago

I have to second the mention of Embree. Intel poured several man years of optimization into this code. As long as you are fine with being restricted to x86 platforms, you won't find faster open source code for general ray/triangle intersection.

127• 9 years ago

I don't know if you can consider it blazingly fast, but Blender has ray intersections from Python, and IIRC it was fast enough to make a 256x256x256 voxel grid in a couple of seconds with raycasts.

dahart5• 9 years ago

NVidia's Optix has very fast ray-object intersection via GPU. I don't think there are python bindings though, it's C++ and CUDA.

ShaderToy doesn't come with object descriptions, nor with any specific intersection routines. This is just arbitrary glsl (GPU) code that people are doing cool tricks with. You can do regular ray tracing in ShaderToy, for example here's one of mine ray tracing (not ray marching) spheres: https://www.shadertoy.com/view/XllBRf

You don't get a BVH with ShaderToy, unless you manually write something clever yourself. You need a BVH to make blazingly fast ray object intersections, in general.

That said, it's worth understanding the ray marching algorithm that many folks on ShaderToy are using, because it's very very fast, if you can accept the limitations it comes with, and it does give you the hit location in space.

andybak• 9 years ago

To save others from looking it up:

BVH = https://en.wikipedia.org/wiki/Bounding_volume_hierarchy

dahart5• 9 years ago

I just love the feel of this shader, it's not as complicated as some of the other nutty shaders you can find on ShaderToy, but it does a lot with a little and has such a nice chill vibe, especially with the music.

When I first saw it, I thought the raindrops must be pretty expensive, but the video shows how cheap they are to compute. There's a nice tiling trick so that the shader only evaluates one drop per pixel, but the tiling grid is moving so it's harder to see where the bounds are.

He's also using the Desmos math webapp to design some of the functions, which is a great reminder for me, I keep forgetting about it, and I need a good function plotter handy when I'm working on shaders.

erikpukinskis2• 9 years ago

I don’t fully understand the code but this appears to be a very brute force way of doing it, which slows down as you add more raindrops, pixels, and lights.

I suspect you could do the same with signed distance fields in a way that runs in constant time irrespective of the number of drops at least.

You could also then scale and distort the car lights and add as many as you like without affecting performance either.

ttoinou2• 9 years ago

It's already constant time but he calls the function twice in order to have big bubbles and little bubbles overlapped

erikpukinskis2• 9 years ago

Aren't the bubbles in a vector?

johansch6• 9 years ago

Intrigued by this I visited https://www.shadertoy.com/. There does seem to be a thriving community there.

Problem is, the browse pages have a 4x3 grid of live WebGL previews (rather than e.g. static images) of the shadertoys.

On my home desktop pc (win10, i4790k@4Ghz, GTX1070, 24 GB) running Chrome this means that inevitably, on page one or two, at least one of the shadertoys will use so much GPU computation that it starves out all other functionality, like being able to switch tabs etc.

aphextron2• 9 years ago

I've tried to bring this point up in the past as well. All they would need to do is add an MP4 rendering job to replace those with video. Although the transcoding would be quite expensive, I'm sure IQ could set up a donation system.

dahart5• 9 years ago

It is on the roadmap https://trello.com/b/5hM0CjId/shadertoycom-roadmap

And there is a donation system in place https://www.patreon.com/shadertoy

johansch6• 9 years ago

Using Firefox instead seems to help. Loading the grid pages is still super slow and rendering is broken, but at least you can use the rest of the browser/other tabs.

adamnemecek2• 9 years ago

I think that you can opt for image previews if you create an account. It’s in the options (maybe). The feature is there, I just don’t remember where.

johansch6• 9 years ago

If that's true, wow, that's some hostility towards newcomers.

gfody• 9 years ago

if you sign in, there's a 'use previews' option in config that will replace the live previews with thumbnails

antoineMoPa2• 9 years ago

I'm trying to code shadergif https://shadergif.com to fix this but of course, the only community I have yet is "me" and I don't have all shadertoy features. I render gifs and preview videos to avoid spamming GPUs.

The code is open source so anyone who wants new features can actually code it (after all, it's a coder community, why not let it code the tool that shadertoy is).

aphextron2• 9 years ago

This is great, how are you doing the GIF rendering?

pavel_lishin• 9 years ago

I'd love to see this as a screensaver.

Scene_Cast2• 9 years ago

I also like Shadron, it has quite a bit more capability (being able to use your own textures is pretty important! I can actually get work done with Shadron, can't do that reasonably with shadertoy). The downsides are the small community size and no automatic sharing / GitHub / OSS integration.

Other features include UI sliders, image saving, pretty decent library, unlimited flexible layers, way easier debugging, and lots more. I'm a huge fan, I'd love for more people to use it too.

How to make a rain on a windshield shader in ShaderToy [video]

Related Stories