Image URL not working while passing as sampler 2d
raaz714 opened this issue · comments
I am trying to render an image from remote url in android with the following code:
const shaders = Shaders.create({
helloImage: {
frag: GLSL`
precision highp float;
varying vec2 uv;
uniform sampler2D t;
void main() {
gl_FragColor = texture2D(t, uv);
}
` },
}
});
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Surface style={styles.wrapper}>
<Node
shader={shaders.helloImage}
uniforms={{
t: {uri: 'https://i.imgur.com/5EOyTDQ.jpg'}
}}
/>
</Surface>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
wrapper: {
...StyleSheet.absoluteFillObject,
top: Constants.statusBarHeight,
backgroundColor: 'transparent',
},
});
library version
"expo": "^32.0.0",
"gl-react": "^3.14.0",
"gl-react-expo": "^3.16.3",
"react": "16.5.0",
Expected behavior
It's supposed to render the image in the Surface
Actual behavior
A black screen is rendered on the surface with the following error in the terminal :
From the answer of 121, I thought gl-react accepts react-native style url. However, I can't get it to work.
Please help me out here.
I just checked with development build (I was using production build earlier) and I found the following stacktrace:
undefined is not an object (evaluating '_expo2.default.FileSystem')
- node_modules/webgltexture-loader-expo/lib/ExpoModuleTextureLoader.js:62:21 in remoteAsset
- node_modules/webgltexture-loader-expo/lib/ExpoModuleTextureLoader.js:133:30 in loadNoCache
- node_modules/webgltexture-loader/lib/WebGLTextureLoaderAsyncHashCache.js:82:31 in load
- node_modules/gl-react/lib/Node.js:911:34 in prepareTexture
- node_modules/gl-react/lib/Node.js:968:47 in prepareUniform
* [native code]:null in map
- node_modules/gl-react/lib/Node.js:1048:50 in _draw
- node_modules/gl-react/lib/createSurface.js:578:10 in _draw
- node_modules/gl-react/lib/createSurface.js:160:8 in flush
- node_modules/gl-react/lib/createSurface.js:206:8 in _handleLoad
- node_modules/gl-react/lib/createSurface.js:167:14 in <unknown>
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7004:16 in callCallback
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7048:19 in commitUpdateEffects
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7036:22 in commitUpdateQueue
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:12165:10 in commitLifeCycles
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:13496:8 in commitAllLifeCycles
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:92:15 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:306:36 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:13702:8 in commitRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15269:13 in completeRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15197:21 in performWorkOnRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15090:24 in performWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15047:14 in performSyncWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15315:21 in batchedUpdates$1
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2616:31 in batchedUpdates
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2711:17 in _receiveRootNodeIDEvent
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2731:26 in receiveEvent
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:349:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:26 in <unknown>
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:297:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:17 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
undefined is not an object (evaluating '_expo2.default.FileSystem')
- node_modules/webgltexture-loader-expo/lib/ExpoModuleTextureLoader.js:62:21 in remoteAsset
- node_modules/webgltexture-loader-expo/lib/ExpoModuleTextureLoader.js:133:30 in loadNoCache
- node_modules/webgltexture-loader/lib/WebGLTextureLoaderAsyncHashCache.js:82:31 in load
- node_modules/gl-react/lib/Node.js:911:34 in prepareTexture
- node_modules/gl-react/lib/Node.js:968:47 in prepareUniform
* [native code]:null in map
- node_modules/gl-react/lib/Node.js:1048:50 in _draw
- node_modules/gl-react/lib/createSurface.js:578:10 in _draw
- node_modules/gl-react/lib/createSurface.js:160:8 in flush
- node_modules/gl-react/lib/createSurface.js:206:8 in _handleLoad
- node_modules/gl-react/lib/createSurface.js:167:14 in <unknown>
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7004:16 in callCallback
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7048:19 in commitUpdateEffects
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:7036:22 in commitUpdateQueue
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:12165:10 in commitLifeCycles
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:13496:8 in commitAllLifeCycles
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:92:15 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:306:36 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:13702:8 in commitRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15269:13 in completeRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15197:21 in performWorkOnRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15090:24 in performWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15047:14 in performSyncWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:15315:21 in batchedUpdates$1
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2616:31 in batchedUpdates
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2711:17 in _receiveRootNodeIDEvent
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:2731:26 in receiveEvent
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:349:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:26 in <unknown>
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:297:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:17 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
Just to clarify, the first block seems to be a warning (as it is printed in yellow) and the second one is an error (because of the red color).
Please check on gl-react v4, everything should be fixed.