Hi,
I want to build a HTML5 project with metal materials. I have created a nice fake reflection in my material with a HDRI+reflection vector in the diffuse channel. I checked everything in the mobile view and it looks ok.
But in the HTML5 playout the reflections are not visible. I can see only graphic errors. Could it be that HTML5 dont support 32 Bit HDRI images? I dont know what I should do now to archive reflections in my HTML5 build. 16 Bit images do not work in conjunction with a reflection vector. Does anyone know a solution to this problem?
Hey, Im new to UE, so this might not be the best answer but I hope it helps.
Mobile devices uses OpenGL ES 3.0 (or 3.1), while webgl (html5) is based on OpenGL ES 2.0. There is significant difference between these versions, not all shaders are compatible and so not all features are available. Reflections can be done with ES 2.0, but shader you use might be only ES 3 compatible.
I have similar problems, for example my dynamic character doesnt cast shadow.
I am having similar issues, i think there is some problem with reflections. In my project when I open it in 64bit the reflections are really dumbed down or go away completely. If i open my project in 32bit mozilla then the reflections on everything shoots through the roof. Almost every material ends up having a reflection even materials that have 0 metallic and 1 roughness.
Thank you for your answers. Its all confusing at the moment. We need some good tutorials for mobile productions. At the moment I am not able to archive the quality with HTML5 which I need. I guess there are many ways to fake reflections, dynamic shadows and so on.
For example, 64 do not work at my system. Only the 32 bit version. With 64 bit I get errors or the download hangs and nothing happens. I do not understand this.
I have been looking into your issue and I was not unable to reproduce using the following reproduction steps:
Launch UE4 editor (4.7.1) via binary launcher
Start a new blank project with starter content
Import HDR texture
in the content browser right click and select material to create new material
right click in the viewport of the material editor and type “paramcube” to select and place a parameter cube node
right click in the viewport of the material editor and type “Reflection Vector” to select and place a parameter cube node.
connect the output of the reflection capture node to the input of the Parameter cube node
connect the output node of the Parameter cube to the emmisive input of the material input.
When completed the material viewport should look like the included picture.
drag the newly created material onto a static mesh within the level.
press the drop down arrow next to the launch button on the menu at the top of the viewport
select firefox (32 bit)
When I follow these steps I am able to see the reflections in the launched html project. Is there anything that is different between the method that I have used and the method that you used? If there is a difference would you mind listing the steps that you have used as well as including a picture of your material setup? This will help to narrow down where the problem lies. Any other information that you can think of could be most helpful.
Hi ,
thank you very much for your answer. Unfortunately your setup do not work. In the two screenshots below you can see the 3D model with your material. In the mobile preview everything is ok, but the HTML5 output is completely unusable.
I have no explanation for it.
Whoops! I forgot to include a few additional steps. The steps that I have listed above will create the reflective portion of the material, but it still needs to be added to an existing material. After you have completed the steps from before:
in the viewport click and drag to select Reflection Vector node and the Cube Parameter node
Press CTRL-c to copy the nodes.
Open the material that you would like to have reflections (In my example I use “M_Chair”)
in the viewport press CTRL-v to paste the nodes.
right click in the open area of the viewport and type “add” to create an add node
Connect the output of the Parameter Cube node to the “A” input of the add node.
Find the Base Color node of the material input
disconnect the node that is currently attached to the base color input of the material node (take note of where the input is connected)
connect the node that was previously connected to the base color input to the “B” input of the add node
Connect the output of the add node to the base color of the material node.
This section adds the reflection that we created previously to a material ( in this example it is M_chair, but any material can be used) Click apply to apply the changes and drag and drop the material onto the desired mesh. After that you should be able to launch on and see the reflections. If these steps do not work let me know and I will look into the issue further for you.
My apologies for omitting the second portion Hopefully this works for you,
This is indeed a very curious problem. I will have to do a some more investigating into this one. Do you think you could provide a little more information to help me narrow down where to look? The information that would be most helpful is:
could you provide a picture of your material setup? (not the material applied to an object, a screenshot of the viewport containing the nodes that you put together to make the material)
Would you be willing to attach the HDRI texture that you are using? maybe there is something different between the one that I used and the one that you are using.
What version of Firefox are you using? Perhaps we are using deifferent versions.
Also if there is anything else that you think would be helpful be sure to include that too, we can never have too much information.
As EntityB mentioned, there is documentation with guidelines and limitations when developing for mobile platform. Be sure you are setting the Target Hardware correctly within your ‘Project Settings’ as well.
There is also a setting within your ‘Project Settings’ under the ‘Rendering’ section you will want to make sure is checked as well.
Hi Andrew,
unfortunately your advices dont help me. I tried everything what you said. As I switched my project to mobile I get the graphics error with Firefox 32 Bit again. I disabled mobile HDR and I get the error which I attached to this mail. (with Firefox 32 Bit )
I tested my project with my LG G2. It works fine. No problems. The HTML5 output works also without any problems with 64 Bit. But with the Firefox 32 Bit () I get these graphic errors. For this reason I thing it must be bug,
You actually want to keep ‘Mobile HDR’ checked, as it allows reflections. Use this in conjunction with the suggestions as well as making sure you are targeting the correct hardware within your project settings.
Hi Andrew,
unfortunately I cannot solve the problem. I also tested the “Feature Level Switch”. But in 32 Bit I get the graphic error again. I have attached a screnshot of my material setup. “HDR on moble” is switched on in my project. I am using a HDRI for the reflection.
Its really important for me that my project is running with Firefox 32 Bit because some of my customers are interested in HTML5 productions.
The bug report that was entered pertaining to this issue UE-11730 is still in testing. Since this feature was introduced with the initial release of 4.7, it is still in its experimental stages. If you would like some more documentation on the framework of HTML 5, take a look over our documentation. This is also limited at the moment, but will become more complete as we continue to expand and improve upon the feature.
HTML 5 Documentation
If you are able to get your reflections to work properly within the 64 bit version, I would use this as a workaround until we are able to provide more support for 32 bit. We appreciate your patience while we work to resolve this issue. Let us know if you have any other questions.
Hi Andrew,
thank you for this information. I appreciate the HTML5 development in the Unreal Engine 4 very much. But at the moment its really very difficult to convince cutomers to invest money into a HTML5 production when the most builds are only useable in 64 Bit browsers. The majority of people do not have these browsers. For this reason, I would be really grateful if the 32 bit compatibility would be improved.
We wanted to provide this information to you, so that you’d know the difference between 32/64bit Firefox.
Firefox 32 bit / 64 bit issues - - Right now, there are two main differences 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 chrome.
Hi ,
thank you very much for this information. I tried to open the HTML5 Build with Chrome 32 Bit. But it was not possible because I get Java Script errors. The same issues appeared with the Internet Explorer. Some scripts made problems.
To use the HTML5 output its really necessary that the builds run in every browser without any problems. Are there plans to archive this in the future?
