• GLSL Sandbox - Live GLSL code editing!
    36 replies, posted
  • [img]http://i55.tinypic.com/1g5d0z.png[/img] 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) [code] 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); [/code] Examples: Parallax Perlin Noise shader, by me [t]http://dl.dropbox.com/u/44437457/other/perlin.png[/t] [url]http://glsl.heroku.com/e#1000.2[/url] 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: [url]http://glsl.heroku.com/[/url]
  • [QUOTE=Catdaemon;34094487][url]http://glsl.heroku.com/e#951.2[/url] this one is the best :v:[/QUOTE] Yeah, I like that one too. Especially the normal mapping and the shine
  • Here's how to implement an implicit expression grapher with a fragment shader: [url]http://glsl.heroku.com/e#1007.0[/url]
  • [QUOTE=Overv;34098423]Here's how to implement an implicit expression grapher with a fragment shader: [url]http://glsl.heroku.com/e#1007.0[/url][/QUOTE] 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.
  • 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!
  • [QUOTE=Catdaemon;34094487][url]http://glsl.heroku.com/e#951.2[/url] this one is the best :v:[/QUOTE] this runs at about 20% cpu for me. compared to garry's snowflakes at 100%
  • [url]http://glsl.heroku.com/e#871.0[/url] draw ur animes w/ glsl
  • How did I do? Make sure you run it at 1x scaling (the dropdown next to "hide code" should be set to '1') [URL]http://glsl.heroku.com/e#1041.1[/URL]
  • [QUOTE=Chris220;34118259]How did I do? Make sure you run it at 1x scaling (the dropdown next to "hide code" should be set to '1') [URL]http://glsl.heroku.com/e#1041.1[/URL][/QUOTE]What is it?
  • [QUOTE=a203xi;34125943]What is it?[/QUOTE] Forgive me for being very tired and silly but, are you serious? :v:
  • 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.
  • [QUOTE=Darwin226;34127448]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.[/QUOTE] Interestingly, making that facepunch logo taught me how to check for point->triangle and point->OBB intersections! :P
  • [QUOTE=DrLuke;34128047][img]http://i55.tinypic.com/1g5d0z.png[/img][/QUOTE] Thanks, I put it in the OP [QUOTE=Darwin226;34127448]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.[/QUOTE] So basically drawing stuff without libraries
  • [QUOTE=uitham;34128109]Thanks, I put it in the OP So basically drawing stuff without libraries[/QUOTE] No that's not even remotely similar. Even if your canvas was a simple 2D array of ints you have the ability to say [code] for (int i = 0; i < 10; ++i) for (int j = 0; j < 10; ++j) canvas[i][j] = color; [/code] 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.
  • [QUOTE=Darwin226;34128251]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.[/QUOTE] For this reason alone, I've always thought the shit pulled off in shaders was always infinitely more impressive than plain logic drawing.
  • [QUOTE=Chris220;34145265]Why can't I do bitwise operations with this? It's really limiting what I want to do :([/QUOTE] This guy does the editor [url]https://twitter.com/#!/mrdoob[/url] You can ask him to add it I guess
  • He replied to my tweet: [code]Mr.doob @ @BackwardSpy I don't think WebGL's GLSL support bitwise operations?[/code] Is there literally no way at all to get at them? :(
  • [QUOTE=Chris220;34147728]He replied to my tweet: [code]Mr.doob @ @BackwardSpy I don't think WebGL's GLSL support bitwise operations?[/code] Is there literally no way at all to get at them? :([/QUOTE] 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.
  • [QUOTE=Chris220;34147728]He replied to my tweet: [code]Mr.doob @ @BackwardSpy I don't think WebGL's GLSL support bitwise operations?[/code] Is there literally no way at all to get at them? :([/QUOTE] plain arithmetic
  • Unfortunately bitwise operators are only supported in GLSL 1.30 and up and OpenGL ES 2.0 GLSL doesn't allow the #version keyword.
  • [QUOTE=Darwin226;34148072]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.[/QUOTE] Yeah, I replaced my shifts with multiplication/division, but I needed an XOR as well :v:
  • [QUOTE=Chris220;34149108]Yeah, I replaced my shifts with multiplication/division, but I needed an XOR as well :v:[/QUOTE] Sounds like you're making a random-function. In that case, this works fine: [CODE] 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); } [/CODE] Just put in gl_FragCoord or something in seed.
  • [QUOTE=sondre99v;34149628]Sounds like you're making a random-function. In that case, this works fine: [CODE] 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); } [/CODE] Just put in gl_FragCoord or something in seed.[/QUOTE] Thank you muchly, I'll try that now...