How to use shader with float array in Safari 10

Questions
1

I’m trying to get a shader to work in an older version of Safari. The issue seems to be the float array uniform. Im hoping someone here might have an idea of how to get this to work. Thanks

2

Im not sure if makes a difference, but Im using CustomMaterial to create the shader.

3

The shader is a lot like the one in this PG:

https://www.babylonjs-playground.com/#0DI1M2

4

The error message in Safari is:

‘first-class array’ : not supported

5

I believe this is a WebGL 2.0 feature. ios only supports 1.0 AFAIK. But maybe some shader expert can give a better answer :blush:

2 Likes
6

Indeed, it does not work because Safari is running WebGL1:

https://www.babylonjs-playground.com/#7ZG78P#1

This is your PG with WebGL2 disabled: you will see it does not work in Chrome either.

1 Like
7

Is there a better way to get this to work in webgl1 than to simply create a bunch of float uniforms?

I’m using this shader to poke holes through a plane mesh to show other moving meshes underneath. Maybe there is another way to accomplish this that doesn’t use a shader.

8

I’m not sure there is another way…

If you don’t need to move the holes you can of course use an opacity texture, but as in your sample you make a hole move I assume it is part of your requirements.

9

I think the easiest way to do this would be to use a dynamicTexture to create an opacityTexture. This would create a maximum resolution for the cutouts, however, after which the edges would become pixellated.

To get those nice infinitely-zoomable circular cutouts, I believe it’s possible in WebGL1 to use a texture as if it were an array. I believe that’s what the answer here is doing. You’d create a float texture with the centers of the holes as red=x, green=y, and since you’d have blue to play with either 0 or a radius for the hole. Then you’d just loop through the “centers” of the “pixels” in your shader to get the coordinates of the holes.

2 Likes
10

It’s indeed possible but you must be cautious to disable all filtering / mip mapping on this texture to be sure to get the right value and not an interpolated one.

Using a texture to pass data is what we are doing to pass the bone matrices for skinned meshes, for eg.

2 Likes
11

ios14 and next safari version WILL support webgl2 :slight_smile:

12

It only took them three years? Amazing!

1 Like