Overcoming ES2 limitations

Development Rendering
, , , , ,
1

Hello! First post here, nice to meet y’all!

I am having a problem packaging a scene for html5. The scene doesn’t use anything fancy, but uses default grass from the Open World collection (M_FieldGrass). During packaging I’m getting an error:

M_FieldGrass_Inst_01_LOD1.uasset: Failed to compile Material Instance with Base M_FieldGrass_01 for platform GLSL_ES2_WEBGL, Default Material will be used in game.

and I’m seeing a default material blob when looking at the grass from near in the packaged version (in the editor everything is fine).

I read this and this answers and as far as I understand this may be some inherent problem of html5 which unreal cannot solve on its own.

  1. Do I understand correctly that this limitation is still a problem? From what I’m reading webgl 2, that supports ES3 is supported since 4.16. How do I use it?
  2. If there’s no way to make the grass as it is, is there an easy (automated!) way of setting the packaging such that it uses some less fancy version of the grass when packaging html5? As far as I understand I can edit the material myself (but as a beginner not really sure how I should do this) and then package, but I’d like to have a high-quality version in the editor that I can package for linux/windows and a lower-quality version for html5 without changing the materials every time I package for a different platform.

Is it possible? Thanks!

2

i’m not sure what M_FieldGrass actually is from the Open World collection – but if i had to guess, (from the error message you’re seeing) that one might be using a shader that’s not fully supported on WebGL2 (ES3).

we’re in talks with a number of the browser makers and there was hope that full support for shaders would go in for webgl2.1 – but, that’s been dropped in favor of moving the advanced shader features to something called webGPU (this is still being standardized).

that said, to get your “basic grass” in the scene – i’d recommend checking out the “content examples” project (see landscape examples).

as for setting materials based on platforms – there’s a way to do this for textures:

hope this helps!

3

Thank you for your answer. The ContentExamples are cool, thank you for pointing me there. I found there a different version of the grass that works with ES3.

NB: it would be nice to have the possibility to preview in ES3, as otherwise it’s hard to know whether a given asset works in ES3, or only in ES3.1.