Web Game Optimization: Experiences with Itch.io and Engine Profiling

General
1

The more topics I create and read here, the more grateful I am to realize that game development is just as much about funny ideas and visual representation as it is about keeping hardware limitations in mind.
Generally, mobile and web exports are dominated by 2D games. While I have seen a few 3D web projects, they rarely run as smoothly as standalone executables.
What are your experiences with hosting web builds on itch.io or similar sites?

Do you have any specific tips regarding memory footprint, draw calls, or other metrics during profiling?
To make this a bit less vague: I am currently working across three engines (Godot, Unreal, and Unity). Two of them offer great support for web builds.

My current project is a simple 3D game built using KayKit’s Skeleton, Adventure, Nature, and Hexagonal Medieval asset packs.

However, it does feature a few particle effects and custom shaders—some of which unfortunately do not work in Godot’s Compatibility renderer.

I created this topic to open up a discussion on these challenges. (Note: I used AI to help clean up my grammar and formatting to keep things clear and transparent).

1 Like
2

That’s all I have on this topic.

1 Like
3

IMG0128
IMG01281242Ă—2328 181 KB

The reflections look a bit strange here. Is this supposed to support a touchscreen?

4

This work was done by my programmer as an experiment. He was just curious to see how it would turn out.

Yeah, touchscreen support is built into my projects from the start — we have plans to release versions for Android. As for the web, we’ll do that if possible.

1 Like
5

I would suggest supporting pivot rotation changes, such as a two-finger drag.
Currently, the controls on the iPhone feel a bit unintuitive.

1 Like
6

We’re still working out the specific control gestures, trying to find the most convenient and effective ones.

1 Like
7

Specific tips require specific problems

The most general advice, lowering the size of your assets will help with rendering. Profile your code often.

Great thread on minimizing web build initial download, only applies to the release template, not your assets.

1 Like
8

Specific shader :

This is not working in the compatibility renderer. Is there a specific reason why?

9

The youtube comments seem to have an idea

In case someone wants to use the shader for a WebGL build, there are a few minor changes required.
For example, @21:50, the line of code should be :

ray_hit.hit_point =  (ray_dir * vec3(t_near) + ray_origin);

instead of…

ray_hit.hit_point =  fma(ray_dir, vec3(t_near), ray_origin)

(As the later will throw compilation error with WebGL2.0)

since the fused multiply-add function doesn’t appear to be supported in WebGL (and only OpenGL ≥4.0)

1 Like
10

Yeah, I guess I would have to rewrite it a bit. As far as I know, the Compatibility renderer does not fully implement the advanced sky shader pipeline found in Vulkan.

1 Like