I’m currently developing a web-based game and have chosen to focus on stylized PBR textures for my 3D models. Initially, I considered hand-painted textures, but its not my expertise. I have a few questions regarding optimization and best practices for this setup:
WebGL Performance on Integrated gpu:
How does WebGL perform on integrated graphics for PCs that are around 4 years old, especially in comparison to mobile performance? Are there any specific limitations or considerations I should be aware of?
Texture Limitations:
Given my focus on stylized PBR, I plan to use textures for albedo, normals, roughness, and metallic properties. What would be a reasonable limit for the number of textures and their sizes in a scene to ensure good performance ? And should I stick with URP Lit or make my own shader?
Lighting in Procedurally Generated Levels:
My levels are procedurally generated. Is there an efficient way to pre-bake lighting for these dynamically created sections, or would it be more advisable to rely on lighting probes?
Any insights or advice on these topics would be greatly appreciated. if you have any other tips or advice for desktop WebGL, I’d love to hear them. Thanks! .
Thats amazing ive been waiting for this for so long. Its a shame I no longer really give 2 ****s about the engine but still, great news for those that do!
We built artland.com entire VR ecosystem using unity but they were too slow to pull their fingers out on lots of stuff so we swapped to babylon.js and it was a dream compared. Only thing it lacks is an easy way to do lipsync for avatars
EDIT : if someone solves that without using amazon sumerian hosts, you have a goldmine on your hand regarding the lipsync for babylon.js or web in general
Well then you are out of options. You cant automagically turn an integrated chip into something it is not.
WebGL is already extremely bad for performance even on a capable system, if you are using it on integrated only systems then you simply have to optimize your assets and limit the scope of what you are doing. There are not any tips that are going to give you any sensible performance other than what is already stated for WebGL - avoid transparency, avoid overdraw in general, limit asset geometry to very low numbers, limit shader instructions to very low numbers, limit number of textures, limit count of objects in scene, only run very little per frame code, use pooling etc
In general you are going to struggle to use that many textures per object on WebGL even on higher end devices. You are trying to make something that should be a desktop/mobile project, but shoehorn it into a browser - its not going to work. You have to make concessions if you want to use WebGL, otherwise use an engine that is able to do those and perform well such as Babylon.js
So If WebGPU is not an option and doesnt resolve your issues, you try babylon.js
Ofcourse all of this discourse is relatively pointless without actually trying something and profiling. Right now its impossible to know what your performance is like without actual tests and real numbers - speculating like this means nothing when every project is completely different beyond the aforementioned standards of how to optimize for WebGL. Start putting your assets in and create a scene and then build for WebGL and profile it. If you struggle at that point, best to look at a different engine as it will only get worse when you pile in code etc
Yeah … I am gonna be busy with exams for 3 weeks ( final sem of uni)
after that , I will create a demo scene that represents somewhat of my desired requirements . i will see how to disable my dedicated gpu to run the test on my 13th gen integrated graphics .
I’m aware of the significant performance gap between desktop and mobile platforms. My question centers on whether WebGL performance on an Intel UHD Graphics 630 — which can run GTA V at low settings with 25-30 FPS — is comparable to mobile graphics capabilities from around two years ago. Specifically, I’m evaluating the feasibility of including 1-5 hero props, 5-10 normal props, and about 10 background objects in my infinite side scroller. All these elements would be PBR textured, and the scene would feature one real-time light source.
Thanx for your detailed insight though !
I wish I had the luxury of creating for these high end platforms , my only reason for WebGL is that web portals dont have much good supply of games but high demand … The only way I can potentially sustain myself making games after graduation. It is still very exciting to bring a new level of quality to the web .
No. My phone is the budget tier Pixel 7a ($499) which is less than a year old but the graphics in it is two years old. It scores an 1,807 in 3DMark Wild Life Extreme Unlimited. By comparison the Intel UHD 630 scores a sad 882. Intel integrated just sucks.
GTA V is a native application that can use all of your threads whereas Unity’s WebGL is only able to work with a single thread. Unity’s implementation is also approximately one-third the performance of a native application so best case scenario that 25 to 30 would be 8 to 10. Worst case it would be a couple of frames if it ran at all.
I’m in agreement with @MadeFromPolygons_1 . If WebGL is a must have requirement then you should use a game engine that is tailored around the technology. Unity’s implementation is just not that good.
My assumption was WEBGL could handle half of Desktop , 1/3 performance with other restrictions is Indeed too much . And then ofc , WEBGL on iOS or android doesn’t even make sense although sadly that’s what most of the discussions are about .
Its just sad for me that android gets like 50k+ new games a month so you don’t get any organic visibility . poki.com on the other hand gets like 2-4 new games a month with like 70-80 mill monthly visits
Got some serious decisions to make . Have 3 months on my hands to work full time on something that must be profitable
Honestly if your banking on WebGL getting you more visibility than mobile think again. To be honest all of the games industry has a visibility/discoverability problem right now.
You concept needs to genuinely stand out, if it does then it’ll do well and if not it wont. In that regards, desktop via steam is the best option for discoverability compared to the avenues you are exploring.
I am not sure where you get your figures about demand on games portals but that is not my experience, yes some games get good demand but many go completely unnoticed. Just by releasing on web, you don’t suddenly get around the issue that your game has to genuinely be a standout game. Also factor in that the revenue from web games is abysmally low.
Good luck, the issue you are trying to tackle plagues all games and unfortunately there is no silver bullet. Make a great game, and market it will, and it will do well. That’s the magic recipe. Everything else is focusing on unknowns that may not fruit in anything positive.
Let’s be clear there are 2 bits of tech at work here:
WebGL (GPU-driven graphics) should perform quite well - no reason Unity is better or worse than others
There is WASM which Unity compiles the code to, which does relate a bit to graphics in terms of uploading things to the GPU - previously Unity had a very bloated WASM code base so hope it improves. I believe this is the part that suffered on mobile. This is where js engines are better and lighter, but you have to use web-code
The new tech seems about high-end rendering capabilities, not sure how it unlocks mobile…
Not found good figures on webgl and wasm vs native…
But memory limits and some browsers wanting to limit energy-use (seriously Safari was doing this on macbook last time I checked) are still problems.
WebGL (Web Assembly) has been capable of near-desktop performance since 2017. You will still easily run out of memory, though (see the 2017.10.24 demo when you drag the grass distance to max).
Here are some demos I made ages ago. They run fine in latest Edge browser:
