[img]http://www.imgdumper.nl/uploads3/4d065b7b78b9f/4d065b7b73d7c-webglsl.png[/img]
[b]Overview[/b]
Web GLSL is a new project by me that makes it possible to prototype fragment shaders written in the OpenGL Shader Language on the web. That means you don't need an OpenGL framework and you can test shaders on any operating system and device that has basic web browsing capabilities.
Fragment shaders, better known as pixel shaders, can be used to create all kinds of interesting effects or scenes on the graphics card. Some examples are:
[list][*]Depth of field
[*]Bloom
[*]Fractals
[*]Simulating reflective/refractive surfaces like water[/list]
[b]Technical details[/b]
A simple web page with a code form and a preview window functions as the frontend of the service. When code is submitted, the server first attempts to compile the code as an OpenGL fragment shader. If this is unsuccessful, the process is aborted and the user receives the compile errors. When the compilation is successful, the scene is rendered, the color buffer is read using [url=http://www.opengl.org/sdk/docs/man/xhtml/glReadPixels.xml]glReadPixels[/url] and stored as a PNG.
[b]Usage[/b]
Although usage is pretty straightforward, there are a few things to keep in mind. You need to use the following variables in your shader:
[cpp]varying vec2 uv;
varying vec4 gl_Color;
uniform sampler2D tex;[/cpp]
If you use different names for your texture coordinate variable, texture sampler variable or color variable then you shader [b]will[/b] fail, so pay attention to that when copying shaders from the web.
The values of [i]uv.x[/i] and [i]uv.y[/i] range between 0.0f and 1.0f from the top-left of the image to the bottom-right. Texture coordinates are not clamped, so repetition is possible by using texture coordinates above 1.0f.
[b]Examples[/b]
[url=http://pastebin.com/iEsU7Psf][img]http://www.imgdumper.nl/uploads3/4d06466caf305/4d06466cacbf8-ex1.png[/img][/url] [url=http://pastebin.com/mXYkqe66][img]http://www.imgdumper.nl/uploads3/4d0646b8ee590/4d0646b8eaee4-ex2.png[/img][/url] [url=http://pastebin.com/eCw9SVFk][img]http://www.imgdumper.nl/uploads3/4d0649f664871/4d0649f6611c1-ex4.png[/img][/url] [url=http://pastebin.com/Yh6vqsfH][img]http://www.imgdumper.nl/uploads3/4d064df603baa/4d064df6010b2-ex5.png[/img][/url]
(Click the picture to get shader code to copy/paste)
[b]FAQ[/b]
[list][*][b]What is this written in?[/b]
The service is entirely in C++ and doesn't need an external webserver, such as Apache to function.
[*][b]Which libraries did you use?[/b]
[url=http://www.lonesock.net/soil.html]SOIL[/url] for loading the texture and [url=http://www.libpng.org/pub/png/libpng.html]libpng[/url] to convert the rendered frames to PNG images.
[*][b]Are you going to release the source code?[/b]
Yes, some time in the future. People who are genuinely interested in it can ask me for it.
[*][b]Why is there a delay?[/b]
To prevent overloading of the server. Compiling and rendering a shader just to throw it away afterwards isn't cheap.
[*][b]Can I link to generated images?[/b]
No. The link you get references the last image generated from your IP address.
[*][b]Then why do the last 3 digits change all the time?[/b]
Only way to force your browser to refresh the image.
[*][b]Will you add more features, like custom vertex shaders and 3D stuff?[/b]
Of course, I just need to know if there's enough interest in this first.[/list]
[url=http://83.84.23.31:82/][b]Get started[/b][/url]
I'm just gonna go ahead and vouch for the awesome of this. Overv let me play with it for "testing" purposes (read: breaking things). It's truly, truly awesome.
Can you add a uniform float for current time? This is awesome as-is, but animation would make it even better :v:
[QUOTE=raBBish;26670747]Can you add a uniform float for current time? This is awesome as-is, but animation would make it even better :v:[/QUOTE]
That would also require the program to return an animated gif or apng. I'll make that if there's enough interest. This is by no means a finished project.
[QUOTE=Overv;26670771]That would also require the program to return an animated gif or apng. I'll make that if there's enough interest. This is by no means a finished project.[/QUOTE]
Oh right, I forgot this doesn't use WebGL :doh:
Well, less chance of freezing my browser then.
It doesn't display the result here. I tried with firefox 3 and 4. Nothing.
Same. I'm only getting a result for the fractal.
[QUOTE=bootv2;26687253]works on my firefox. It's the ubuntu one.[/QUOTE]
Actually, for me it works only with the fractal code. No idea why
Working on Firefox 4 Beta 7. Awesome thing by the way!
[QUOTE=iPope;26687838]Working on Firefox 4 Beta 7. Awesome thing by the way![/QUOTE]
I press the button and the screen stays black
The fractal one works for me.
I think the texture's not being loaded properly.
Pretty awesome anyway
Nice idea, it reminded me of Shader Toy until you mentioned the server side rendering. Nice idea for browsers that don't support WebGL.
Sorry, fucked up some paths. The texture loads now.
[QUOTE=Overv;26689917]Sorry, fucked up some paths. The texture loads now.[/QUOTE]
The site doesn't load at all now. I guess you fucked up those paths pretty bad.
No, I shut it down because of low interest and funny noises coming from my PC.
I wanted to finally play with it :saddowns:
Sorry, you need to Log In to post a reply to this thread.
