Porting jMonkeyEngine to the Browser with WebGL2 and TeaVM (sourcecode released)

Hi @RiccardoBlb , this is very cool.
I think that will surely help people to showcase there stuff right here.
I love it. Very nice feature.

this demo link should load and show model right?

i got just dark-gray background after load.

here logs:


but maybe its just my browser or iframe policy, idk. Sketchfab works tho.

Anyway idea is fantastic, even on JME homepage it could use it as demonstration.
And ofc JME Store yes.

2 Likes

It’s not the first time i see this issue, but i don’t know what is causing it, i suppose something to do with cloudflare cache or some optimization i have enabled for the frk domain, can you try from here: Model Viewer Demo

this is firefox (all warnings and errors)

disabled firefox blockers (chrome no plugins but also doesnt work):
image

logs:




I guess its about my “privacy” settings and iframe policy for browsers to disallow some actions iframe<->main window actions. I guess its related to iframe sandbox/etc params

btw. do it need iframe to work? it is possible load it into div or something?

can you try from here:

i got the same, sorry forgot to tell.

On Chrome i have no browser plugins and it doesnt work same like on Firefox where i also disabled ad-blocks.

i only see quickly loading physics/ammo.js and then jmeapp.js and all happen in 0.5 sec or less.

Im still trying to be sure if this is something on my side.

edit:

i were able fix iframe origin sanbox mode issue in Firefox, but then i get same logs now as in Chrome(this 2 warnings and 1 error) and still does not load.

It might be also related to Firejail for browsers im using, but i guess it would be nice if it work for it too. (since sketchfab is)

The origin rule shouldn’t be a problem, since the responses have cors headers.
I think something is happening to Web.cfg, since in the logs it says it cannot find a locator (that i assume is the WebLocator, since it is the only one that is used) but it seems its class name is an empty string:
image

Maybe the connection to the cfg file is closed before it is fully read, or maybe it has a ratelimit or something in cloudflare(?) (The page is hosted on cloudflare workers), i’ll look into it.

Not really, you can include the js file on any page, but iframes are a convenient way for embedding

when i load this long iframe url, logs are basically same as chrome one (2 warning, 1 error on screenshots)

So you are right, origin is not an issue, but something else.

What do you think about Firejail? Tho it just limit disc access to certain “needed” folders,
but maybe Firejail make issue here.

I don’t think firejail is an issue here, since i’ve seen this same issue before on browsers that didn’t run on firejail, but i’ve never been able to reproduce it

sadly we all know its almost impossible to fix without reproduce ;/

what about adding more logs somehow so i can replicate and provide? (if its really not cloudflare case)

Ok, i’ve managed to reproduce it…

It seems that somehow the resource gets randomly encoded in base64… :man_shrugging:

3 Likes

I added a rule to force the mime type to text/plain for these files but this didn’t fix the issue, so i am back to my initial hipotesis that maybe the connection is closed before the full file is read.
I’ve patched the Scanner implementation (it is taken from apache harmony since it is not available in teavm) to preload the entire file before starting to process it, this might solve the issue…

I’ve also moved the image loader code to a custom emscripten build of stb_image.h instead of the java port, this should improve loading time in slower devices.

@oxplay2 can you please test the new build from this domain https://3d5.rblb.it , to avoid possible caching issues?

2 Likes

Chrome:

it works much better since i have more loading, but it hold on “prepare enviroment”

here screenshots with error logs:


Firefox:

Its still about this origin iframe issue. But probably if i fix it again will be same as in Chrome.

edit:

i refreshed now in Chrome and for some reason issue appear same like before (i tried in private tab to disable cache/etc and was same)

image

In every case it seems it block cdn-cgi/rum address

You get the font issue?

The cors issue is unrelated, i think they are the cloudflare metrics that are enabled on the entire domain.

there is some Font issue in logs, see below.

Here is network TAB, tho dont see Font request here.

image

(no errors in middle of logs so i just show beginning and ending)

Chrome:

Firefox:

Edit:

When i load iframe link directly, the only Error i got is Font one

and i dont even see it loading in Network Tab

image

So it looks like it is just not included. Im not sure how this load JME assets to be accessible by AssetManager.

It is included, but the asset locator (weblocator) doesn’t get loaded, the LOCATOR line in Web.cfg is interrupted before the locator class for some reason, i tried to remove all the line terminators from Scanner, except for \n and redeployed on https://3d6.rblb.it/ maybe this will work?

Regarding the framebuffer format unsupported, it might have something to do with the framebuffer being floating point, can you show me the capabilities and the list of the loaded extensions that appear in the logs?

Regarding the framebuffer format unsupported, it might have something to do with the framebuffer being floating point, can you show me the capabilities and the list of the loaded extensions that appear in the logs?

im not sure how check extensions in logs.

Warn: WEBGL_compressed_texture_etc extension is not supported in this context.
jmeapp.js:101 Warn: WEBGL_compressed_texture_rgtc extension is not supported in this context.
jmeapp.js:101 Warn: WEBGL_depth_texture extension is not supported in this context.
jmeapp.js:101 Warn: WEBGL_texture_non_power_of_two extension is not supported in this context.

Supported capabilities:
FrameBuffer
FrameBufferMRT
FrameBufferMultisample
GLSL100
VertexTextureFetch
TextureArray
FloatTexture
FloatColorBufferRGBA
FloatColorBuffer
FloatDepthBuffer
NonPowerOfTwoTextures
MeshInstancing
VertexBufferArray
Multisample
PackedDepthStencilBuffer
Srgb
FrameBufferBlit
TextureCompressionS3TC
OpenGLES20
WebGL
DepthTexture
IntegerIndexBuffer
PartialNonPowerOfTwoTextures
CoreProfile
OpenGLES30
GLSL300

Hardware limits:
VertexTextureUnits = 32
FragmentTextureUnits = 32
FragmentUniformVectors = 1024
VertexUniformVectors = 1024
VertexAttributes = 16
FrameBufferSamples = 8
FrameBufferAttachments = 8
FrameBufferMrtAttachments = 8
RenderBufferSize = 32768
TextureSize = 32768
CubemapSize = 32768
ColorTextureSamples = 0
DepthTextureSamples = 0
TextureAnisotropy = 0
UniformBufferObjectMaxVertexBlocks = 0
UniformBufferObjectMaxFragmentBlocks = 0
UniformBufferObjectMaxGeometryBlocks = 0
UniformBufferObjectMaxBlockSize = 0
ShaderStorageBufferObjectMaxBlockSize = 0
ShaderStorageBufferObjectMaxVertexBlocks = 0
ShaderStorageBufferObjectMaxFragmentBlocks = 0
ShaderStorageBufferObjectMaxGeometryBlocks = 0
ShaderStorageBufferObjectMaxTessControlBlocks = 0
ShaderStorageBufferObjectMaxTessEvaluationBlocks = 0
ShaderStorageBufferObjectMaxComputeBlocks = 0
ShaderStorageBufferObjectMaxCombineBlocks = 0

Supported texture formats:
Alpha8 (Linear)
Luminance8 (Linear/sRGB)
Luminance16F (Linear)
Luminance32F (Linear)
Luminance8Alpha8 (Linear/sRGB)
Luminance16FAlpha16F (Linear)
BGR8 (Linear/sRGB)
RGB8 (Linear/sRGB)
RGB565 (Linear/sRGB)
RGB5A1 (Linear/sRGB)
RGBA8 (Linear/sRGB)
ABGR8 (Linear/sRGB)
ARGB8 (Linear/sRGB)
BGRA8 (Linear/sRGB)
DXT1 (Linear/sRGB)
DXT1A (Linear/sRGB)
DXT3 (Linear/sRGB)
DXT5 (Linear/sRGB)
Depth (Linear)
Depth16 (Linear)
Depth32F (Linear)
RGB111110F (Linear)
RGB16F (Linear)
RGBA16F (Linear)
RGB32F (Linear)
RGBA32F (Linear)
Depth24Stencil8 (Linear)
R16F (Linear)
R32F (Linear)
RG16F (Linear)
RG32F (Linear)
RGB10A2 (Linear)

yup. now i have just:

image

I use NVIDIA GeForce RTX 3060 + Debian
NVIDIA-SMI 510.39.01 Driver Version: 510.39.01 CUDA Version: 11.6

This browser is running in firejail?
From the log it seems the error happens when the 32x32 framebuffer is created, maybe there is a lower limit on texture size?:man_shrugging:
If you can tell me the command you use to run the browser with firejail i can test and see if i get the same error .

the new build runs fine on a pixel 6pro.

very nice

1 Like

firejail --profile=chrome-by-chromium /usr/bin/google-chrome-stable
firejail --profile=firefox-esr /usr/lib/firefox-esr/firefox-esr

this is profile almost same as chrome one but with little fix

content of “chrome-by-chromium”:

1. # Firejail profile for chromium
2. # Description: A web browser built for speed, simplicity, and security
3. # This file is overwritten after every install/update
4. # Persistent local customizations
5. include chromium.local
6. # Persistent global definitions
7. include globals.local
* noblacklist ${HOME}/.cache/google-chrome
8. noblacklist ${HOME}/.config/google-chrome
9. noblacklist ${HOME}/.config/chromium-flags.conf
* mkdir ${HOME}/.cache/google-chrome
10. mkdir ${HOME}/.config/google-chrome
11. whitelist ${HOME}/.cache/google-chrome
12. whitelist ${HOME}/.config/google-chrome
13. whitelist ${HOME}/.config/chromium-flags.conf
14. whitelist /usr/share/chromium
15. whitelist /src/bin/google-chrome-stable
* # private-bin chromium,chromium-browser,chromedriver
* # Redirect
16. include chromium-common.profile
17. include firefox-common.profile

firejail version 0.9.68

Compile time support:
- always force nonewprivs support is disabled
- AppArmor support is disabled
- AppImage support is enabled
- chroot support is enabled
- D-BUS proxy support is enabled
- file transfer support is enabled
- firetunnel support is enabled
- networking support is enabled
- output logging is enabled
- overlayfs support is disabled
- private-home support is enabled
- private-cache and tmpfs as user enabled
- SELinux support is disabled
- user namespace support is enabled
- X11 sandboxing support is enabled