gre / gre/gl-react

Camera preview dimensions ignored? - distorted on iOS

Open
#336 2 comments 0 reactions 0 assignees View on GitHub
video
Dominant language
TypeScript
Stars
3k
Forks
160
PR merge metrics
No merged PRs in 30d

Description

#### library version

gl-react-dom@5.1.0
├─ gl-react-expo@5.0.0
├─ gl-react-native@5.0.0
└─ gl-react@5.0.0

#### bug report

I'm using the following code to display a 100 x 100 preview of the camera:

```
import { Camera } from "expo-camera";
import { Surface } from "gl-react-expo";
import { GLSL, Node, Shaders } from "gl-react";
import "webgltexture-loader-expo-camera";

...

{hasPermission && (

thecamera.current,
}}
>



)}

...

const shaders = Shaders.create({
HexagonCrop: {
frag: GLSL`
precision highp float;
varying vec2 uv;
uniform sampler2D t;

void main() {

vec4 c = texture2D(t, uv);

gl_FragColor = texture2D(t, vec2(uv.x, 1.0 - uv.y));
}

```

The preview is shown correctly at 100x100, however it is distorted.
The video is stretched by a factor of 1.3333 (4/3).
What’s the easiest way to un-stretch the video? I’ve tried all sorts unsuccessfully and need help.
I assume I could crop the video somehow in the shader, but it would be easiest if I could crop the video before it’s passed to the shader.

See screen shots below, first with distortion is with the Camera preview using gl-react, and the second is just using the vanilla expo-camera component.

![IMG_5810](https://user-images.githubusercontent.com/785769/124378593-21875380-dcaa-11eb-888c-8cdd57081bec.PNG)
![IMG_5811](https://user-images.githubusercontent.com/785769/124378595-26e49e00-dcaa-11eb-9b7d-3d6046544062.PNG)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.