Jump to content

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


Risitop
 Share

Recommended Posts

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 by Risitop
mispellings
Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

 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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...