Reflections on Mobile/Web black

Hi,

I’ve read all of the answers regarding reflections on mobile but none helped. I’m trying to create a reflective material for the iPad but all it does is show a black surface. Diffuse is working fine but the reflection channel seems to be excluded. I have two directional lights both of which show as specular highlights on the material (both set to stationary). I’m using Skylight with a custom hdr file for the reflection. I also tried a reflection capture but it won’t change a thing (in Mobile preview mode + on the device itself).

I know it’s possible, since I’ve been fiddeling around with the example scenes of UE4. I noticed that in Mobile Preview mode reflection captures don’t update until I switch to Shader Model 4 or 5 preview and back, but this doesn’t work in my own scene…

I’ve read something about environment color but i didn’t find a setting for that anywhere?

How it’s supposed to look:

How it looks in mobile preview mode and on iPad:

You can also see part of my settings in the skylight…

I just discovered one way to do reflections → using the reflection vector in my materials
I’d like to use the proper method though, since this workaround gives me very rough results and using it I loose all the nice physically based shading stuff…

is there any way this is going to work? Epic staff please?

Shaders in OpenGL ES2 (WebGL in HTML5 is based on it) is a lot more limited then desktop equivalents, so not all materials work on them, aspecially things like fancy reflections

Yeah but as far as I know I can still use reflections in OpenGL ES2, right? There must be something I overlooked…

Thing is, the example files of Unreal support reflections on mobile, and as far as I can see, there’s no difference in how they are implemented.

for anyone interested in the project files:
http://temp.dasachtegebot.de/8/Turbine.zip

maybe someone knows how to get it to work…

Hello 8!,

Screen Space Reflections are actually not supported currently on Mobile platforms.

Mobile Post Process

Performance Guidelines for Mobile

I provided you with the performance guidelines in case you were wondering why Screen Space Reflections were unsupported, and in case you wanted to check to make sure you were approaching the development for you platform correctly.

Cheers,

Hi ,

Thanks for your reply. Unfortunately I know all that already and it didn’t help me much. What I’m looking for is not the Screen Space Reflections. As you can see in the pictures above, all reflections are missing. I want to get the standard reflections that the shader supports on every platform. I also said I use a SphereReflectionCapture. This is possible, I know that because the Unreal example scene works just fine on mobile WITH captured reflections (obviously “live” screen space reflections won’t work on mobile, I know that)

I bet if someone looked at my project he could tell my what’s wrong…

Thanks in advance!

Hey again 8!,

I noticed in your ‘World Outliner’ you have three different light sources. Perhaps try narrowing it down to two. Have your ‘Dominant Directional Light’ (try setting to movable) and your ‘Skylight’. There is also a setting within your ‘Skylight’ which could be the cause of your issue as well. Try re-checking the ‘Lower Hemisphere is Black’ option.

If none of these suggestions work for you let me know. If you would like, you can send me a private message on the Forums with an external link, like DropBox or a shared Drive folder in which I can grab the project to test on my end.

Cheers,

Hi , thanks for the tips but none worked. Could you please take a look at my project, I provided a download link in a previous comment.

Thanks!

Hey 8!,

So I grabbed your project and was able to get the reflections and your model to render correctly. I think the issue you were having was with the two Directional Lights in your scene. Mobile only supports one ‘Directional Light’ and one ‘Skylight.’ All I had to do was delete one of your Directional Lights and I changed the brightness on the remaining one.

Scene Set Up

Mobile Preview

Let me know if you get the same results or if you need more help.

Cheers,

Hi ,

Thanks for the suggestion but on my iPad Air it still doesn’t work. I got it to work in the simulator like you. On my iPad it still looks like what you get when you go to “Settings”->“Preview Rendering Level”->“Mobile/HTML5”.

Could you check that? Do you also get a black material with some specular? I’ve been working in this mode, I guess this comes closest to what I would see on the iPad.

If you have some time, could you please try to get it to work in this mode? I had no luck, tried everything

Cheers!

EDIT: Maybe it has something to do with how reflection spheres work, when I capture the scene I still only get what’s set in the skylight and not what I captured in the reflection sphere…

Hey 8!,

So I grabbed an iPad Air we have here and tested your project with no issues. The normal map is not as detailed as when playing on the device, but the overall quality is pretty good considering it is a mobile platform. Follow along with my images to match the set up, and hopefully you can get the same results.

Overall Set Up

Here I have placed a ‘Sphere Reflection Actor’ to a radius of about 900 and a default brightness of 1.0.

Single Directional Light

34930-directionalactor.png

As mentioned before, you only need one ‘Directional Light’ in your scene with its mobility set to ‘Movable’.

Skylight

Here you keep the mobility to ‘Stationary’ and check the option for ‘Lower Hemisphere is Black’.

Turbine on iPad Air Device

This is the final result after deploying to the device. I took a screenshot while playing the project on the iPad Air.

Let me know when you have attempted to reproduce what I am seeing on my end, or if you need more assistance.

Cheers,

Hi,

I’m so sorry, I think I might have given you the project files with the fake reflections enabled. This was my workaround before I asked this question here in the forums. Take a look at the material, unplug the things going into “Emissive”, then you see the problem I have.

I followed your description, it works only with fake reflections through the emsissive channel.

Sorry you couldn’t even reproduce the problem because of this mistake on my part. Maybe you can now. Thanks in advance (again).

I’m going to try recreating the scene bit by bit. Looking at the Sample Content I’m sure this has to work!

Cheers,

this is the standard test scene with my model as a movable mesh + as a skeletal mesh. Both seem to work fine. Lightmapping problems occur when I set the non-skeletal one to static and build but thats ok, since the object be animated.

ok, somehow it seems on mobile the Sphere Reflection Capture can’t capture HDR Maps off a skylight which is then causing the problem. It can however capture everything else, that is geometry and lights. Also, these captures only update when NOT in Mobile Preview mode, but changes carry over after switching to SM5 and back to Mobile.

When not on mobile, there is no need for the sphere reflection capture, you only need that skylight, that’s why it’s working there…

These must be two serious bugs, right?

  • HDRs used in a skylight don’t get captured by sphere capture
  • sphere captures don’t update in Mobile Preview

can anyone confirm this? ? If so, could you please file these two bugs?

Hey 8!,

So the main issue here is that you might be misunderstanding how Deferred Rendering works within UE4.

With deferred rendering, lighting calculations come second to material calculations. Your reflection capture actors are actually taking a real-time image of your scene and applying it to your material based on their location and the sky information.

With this in mind, I have spent a good amount of time testing and consorting with my teammates. The good news is there is a bug that has already been reported which is the issue you are experiencing.

UE-4936 - Reflection Capture are Not Working with Moveable Directional Light on Mobile

This bug is scheduled to be fixed and integrated within version 4.8. As always, we appreciate our users patience reported issue. Look for the update within the release notes of 4.8 for the fix.

As your temporary workaround, you could continue to use the faked reflections through the emissive channel. If you have additional questions or need further help please let us know.

Thank you,

Hey,

thanks for looking into this. What’s so strange to me is that everything works fine in the default scene, the only difference being the usage of an HDR image. Are you saying, the reflection capture actor doesn’t see the hdr because it’s not an actor in the scene? Would it help to put an inverted-normals sphere in the scene and apply the hdr as a material to that (in the emissive channel)?

I don’t get it that I’m seemingly the only person trying to use an hdr map in a mobile game?

But anyway… thanks for the help and the information, really helped understanding the engine a lot!

Cheers.