With the advancements in Open GLES support in browsers using WebGL2 and the progress in transpiling Java to JavaScript with TeaVM, I have begun to explore the possibility of porting jMonkeyEngine to the browser.
After a week of dedicated work, I am excited to present the initial prototype of what I hope will evolve into a module and plugin for the standard jME build system. At this stage, since it requires ongoing patches to the engine that are pending in my pull requests, the best I can offer is a link to a forked version of jMonkeyEngine that includes all necessary patches and introduces the new jme3-web module.
Status
| Status | Description | |
|---|---|---|
| rendering | OK | Ported to WebGL 2 (GL ES 3) |
| audio | OK | Ported to WebAudio (limited environment support (the predefined environments) via public domain impulses from http://reverbjs.org/) |
| mouse input | OK | |
| keyboard input | OK | |
| touch input | OK | |
| joystick input | NOT SUPPORTED |
| Module | Status | Description |
|---|---|---|
| jme3-core | PARTIAL | |
| jme3-plugin | PARTIAL | |
| jme3-effects | OK | |
| jme3-jogg | OK | |
| jme3-terrain | OK | |
| jme3-jbullet | OK | ported to Ammo.js (bullet emscripten build) |
| jme3-testdata | PARTIAL | some assets are not supported (See Supported Assets ) |
| jme3-niftygui | ??? | |
| jme3-vr | NOT SUPPORTED | |
| jme3-awt-dialogs | NOT SUPPORTED | Needs to be ported to html |
| jme3-networks | NOT SUPPORTED | Needs websocket connector |
Supported Assets
The current implementation offers support for a subset of available asset loaders. For a complete list, refer to jme3-web/src/main/resources/Web.cfg. If you wish to add more asset loaders along with their supported extensions, edit Web.cfg and make sure the teavm optimization preserves their classes by adding them to classesToPreserve[] in jme3-web/build.gradle.
Getting Started
Setup
Testing, developing, or porting applications to this fork, while slightly cumbersome, is relatively straightforward.
To begin, clone the source code repository.
Once you’ve cloned the repository and opened it in your preferred code editor, navigate to jme3-web/src/main/java/com/jme3/web/WebApp.java. This file contains the main() method, which serves as the entry point. Create and initiate your simple application from this point, as you would typically.
For any reflection usage outside the standard jME practices (already covered), include the relevant classes in the whitelist within jme3-web/src/main/java/com/jme3/web/jvm/TeaReflectionSupplier.java.
This step ensures that TeaVM generates the necessary supporting methods.
If your application requires additional assets, place them in the jme3-web/src/main/resources directory.
Resource Prefetching
Given that all resources are fetched via HTTP, loading assets comes with added latency. If your application depends on loading substantial resources on demand, consider downloading them automatically before launching the app. While this feature is supported by jme3-web, it’s disabled by default.
To enable it, specify one or more regex patterns in jme3-web/src/main/resources/resourcesPrefetchFilters.txt (one per line) to match the paths of resources you wish to prefetch (e.g., .+ to prefetch all resources). Before the application starts, the resource loader will download the matched resources, which will be stored in the browser cache using the virtual filesystem API. Note that this action only downloads resources and doesn’t load them into VRAM. To load them into VRAM, use assetManager.preload() as usual.
Compilation
Once everything is set up, compile using the following commands:
./gradlew --no-daemon compileJava generateJavaScript copyAllResources generateResourcesIndex
(Note: In my testing, omitting --no-daemon led to partially cached builds and improper compilation.)
Testing
After compilation, you’ll find the generated JavaScript and copied resources in jme3-web/build/generated/teavm/js/.
Keep in mind that some HTML5 APIs require a secure context. To test your application, host the files on an HTTPS server or a local server bound to localhost.
For Linux users, you can run:
busybox httpd -f -p8080 -h jme3-web/build/generated/teavm/js/
and then connect to http://localhost:8080 with your favorite browser.
Demo
The latest demo (11):
https://test-jme-web11.rblb.it
Changelog
- preload renamed to prefetch ( resourcesPreloadFilters → resourcesPrefetchFilters) for more clarity
- updated demo
- fix audio issues, use patched j-ogg Fix context leaking and hangs on invalid packet. by riccardobl · Pull Request #5 · stephengold/j-ogg-all · GitHub
- fix accuracy issues and format in texture sampling
- implement basic audio environments support
- remove unreliable prefetch support, leave it to the browser caching and server policies.
- add test instancing
- updated demo (11)
Guaranteed results, WYSIWYG.