javascript - How to load image, create texture, render, and save image asynchronously with WebGL? -
I am trying to write an application that uses very large textures. The idea is that you work on a small version of texture in real-time modified shaders and when the application ends, your changes will be applied to the original unscalated texture. The problem is that profiling shows something like the following:
- img.src = filename (500ms)
- texImage2d (...) (1500ms) <
- pixels (300 mms
- Put in canvas (1000 mms)
- Save to canvas file (300 mms)
Essentially This means that the browser locks for about 4 seconds when saving large unmodified texture, the user is unable to do anything. Is it possible to do this in asynchronously so that the browser is responsive? All this should be done in JavaScript and client-side, because I am using local files (HTML files / filesystems).
Web workers looked like a good idea, but they are DOM, so I can not save the image loading and functionality of the browser, and they do not have access to the WebGL reference so that they call Teximage 2d Can not do that, which takes the most time.
The size and the number of images, when I load the page initially, then I can not make them all in memory.
Is there a user who can make it more responsive to the user? I want them to continue working on the last image, whereas the last one will be render.
Image loading should be in the background, and you will not have any progress for it, but you increasing the texture You can use the
texSubImage2D to upload, it will probably take a little longer but you should be able to give some feedback to the user and respond to other events.
In addition, you can draw weblag canvas directly in canvas 2D
drawImage () takes images, video and canvas (2D or weblog) elements as arguments is. It should be almost immediately and saves around 1300 ms.
Comments
Post a Comment