[4.16] HTML5 - Landscape Material

Hi,

After exporting my game to HTML5 my landscape material isnt being rendered. I have read these threads here:
https://answers.unrealengine.com/questions/164566/landscape-layer-blend-html5.html and here: https://answers.unrealengine.com/questions/492067/landscape-material-wont-show-html5.html that say landscape materials cannot be rendered in HTML5 unless there are 4 or less texture samples without normal/roughness. I’ve changed my landscape material (pictured below) to these specifications but it still does not render in my browser. Any ideas? Cheers! Edit: I understand i might have put this question in the wrong section.

Landscape material:

How its meant to look:

Game in browser:

Do you get any messages regarding shaders or materials or rendering in the message log on the page or in the web browser’s page console? Can you verify the page is running as WebGL 2? (there should be a printed line in the console that states WebGL 2 or WebGL 1)

Iirc UE 4.16 with WebGL 2 should lift the restriction of only having 4 texture samplers available. Though just for testing, are you able to reduce to three or fewer blended textures? I wonder if that is the root cause here, i.e. whether blending only two or three textures together works?

Hi,

I have built my game on both WebGL 2 and 1. WebGL2 gives no error message but WebGL1 states “Your browser or graphics card does not support the WebGL extension EXT_sRGB. This can impact UE4 graphics performance and quality.”

Not sure what that means and why it doesn’t say it on WebGL2 though. I have tried setting a material with a single texture node as my landscape material and tried only blending 3 materials but still didn’t seem to render anything.

The game is on my website here if you wanna try it http://www.connororton.com/OUAC/OnceUponACastle.html apologies for any bad content it’s a university programming showcase :slight_smile: E to confirm, wasd to move etc.

Edit: Confirmed again blending 2 landscape textures still doesnt render the landscape and I have a GTX 1060 6GB.

Edit2: these happen & my packaging settings(had to enable compress and cook everything in order for the game to work, changing these has no consequence)

Cheers

WebGL 2 has the features of the WebGL 1 extension EXT_sRGB subsumed to the core WebGL 2 specification, so that extension is no longer needed. The problem not occurring with blending fewer textures suggests the issue is not about the number of texture units then.

Are the textures a power of 2? (256x256, 512x512, 1024x1024, etc.) If they are not, that might affect tiling (see Texture issue in HTML5 - Rendering - Epic Developer Community Forums)

Try navigating to page about:config in Firefox, and setting webgl.max-warnings-per-context to something higher than the default 32. That will up the limit at “No further warnings will be reported for this WebGL context. (already reported 32 warnings)”. Perhaps that might uncover an issue that drowned in the clearBuffer() messages, which I think are unrelated and due to something else here.

Hi,

All my landscape textures are in a power of two. I have extended the warning count to 10000 and unique error codes include:

Error: WebGL warning: uniform4uiv: Function used is incompatible with uniform type: 35669

Error: WebGL warning: drawElements: Framebuffer not complete. (status: 0x8cd7)

Error: WebGL warning: drawElements: Framebuffer must be complete.

and then:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://datarouter.ol.epicgames.com/datarouter/api/v1/public/data?SessionID={002C8FE2-2505-0F1D-0034-00F2000EF19D}&AppID=UEGame.Rocket.Release|092583B94F294B462AA84C98BD16B770|Once%20Upon%20a%20Castle&AppVersion=4.16.0-3452394%2B%2B%2BUE4%2BRelease-4.16&UserID=ANON-{002B865A-2505-0Fdatarouter/api/v1/public/data?SessionID={002C8FE2-2505-0F1D-0034-00F2000EF19D}&AppID=U. (Reason: missing token ‘content-type’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).

Hope this means something,

Cheers

Apologies for double post but I’ve found something out. I’ve created a test project with 4 different textures all 1024x1024 and exported it out to HTML. The landscape renders but the blue texture is being rendered incorrectly. So it seems to be something wrong with my project itself, if any detail it was made in 4.12 and upgraded to 4.16. But the images below seem to indicate a bug in 4.16 possibly.

In Engine:

In HTML:

Landscape Material:

The WebGL message “Error: WebGL warning: uniform4uiv: Function used is incompatible with uniform type: 35669” is certainly an indication of a bug in UE4 WebGL backend. I would recommend making a minimal project (like you seem to have been doing already above?) to reproduce this and posting to the bug report section of this forum (Einen Fehler melden - Unreal Engine). A zip bundle + steps here might also help others to reproduce, and the UE4 devs to reach a bugfix.

The other WebGL messages like

Error: WebGL warning: drawElements: Framebuffer not complete. (status: 0x8cd7)
Error: WebGL warning: drawElements: Framebuffer must be complete.

can be ignored, they are present in all exports at the moment I think.

Also the CORS related message comes from the telemetry option, which you can disable in the project settings by choosing “End users do not send telemetry” (or something similar, I forget the exact UI option), though the warning message is harmless as well.

Any chance you could zip up and link your web export of the minimum problem repro somewhere? There is one JavaScript side trick I could try to see if this might be able to be worked around outside the UE4 engine.

I’ll report the bug asap :slight_smile:

I made that new project to test if the landscape would render when exported and it did and in the process I found the layer blend bug shown above. So the issue must exist in my project somewhere but not sure what might be causing it, my map is very big if thats anything to go off and I haven’t optimized it massively well but it still runs fine. I’ve uploaded both projects just incase:

My game (landscape not rendering): Dropbox - File Deleted

Layer Blend Bug: Dropbox - File Deleted

Modified the .js file in OUAC_HTML.zip to work around the “Error: WebGL warning: uniform4uiv: Function used is incompatible with uniform type: 35669” error, but unfortunately that does not seem to be the root source of the blending issue, and the terrain stays white even with that error removed, so the problem must be somewhere else.

It’s curious that in the game build, the terrain is completely white but in the layer blend example, it does show up at least partially, so it looks like multiple separate issues in play somehow.

Hi,

Apologies for the long reply. Thank you for all of your help but I have decided to abandon this project, like you say its something to do with my project which could be anything. I decided its most beneficial to remake this game from the ground up now to ensure there are no errors at start

Cheers

I do hear from UE4 developers that the root cause for issue “Error: WebGL warning: uniform4uiv: Function used is incompatible with uniform type: 35669” was located. Hopefully next UE4 patch version might have a fix incorporated, so worth keeping an eye out for the next version.