PixiJS shaders in OpenFL

Is it possible and how to use pixijs shaders with openfl?
For example this one:
https://pixijs.io/examples/#/mesh-and-shaders/uniforms.js

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?
https://shaderfrog.com/app/view/3830

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{
		super.onInit();
		
		
		spr = new Sprite();
		bitmap = new Bitmap(Assets.getBitmapData("assets/test.png"));
		spr.addChild(bitmap);
		this.addChild(spr);
		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;
			cast(bitmap.shader,TestShader).update();
			bitmap.invalidate();
		}
	}
	
	
}

/**
 * Shader Test
 */
class TestShader extends DisplayObjectShader {

    @:glFragmentSource("
		
		#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(){
        super();
		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