Этот пост является продолжением серии постов о WebGL2. Первый начался с основ и предыдущий был о текстурах.

В последнем посте мы рассмотрели, как работают текстуры и как их применять. Мы создавали их из изображений, которые загружали. В этой статье вместо использования изображения мы создадим данные в JavaScript напрямую.

Создание данных для текстуры в JavaScript в основном простое в зависимости от формата текстуры. WebGL2 поддерживает тонну форматов текстур. WebGL2 поддерживает все неразмерные форматы из WebGL1

Они называются неразмерными, потому что то, как они фактически представлены внутренне, не определено в WebGL1. Это определено в WebGL2. В дополнение к этим неразмерным форматам есть куча размерных форматов, включая

И эти форматы глубины и трафарета также

Легенда:

• одно число как 8 означает 8 бит, которые будут нормализованы от 0 до 1
• число, предшествующее s как s8 означает знаковое 8-битное число, которое будет нормализовано от -1 до 1
• число, предшествующее f как f16 означает число с плавающей точкой.
• число, предшествующее i как i8 означает целое число.
• число, предшествующее ui как ui8 означает беззнаковое целое число.

Мы не будем использовать эту информацию здесь, но я выделил половинные и float форматы текстур, чтобы показать, в отличие от WebGL1, они всегда доступны в WebGL2, но они не отмечены как color renderable и/или texture filterable по умолчанию. Не быть color renderable означает, что они не могут быть отрендерены. Рендеринг в текстуру покрыт в другом уроке. Не texture filterable означает, что они должны использоваться только с gl.NEAREST. Обе эти функции доступны как опциональные расширения в WebGL2.

Для каждого из форматов вы указываете как internal format (формат, который GPU будет использовать внутренне), так и format и type данных, которые вы предоставляете WebGL. Вот таблица, показывающая, какой format и type вы должны предоставить данные для данного internal format

  <tr><td>RGBA                                            </td><td>RGBA            </td><td>UNSIGNED_BYTE                  </td><td>4  </td></tr>
  <tr><td>RGBA                                            </td><td>RGBA            </td><td>UNSIGNED_SHORT_4_4_4_4         </td><td>2  </td></tr>
  <tr><td>RGBA                                            </td><td>RGBA            </td><td>UNSIGNED_SHORT_5_5_5_1         </td><td>2  </td></tr>
  <tr><td>RGB                                             </td><td>RGB             </td><td>UNSIGNED_BYTE                  </td><td>3  </td></tr>
  <tr><td>RGB                                             </td><td>RGB             </td><td>UNSIGNED_SHORT_5_6_5           </td><td>2  </td></tr>
  <tr><td>LUMINANCE_ALPHA                                 </td><td>LUMINANCE_ALPHA </td><td>UNSIGNED_BYTE                  </td><td>2  </td></tr>
  <tr><td>LUMINANCE                                       </td><td>LUMINANCE       </td><td>UNSIGNED_BYTE                  </td><td>1  </td></tr>
  <tr><td>ALPHA                                           </td><td>ALPHA           </td><td>UNSIGNED_BYTE                  </td><td>1  </td></tr>

</tbody>

Давайте создадим 3x2 пиксельную R8 текстуру. Поскольку это R8 текстура, есть только 1 значение на пиксель в красном канале.

Мы возьмем образец из последней статьи. Сначала мы изменим координаты текстуры, чтобы использовать всю текстуру на каждой грани куба.

// Заполняем буфер координатами текстуры куба.
function setTexcoords(gl) {
  gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([
        // передняя грань
        0, 0,
        0, 1,
        1, 0,
        1, 0,
        0, 1,
        1, 1,
        ...

Затем мы изменим код, который создает текстуру

// Создаем текстуру.
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

-// Заполняем текстуру 1x1 синим пикселем.
-gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
-              new Uint8Array([0, 0, 255, 255]));

// заполняем текстуру 3x2 пикселями
const level = 0;
const internalFormat = gl.R8;
const width = 3;
const height = 2;
const border = 0;
const format = gl.RED;
const type = gl.UNSIGNED_BYTE;
const data = new Uint8Array([
  128,  64, 128,
    0, 192,   0,
]);
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border,
              format, type, data);

// устанавливаем фильтрацию, чтобы нам не нужны были мипы и она не фильтровалась
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

-// Асинхронно загружаем изображение
-...

И вот это

Упс! Почему это не работает?!?!?

Проверяя JavaScript консоль, мы видим ошибку что-то вроде этого

WebGL: INVALID_OPERATION: texImage2D: ArrayBufferView not big enough for request

Оказывается, есть своего рода неясная настройка в WebGL, оставшаяся с тех пор, когда OpenGL был впервые создан. Компьютеры иногда работают быстрее, когда данные определенного размера. Например, может быть быстрее копировать 2, 4 или 8 байт за раз вместо 1 за раз. WebGL по умолчанию использует 4 байта за раз, поэтому он ожидает, что каждая строка данных будет кратна 4 байтам (кроме последней строки).

Наши данные выше только 3 байта на строку, 6 байт всего, но WebGL собирается попытаться прочитать 4 байта для первой строки и 3 байта для второй строки, всего 7 байт, поэтому он жалуется.

Мы можем сказать WebGL обрабатывать 1 байт за раз так

const alignment = 1;
gl.pixelStorei(gl.UNPACK_ALIGNMENT, alignment);

Допустимые значения alignment: 1, 2, 4 и 8.

Я подозреваю, что в WebGL вы не сможете измерить разницу в скорости между выровненными данными и невыровненными данными. Я хотел бы, чтобы по умолчанию было 1 вместо 4, чтобы эта проблема не кусала новых пользователей, но, чтобы остаться совместимым с OpenGL, по умолчанию нужно было остаться тем же. Таким образом, если портированное приложение предоставляет дополненные строки, оно будет работать без изменений. В то же время, в новом приложении вы можете просто всегда устанавливать это в 1 и затем покончить с этим.

С этим установленным вещи должны работать

И с этим покрытым давайте перейдем к рендерингу в текстуру.