How to do a projective transformation/equivalent of CSS matrix3d?

[jackmcbarn]

How do I do a projective transformation like this in Ren'Py? https://franklinta.com/2014/09/08/compu ... ransforms/ In words, I'm trying to squish a rectangle into an arbitrary quadrilateral. In CSS, it can be done by passing an appropriate matrix to the matrix3d transform. I looked through https://www.renpy.org/doc/html/atl.html ... properties but none of them looked relevant.

[gas]

(Today I'm Mister Not-at-all)

Hi, HTML5 offer 3d high level functions that are not part of PyGame, and renpy use PyGame. So, in a word, go search around how to skew images in pygame and create a CDD that skew the image (see docs).
If this sound aramaic to you, you're trying to do something way from your reach and, as long as you don't want to show thousands of pictures this way, you can simply draw them skewed already.

[Remix]

In the coming Ren'Py 7.4 the pipeline has been rewritten to use GL2 and allows use of GLSL shaders (though they do require a lot of high level understanding) and mesh manipulation which would cover your needs.
At the moment though, most Ren'Py developers are not familiar with the system so there are no good examples of ways to approach this.
(there will be though, as the system is so powerful and the potential is endless)

Currently you could do non skewing stuff in ATL though using zoom and rotate (as detailed around here):
https://renpy.org/doc/html/atl.html#int ... -statement

[jackmcbarn]

In the coming Ren'Py 7.4 the pipeline has been rewritten to use GL2 and allows use of GLSL shaders (though they do require a lot of high level understanding) and mesh manipulation which would cover your needs.
At the moment though, most Ren'Py developers are not familiar with the system so there are no good examples of ways to approach this.
(there will be though, as the system is so powerful and the potential is endless)

This looks like almost exactly what I need. I made a vertex shader that just multiplied gl_Position by my matrix, and it rendered exactly the way I want. The only problem is that this doesn't affect mouse events, so to click buttons transformed with it, I need to click where they would have been drawn without the transformation, rather than where they actually are drawn. I think this is fixable with a creator-defined displayable that does the inverse transformation in event(). In the ideal world, though, Ren'Py would just use homogeneous coordinates for its existing transformations instead of Cartesian coordinates, and then this kind of matrix would "just work" without the game needing all this custom code.

(Side note: if I do get this working, I'll post a demo script file here.)

[Remix]

This looks like almost exactly what I need. I made a vertex shader that just multiplied gl_Position by my matrix, and it rendered exactly the way I want. The only problem is that this doesn't affect mouse events, so to click buttons transformed with it, I need to click where they would have been drawn without the transformation, rather than where they actually are drawn. I think this is fixable with a creator-defined displayable that does the inverse transformation in event(). In the ideal world, though, Ren'Py would just use homogeneous coordinates for its existing transformations instead of Cartesian coordinates, and then this kind of matrix would "just work" without the game needing all this custom code.

(Side note: if I do get this working, I'll post a demo script file here.)

The crux is that shaders only operate on the GPU so Ren'Py cannot read back the shaded image to use as an alpha mask... To Ren'Py the image is just an unshaded flat rectangle.

If you are okay calculating the click area with math and time you could set alpha_mask to be a Python function and only return True at positions where your math says the shaded image would be opaque.

[jackmcbarn]

If you are okay calculating the click area with math and time you could set alpha_mask to be a Python function and only return True at positions where your math says the shaded image would be opaque.

Doesn't this only work if my projection draws the image in a subset of its original location? If the button gets drawn outside of its original bounds, won't alpha_mask not even get looked at?

[gas]

I think alpha mask should be intended as focus_mask.
https://www.renpy.org/doc/html/style_pr ... focus_mask

You should pass a displayable/self (but the GPU morphed the pixels later in the pipeline and so goodbye the original alpha channel as focus mask) or a function, to determine the sensible area.

[jackmcbarn]

I think alpha mask should be intended as focus_mask.
https://www.renpy.org/doc/html/style_pr ... focus_mask

You should pass a displayable/self (but the GPU morphed the pixels later in the pipeline and so goodbye the original alpha channel as focus mask) or a function, to determine the sensible area.

Indeed, but now another issue comes up: This approach only works if I'm transforming the button directly. If I'm transforming a grid with a bunch of buttons in it, then it looks like I am back to needing a CDD to do it.

[Remix]

Yup, I meant focus_mask, oops.

If, when shaded, they go outside of the bounds of the original image areas, I think you would be looking at a CDD (or extend Container, from renpy/display/layout.py and tweak the event method there)