Во-первых, посмотрите на этот ответ относительно прозрачности PNG и предварительно умноженного альфа. Короче говоря, пиксели в изображении PNG с непрозрачностью менее 100% предварительно умножаются, поэтому они становятся темнее как они становятся более прозрачными. Отсюда и темные артефакты по краям.
Даже без PNG и предварительно умноженной прозрачности вы все равно можете столкнуться с проблемой, если забудете установить цвет вашего фрагментного шейдера перед применением прозрачности.
Решением этой проблемы (когда вы хотите, чтобы текст был светло-серого цвета, а все, что на текстурной карте не является прозрачным), было бы создание текстурной карты, где ваш текст белый, а фон черный .
Эта карта текстуры будет контролировать альфа вашего фрагмента. Значения RGB вашего фрагмента будут установлены на светло-серый цвет.
Например:
// color used for text
lowp vec4 textColor = vec4(.82,.82,.82,1.0);
gl_FragColor = textColor;
// greyscale texture passed in as uniform
lowp vec4 alphaMap = texture2D(u_alpha_texture,v_texture);
// set the alpha using the texture
gl_FragColor.w = alphaMap.x;
В случаях, когда ваша цветовая текстура меняется, для этого подхода потребуются два отдельных изображения карты текстуры (одно для цвета и одно для альфа-канала). Понятно, что это менее эффективно, чем иметь дело с одним PNG, который имеет встроенную альфа-прозрачность. Однако, по моему опыту, это хороший компромисс (предварительно умноженные пиксели могут быть нелогичными, а другие подходы к загрузке прозрачности PNG без предварительного умножения вносят дополнительную сложность).
Плюсом этого подхода является то, что вы можете варьировать цвет текста независимо от изображения карты текстуры. Например, если вы хотите красный текст, вы можете изменить значение textColor на:
lowp vec4 textColor = vec4(1.0,0.0,0.0,1.0);
Вы даже можете изменять цвет с течением времени и т. Д., Независимо от альфы. Вот почему я считаю этот подход гибким.