Progress report #78
Replies: 1 comment
-
Hi all, this post is an update on the current progress, referring back to the items listed above. The major update is that the ANGLE integration is finished and merged into the main branch. A big thank you to @svenfinger for designing the Window.js logo and to @sfdeloach for building the mobile site!
This is still at the top of my mind but no progress has been made.
The sources have a build target, "windowjs-p5", that replaces the built-in welcome screen with the p5 loader so that this binary can be used to just run p5 scripts directly. I'd like to provide this as a downloadable ready-to-use binary for macOS and Windows. I'm still thinking about how to structure that in the site to avoid confusing p5 users and Javascript users of Window.js; maybe there will be a separate download page, or a page just about p5. These binaries will be distributed once signing for mac is ready as well.
This is done! The ANGLE team was super helpful and responsive in their mailing list. The integration required patching GLFW and ANGLE to enable a completely static build so that windowjs.exe keeps being distributed as a single binary. Most of the time went into adding support for vsync on macOS and synchronizing frames (usually produced via requestAnimationFrame) with the native platform, to avoid out-of-sync frames and glitches, and especially during window resizes. I'm quite happy with the final result on Windows, and compromised a bit on macOS; the long-term solution for that platform is to switch to the Metal backend for ANGLE once that's ready.
This is starting now. The first goal is to draw a triangle, via the minimal APIs to compile shaders and draw a few vertices. The major problems to solve are the integration with Skia, the API design, and managing the two GL contexts (the existing one, used by Skia for all the Canvas instances, and the new one, used for WebGL) e.g. making sure that the Canvas and WebGL bindings do the right context switches when needed, in a scalable way (i.e. in a way that makes it easy to do the right thing when adding new APIs in the future, vs. having a lot of context in mind right now and forgetting the details later and then getting things wrong...) |
Beta Was this translation helpful? Give feedback.
-
Hi all,
This post lists the next changes that I'll be making to Window.js. Any comments and suggestions are very welcome!
The current priorities are:
1. Signing mac binaries
It took quite a bit of back-and-forth to sign the Windows binaries, and I'll have to learn how to do this for macOS as well. I expect I'll have to create an Apple developer account and possibly buy a certificate to sign the binary.
If anyone that has had experience with this could post some guidance then that would save me quite a bit of time :-)
2. Providing a ready-to-use binary for P5
One of the goals of Window.js was to have an easier runtime for educational software like Scratch and Processing. Window.js can more or less run p5js.org scripts with a hacky loader; the next step is to provide a ready-to-use binary for P5 developers, so that they don't have to checkout the Window.js sources and go through the loader.
Another nice-to-have here would be fixing #69, so that the "welcome" screen could also have an "Open file" button to locate a script and just run it. This would enable folks to run their scripts without having to jump to the command line.
3. Stabilizing the current implementation
I found a number of issues after the initial release, and I believe the current builds are pretty stable for the APIs that they provide. I'm very thankful to folks that tried using Window.js for screenshots, in Retina displays, etc and that posted feedback!
Window.js has some test coverage and some pixel-diff tests for the Canvas implementation but it's not enough. I'd like to have tests that cover multiple corner cases of the drawing functions.
4. Integrating ANGLE
ANGLE is an implementation of OpenGLES2 that is used in Google Chrome. OpenGLES2 is the API that backs WebGL, and the ANGLE implementation has been thoroughly tested for conformance and maps to the native graphics APIs in each platform (D3D 11 on Windows, desktop GL on Linux and macOS, and also Metal on macOS).
The difficulty in integrating ANGLE is that its build is configured to produce a shared library i.e. a DLL on Windows (this is what Chrome uses), but I want Window.js to be a single binary. It's possible to build ANGLE as a static library, but the next issues come from GLFW and GLAD which try to load the GL functions as dynamic symbols from an imported DLL.
All of this can be solved but it's a lot of busy work and brittle; it will be very painful to maintain the integration going forward.
I've been trying a middle ground that links ANGLE into windowjs.exe and ALSO exports the GLES and EGL APIs from the EXE, as if it were a DLL; and then replacing LoadLibrary("libegl.dll") with GetModuleHandle(NULL) (that is, use the binary itself instead of loading a DLL). This is wacky but works! It was also super cool to see that ANGLE gets 9000+ FPS on an empty loop with vsync turned off (using the D3D11 backend), compared to ~3600 for desktop GL.
5. Providing the WebGL API
Once ANGLE is working well on all platforms, the next step is to have the WebGL API.
The initial idea is to expose the bindings as
window.gl
, and compose that layer underneath the layer fromwindow.canvas
.Some apps will just do 2D canvas and that works; others will just do GL and that works too; and it's also easy to mix both, using canvas to draw GUIs on top of the GL content.
It's already possible to create offscreen Canvas instances; those should be available as textures to use in GL directly. Likewise, it should be possible to create offscreen GL contexts, and to get their textures as an ImageBitmap or blit to a 2D canvas.
The main difficulty with this integration is making Skia aware of the context changes. Skia sets global GL state (for the 2D canvas) and it must be reset if the application changes that state; another approach is to use a separate GL context and share objects like textures, and then be very careful with syncing. This will probably go with that approach.
Beta Was this translation helpful? Give feedback.
All reactions