Opening Dialogue Text and All Animations Broken in iPadOS 18 Browsers

[MarianMeido]

The game worked perfectly on browsers in iPadOS 17 and prior.
After upgrading to iPadOS 18, the game is broken in all browsers.
So probably something to do with webkit?

During the opening cut scene, no text appears, but you can still advance the story and panels by pressing the return key on a connected keyboard.
Afterwards, the menus and character picker work fine.
But once the first level launches, the first frame stays frozen for the rest of the game.
There is no further animation in the main window.
But, you can tell things are happening because the counters on the right still change if you fire or use bombs.

I’ve included a couple screenshots with the log open.

Device: iPad Pro (12.9”) (3rd Generation)
OS: iPadOS 18.0
Browser: Safari, Firefox, Chrome, etc.

[Akaricchi]

I don't think I can do much here. I don't own an ipad or iphone, and I can't reproduce this on any of my devices. If you can access the Javascript console (the equivalent of pressing F12 on desktop), see if any webgl-related errors show up there.

If it worked before and broke after the OS update, it's most likely a problem with the graphics drivers or whatever shared abstraction layer WebGL runs on in these browsers (ANGLE?). I'm unfamiliar with the graphics stack there.

[MarianMeido]

That's ok. I did look at the console and webgl is referenced a lot. But there was only one explicit webgl error. Maybe that will be a clue?
Just in case, I've included some other errors and warnings that popped up. Seems like 99% of the errors and warnings reference the same line.
At the end of the day, I understand if it just doesn't work.
Appreciate your help!

Opening Cut Scene

[Error] XMLHttpRequest cannot load https://www.youtube-nocookie.com/youtubei/v1/log_event?alt=json&key=AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8 due to access control checks.
[Warning] WebGL: non-portable extension enabled: WEBGL_polygon_mode
E: events>push_event: SDL_PeepEvents() failed: Couldn't open /persistent/storage/config (console.js, line 53)
E: taskmanager>taskmgr_create: SDL_CreateSemaphore() failed: SDL not built with thread support (console.js, line 53)
W: renderer/glcommon/opengl>glcommon_ext_clear_texture: Extension not supported (console.js, line 53)
W: renderer/glcommon/shaders>glcommon_build_shader_lang_table_fallback: Can not reliably determine all supported GLSL versions, resorting to guesswork. (console.js, line 53)
W: resource/texture_loader/basisu>texture_loader_basisu_pick_and_apply_compressed_format: loading: No suitable compression format available; falling back to uncompressed RGBA (console.js, line 53
E: progress>progress_open_file_read: VFS error: Can't open 'storage/progress.zst': SDL error: Couldn't open /persistent/storage/progress.zst; trying legacy path (console.js, line 53)
E: resource>load_resource_finish: Failed to load postprocessing pipeline 'global' from 'res/shader/global.pp' (console.js, line 53)
[Warning] The resource https://play.taisei-project.org/taisei.wasm was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

First Level Using Reimu

E: util/kvparser>parse_keyvalue_file_cb: VFS error: Node 'res/shader/viewport.pp' does not exist (console.js, line 53)
E: resource>load_resource_finish: Failed to load postprocessing pipeline 'viewport' from 'res/shader/viewport.pp' (console.js, line 53)
W: resource/texture_loader/basisu>texture_loader_basisu_pick_and_apply_compressed_format: stage3/wspellclouds: No suitable compression format available; falling back to uncompressed RGBA (console.js, line 53)
I: resource>load_resource_finish: Loaded texture 'stage3/wspellclouds' from '[(ro) decompress view of [(ro) resource index file #797: 7d03a2b719ee9bd021e08d72652efc45153d7fdfd136297443c48514b8ef9f17 (wspellclouds.basis)]]' (console.js, line 53)
W: resource/texture_loader/basisu>texture_loader_basisu_pick_and_apply_compressed_format: stage1/horizon: No suitable compression format available; falling back to uncompressed RGBA (console.js, line 53)
I: resource>load_resource_finish: Loaded texture 'stage1/horizon' from '[(ro) decompress view of [(ro) resource index file #720: ae71db7492dc845462d42a651b4f845ac6eb20ccc745468385389e2b4c9d73c5 (horizon.tex)]]' (console.js, line 53)

[Akaricchi]

I did look at the console and webgl is referenced a lot.

What were the other references? The non-portable extension warning is not relevant; all available extensions are enabled automatically, but not necessarily used — this matches regular OpenGL ES behavior.

[MarianMeido]

Okay, here are all the other lines where WebGL is mentioned.

Opening Cut Scene

I: renderer/glcommon/opengl>glcommon_check_capabilities: WebGL compatibility mode (console.js, line 53)
I: renderer/glcommon/opengl>glcommon_check_capabilities: OpenGL version: OpenGL ES 3.0 (WebGL 2.0) (console.js, line 53)
I: renderer/glcommon/opengl>glcommon_check_capabilities: OpenGL renderer: WebKit WebGL (console.js, line 53)
I: renderer/glcommon/opengl>glcommon_check_capabilities: GLSL version: OpenGL ES GLSL ES 3.00 (WebGL GLSL ES 3.00) (console.js, line 53)
I: renderer/glcommon/opengl>glcommon_check_capabilities: Supported extensions: EXT_color_buffer_float EXT_color_buffer_half_float EXT_texture_filter_anisotropic EXT_texture_norm16 KHR_parallel_shader_compile WEBGL_clip_cull_distance WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context WEBGL_multi_draw GL_EXT_color_buffer_float GL_EXT_color_buffer_half_float GL_EXT_texture_filter_anisotropic GL_EXT_texture_norm16 GL_KHR_parallel_shader_compile GL_WEBGL_clip_cull_distance GL_WEBGL_debug_renderer_info GL_WEBGL_debug_shaders GL_WEBGL_lose_context GL_WEBGL_multi_draw (console.js, line 53)

[Akaricchi]

It sounds like you might have been hit by this bug: https://issues.chromium.org/issues/355605685 floooh/sokol#1085

If that's the case, I can try to work around it in a few days.

[MarianMeido]

Ah ok. This is interesting. I would never have guessed Safari would be using the same thing as Chrome.
Thanks so much, I appreciate the help!

[Akaricchi]

I wouldn't be surprised if all major browsers use ANGLE to implement WebGL these days.

[Akaricchi]

@MarianMeido can you please test this build? https://taisei-project.github.io/taisei-web-test/

[MarianMeido]

This is great! Thanks so much for working on this issue.

The first time I loaded this build, it wouldn't respond for a few minutes.
It only showed the image of the shrine with no sound or text.

But after staring at it a while of looking at the console, it started playing.
Since then, its responded to key presses to advance the story every time I reload it.
Played through the first level; looks and sounds great!

Here's the webgl mentions in the console again just in case they're helpful:

[Log] I: renderer/glcommon/opengl>glcommon_check_capabilities: WebGL compatibility mode (taisei.js, line 4)
[Log] I: renderer/glcommon/opengl>glcommon_check_capabilities: OpenGL version: OpenGL ES 3.0 (WebGL 2.0) (taisei.js, line 4)
[Log] I: renderer/glcommon/opengl>glcommon_check_capabilities: OpenGL vendor: WebKit (taisei.js, line 4)
[Log] I: renderer/glcommon/opengl>glcommon_check_capabilities: OpenGL renderer: WebKit WebGL (taisei.js, line 4)
[Log] I: renderer/glcommon/opengl>glcommon_check_capabilities: OpenGL unmasked vendor: Apple Inc. (taisei.js, line 4)
[Log] I: renderer/glcommon/opengl>glcommon_check_capabilities: OpenGL unmasked renderer: Apple GPU (taisei.js, line 4)
[Log] I: renderer/glcommon/opengl>glcommon_check_capabilities: GLSL version: OpenGL ES GLSL ES 3.00 (WebGL GLSL ES 3.00) (taisei.js, line 4)
[Log] I: renderer/glcommon/opengl>glcommon_check_capabilities: Supported extensions: EXT_color_buffer_float EXT_color_buffer_half_float EXT_texture_filter_anisotropic EXT_texture_norm16 KHR_parallel_shader_compile WEBGL_clip_cull_distance WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context WEBGL_multi_draw GL_EXT_color_buffer_float GL_EXT_color_buffer_half_float GL_EXT_texture_filter_anisotropic GL_EXT_texture_norm16 GL_KHR_parallel_shader_compile GL_WEBGL_clip_cull_distance GL_WEBGL_debug_renderer_info GL_WEBGL_debug_shaders GL_WEBGL_lose_context GL_WEBGL_multi_draw (taisei.js, line 4)

[MarianMeido]

Testing out the current build on desktop Safari, I think I see what the delay might have been.
At full screen, you can see the prefetching reseources progress bar still appears above the main window while the first cutscene is playing. Looks like it finishes loading some assets in the background while the dialogue is running.

On iPad, this bar is cut off at the top. But it's probably still there, and you just can't see that it's taking a little longer than the desktop version. My guess anyway.

[Akaricchi]

So that confirms it, iOS is affected by the ANGLE bug. Good to know.

Looks like it finishes loading some assets in the background while the dialogue is running.

Yeah, that system is far from perfect (and so is the whole web port). It could prioritize downloads better.

[Akaricchi]

FYI, I plan to release a v1.4.2 update probably within this week. It'll contain this fix and a bunch of other stuff.