Как я могу изменить каждый пиксель в WebGL - PullRequest
Новая
       14

Как я могу изменить каждый пиксель в WebGL

0 голосов
/ 24 октября 2019

Когда мы используем холст на 2d, изменение цвета изображения может быть сделано, как показано ниже 

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "images/1.png";

img.onload = function(){
    ctx.drawImage(img,0,0);
    var imgData = ctx.getImageData(0,0,400,400);

    var data = imgData.data;
    for(var i = 0;i<data.length;i+=4){
        data[i]=data[i+1]=data[i+2]=(data[i]+data[i+1]+data[i+2])/3
    }
    ctx.putImageData(imgData,0,0)
}

, но когда я использую холст WebGL, как это сделать. Я могу использовать readPixels только для чтения всех пикселей, но не знаю, как обновить.

1 Ответ

0 голосов
/ 24 октября 2019

В WebGL такие вещи обычно не выполняются. Скорее вы визуализируете только на холст, вы вообще не читаете с него.

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

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

Вот статья с более подробной информацией

Обратите внимание, что ваш вопрос звучит так, как будто вы новичок в WebGL. Чтобы делать простые вещи в WebGL, требуется немало настроек, поэтому я советую вам прочитать некоторые учебные пособия

...