[examples] List of examples not working properly on Web platform

[raysan5]

This issue is intended to get feedback for examples not working properly. Please, answer to this issue with the examples not working properly and the unexpected behaviour detected. Thanks!

Name	Runs	Fixed	Comments
core_loading_tread	❌		Example crashes, it requires multi-threading support on raylib compilation before linkage. The example uses POSIX pthreads.h library, not officially available on some compilers (MSVC). This example should probably be redesigned or removed or moved to raylib-extras repo (and using an external multiplatform library like thread.h)
core_window_letterbox	✔️		Canvas resizing issue
core_top_down_lights	✔️		Minor: F1 shortcut conflicts with browser
textures_blend_modes	✔️		Quite poor example, requires a redesign
textures_draw_tiled	✔️		Canvas resizing issue
models_bone_socket	✔️		Minor: Slow rotation speed
models_point_rendering	✔️	⚠️	Points not drawn, drawing triangles instead. OpenGL ES 2.0 does not support point-mode drawing
models_yaw_pitch_roll	✔️		OBJ issues with texture coordinates loading
models_skybox	✔️	✔️	Skybox not drawn
shaders_raymarching	✔️		Canvas resizing issue
shaders_texture_tiling	✔️	⚠️	Shader compilation issues. OpenGL ES 2.0 does not support texture-repeat wrap mode
shaders_julia_set	✔️	✔️	Shader compilation issues
shaders_mesh_instancing	✔️	✔️	Shader loading: works locally, some server issue on shader loading (skipped characters) -> Issue seems related to CRLF vs LF line-break changes on .data file not aligned with expected size defined in .js. Building and uploading the example on Linux fixes it.
shaders_spotlight	✔️		Minor: Too fast movement
shaders_hybrid_render	✔️		Shader loading: works locally, some server issue on shader loading (skipped characters)
shaders_deferred_render	✔️	⚠️	Shader loading, not ported to GLSL100. Shaders ported but it seems OpenGL ES 2.0 does not support GBuffers?
shaders_vertex_displacement	✔️		Shader loading: works locally, some server issue on shader loading (skipped characters)

Issue with shaders loading seems it could be related to not properly reading line-breaks and considering them as 2 bytes instead of just one and then something is mangled, really weird issue, it requires investigation...

Also detected some issues with the inputs related to the web requirement of clicking over the canvas to "enable" input access... that behaviour should probably be reviewed but it's a web-design-related.

[michealguy]

Vertex Displacement doesn't seem to work for me

[michealguy]

Mesh Instancing example doesn't seem to work as well.

[nullstare]

Deferred render, Julia set and Texture tiling failed to compile the shader. Hybrid Rendering failed to compile the rasterizing shader.

[treblig-punisher]

Custom frame control not responding to keyboard input. Pressing Space Bar doesn't pause the animation and using the arrow keys doesn't make it faster or slower. Tested it in chrome, firefox nightly, regular firefox, and also Opera GX.

Also skybox only displays this black background in all mentioned browsers

[raysan5]

@treblig-punisher thanks for reporting, custom frame control requires a special raylib build (SUPPORT_CUSTOM_FRAME_CONTROL flag enabled) so it's expected not working on web.

models_skybox is already on above list.

[satchelfrost]

I see that models_point_rendering is not working on web. Sorry, I should have tested that. It appears that rlEnablePointMode() doesn't work on web targets. However, I can confirm glDrawArrays with GL_POINTS does work on web. I have an idea of how to fix it. Would you like me to give it a try and make a pull request, or perhaps open an issue to discuss the idea first?

[raysan5]

@satchelfrost I think supporting GL_POINTS implies some redesign, global variables and code complexity increment. Am I right?

[satchelfrost]

You hit the nail on the head 😅. I was thinking add a Boolean to the RLGL structure that gets toggled with rlEnablePointMode. If the added complexity is not wanted, then I completely understand rolling back the changes on point rendering.

[zet23t]

The window flags example on browser is broken when making the window resizable and going into fullscreen mode. The cursor positions will then no longer match the coordinates and when returning from full screen, the canvas has a strange size.

https://www.raylib.com/examples/core/loader.html?name=core_window_flags

I looked this up because I wanted to get full screen mode working for my web games and so far, I haven't succeeded. I found some more hardcoded canvas references that I would like to fix as well, but it seems there is more work to do. Maybe this topic deserves its own issue?

[CrackedPixel]

#4754

one down 😜

[odecaux]

The window flags example on browser is broken when making the window resizable and going into fullscreen mode. The cursor positions will then no longer match the coordinates and when returning from full screen, the canvas has a strange size.

https://www.raylib.com/examples/core/loader.html?name=core_window_flags

I looked this up because I wanted to get full screen mode working for my web games and so far, I haven't succeeded. I found some more hardcoded canvas references that I would like to fix as well, but it seems there is more work to do. Maybe this topic deserves its own issue?

This project seems to have a working solution : https://github.com/danielchasehooper/ShapeUp-public/

https://github.com/danielchasehooper/ShapeUp-public/blob/994ef04d0bf9043f5ef9422c02c6c16b93d80fd7/src/main.c#L1277C1-L1296C11
with https://github.com/danielchasehooper/ShapeUp-public/blob/994ef04d0bf9043f5ef9422c02c6c16b93d80fd7/src/minshell.html#L22C4-L30C10
I can't help more than that. I don't have much knowledge of either emscripen or the raylib internals