Arch Linux

Themaister

Member

From: Trondheim, Norway

Registered: 2008-07-21

Posts: 652

Website

XMLShaderView - OpenGL image post processing, in your browser

Been playing around with HTML5/JS/WebGL for the last days, and it's really cool stuff, so I thought I'd make something useful with it.

It's essentially an image post processing tool utilizing GLSL shaders. The shaders are wrapped in an XML format, as used in emulators such as bSNES, SSNES, etc. However, it's not constrained to emulators. Generic post processing effects on still images are realizable. It supports 2-pass shaders to stack two effects on top of each other. It can also scale images if desired.

After post processing, you can simply right-click the image and save it to disk.

It uses the FileReader() API to read images and shaders from disk. I'm definitely not a web developer (started learning JavaScript along with this stuff), so I'm sure the code/layout/whatever could be lots better, but it seems to work at least.

I've tested on Firefox 6 and Chromium, and seems to work in both (in Chromium you have to explicitly enable access to local files for it to work with --allow-file-access-from-files).

Got the project up on GitHub. Don't have hosting space for it, but you can just download the .html/.js and run it locally.
https://github.com/Themaister/XMLShaderView

Here's a quick and dirty shader which does funny things to your wallpapers ... (save it as *.shader)

<?xml version="1.0" encoding="UTF-8"?>
<!--
     Shiny negatives.
-->
<shader language="GLSL">
   <fragment><![CDATA[
      vec3 trans(vec4 color)
      {
         return 0.05 * clamp(pow(color.rgb, vec3(-1.6)), 0.0, 40.0);
      }

      uniform sampler2D rubyTexture;

      uniform vec2 rubyTextureSize;
      vec2 dist = 0.8 / rubyTextureSize;

      void main()
      {
         vec3 color = vec3(0.0);
         for (int i = -6; i <= 6; i++)
         {
            color += 0.03 * trans(texture2D(rubyTexture, gl_TexCoord[0].xy + dist * vec2(i, i)));
            color += 0.03 * trans(texture2D(rubyTexture, gl_TexCoord[0].xy + dist * vec2(i, -i)));
         }
         gl_FragColor = vec4(color, 1.0);
      }
   ]]></fragment>
</shader>

Last edited by Themaister (2011-09-18 21:37:09)

---

@ GitHub