PIXI v5 mesh + shader for 3d objects

[Moppel]

Hi everyone,

I've implemented a webapp where the user sees a table from top-down perspective and can decorate a cookie. For different sprinkles I've used simple rects and animated them with tween.js (or something like that). For liquid sugar I've modified a native webgl implementation based on the navier stokes equation. The last part to implement are marshmallows. Since the 2d projection of cylinders (which a marshmallow more or less looks like) can vary quite a bit if you rotate it I thought its time to try out the PIXI.Mesh, PIXI.Shader and so on classes.

 

const vertexSrc = `
    precision mediump float;

    attribute vec3 aVertexPosition;

    uniform mat3 translationMatrix;
    uniform mat3 projectionMatrix;

    void main() {

        gl_Position = vec4(projectionMatrix * translationMatrix  * aVertexPosition,1.0);
    }
`;

const fragmentSrc = `
    precision mediump float;


    void main() {

        gl_FragColor = vec4(1.0,1.0,0.0, 1.0);
    }
`;

 

I've noticed from another example that pixi passes a projection and translation matrix already. However... I dont know really how the projection Matrix looks like. If I pass in the 3d cylinder coordinates  (range [-100,+100] for each dimension), I can just see two parallel yellow lines with quite a bit space between them. I guess the projection matrix must somehow slice the z-dimension probably at z=0 or something. Sooo my question is ... if I pass in a custom projection matrix is there something I need to consider? or is there any pixi.js magic happen that will make it hard to visualize this cylinder?

Thank you very much : -)

 

[ivan.popelyshev]

Yeah, projection does not scale Z to create Z-culling. No, projection matrix at the moment is managed through ProjectionSystem, so your part has to be translationMatrix. However, I really dont want to explain you basic https://github.com/pixijs/pixi-projection tricks, where i use 3x3 or 4x4 matrices (Sprite2d, Sprite3d) .

Certain PR (https://github.com/pixijs/pixi.js/pull/5706) that enables custom multi-texture batch shaders got passed a week ago and now i can make it for latest dev (pixijs.download/dev/pixi.js) .

There are two options
1. wait when i move the plugin to v5.

2. ask me to make a simple demo for your case.

3. calculate the math on your own - make extra matrix for projection, use 4x4 matrices instead of 3x3 there. just dont do it in projectionMatrix, its global stuff.

I like cookies but i really didnt get that part, i dont understand what you want to do

[ivan.popelyshev]

ProjectionMatrix converts pixi space (0-w, 0-h) to webgl (1,-1)-(-1,1). I like all the users who want 2.5d stuff, but my time table is VERY restricted right now so i cant write anything else that those two comments. If you make a demo that you think should work - i can fix it, but for 1-2 you'll really have to wait some time.

Do something with Z-coord , make it also in pixels , not (0-1) - and you're golden.

[Moppel]

Tanks for the quick answer

What I want to do is basically create particles (Marshmallows) that fall down onto a cake from a tool that is hovering above cake. While I was doing sprinkles just using rects + tweens (looks fine), marshmallows could be (depended on the perspective) a circle (top/bottom), a rect (side) and some mixtures of ellipsis +orthogonal lines. 

 

Now, I want randomized particles falling down onto the cake and thought it would be nice to animate this in shaders (and freeze them as soon as the animation phase is over). It could for sure be done with 2d animations and many single images but ... urgh

[ivan.popelyshev]

Depends on size. If its small - aliasing on small items is a problem, its really better to pre-render. If they are big - yeah, you can make a 3d geometry and a shader that rotates it in YZ. something like

attribute vec3 aVertexPosition;
uniform vec2 dir;
...
vec3 pos3 = aVertexPosition;
vec2 pos = vec3(pos3 .x, pos3 .y * dir.x + pos3 .z * dir.y);
gl_Position = projectionMatrix * translationMatrix * vec3(pos, 1.0);

here dir is (cos(ang), sin(ang)) , angle of rotation of that particular marshmallow in YZ-space

[ivan.popelyshev]

OK, projection is here: https://github.com/pixijs/pixi-projection/, it works with pixijs.download/dev/pixi.js , however i doubt it will help you without that shader idea i posted ^^^