先吐槽一波

最近在使用UE4.23打包H5项目，也正是因为UE4.23之后的官网引擎再也不支持H5项目的打包，被迫无奈只能下载UE4.23这个相当旧的版本来打包H5项目，试着将UE的项目放到H5里面运行甚至支持在手机端运行等操作.可以说是非常难顶。

问题描述

UE4.23打包出来的H5项目，官网描述仅支持Chrome以及火狐浏览器的，但是在PC端的浏览器基本上是可以打开并且运行的，但是到达手机端，无论是火狐浏览器APP还是自带浏览器甚至微信浏览器都无法打开，并且提示一下错误：
ExpressionValue GL MAX COLOR ATTACHMENTS>= MaxSimultaneousRenderTargets!FOpenGL::SupportsMultipleRenderTargets0) failedin D:/Build/++UE4/Svnc/Engine/Source/Runtime/OpenGLDryPrivate/OpenGLDevice.cpp:749!Check console for details.
在这里插入图片描述

错误解析

这个错误通常是由于 OpenGL 硬件不支持同时渲染超过一定数量的颜色附件导致的。

在 OpenGL 中，颜色附件是指用于存储渲染结果的帧缓冲区中的颜色缓冲区。在某些情况下，您可能需要将多个颜色附件附加到同一个帧缓冲区中，例如在使用多个渲染目标或多个视图的情况下。但是，硬件对于同时渲染的颜色附件数量是有限制的，如果超过了限制，就会出现上述错误。

说人话：你的手机浏览器渲染能力不行，UE出来的项目默认打开了WebGl2.0，手机浏览器不支持WebGl2.0，以及UE自带的一些特殊贴图、材质的配置

解决方案 - 强制关闭WebGL2.0 让其使用WebGL1.0

1、从UE打包出来的H5文件里面，可以看到很多JS的文件，在里面找到XXX.UE4.js
在这里插入图片描述
2、打开Js文件，搜索【detectWebGL】
//如果你在使用WebGL 2时遇到问题，或者为了快速测试，你可以禁用UE4

//从使用WebGL 2，并通过设置以下标志为true恢复到WebGL 1。

3、所以我们就很粗鲁的直接在下面加一行代码

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