WebGL filters with OpenFL DisplayObjects


#1

I’m looking into applying WebGL effects to OpenFL projects in HTML5. I have successfully run the HerokuShaders demo and can switch out some of those filters with ones from GLSL Sandbox. However I was hoping to combine WebGL effects with normal DisplayObject instances (Bitmaps, Sprites, SWF files) and create distortion effects such as those on GLFX. Before I waste too much time on this (total WebGL newbie) can anyone make any suggestions on where to begin? Right now the shaders I make simply appear behind whatever other objects are going on stage. It would be great if I could apply distortion effects on a per-object basis.


#2

Have you tried using the ShaderFilter class? There’s an example class in openfl.filters.BitmapFilterShader that you can use as the basis for writing a custom one. There’s a way to use #pragma head and #pragma body to import the shader’s head and body (if you’re just extending it) or you could write your own completely from scratch.

There’s an example custom shader here:

…but using ShaderFilter, you can do something similar, but it will run as a post-process effect. So we draw the display object like normal, then you can perform an effect on the result. This is often what is desired over displayObject.shader, which will customize the way the object (and each of its children) is drawn at the time they are rendered. A Sprite with 100 children would run a sprite.shader effect 101 times, where sprite.filters = [ myShaderFilter ] would run once on the total result


#3

This is extremely helpful. I am not worthy of such attention. :smiley:
Will report back soon.


#5

I’m having success so far, just need to learn WebGL better. In the meantime, the Flash filters from the days of yore will also be at the forefront of my mind. Thanks again!


#6

Great to hear! I don’t presume that everything is perfect, but step-by-step, I’m happy with the progress we’ve made :smiley: