DubMan Posted October 16, 2020 Share Posted October 16, 2020 (edited) 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 October 21, 2020 by DubMan H CArd Quote Link to comment Share on other sites More sharing options...
jonforum Posted October 17, 2020 Share Posted October 17, 2020 (edited) 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 October 17, 2020 by jonforum Quote Link to comment Share on other sites More sharing options...
DubMan Posted October 18, 2020 Author Share Posted October 18, 2020 Hi Jon Forum, I did try this and it worked, but now if I resize my canvas the container stays much larger than the rest, Is there a way to work around this? Quote Link to comment Share on other sites More sharing options...
jonforum Posted October 18, 2020 Share Posted October 18, 2020 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! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 18, 2020 Share Posted October 18, 2020 Make a demo Quote Link to comment Share on other sites More sharing options...
jonforum Posted October 18, 2020 Share Posted October 18, 2020 (edited) or hey @ivan.popelyshev, is can be related to this ? i think if am not wrong, he talk about the scalling. 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 October 18, 2020 by jonforum Quote Link to comment Share on other sites More sharing options...
b10b Posted October 18, 2020 Share Posted October 18, 2020 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. Quote Link to comment Share on other sites More sharing options...
jonforum Posted October 19, 2020 Share Posted October 19, 2020 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 ? ! DubMan 1 Quote Link to comment Share on other sites More sharing options...
DubMan Posted October 19, 2020 Author Share Posted October 19, 2020 (edited) 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 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 October 21, 2020 by DubMan Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 19, 2020 Share Posted October 19, 2020 (edited) 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 October 19, 2020 by ivan.popelyshev Quote Link to comment Share on other sites More sharing options...
DubMan Posted October 19, 2020 Author Share Posted October 19, 2020 Thanks Ivan for the help. Will do a demo from now on. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 19, 2020 Share Posted October 19, 2020 5 minutes ago, DubMan said: Thanks Ivan for the help. Will do a demo from now on. Its not always, its just right now i have many problems and making from scratch takes extra brain power that i need DubMan 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 19, 2020 Share Posted October 19, 2020 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; } DubMan 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 19, 2020 Share Posted October 19, 2020 If it works for you, i'll add it to pixi-projection myself, something as "POINT_X" DubMan 1 Quote Link to comment Share on other sites More sharing options...
DubMan Posted October 19, 2020 Author Share Posted October 19, 2020 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. Quote Link to comment Share on other sites More sharing options...
DubMan Posted October 19, 2020 Author Share Posted October 19, 2020 (edited) 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 October 19, 2020 by DubMan Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 19, 2020 Share Posted October 19, 2020 It seems to me that 123 works like you described. Can you please elaborate what is wrong with 123? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 19, 2020 Share Posted October 19, 2020 (edited) Oh wait, you want just stage scale, i've got it :)) Yeah, its better to copy it. I just dont have behaviour for that yet, sorry But i'll think about it. Its an interesting case, I didnt think about it Edited October 19, 2020 by ivan.popelyshev DubMan 1 Quote Link to comment Share on other sites More sharing options...
DubMan Posted October 20, 2020 Author Share Posted October 20, 2020 Yes. You have it. Any scale applied to the item minus perspective (camera) scale. Thanks Ivan. ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 20, 2020 Share Posted October 20, 2020 > Any scale applied to the item minus perspective (camera) scale. more like "take the scale from camera before perspective", but yeah, good explanation! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.