gre / gl-react

gl-react – React library to write and compose WebGL shaders
https://gl-react-cookbook.surge.sh
MIT License
2.93k stars 163 forks source link

[iOS] app crash calling "capture": NSInvalidArgumentException #351

Closed carmelocatalfamo closed 3 years ago

carmelocatalfamo commented 3 years ago

bug report

On iOS app crash when invoke "capture" function with this error. Android it works. I'm using version 4.0.1 because of #308

2021-09-03 10:28:21.458968+0200 GS1PictureIt[629:101590] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[NSURL initFileURLWithPath:]: nil string parameter'
*** First throw call stack:
(0x1de90b180 0x1ddae39f8 0x1de8153a0 0x1df28a044 0x1df289fac 0x10077eefc 0x10077d8d4 0x10077da40 0x105f7b6f4 0x105f7cc78 0x105f84bf4 0x105f858b4 0x105f8f77c 0x1de52a114 0x1de52ccd4)
libc++abi.dylib: terminating with uncaught exception of type NSException
*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[NSURL initFileURLWithPath:]: nil string parameter'
terminating with uncaught exception of type NSException
(lldb)

library version

gl-react@4.0.1
gl-react-native@4.0.1

Expected behavior

App generate image calling capture function

Actual behavior

App crash calling capture function

Steps to reproduce the behavior

import React, { useRef, useState } from 'react'
import { Shaders, Node, GLSL } from 'gl-react'
import { Surface } from 'gl-react-native'
import { useIsFocused, useNavigation } from '@react-navigation/native'
import { useTranslation } from 'react-i18next'
import { useWindowDimensions } from 'react-native'
import { useTheme } from 'styled-components/native'

const BrightnessAndContrast = ({
  onSave,
  uri,
  useBrightness,
  useContrast
}) => {
  const { colors } = useTheme()
  const surfaceRef = useRef<Surface>(null)
  const [contrast, setContrast] = useState(1)
  const [brightness, setBrightness] = useState(1)

  const handleOnSaveImage = async () => {
    try {
      const result = await surfaceRef.current?.glView.capture()
      onSave(result.uri)
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <Container>
      <Surface ref={surfaceRef} style={{ width: imageSize, height: imageSize }}>
        <Saturate
          {...{
            contrast: contrast,
            saturation: 1,
            brightness: brightness
          }}
        >
          {{ uri }}
        </Saturate>
      </Surface>

      <Footer>
        <ButtonIcon
          onPress={handleOnSaveImage}
          renderIcon={() => <Check color={colors.white} />}
          text='Save'
        />
      </Footer>
    </Container>
  )
}

const shaders = Shaders.create({
  Saturate: {
    frag: GLSL`
  precision highp float;
  varying vec2 uv;
  uniform sampler2D t;
  uniform float contrast, saturation, brightness;
  const vec3 L = vec3(0.2125, 0.7154, 0.0721);
  void main() {
    vec4 c = texture2D(t, uv);
      vec3 brt = c.rgb * brightness;
      gl_FragColor = vec4(mix(
      vec3(0.5),
      mix(vec3(dot(brt, L)), brt, saturation),
      contrast), c.a);
  }`
  }
})

interface SaturationProps {
  contrast: number
  brightness: number
  saturation: number
  children: React.ReactNode
}

const Saturate = ({
  contrast,
  saturation,
  brightness,
  children
}: SaturationProps) => (
  <Node
    shader={shaders.Saturate}
    uniforms={{ contrast, saturation, brightness, t: children }}
  />
)

export { BrightnessAndContrast }
carmelocatalfamo commented 3 years ago

I close this issue: problem was a bad setup of react-native-unimodules

bekatd commented 2 years ago

what exactly was wrong with your setup. I am experiencing similar issues. just downgraded gl version to 4.0.1 but nothing changed