Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PIXI Matrix, Skew live Generator Tools ??? #4168

Closed
djmisterjon opened this issue Jul 20, 2017 · 18 comments

Comments

Projects
None yet
6 participants
@djmisterjon
Copy link

commented Jul 20, 2017

Hi everyone
Is there a tool to generate a live preview of the Matrix PIXI.
I'm talking about being able to preview live the transformation of a sprite, and get the code.
I find it very long and hard to do a lot of rending testing each faith to search the good behavior.
It would be really great if someone could make a small live generation tool. (HTML)

i made a sample on PS To help understand my need.
matix-sample-generator

I hope this overview helps to understand.
Ideally, it be something similar to this awesome tools by Karl Matt (bigtimebuddy)
https://pixijs.github.io/pixi-text-style/#

I would be very happy if a similar tool would exist.
thank

@ivanpopelyshev

This comment has been minimized.

Copy link
Member

commented Jul 20, 2017

We should add pivotX,pivotY and axises there. Sorry, no perspective in pixi, that bunny isnt possible in vanilla v4, but people asked for 3d plugins a number of times already, I hope to make proposal for v5 :) And yeah, here your issue will be sorted better than in html5gamedev forum, lets assign some tags...

@djmisterjon

This comment has been minimized.

Copy link
Author

commented Jul 20, 2017

oups yes i forget rotation pivot.
It was a quick visual concept.

@djmisterjon

This comment has been minimized.

Copy link
Author

commented Jul 20, 2017

In fact I do not know why we talk about 3d.
It is simply 4 point scales. !
we have no Z Axe here , only a manual scale 4 per point limit
I made a fast gif here to show .
We have only XY AXE with a anchor to center.
597095f3bab1b396803491

If I understand correctly, pixi only allows the scale by 2 points and not 4 ?

@ivanpopelyshev

This comment has been minimized.

Copy link
Member

commented Jul 20, 2017

Good question. Extra 3d projection is required to map a texture to quad:

http://xproger.info/projects/OpenLara/shots/uv.gif

http://xproger.info/projects/OpenLara/shots/uv_chairs.gif

Thanks @XProger for https://github.com/XProger/OpenLara , it shows many interesting things :)

@ivanpopelyshev

This comment has been minimized.

Copy link
Member

commented Jul 20, 2017

Actually, now i think i can make it with 2d, but not with affine transform :) We just have to upload mat3 per every sprite and use instancing.

And now I have an idea for a new plugin!

@djmisterjon

This comment has been minimized.

Copy link
Author

commented Jul 20, 2017

Yes I think that's what you're talking about.
Unfortunately this is out of range of my knowledge.

http://mathinsight.org/determinant_linear_transformation

https://en.wikibooks.org/wiki/GLSL_Programming/Vector_and_Matrix_Operations
It would be really ideal to have a live tool to practice.

Edit:
I find this live DEMO 2d linear but not for pixi.
http://mathinsight.org/linear_transformations_map_parallelograms_parallelepipeds#map2D
parallelogram
d=b+c−ad=b+c−a or a+d=b+ca+d=b+c. Hence, the midpoints between the opposite vertices (a+d)/2(a+d)/2 and (b+c)/2(b+c)/2 must be the same point, which is labeled as ee.

@XProger

This comment has been minimized.

Copy link

commented Jul 20, 2017

In general case (not only for trapezoids) problem is solving by storing all four vertices in each of them and bilinear interpolation in the shader.
http://www.reedbeta.com/blog/quadrilateral-interpolation-part-1/
http://www.reedbeta.com/blog/quadrilateral-interpolation-part-2/
or you can use tessellation (not perfect result)
https://youtu.be/8TleepxIORU

@ivanpopelyshev

This comment has been minimized.

Copy link
Member

commented Jul 20, 2017

I didnt read it, i just noticed that in homogenous coords our matrix is

ca 0  0
0  cb 0
sa sb 1

Where (ca, sa) is (cos a, sin a) , angle around Y axis.

I wanna make a plugin that adds two more angles that'll do the job!

@djmisterjon

This comment has been minimized.

Copy link
Author

commented Jul 20, 2017

i follow you, keep us update, of your work friend. 🥇 👍

@finscn

This comment has been minimized.

Copy link
Contributor

commented Jul 24, 2017

I created an renderer for perspective

the demo is at http://fatidol.com/pt/ ,
the source code is at https://github.com/finscn/pixi.js/tree/master/src/morerenderers/perspective

@djmisterjon

This comment has been minimized.

Copy link
Author

commented Jul 26, 2017

@djmisterjon

This comment has been minimized.

Copy link
Author

commented Jul 30, 2017

thank to @ivanpopelyshev
https://pixijs.github.io/examples/#/projection/basic.js
It is enough to inject a small console.log () to follow the values in real time.

@ivanpopelyshev

This comment has been minimized.

Copy link
Member

commented Aug 2, 2017

Here we are: http://pixijs.github.io/examples/#/projection/quad-bi.js

Bilinear quad mapping!

@djmisterjon

This comment has been minimized.

Copy link
Author

commented Aug 2, 2017

awesome thanks !

@jchayan

This comment has been minimized.

Copy link

commented Nov 2, 2017

@ivanpopelyshev What is the status for projections? Should we expect them to be available on the next version of PIXI?

@ivanpopelyshev

This comment has been minimized.

Copy link
Member

commented Nov 2, 2017

People are waiting for me to make 3d version. Right now its 2.5d stuff.

No, they wont be available in v5, but there will be multiple 3d plugins: I will make one and @GoodBoyDigital will post whatever they use for 3d games on pixi.

For now you can use https://github.com/pixijs/pixi-projection , but it doesnt allow 3d-like rotations.

@jchayan

This comment has been minimized.

Copy link

commented Nov 2, 2017

@ivanpopelyshev Got it, thank you.

@lock

This comment has been minimized.

Copy link

commented Jul 8, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked and limited conversation to collaborators Jul 8, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.