PixiJS shaders in OpenFL

Is it possible and how to use pixijs shaders with openfl?
For example this one:

Small example where to dig would be very appreciated :slight_smile:

I think you just have to change the name of some variables.

For example (Iā€™m not 100% sure)
uSampler2 by bitmap
vUvs by openfl_TextureCoordv

It would be great if Openfl had a wiki to help create shaders on OpenFL !

You need to try !

You can find some help in the DisplayObjectShader.hx.
The easiest way I found:

  • Make your Shader class extending from DisplayObjectShader.hx
  • Put your vertex or fragment body with the correct pragmas
	@:glVertexSource("#pragma header
		void main(void) {
			#pragma body
			// here be your shader code

	@:glFragmentSource("#pragma header
		void main(void) {
			#pragma body
			// here be your shader code
  • To translate a shader you might need some knowledge of what is that shader supposed to do. Check the headers of DisplayObjectShader.hx (@:glVertexHeader and @:glFragmentHeader) to see how different variables are called in openfl (texture coords, the texture itself, the transformation matrix, etc).

  • Good luck

1 Like

Cannot port to openfl :frowning:
Can you please help with example, how to create DisplayObjectShader using like in this example?

class Main extends Start {

	public function new () {
		super (640,1000,true);
		stage.color = 0x0ff000;

	private var bitmap:Bitmap;
	private var spr:Sprite;

	override public function onInit():Void{
		spr = new Sprite();
		bitmap = new Bitmap(Assets.getBitmapData("assets/test.png"));
		bitmap.x = -bitmap.width/2;
		bitmap.y = -bitmap.height/2;
		spr.x = stage.stageWidth/2;
		spr.y = stage.stageHeight/2;
		bitmap.shader = new TestShader();


	override public function onFrame():Void
		if(spr != null){
			spr.rotation += 1;

 * Shader Test
class TestShader extends DisplayObjectShader {

		#pragma header

		uniform float time;

		void main(void) {
			#pragma body
			gl_FragColor = texture2D(openfl_Texture, openfl_TextureCoordv + sin( (time + (openfl_TextureCoordv.x) * 14.) ) * 0.1 );
    public function new(){
		this.time.value = [0];

	public function update():Void
		this.time.value[0] += 0.1;


This is a simple example: https://pixijs.io/examples/#/mesh-and-shaders/uniforms.js

1 Like