Проблема наложения WebGL при рисовании полупрозрачного спрайта на не-черном фоне (cocos2d html5)

По умолчанию WebGL имеет то же значение, что и изображения и холст 2D, а именно он ожидает, что содержимое холста будет RGBA, он ожидает, что RGB будет предварительно умножен на альфа (другими словами, если альфа равна нулю, RGB также должен быть нулевым, поскольку что-либо умножить на ноль равно нулю). И, наконец, сочетается с тем, что стоит за ним, с GL_ONE_MINUS_SOURCE_ALPHA.

Если вы хотите, чтобы это было по-другому, у вас есть 2 варианта

1. Скажите WebGL, чтобы у него не было альфа

   Вы делаете это, создавая контекст без альфы.

   gl = canvas.getContext("experimental-webgl", { alpha: false });
   

   Вероятно, это лучший вариант для вашего случая. Поскольку альфа-канала не будет, смешение не требуется, что быстрее, чем смешение с фоном, что обычно и делает браузер.

2. Сообщите WebGL, что ваши значения RGB не умножаются предварительно

   gl = canvas.getContext ("экспериментальный-webgl", {premultipledAlpha: false});

   Это означает, что браузер по-прежнему будет смешивать ваш холст WebGL с фоном, вместо этого он будет делать это с GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA. Вы по-прежнему будете видеть зеленый цвет позади.

Есть еще несколько решений, которые могут быть полезны в особых случаях.

1. Если вам нужна альфа в пункте назначения для некоторых вычислений, вы можете очистить альфа до 1, когда закончите.

   ...render scene...
   
   gl.colorMask(false, false, false, true);
   gl.clearColor(0, 0, 0, 1);
   gl.clear(gl.COLOR_BUFFER_BIT);
   

   Смешивание по-прежнему будет происходить, вы просто не увидите его, потому что все ваши альфы установлены на 1. Не лучшее решение, но если вам нужна альфа назначения, это может быть ваше единственное решение.

2. Если вы не хотите видеть вещи за холстом, задайте фон холсту цвет.

   <canvas style="background-color: green;"></cavnas>
   

   Установка цвета фона холста на черный тоже подойдет, но это тоже пустая трата, потому что холст все равно будет смешиваться с черным. Если это то, что вы хотите, просто отключите альфа-канал в первую очередь.