Подтвердить что ты не робот

Webgl readpixels всегда возвращается 0,0,0,0

Я пытаюсь сделать выбор в WebGl. У меня есть две фигуры, которые отображаются вместе с разными текстурами, отображаемыми на каждом из них. Я пытаюсь захватить пиксель на определенных координатах. Вот пример.

var pixelValues = new Uint8Array(4);
gl.readPixels(10, 35, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixelValues);
console.log(pixelValues);

Но pixelValues всегда содержат [0,0,0,0]. Что я делаю не так? Нужно ли мне что-то делать с фреймбуфером?

Ответ 1

В соответствии с последними спецификациями WebGL, теперь вам нужно вызвать getContext, устанавливая флаг preserveDrawingBuffer, например:

var ctx = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});

это предотвращает очистку буфера рисования (цвет, глубина, трафарет) после рисования на экране. Имейте в виду, что настройки могут привести к снижению производительности.

Ответ 2

Вам не нужно preserveDrawingBuffer: true для вызова readPixels. Вам нужно вызвать readPixels перед выходом из текущего события.

Спектр говорит, что если вы вызываете любую функцию, которая влияет на холст (gl.clear, gl.drawXXX), тогда браузер очистит холст после следующей составной операции. Когда эта сложная операция происходит до браузера. Это может произойти после того, как он обработает несколько событий мыши или события клавиатуры или события щелчка. Заказ undefined. Определено, что он не будет делать этого до тех пор, пока текущее событие не выйдет так

render
read

const gl = document.querySelector("canvas").getContext("webgl");

render();
read();  // read in same event

function render() {
  gl.clearColor(.25, .5, .75, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
}

function read() {
  const pixel = new Uint8Array(4);
  gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
  log(pixel);
}

function log(...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(' ');
  document.body.appendChild(elem);
}

<canvas></canvas>