Pixi.js support for "in"/"out" keywords?

[Risitop]

Hello,

I hope all of you do well in these troubled times.

I have been struggling around an issue this afternoon with Pixi.js filters. I have recently built a few fairly simple fragment shaders, and I would like to step up by implementing dynamic lighting effects. To do so, I would need to compute the normal vector in my vertex shader, then pass it to my fragment shader. Unfortunately, the "out" keyword seems not to be supported, requiring GLSL 3+. I failed to find answers to my questions on Google neither in Pixi's documentation.

I tried to add #version 300 es at the beginnning of my .vert and .frag, but it does not seem to be that simple, more operations are needed. My interrogations are the following:

• Are in and out keywords the only way to send information from vertex to fragment shader? Is there an older fashion to do so that would be supported by the GLSL version natively in Pixi?
• Does Pixi supports GLSL 3+ versions? If yes, how to adapt the attributes/uniforms?
• What would default shader files look like using GLSL 3+? 

I thank you in advance for considering my issue,

Best

-af

Edited April 18, 2020 by Risitop
mispellings

[ivan.popelyshev]

> I have been struggling around an issue this afternoon with Pixi.js filters.

Filters are applied to framebuffers where containers are rendered. Are you sure you need a filter and not  a mesh-shader or batch-shader for sprite?

> I tried to add #version 300 es at the beginnning of my .vert and .frag, but it does not seem to be that simple?

Its that simple, just make sure there's no extra line before it, otherwise pixi will start to add extra stuff like "precision xxx" because our preprocessor is stupid.

> To do so, I would need to compute the normal vector in my vertex shader, then pass it to my fragment shader.

Even in #version 100 its possible throgh "varying".

I need more info than that to help you.

 

 

[Risitop]

 Hello Ivan, thank you for this quick answer.

> Filters are applied to framebuffers where containers are rendered. Are you sure you need a filter and not  a mesh-shader or batch-shader for sprite?

I unfortunately do not know what mesh-shader and batch-shader are. My experience with shaders and OpenGL is quite limited, I am sorry for that. I used filters as I thought it was the way to go.

> Even in #version 100 its possible throgh "varying".

Of course, completely forgot that. So, is it worth to switch to GLSL 3+?

My vertex shader would look something like:

#version 300 es

// Probably some types/identifiers to update...

attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat3 projectionMatrix;
varying vec2 vTextureCoord;

void main(void)
{
  gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
  vTextureCoord = aTextureCoord;
}

And my (very basic) fragment shader

#version 300 es

precision mediump float;

varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform vec4 filterArea;
uniform vec4 filterClamp;

uniform float ambient_strength;

void main(void) {

  vec4 pcolor = texture2D(uSampler, vTextureCoord);
  vec4 ambient = pcolor * ambient_strength;
  gl_FragColor = pcolor + ambient;

}

 

Thank you for your answer,

- af

[ivan.popelyshev]

mesh shader: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js

in case you want 1000 sprites like that and not one, here is discussion about batching, dont want to repeat all that : 

 , basic example : https://www.pixiplayground.com/#/edit/CMKvgOt-bvlCG4QHdswIP , plugin for batching: https://github.com/pixijs/pixi-batch-renderer/

filters have many uniforms regarding to that temporary framebuffer optimization 

i dont see anything specific to glsl3 in your code

[Risitop]

Super, thank you !

A last question: does Pixi supports struct uniforms? I would like to use something like this in my fragment shader. I know it's possible in OpenGL.

struct LightSource
{
  vec3 direction;
  vec3 ambient;
  vec3 diffuse;
  vec3 specular;
}

uniform LightSource light_sources[N_LIGHTS];

...

I found this topic but I don't really get what is meant by "WebGL hacks" :

Best,

-af

[ivan.popelyshev]

In dev (pixijs.download/dev/pixi.js)

https://github.com/pixijs/pixi.js/pull/6298

[Risitop]

Awesome, so I can just basically say 

uniforms["light_sources[0].diffuse"] = [1, 1, 1];

Thank you for your help,

Best,

-af

[Risitop]

-- edited

Edited April 19, 2020 by Risitop
was not on dev version

[ivan.popelyshev]

Oh, completely forgot - 

Welcome to the forums!

that's a good topic to start with. Just make sure that you use dev version of pixi. Maybe structs will be merged in 5.2.2