DubMan

PIXI.Projection Remove Perspective of certain Items

Recommended Posts

Hi 

I want to know if this is possible, I have a 3D camera on the canvas, and I have the following scenario.

 

So, as you can see the cards have a value associated with them. Is there a way to remove the perspective of the Total Holder (5) from the Dealer (so its a perfect circle).

Its added to a camera. The only other way is to add them to a Separate view that isn't on a a camera but that becomes a headache then moving the card containers around etc, as I would have to move to Separate containers.

It would be best if they could all be under a root view but some items don't have any perspective on them.

 

Thanks

Edited by DubMan
H CArd

Share this post


Link to post
Share on other sites

without code is hard to said ! 

i take a chance , try . circleContainer3d.proj.affine = 4; // or circleSprite.proj.affine = 4;

Or test my demo, is work ! 
https://www.pixiplayground.com/#/edit/y8XL9gjdVS97_2qrEGlbg
open the datGui CHARA panel, and play with the Affine slider.
With 4, You should see live , the monster without perspective and not effected by camera projections.
Is this help ?

Edited by jonforum

Share this post


Link to post
Share on other sites

hum i dont know sorry, am not able to visualise your architecture in my head.
What your can try is hack the affine Math to your case.
https://github.com/pixijs/pixi-projection/blob/f1b7bc99942d16f5d20eb69ca082d1fdfa4f5731/src/proj3d/Matrix3d.ts#L424
try create a new affine conditions and make some random math test until you get the desired result!

Share this post


Link to post
Share on other sites

or hey @ivan.popelyshev,  is can be related to this ? i think if am not wrong, he talk about the scalling.
image.thumb.png.367a56329185d9aacf0f4c770ffbce9d.png

 

https://github.com/pixijs/pixi-projection/pull/37#issuecomment-475968958
 

if i remember i added AXIS_XR = 5 , where is mixed 2 and 4 (AXIS_XR  and point )  and result make will point behavior but with keep the scale of the camera.
its can be a lead !? but not sure, i dont want say shit, is far in my head, i not remember.
@DubMan
  try add this formula and show if is work.

Edited by jonforum

Share this post


Link to post
Share on other sites

I ended up using a similar approach to create "Billboard" sprites - setting their Affine to POINT and then scaling them manually per-update based on getDepth().  Sqrt2/2 was somewhere in the mix iirc.  Also the value of getDepth can be used to z-cull (POINT will not cull otherwise, with something behind the camera showing in front).  Still felt a bit hacky, but got the job done.  I was unsure whether one of the existing Affine modes did this already, but didn't have any luck with them.

Share this post


Link to post
Share on other sites

EUREKA !!! here solution
 

    if (D > 0) { // HERE THE HACK
                     D /= Math.sqrt(matrix.b * matrix.b + matrix.d * matrix.d);
                }

https://www.pixiplayground.com/#/edit/N6zctqo-SZzlTatUNz1b_

Try slide perspective, _angle and zoom, everything is correctly fixed to camera, no more scale.

now we maybe need a kind of flag or add new AFFINE formula ? ! 

Share this post


Link to post
Share on other sites

 

Here is the issue I"m facing, if this doesn't explain it properly I'll create a demo

 

When the window is scaled really small, because of this.

totalHolderContainer.proj.affine = PIXI.projection.AFFINE.POINT;

I Get the above, when its larger,  When scaled larger I get this

image.png.ffce342f2d991c96b1827a26aa20f49d.png

So this would be perfect as long as scale is preserved somehow for the camera.

 

I'm using PIXI.projection.AFFINE.AXIS_X at the moment and this looks like this:

 

 

 

Which you can see if pretty decent, its just that the numbers in the distance are smaller now. So a mixture of AXIS_X and POINT would be what I'm looking for.

Also how would I apply a hack to the proj.affine ( do I change source code)? 

Let me see what I can find as well.

 

Thanks

 

 

Edited by DubMan

Share this post


Link to post
Share on other sites
PIXI.projection.Matrix3d.prototype.copyTo = function(matrix, affine, preserveOrientation) {
 // copy from original source
    else if (affine === 123) {
        let dist = Math.sqrt(matrix.a * matrix.a + matrix.c * matrix.c);
        matrix.a = dist;
        matrix.b = 0;
        matrix.c = 0;
        matrix.d = dist;
    }
}

// ...

container.affine = 123;

I didnt test it, i just show how you can hack anything in pixi and its plugins.

Again, I wont do anything without demo that i can just open, edit and see if it works. I have very huge backlog, i just cant spend time on both writing and testing demos at the moment.

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

For example, I took https://pixijs.io/examples/#/plugin-projection/quad-homo.js  and added this.
Now flowerTop guy scales with quad but doesnt actually rotate or move. You have to do the same with Matrix3d,  just copy source from it and add extra "if". Dont use the source for my Matirx2d because it has different indices of matrix!

const AFFINE = PIXI.projection.AFFINE;
bunny.proj.affine = 123;

PIXI.projection.Matrix2d.prototype.copyTo = function(matrix, affine, preserveOrientation) {
			const mat3 = this.mat3;
			const d = 1.0 / mat3[8];
			const tx = mat3[6] * d, ty = mat3[7] * d;
			matrix.a = (mat3[0] - mat3[2] * tx) * d;
			matrix.b = (mat3[1] - mat3[2] * ty) * d;
			matrix.c = (mat3[3] - mat3[5] * tx) * d;
			matrix.d = (mat3[4] - mat3[5] * ty) * d;
			matrix.tx = tx;
			matrix.ty = ty;

			if (affine >= 2) {
				let D = matrix.a * matrix.d - matrix.b * matrix.c;
				if (!preserveOrientation) {
					D = Math.abs(D);
				}
				if (affine === AFFINE.POINT) {
					if (D > 0) {
						D = 1;
					} else D = -1;
					matrix.a = D;
					matrix.b = 0;
					matrix.c = 0;
					matrix.d = D;
				} else if (affine === AFFINE.AXIS_X) {
					D /= Math.sqrt(matrix.b * matrix.b + matrix.d * matrix.d);
					matrix.c = 0;
					matrix.d = D;
				} else if (affine === AFFINE.AXIS_Y) {
					D /= Math.sqrt(matrix.a * matrix.a + matrix.c * matrix.c);
					matrix.a = D;
					matrix.c = 0;
				}
				else if (affine === AFFINE.AXIS_XR) {
					matrix.a =  matrix.d * D;
					matrix.c = -matrix.b * D;
				} else if (affine === 123) {
        let dist = Math.sqrt(matrix.a * matrix.a + matrix.c * matrix.c);
        matrix.a = dist;
        matrix.b = 0;
        matrix.c = 0;
        matrix.d = dist;
				}
			}
			return matrix;
}

 

Share this post


Link to post
Share on other sites

Here I was finally able to put up a demo of the problem I am having.

https://www.pixiplayground.com/#/edit/ZsMfNFfmMn2gDwk-wlMXs

You can change scale of the stage (it doesn't affect the POINT affine). The custom 123 above, you can see as well.

What I need is a POINT affine that will scale (when stage is scaled, but have no perspective) as you can see 123 (POINT_X) in the distance is still smaller.

I hope the demo clarified it.

 

Thanks

Charles.

 

Share this post


Link to post
Share on other sites

If this can't be done because of perspective in the distance, POINT_X will also work, I'll just live with the fact the circles are different sizes and scale them manually (IE. if they further from the camera, I'll scale them a bit larger, so they are the same size as the object nearer the screen)

 

 

Edited by DubMan

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.