Converting: projectionMatrix * modelViewMatrix

[Noturno]

Hey,
I'm trying to translate a very simple Shader from ThreeJs to PixiJs, but I'm struggling to figure out how I can convert this parameter to PixiJS:

gl_Position = projectionMatrix * modelViewMatrix * vec4( position.x, position.y, sin(uTime*0.4 + (position.y) * vWave), 1.0 );

Here is the Example in ThreeJs: ( https://jsfiddle.net/Noturnoo/sn6q3pfk/5/ )
And here's my result in Pixi: ( https://jsfiddle.net/Noturnoo/d6pgmsk5/ )

Vertex in Three:

uniform float uTime;
uniform float waveLength;
varying vec2 vUv;
    
void main() {
 vUv = uv;
    
 lowp float vWave = sin((position.y) * waveLength);
 vec3 newPosition = position;
    
 gl_Position = projectionMatrix * modelViewMatrix * vec4( position.x, position.y, sin(uTime*0.4 + (position.y) * vWave), 1.0 );
}

Vertex in PixiJS:

 attribute vec2 aVertexPosition;
 uniform float time;
 uniform float waveLength;
 uniform mat3 projectionMatrix;
  
 uniform mat3 translationMatrix;
 varying vec2 vTextureCoord;
  
 uniform vec4 inputSize;
 uniform vec4 outputFrame;
  
  
 void main(void)
 {
      vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy;
      lowp float vWave = sin(time*0.1 + (position.y) * waveLength);
      //vWave = clamp(vWave, 0.6, 1.);
      gl_Position = vec4((projectionMatrix * vec3(position, 1.0)).xy, 0.0 ,  1.0);
      vTextureCoord = aVertexPosition * (outputFrame.zw * inputSize.zw);
      gl_Position =  vec4((projectionMatrix * vec3(position.x, position.y, 1.0)).xy, 0.0 , vWave);
 }

Any idea how to solve it?

Thanks in Advance.
 

[ivan.popelyshev]

Hello and welcome to the forums!

I'm the one who usually converts shaders

However I made a promise to not spend most of my time on pixijs-related things for a month, so I can only point you to some oddities:

1. Maybe you dont need a pixi filter, maybe mesh-shader is a combo for you: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js . Filter spawns extra Framebuffer and handles everything in screen-space, it makes things more difficult

2. Yes, the problem is in wave param. which is Z param, its not possible to do it without perspective component in projection transform. PixiJS doesnt have anything like it. You have to understand all that 4x4 matrix for 3d projections arithmetic if you want to achieve something there. https://github.com/pixijs/pixi-projection/ has some clues for you but its big.

I hope someone else can help you in that case, or you can wait when I finally have time for pixi 

[ivan.popelyshev]

1. instead of projectionMatrix construct a 16-float 4x4 matrix that has the same contents, but also 11,12,14 elements - projection component. Name it differently, because projectionMatrix is handled by pixi ProjectionSystem, cant change it really.

2. somehow handle shift to center of screen and back, otherwise projection center will be wrong.

As a training exercise - try to do the same thing without pixi, just basic webgl using info from https://webgl2fundamentals.org/

Edited February 23, 2020 by ivan.popelyshev