How to get started with shaders

I want to start delving deeper into Spark, using the visual shader, but I’m not sure where to start or how it works. Could you give me some tips, some material or even simple examples to study?

Spark is really great for working with shaders, but I don’t think it has enough learning resources around it. Fortunately, all of the shader concepts are really similar in other environments that have much bigger (and older) communities.

Here’s a thread with a few good options.

2 Likes

Additionally, I found this Github repo extremely helpful when I started. It has basic examples that build up to more complex stuff and the code is fairly well documented. The main repo page also explains some differences you’ll encounter between GLSL and Spark SL

3 Likes

Very good friend, studying, seems to be a bit complicated. But I’ve already managed to get some shadertoy models and convert to spark

1 Like

Guys, I’m taking some projects from shadertoy.com and transforming them to spark as a study method. Now want to transform a game, most projects have several tabs, Buffer A, Buffer B, etc. Each tab of this case I would make a library and import? Does the spark recognize?

The buffers are just like render passes in Spark. Something to note is that Spark is using an older version of GLES(?) so it won’t have all of the same features available.

Just like Josh said before, the buffer is like render pass.
Those buffers are accessible as texture for the next buffer or straight to the main image.
In Spark it’s something like this:

So the iChannel0 is the source image, you can click it and set it to texture, video, webcam, audio, etc.
In this case, let’s say you choose webcam. so in spark, it’s equivalent like using camera texture.

in the Buffer A tab, let’s say there are codes to do some blur effect which then later used for the other buffers. This Buffer A obviously need an input texture, and that texture is iChannel0 or the webcam or in this case camera texture. This Buffer A output need to be accessible for the other buffers, so we set the iChannel1 as the channel to pass the Buffer A result for further processing.

in Buffer B tab, let’s say we create a sobel effect. In Buffer C, we create a posterize effect.
Both of them need an input texture, and as we prepared earlier, we use the iChannel1 as the input.
Of course we can also use iChannel0 too, but in this case we use iChannel1 which is the blured texture to smoothen the posterize and remove noise for the sobel.

Lastly, in the main image, we blend Buffer B and Buffer C together by multiplying it to create a cartoon-ish effect that uses the sobel as the outline/strokes, and the posterize as the color shades. And then let’s say we also do some post processing like changing the hue, contrast, or whatever. So we do that by setting Buffer B as ichannel2, and Buffer C as iChannel3. Then in the main image, we can grab the texture of Buffer B and Buffer C by calling their channel as an input, which is iChannel2 and iChannel3.

The final output you see on the player window, is the final color set in the main image. And you can see what each buffers are doing by simply change the final output color, to any ichannel that correspond to each buffer.

I hope that make sense. :smiley:

4 Likes