Як отримати пікселі з текстури в WebGL?

Щоб отримати доступ до піксельних даних із текстури, нам потрібно копіювати дані з текстури після завантаження зображення. Ми можемо зробити це, якщо наша функція onLoad відтворить текстуру в a кадровий буфер

об’єкт, а потім вилучення пікселів із буфера кадрів у байтовий масив беззнакового цілого числа.

Тоді ви можете отримати піксельні дані таким чином:

1. const img = документ. querySelector('#приклад');
2. const canvas = документ. createElement('canvas');
3. const ctx = полотно. getContext('2d');
4. полотно. ширина = рис. ширина;
5. полотно. висота = малюнок. висота;
6. ctx. drawImage(img, 0, 0);
7. const rgba = ctx. getImageData(
8. 0, 0, малюнок. ширина, рис.

Ми використаємо цей метод нижче.

1. // Створення текстури.
2. var texture = gl. createTexture();
3. gl. bindTexture(gl. TEXTURE_2D, текстура);
4. // Заповнюємо текстуру синім пікселем 1×1.
5. gl. texImage2D(гл. TEXTURE_2D, 0, гл. RGBA, 1, 1, 0, гл. …
6. новий Uint8Array([0, 0, 255, 255]));
7. // Асинхронне завантаження зображення.
8. var image = new Image();

У WebGL є текстури. Текстури найчастіше Двовимірні масиви даних, які можна передати в шейдер. У шейдері ви оголошуєте уніфікований семплер таким чином.

Отримання піксельних даних для контексту getImageData(ліворуч, зверху, ширина, висота); Цей метод повертає об’єкт ImageData, що представляє піксельні дані для області полотна, кути якої представлено точками (ліворуч, зверху), (ліворуч+ширина, зверху), (ліворуч, зверху+висота) та (ліворуч+ширина , верх+висота ).

Процедура вилучення така:

1. імпортуйте модуль Image PIL в оболонку: >>>from PIL import Image.
2. створіть об’єкт зображення та відкрийте зображення для режиму читання: >>>im = Image.open('myfile.png', ' r') …
3. ми використовуємо функцію модуля Image під назвою getdata(), щоб отримати значення пікселів.