I have an issue with some materials that are presented in my HTML5 project. I understand that the HTML5 preview (ES2 shader) in the project doesn’t equal to the actual project that is packaged and uploaded to the webpage. In most cases I have managed to surpass the material problems that are caused by HTML low-quality shaders.
I usually put Feature Level Switch between all the nodes that are connected to base material in “Material editor” and use static lighting all over the project. Mostly this has worked properly without errors.
Now I made just a basic material that has only texture - feature level switch - base material (base color input). Picture attached “BasicMaterial.jpg”
I created the same material settings that worked for one case and aren’t working in the other cases. Here are the main questions that I’d like to ask: What may cause the problem that materials done the same way are working different way? How to fix that?
This is definitely caused by a mismatch in texture wrap modes.
The above picture seems to be using the GL_CLAMP_TO_EDGE texture repeat mode.
The picture below is using GL_REPEAT instead.
See here for a description and images of the GLES2 texturing modes: OpenGL - Textures
I am not intimately familiar with the texture/shader editor - can you find any configuration there that would relate to texture wrapping, repeating or clamping or similar? Does any of that have an effect?
I do notice when running the page that in some of the rooms, the artifacts on the tapestry are exactly like in your screenshot, but in some other rooms, like the one with the two teddy bears on the bed and a clock on the wall, there is a floral texture tapestry that does repeat correctly. I wonder if some of the textures have a mismatching configuration and others wouldn’t? Does the floral tapestry have some kind of special texture mode that is different that makes it work?
Your point outs and textures objects and parameters page gave me a good knowledge about textures and how they they interact with certain settings. I found few mistakes that may cause the problem and I am 95% sure that I know the solution. I found that few settings were mismatching with the textures that were working correctly and some of the textures were wrong sized (not power of two).
Oh right, definitely, GLES2 & WebGL 1 have the restriction that repeating textures need to be power of 2 in size. I presume the ES2 shader preview is not able to account for that fact.
GLES3 & WebGL 2 will lift this restriction and allow repeating textures also when they are not power of 2 in size.
