koobas.hobune.stream
Problem tiling a RawImage in Safari WebGL
I'm using RawImage in a UI Canvas to show a texture, and I'm changing the RawImage's uvRect property to show different areas of the texture during play. (It's a vertical dial, like a slot machine wheel.)
In the texture's import settings, I have set the wrap mode to "Repeat", and so, when I change the uvRect property to be outside the 0-1 range in a direction, it tiles. This is the behavior I want, and it works in most WebGL settings, such as in the Chrome browser. The texture repeats as I change the uvRect around.
However, in Safari WebGL, it's acting like it is in "Clamp" mode instead; if I move the uvRect property to be outside the 0-1 range, I just get the blank edges of the texture that is supposed to be tiling, instead of repeating the texture across the face of the RawImage.
Any suggestions on how to get it to tile in the expected manner when playing in Safari WebGL?
(This is in Safari 11.1.1, built using Unity 2017.3.1f1.)
For those stumbling on this issue, if it goes unresolved, I was at least able to fix this problem - in an admittedly hacky and inefficient way - by simply doubling and tiling the texture itself and constraining the UV coordinates to be between 0.0 and 0.5 to give the desired repeating pattern. This works because it doesn't rely on the wrap mode to show the wrapping effect, which works around the issue in Safari.
Depending on your use case, you may have to repeat the texture more than once (i.e., if you're showing a repeating pattern that can be 10x wide, you'll need an 11x texture to do this trick). Luckily, the texture I had to tile was relatively small, and I only ever show a small portion of it, so the overhead is minimal.
I was able to resolve this issue by changing the size of the texture to be power of two (POT). This works because, unlike other browsers, Safari only supports WebGL 1.0, not WebGL 2.0 (https://docs.unity3d.com/Manual/webgl-browsercompatibility.html) and WebGL 1.0 only supports the repeating texture mode with POT images (https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL)
If anybody is still looking for the solution I was able to fix this issue by tiling my texture on a quad and setting texture type to default instead of sprite.
