glTF extension for Unreal Engine exports

Content creation (3dsMax, Maya, Blender, glTF)
1

Hi, I realized this forum is more relevant to my question.

I’ve used Babylonjs for several projects, I’m also an Unreal Engine 4 developer and have big interest in the ability to export glTF directly from Unreal Engine and use directly in BabylonJS.
There is an open source project that supports this for PlayCanvas (GitHub - ue4plugins/GLTFWebViewer) which has a few extensions that allow enhanced rendering, including extension for lightmaps.

I’m no expert in BabylonJS to understand how to implement these extensions myself. Anyone can shed some light on how to tackle this task? I’m mostly interested in the lightmap extension.

1 Like
2

Adding @bghgary :slight_smile:

1 Like
3

I finally managed to create my own BabylonJS extension implementing some of the code from the extension above. I can now do lightbaking in Unreal and export to babylonjs.

4

Hi, @Khoa_Pham do you have your version somewhere publicly available? like on GitHub or any other place ?

Thank you

5

Hi, no I havent uploaded any public version yet. but the key concept is basically taken from the PlayCanvas extension above and applied to a PBRCustomMaterial:

				mat.Fragment_Definitions(
					
					////
					// IN parameters from Vertex Shader
					"varying vec2 texcoord_0; \r\n" + 
					"varying vec2 texcoord_1; \r\n" +

					////
					// lightmap UV0
					"vec2 getLightmapUV0(vec2 uv) \r\n" +
					"{ \r\n" +
					"	return (uv * lm_coordinateScaleBias.xy + lm_coordinateScaleBias.zw) * vec2(1.0, 0.5); \r\n" +
					"} \r\n" +

					////
					// lightmap UV1
					"vec2 getLightmapUV1(vec2 uv) \r\n" +
					"{ \r\n" +
					"	return getLightmapUV0(uv) + vec2(0.0, 0.5); \r\n" +
					"} \r\n" + 

					////
					// flip Y (in case we need to use for flipping UV)
					"vec2 flipY(vec2 uv) \r\n" + 
					"{ \r\n" + 
					"	return vec2(uv.x, 1.0 - uv.y); \r\n" + 
					"} \r\n" +

					"vec3 saturation(vec3 rgb, float adjustment) \r\n" + 
					"{ \r\n" + 
						// Algorithm from Chapter 16 of OpenGL Shading Language
						"const vec3 W = vec3(0.2125, 0.7154, 0.0721); \r\n" + 
						"vec3 intensity = vec3(dot(rgb, W)); \r\n" + 
						"return mix(intensity, rgb, adjustment); \r\n" + 
					"} \r\n" + 

					////
					// compute lightmap
					"vec4 getLightMapColorHQ(sampler2D sampler, vec2 uv) \r\n" +
					"{ \r\n" +

					//"   vec2 flippedUv = flipY(uv); \r\n" +

					"	vec2 lightmapUv0 = flipY(getLightmapUV0(uv)); \r\n" +
					"	vec2 lightmapUv1 = flipY(getLightmapUV1(uv)); \r\n" +

					"	vec4 lightmap0 = texture2D(sampler, lightmapUv0).rgba; \r\n" +
					"	vec4 lightmap1 = texture2D(sampler, lightmapUv1).rgba; \r\n" +

					"	float logL = lightmap0.w; \r\n" +

						// Add residual
					"	logL += lightmap1.w * (1.0 / 255.0) - (0.5 / 255.0); \r\n" +

						// Range scale logL
					"	logL = logL * lm_lightmapScale.w + lm_lightmapAdd.w; \r\n" +

						// Range scale uvw
					"	vec3 uvw = lightmap0.rgb * lightmap0.rgb * lm_lightmapScale.rgb + lm_lightmapAdd.rgb; \r\n" +

						// logL -> L
					"	const float logBlackPoint = 0.01858136; \r\n" +

						// this part controls the lighting contrast
					"	float l = exp2( logL * 1.0 ) - logBlackPoint; \r\n" + 

						// this is really just some multiplier
					"	float directionality = 0.6; \r\n" +

					"	float luma = l * directionality; \r\n" +
					"	vec3 color = luma * uvw; \r\n" +

						// return color but also luma (lighting intensity)
					"	return vec4(color.rgb, luma); \r\n" +

					"} \r\n"
				);