[uitham]

GLSL Sandbox is an online playground for all of your GLSL fragment shaders.
You can make one from scratch, or you can go to the gallery and fuck around with other peoples code.
It automatically compiles after each change.

Reference made by me: (I had to get the functions from the source code since they are not explained elsewhere)

uniform float time: Ever-incrementing value
uniform vec2 resolution: The resolution of the window
uniform vec2 mouse: The x,y of the position of your mouse

radians
degrees
sin
cos
tan
asin
acos
atan
pow
exp
log
exp2
log2
sqrt
inversesqrt
abs
sign
floor
ceil
fract
mod
min
max
clamp
mix
step
smoothstep
length
distance
dot
cross
normalize
faceforward
reflect
refract
matrixCompMult
lessThan
lessThanEqual
greaterThan
greaterThanEqual
equal
notEqual
any
all
not
dFdx
dFdy
fwidth
texture2D
texture2DProj
texture2DLod
texture2DProjLod
textureCube
textureCubeLod

To write to the screen:
gl_FragColor = vec4(r ,g ,b ,1.0);

Examples:

Parallax Perlin Noise shader, by me

http://glsl.heroku.com/e#1000.2


I will add examples made by facepunchers over time here
Challenge: recreate the facepunch logo!

I would appreciate if anyone could create a banner for me since I suck at making them

Link:
http://glsl.heroku.com/

[swift and shift]

holy fuck that's insane

[Catdaemon]

http://glsl.heroku.com/e#951.2

this one is the best

[uitham]

Catdaemon posted:

http://glsl.heroku.com/e#951.2

this one is the best

Yeah, I like that one too.
Especially the normal mapping and the shine

[Overv]

Here's how to implement an implicit expression grapher with a fragment shader:

http://glsl.heroku.com/e#1007.0

[Darwin226]

Overv posted:

Here's how to implement an implicit expression grapher with a fragment shader:

http://glsl.heroku.com/e#1007.0

I thought about using the fragment shader for a grapher myself.
You could even just slap the input formulas in a string along with the rest of the code and recompile when you want to draw a different graph.

[uitham]

Could you guys put your facepunch username in a comment in the code of your creations
I'd like to know who made what

Also overv your grapher is copied 3 times now, that means it is successful!

[kukiric]

Ah, the wonders of webGL, is it?

[swift and shift]

Catdaemon posted:

http://glsl.heroku.com/e#951.2

this one is the best

this runs at about 20% cpu for me.

compared to garry's snowflakes at 100%

[synthiac]

http://glsl.heroku.com/e#871.0

draw ur animes w/ glsl

[Chris220]

How did I do?
Make sure you run it at 1x scaling (the dropdown next to "hide code" should be set to '1')
http://glsl.heroku.com/e#1041.1

[a203xi]

Chris220 posted:

How did I do?
Make sure you run it at 1x scaling (the dropdown next to "hide code" should be set to '1')
http://glsl.heroku.com/e#1041.1

What is it?

[Chris220]

a203xi posted:

What is it?

Forgive me for being very tired and silly but, are you serious?

[Darwin226]

I like how, if you want to draw something in a shader, you have to think differently than you're used to.
Instead of saying paint the circle at 50,50 radius 10 in blue, you have to check if the pixel is inside the circle you want to draw and then color it.

[Chris220]

Darwin226 posted:

I like how, if you want to draw something in a shader, you have to think differently than you're used to.
Instead of saying paint the circle at 50,50 radius 10 in blue, you have to check if the pixel is inside the circle you want to draw and then color it.

Interestingly, making that facepunch logo taught me how to check for point->triangle and point->OBB intersections! :P

[DrLuke]

[uitham]

DrLuke posted:

Thanks, I put it in the OP

Darwin226 posted:

I like how, if you want to draw something in a shader, you have to think differently than you're used to.
Instead of saying paint the circle at 50,50 radius 10 in blue, you have to check if the pixel is inside the circle you want to draw and then color it.

So basically drawing stuff without libraries

[Darwin226]

uitham posted:

Thanks, I put it in the OP




So basically drawing stuff without libraries

No that's not even remotely similar.
Even if your canvas was a simple 2D array of ints you have the ability to say

for (int i = 0; i < 10; ++i) for (int j = 0; j < 10; ++j) canvas[i][j] = color;

Which paints a 10 by 10 square in your color. How you put it on screen is unimportant.

In GLSL you don't have that flexibility.
It like you are forced to a loop running through every pixel and running a function on it. You only have that function to work with.

[DrLuke]

http://glsl.heroku.com/e#1068.1

My first shader ever

[acpm]

Darwin226 posted:

It like you are forced to a loop running through every pixel and running a function on it. You only have that function to work with.

For this reason alone, I've always thought the shit pulled off in shaders was always infinitely more impressive than plain logic drawing.

[Chris220]

Why can't I do bitwise operations with this? It's really limiting what I want to do :(

[uitham]

Chris220 posted:

Why can't I do bitwise operations with this? It's really limiting what I want to do :(

This guy does the editor
https://twitter.com/#!/mrdoob

You can ask him to add it I guess

[Darwin226]

Mr. Doob is awesome

[Chris220]

He replied to my tweet:

Mr.doob @   
@BackwardSpy I don't think WebGL's GLSL support bitwise operations?

Is there literally no way at all to get at them? :(

[Darwin226]

Chris220 posted:

He replied to my tweet:

Mr.doob @   
@BackwardSpy I don't think WebGL's GLSL support bitwise operations?

Is there literally no way at all to get at them? :(

Well shift to left by one is multiplying with 2. Shift by 2 is multiplying with 4...
For right shifts just divide.

As for other operations I don't know.

[acpm]

Chris220 posted:

He replied to my tweet:

Mr.doob @   
@BackwardSpy I don't think WebGL's GLSL support bitwise operations?

Is there literally no way at all to get at them? :(

plain arithmetic

[Overv]

Unfortunately bitwise operators are only supported in GLSL 1.30 and up and OpenGL ES 2.0 GLSL doesn't allow the #version keyword.

[Chris220]

Darwin226 posted:

Well shift to left by one is multiplying with 2. Shift by 2 is multiplying with 4...
For right shifts just divide.

As for other operations I don't know.

Yeah, I replaced my shifts with multiplication/division, but I needed an XOR as well

[sondre99v]

Chris220 posted:

Yeah, I replaced my shifts with multiplication/division, but I needed an XOR as well

Sounds like you're making a random-function. In that case, this works fine:

float random(vec4 seed)
{
	return fract(sin(dot(seed.xy ,vec2(12.9898,78.233)) + dot(seed.zw ,vec2(15.2472,93.2541))) * 43758.5453);
}

Just put in gl_FragCoord or something in seed.

[Chris220]

sondre99v posted:

Sounds like you're making a random-function. In that case, this works fine:

float random(vec4 seed)
{
	return fract(sin(dot(seed.xy ,vec2(12.9898,78.233)) + dot(seed.zw ,vec2(15.2472,93.2541))) * 43758.5453);
}

Just put in gl_FragCoord or something in seed.

Thank you muchly, I'll try that now...

[i300]

THIS IS TOO FUN.

http://glsl.heroku.com/e#1099.2

[ZenX2]

Hah, there was something on there that my computer couldn't handle and I think explorer.exe crashed for a bit

[Bluefire]

http://glsl.heroku.com/e#1148.0

Meanwhile on the GLSL sandbox, someone who had time to spare

[uitham]

http://glsl.heroku.com/e#1249.6
Combining random shaders and doing weird stuff with them yeah

[Overv]

uitham posted:

http://glsl.heroku.com/e#1249.6
Combining random shaders and doing weird stuff with them yeah

Ladies and gentlemen, this here is what modern art should be all about.

[ZenX2]

Okay, all these WebGL things just crash my graphics card
As in my screen turns off for a while :C

[Deco Da Man]

ZenX2 posted:

Okay, all these WebGL things just crash my graphics card
As in my screen turns off for a while :C

NVIDIA, AMD, Intel.