Giters

gre / gl-react

gl-react – React library to write and compose WebGL shaders

Home Page:https://gl-react-cookbook.surge.sh

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Incorrect rotation of the image ( iOS 12 )

Orxcle-xx opened this issue · comments

commented

Incorrect rotation of the image ( iOS 12 )

library versions

"gl-react": "^3.14.0",
"gl-react-image": "^3.1.1",
"gl-react-native": "^3.14.0",
"react-native-webgl": "^0.8.0"

Expected behavior

Image is properly shown and not rotated, works similarly as native component.

Actual behavior

Image is rotated.

Steps to reproduce the behavior

Hi,

I use a camera ( see the link: https://github.com/react-native-community/react-native-camera ).
After it I managed to insert a link to the local file ( ie file:// ), using two options:
<Surface style={{width: 300, height: 400}}> <Saturate {...filterProps}> {{ image : { uri: photoUri }}} </Saturate> </Surface>
or
<Surface style={{width: 300, height: 400}}> <Saturate {...filterProps}> <GLImage source={{ image : { uri: photoUri }}} height={300} width={400}/> </Saturate> </Surface>

In both cases an image is rotated. If I use standard component, Image is properly shown.
NB! I also tried different options ( see property forceUpOrientation ) as described here:
https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md
The rotation of the image changed...but it still rotated..

Any clues? Thank you.

commented

@Orxcle-xx Can I assume both cases use the same orientation? Portrait or landscape? It would also be helpful to see the code for your component, for now I will assume it is the example from the cookbook.

With the above assumptions my guess is that you need to rotate the image according to it's orientation. This can be done inside the shader.

Here is some example code from one of my projects

 vec3 ouv;
  if (resolution.y > resolution.x) {
    float flipY = 1.0 - uv.y;
    ouv = vec3(flipY, uv.x, 0);
  } else {
    ouv = vec3(uv.x, uv.y, 0);
  }
  vec4 c = texture2D(backgroundImage, vec2(ouv.x, ouv.y));

Note that the above first switches the x and y values for the uv according to orientation and because portraits always come out upside-down I simply flip that across the Y axis.

commented

@Orxcle-xx I updated by answer on anther thread you made but for reference, please try and shrink your image, the rotation issue should go away.

commented

I'm also having the exact same issue, has anyone found a solution yet?