OpenFl 4.0.0 Shader example

Hello everyone!
The shader system had been changed since 3.6.1 release and i’m wondering how can you use shaders with Bitmaps or Tilemaps with current 4.0.0 release?
i just need a simple example.
Thanks for the help in advance!

Hi!

You should be able to use ShaderFilter, like in ActionScript:

bitmap.filters = [ new ShaderFilter (shader) ];

This should work on TextField, Bitmap, Tilemap and DisplayObject (for .graphics) right now, I believe. We plan to add support for Sprite/DisplayObjectContainer filtering in the future :slight_smile:

As for the shader itself, the default source is in openfl.display.Shader, if you take a look. You can override the glVertexSource or glFragmentSource values. Since this is brand-new, there may be a few little things we could do to make things even more nicely (such as when the internal __init occurs), don’t be afraid to discuss so we can improve this in OpenFL directly, it would be simple to do a 4.0.1 quickly

Is it available only for the Tilemap container or for individual tiles?

It’s available for the whole Tilemap, as i understood from the sourcecode

@singmajesty maybe the most simple example won’t be enough for me.
How would you set shader uniform with the new shader implementation?
It was easy in previous version: all constant were available as shader’s variables (like shader.uProgress = 0.8;)
What API do we have for that?

+1 to the question, example would be useful

Agreed, I’d also like to see an example.
So, does this work with Pixel Blender shaders ( http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/ShaderFilter.html ) or do we use GLSL or… ?

The Shader format is a work-in-progress, the goal is to have one Shader type that works for different platforms, so use Pixel Bender for Flash (if you’re using this construct), or use GLSL for GL targets, it does nothing for software targets, and can be extended for non-GL hardware targets in the future (such as consoles)

For GLSL shaders, currently it uses the same construct as Flash for getting the shader indices (such as shader.data.uMatrix) but does not allow setting values that way – we could do that in the future?

For now, look at our OpenGL renderer code for examples, here’s one:

https://github.com/openfl/openfl/blob/develop/openfl/_internal/renderer/opengl/GLBitmap.hx

So adding extra values will require modifying a __renderGL function right now – in the future, using the shader.data objects should allow us to avoid that

1 Like

I am not able to use filters (ShaderFilter, GlowFilter) anymore on openfl 4. Is there a regression bug that deleted the feature?

They work but only on the Flash target as of right now.

There were problems with the old architecture. The new code should be simpler and more stable, but we haven’t fully integrated filter support in. We need to integrate in cacheAsBitmap support (flattening to a temporary object on all renderers), then we need to create a standard BitmapFilter API that works with GLSL for GL shaders, but also works in software for Cairo, canvas and other renderers.

Ok thanks. So right now, I need to make my own GL call to use shader on windows target if I understand correctly.

We support custom shaders per “flat” display object, such as Bitmap, Shape, TextField, etc, using a ShaderFilter (the API may change in the future a bit, though, as we continue to improve the filter system)

cool would be basic openfl-sample, to see how to bind sl-uniforms to haxe-variables (to easy change in “gameloop”; )

…i was really thinking about how to get haxeui-demo more “pure” in avoiding my exotic lib (:sunflower: -> https://github.com/maitag/haxe-shaderfun/blob/master/src/Main.hx#L71)

Are there any nice Shader examples / tutorial for pixel bender users and such? Thanks!

Take a look on current BlurFilter implementation in OpenFL, I’ve also posted some information here: 2D topdown lights with shadows demo Not really a tutorial, but if you look a bit into it, you should be good to go, it’s not really that difficult once you have basics working.

Also this: http://www.openfl.org/blog/2016/10/11/custom-shaders-audiosource-and-more-openfl-4-3-and-lime-3-3-released/