Comments (11)
one workaround for your use-case is to change the key
prop on your GL.Surface to force React to recreate a new GL.Surface.
onLoad and onProgress of gl-react are only triggered once.
This is a way to track the fact that (if you use preload) the GL.Surface won't render until textures are ready (there are two states: "notReady" initial state and "ready" final state). but when images are loaded, and if you load new ones, the GL.Surface won't go back to "notReady" state at the moment
from gl-react.
Thanks! Yes it does blink. Can you think of any other way to trigger the progress indicator?
from gl-react.
I guess you are right that onLoad should be triggered again if new textures has been loaded after onLoad was already triggered. I probably need to trigger an event to indicate that loading is in progress (I guess onLoadStart like on HTML5 Media events).
I guess the rendering would stuck during that phase if you enable preload feature.
This is a change in the semantic so it will need to wait for at least a minor release.
from gl-react.
Awesome, thank you! I have a related question though. Even though the onLoad is only firing once when loaded, and there is no key on Surface, when I switch texture images via props I still see a blink. This should not happen should it?
from gl-react.
there is no "onLoadStart" event yet,
but I should have fixed the 2 bug mentioned (blink and onLoad to re-trigger) in gl-react-dom
implementation (v2.0.9), I should fix this in gl-react-native soon.
(for instance, this example used to blink when changing the textures)
from gl-react.
also released gl-react-native 2.17.1
for this.
Please confirm if the bug is fixed for you.
from gl-react.
Hey, thanks for handling this.
Well this is interesting, updated gl-react-dom
from 2.0.3 to 2.0.10 and now the events do fire up. Did you change anything?
Blinks are still there, in fact you can still see them in the example you've linked, it's just harder to see. Switch between the first blur and the second blur quickly and you'll see that sometimes the unprocessed image appears briefly.
Thanks!
from gl-react.
Yeah onLoad is fixed.
I guess I've fixed half of the problem for the blink issue. I'll give another try and investigate where it happens
from gl-react.
@Maxoos I've released a v2.0.11 where the blink issue should be fixed.
The bug should no longer appear on that example.
from gl-react.
@gre Well done! works great, thanks!
from gl-react.
cool thanks
from gl-react.
Related Issues (20)
- [Feature Request] Uint8Array as a Texture HOT 6
- Possible Bug: Image data flipped when captured
- TypeError: undefined is not a function (near '...GL.createComponent...') HOT 1
- image disappeared after refocus the screen
- gl-react-native App crashed with Surface with style prop HOT 5
- Update Peer Dependency to gl-react-5?
- How to remove white Background from the image HOT 1
- GL is currently not available (have you enabled remote debbuging) shows up on Android HOT 1
- Camera preview dimensions ignored? - distorted on iOS HOT 2
- Question About Texts on Images in react-native HOT 1
- [iOS] app crash calling "capture": NSInvalidArgumentException HOT 2
- How to load spine animation json file in react-native HOT 1
- Specify texture format
- GL.Node does not support video surfaces HOT 2
- Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader' HOT 4
- Bad quality camera on Android devices HOT 5
- Image from local storage are not reading , surface view coming black.
- headless example HOT 1
- How to use gl-react with next.js ? Is there any documentation about this ? HOT 1
- Runtime error: `Unable to resolve module expo-modules-core`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gl-react.