Jump to content

Converting: projectionMatrix * modelViewMatrix


Recommended Posts

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.

Link to comment
Share on other sites

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 ;)

Link to comment
Share on other sites

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 by ivan.popelyshev
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.

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.


  • Recently Browsing   0 members

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