Perspective transformation crops the image after rotation

[artboard-studio]

Hi, I hope there is still someone here to answer some questions if so, thank you in advance.

I am using the glfx.js library in order to use matrix transformation to create the perspective effect for my images. In my app, the system works just like photoshop's smart objects (where you render a flat image and get perspective results after render)

My issue is that if the resulting image that I want after the transformation applied to the image, is bigger than the original image (happens if you rotate the image) then the WebGL canvas is going to crop my image.

Look at the following fiddle: https://jsfiddle.net/human_a/o4yrheeq/

Any ideas on how we can make the WebGL canvas fit the rotated image (and not make the image smaller) or somehow extract the whole image instead of the cropped one?

[ebombme]

I'm running into this issue also when I use perspective to enlarge an image. No matter what I do, expanding the canvas to allow for a larger image always cuts off at the limits of the original size of the canvas. I have double-checked to be sure my canvas size is increased. I am setting the increased canvas size by calling the webgl context and setting

context.canvas.width = imgX;
context.canvas.height = imgY;

[artboard-studio]

I put this on bounty almost a year ago, and even though after a while I had to change to approach and ended up paying a webGL pro to write me a custom lib, I found this answer helpful. Maybe it will help you as well

https://stackoverflow.com/questions/41824600/webgl-glfx-js-matrix-transform-perspective-crops-the-image-if-it-rotates#41874916-only-allow-inform-moderator-flagging

[ebombme]

Thanks for the tip. Unfortunately, I had already seen that solution and tried to implement it. It still clips my image for whatever reason. I think it has something to do with the order of when the canvas is resized, but I haven't been able to put my finger on exactly where that should go. Nonetheless, I do appreciate the help!

[ebombme]

I found a workaround solution to be that I had to re-initialize the canvas with the JavaScript Image (that becomes the texture) object already enlarged (or shrunk) to the computed size of the new texture. Stepping through the code, it looks like glfx.js will not enlarge a canvas or the drawbuffer when the size increases. You have to start out with your image object that you are using as a texture being larger to begin with to get glfx to initialize a canvas with that size. Otherwise, it just uses the original texture size it was provided, and will not grow or shrink to match.