Open
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";
...
<View>
{hasPermission && (
<Surface style={{ width:100, height:100 }} ref={surface}>
<Node
shader={shaders.HexagonCrop}
uniforms={{
t: () => thecamera.current,
}}
>
<Camera
style={{
width:100,
height:100,
}}
ratio="1:1"
ref={thecamera}
type={Camera.Constants.Type.front}
/>
</Node>
</Surface>
)}
</View>
...
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.
