Html5 Reflections Problems

I am building for HTML5, and I can’t seem to get good reflections. The screen space reflection that works for non-mobile/HTML5 builds doesn’t work. Additionally, the Box and Sphere reflection captures seem to have the following limitations for HTML5.

  1. the draw and capture radius of reflection capture don’t appear to have any effect.
  2. The level of detail in the reflection capture appears unalterable and extremely low (any way to increase this?)
  3. each object can only accept one reflection capture of the nearest reflection probe, and it looks like the reflection is stretched across the entire surface of the object.

My questions are the following. How do I get decent reflections for HTML5? It looks like the reflection captures are taken with an enormous capture radius… is there any way to make smaller captures or captures that are sharper, with a smaller capture radius, or more detailed, and less blurry?

I’m considering switching to Unity 5, because their webgl build of Angry Bots has functional SSR, so I know good reflections are possible in HTML5. EPIC: why are Unreal’s HTML5 reflections so poor? or have I missed a way to do them properly?

Hey ,

Here is an [AnswerHub post][1] which is similar to what you’re asking about. This reflection issue has been reported to our developers through , which would be referred to as: UE-11730. This specific issue has not been resolved yet.

You can change the radius of the reflection capture by selecting the reflection capture within the World Outliner. Then you’ll want to look within the Details panel and expand the Reflection Capture section. You can then change the influence radius, as well as the brightness, then you would simply update captures.

If you have any further questions, please reply back and we will assist you further. Thanks! :slight_smile:

HTML5 - Reflections do not work - Platform & Builds - Epic Developer Community Forums

,

Thanks for your response.

Concerning the Answerhub post: I’ve tried using the fake reflection implemented through nodes in the material editor (as he suggested). it just emits an arbitrary texture as the fake reflection… Do I need to generate my own cubemap for every texture instance to plug into these nodes? Does that create convincing reflections or just a generic shininess on the surface of the object?

Concerning the reflection capture radius: Much of my trouble is precisely because when I edit either radius (in the details panel as you suggested), and I update the captures, but the html5 preview/builds are unaffected. Changing the radius affects how the reflections look in shader model 4 and 5, but it seems to do nothing for the html5 builds. To see this, Settings–> Preview Rendering Level—> HTML5.

I’ll mention that I am updating the reflection captures in SM5, because they won’t update properly in HTML5. That said, the the capture radius seems to do nothing. It looks like it’s capturing with the radius of about the skybox… this is so unprecise as to render the reflection capture actors unuseable for HTML5.

Hey ,

When you’re testing your HTML5 project, you should test it on the mobile previewer since they’re similarly structured. Basically, if it works on IOS or Android, it should work on HTML5.

Firefox 32 bit / 64 bit issues - - Right now There are two main difference between them.

  • 64 bit Firefox allows for bigger
    projects. ( size/memory)
  • Graphically - Technically they should be same BUT there’s a bug in
    Firefox 32 bit which has screwed up
    its 16 bit floating point precision
    rendering in Firefox32 Mozilla is
    tracking this bug using
    (
    ) and is expected to be in stable in
    couple of months. fp16 is relevant
    for most of the stuff.

That being said, Chrome cannot handle big projects like Firefox - although it should not suffer from fp16 bug like Firefox. So an optimized shipping version of the game which has graphical error in Firefox stable should work in Chrome.

Regarding your reflection problem, we believe that you’re [running into the same issue][1] that another had ran into previously.

Thanks!

HTML5 - Reflections do not work - Platform & Builds - Epic Developer Community Forums

,

Thanks for the Answer Hub link. I’ve tried implementing this solution without success. What I did is apply the [reflection vector] → [param cube] nodes to the material of the reflective surface. This results in a generic shininess without any reflections. It seems like I might be able to use this in conjunction with a cubemap, hdri texture, or something similar in order to fake a reflection, but I am unable to find any documentation on how to do something like this. Is there any light you can shed on this?

Right now, I am still unable to achieve decent reflections in mobile (just the general shininess described above).

Also, I can modify the reflection capture, but it has no visual effect on reflections in mobile preview. In SM4 and SM5 when the radius is changed, the reflections change appearance as they should, but if it is supposed to be affect reflections’ appearances for mobile, it is most definitely not working the way you stated for mobile. Can you try modifying the radius in mobile preview to see if you can reproduce this issue? Make sure you are in settings–> preview rendering level → mobile/html5

As a side note, I am still unable to achieve decent reflections for mobile/html5. when I look at Epic’s mobile sun temple built for the mobile platform, it also appears to have crummy reflections. The textures are great, and shiny, but the reflection capture probes have the same issue as mine once the shader model is switched to mobile.

Right now, I’m doing the bootleg “duplicate the world upside down” solution as a temp fix. Apparently this is how decent reflections have been achieved with Epic Citadel. It seems like there should be a more contemporary approach to reflections for mobile though…

Hey ,

The best way that you can determine what will be best for your HTML5 or mobile game is to actually download our Content Examples project that’s listed under the Learn tab. Once you have this downloaded, scroll down in the maps to Reflections and then launch the mobile previewer. Once the shaders have compiled, it will show you exactly how reflections look for HTML5 or mobile projects.

By looking over this example myself, you may want to use something like the example: 1.1 Reflection Metallic Materials, 1.5 Screenspace Reflections (Dynamic) or 1.7 Scene Capture 2D (Dynamic) in your project for reflective surfaces.

Here is a list of documentation that you can also read over on reflections:

  • [Reflections][1]
  • [Reflection Environment][2]
  • [Material Reflections][3]
  • [Reflections - Content Examples][4]

I hope that this information helps you achieve the goal that you have in mind. Please be aware that HTML5 and Mobile devices do not render reflections the same, so they do look much different than what the reflections would look like on any other platform.

Please let me know if you have any further questions, thank you! :slight_smile:

Engine Feature Examples for Unreal Engine | Unreal Engine 5.1 Documentation
[2]: Reflections Captures in Unreal Engine | Unreal Engine 5.1 Documentation
[3]: Reflections Material Functions in Unreal Engine | Unreal Engine 5.1 Documentation
[4]: Content Examples Sample Project for Unreal Engine | Unreal Engine 5.1 Documentation

,

Thanks for the update. I’ve looked at the mobile Sun Temple demo and the reflections demo. When viewed in mobile preview, they both have the same issues I’ve brought up. All reflections are reduced to generic shininess without any real information reflected. the sphere reflection capture radii appear infinite despite their settings.

I’ve looked through the reflection documentation you listed several times as well, but what I’d need is likely the 1.5 Screenspace Reflections (Dynamic) or possibly Screen Capture 2D (Dynamic)… BUT as far as I have read and experienced SSR do not work for mobile in any way shape or form

(if SSR is supported in mobile, please let me know how). As for Scene Capture 2D (Dynamic) it also seems impossible

How would you suggest I pursue creating a reflective floor for HTML5/Mobile?
Is this something Unreal just isn’t supporting right now? Seems like a broadly applicable issue for many projects.

Right now, I’m building an upside down world seen through a translucent floor, but this entails its own lighting issues (mirroring directional light without light channels, light linking, or light culling volumes, etc). This is a headache easily avoided through SSR, or any number of the reflection strategies that Unreal seems not to support for mobile/HTML5…

Hey ,

I have heard back from our developers and you are able to improve the resolution by increasing GReflectionCaptureSize, which will also increase the memory load too. You can learn more [here][1]. I also wanted to advise you that there isn’t much else that can be done at this time due to the way that ES2 works.

I hope this information helps answer some of the questions you had, have a great day and thank you for your patience. :slight_smile:

https://udn.unrealengine.com/questions/244775/reflections-size-on-mobile.html