Let's talk about it first

Recently, I am using UE4.23 to package H5 projects. It is precisely because the official website engine after UE4.23 no longer supports the packaging of H5 projects, so I have no choice but to download UE4.23, a rather old version, to package H5 projects. Try It can be said that it is very difficult to put the UE project into H5 to run and even support operations such as running on the mobile phone.

Problem Description

The H5 project packaged by UE4.23, the official website description only supports Chrome and Firefox browsers, but the browser on the PC side can basically be opened and run, but when it reaches the mobile phone side, whether it is the Firefox browser app or the built-in browser Even the WeChat browser cannot be opened, and an error is prompted:
ExpressionValue GL MAX COLOR ATTACHMENTS>= MaxSimultaneousRenderTargets!FOpenGL::SupportsMultipleRenderTargets0) failedin D:/Build/++UE4/Svnc/Engine/Source/Runtime/OpenGLDryPrivate/OpenGLDevice. cpp:749! Check console for details.
insert image description here

error parsing

This error is usually caused by the OpenGL hardware not supporting rendering more than a certain number of color attachments simultaneously.

In OpenGL, a color attachment is a color buffer in the frame buffer used to store rendering results. In some cases, you may need to attach multiple color attachments to the same framebuffer, such as when using multiple render targets or multiple views. However, the hardware has a limit on the number of color attachments that can be rendered at the same time. If the limit is exceeded, the above error will occur.

Speaking human words: Your mobile browser’s rendering ability is not good, and the projects released by UE open WebGl2.0 by default. Mobile browsers do not support WebGl2.0, and some special textures and material configurations that come with UE

Solution - Forcibly close WebGL2.0 to use WebGL1.0

1. In the H5 file packaged by UE, you can see a lot of JS files, find XXX.UE4.js in it
insert image description here
2. Open the Js file and search [detectWebGL]
//If you encounter problems when using WebGL 2, Or for a quick test you can disable UE4

// From using WebGL 2, and reverting to WebGL 1 by setting the following flag to true.

3. So we rudely add a line of code directly below

	if (explicitlyUseWebGL1) {
		disableWebGL2 = true;
		console.log('Disabled WebGL 2 as requested by ?webgl1 GET param.');
	}
	//下面才是你要添加的内容
	disableWebGL2 = true;

problem solved

insert image description here

follow-up questions

However, TMD has raised other questions:
1. Do I need to manually modify each packaged project?
Answer: Download the source code of UE4.23 and modify this point yourself
2. Some textures and shadows are not available:
this requires modifying some configurations in the UE project to be compatible with the defects of the mobile terminal.
insert image description here
The sun light setting is: movable and

the dynamic shadow is adjusted to 4000

At this time, the shadow caused by the sun has actually come out.

3. TMD~! But the textures on the characters are also lost:

insert image description here
Set the properties of textures and materials

All of these need to be configured according to the settings in the above figure, so that they can be displayed normally on the mobile terminal!

Summarize

The development of UE really came out of minesweeping step by step in a sentence of TMD TMD TMD. I hope that I am lucky to climb out of this pit this time and be able to fill in the pit. I hope the next developer can avoid this pit. ,Hope it helps you

UE4.23 packaged H5 project mobile browser can not start