Контекст WebGL полностью перерисован без видимой причины - PullRequest
Новая
       9

Контекст WebGL полностью перерисован без видимой причины

0 голосов
/ 02 декабря 2018

Я экспериментирую с WebGL, и мне кажется, что я упустил что-то очень простое, но все еще не могу найти в документах и ​​примерах, что именно.Итак, представьте, что я хочу нарисовать прямоугольник, сделайте что-то вроде этого: 

let points = rectangle(20, 20, 100, 100)
gl.bufferData(WebGLRenderingContext.ARRAY_BUFFER, convertFloat32(points), WebGLRenderingContext.STATIC_DRAW)
gl.drawArrays(WebGLRenderingContext.LINE_STRIP, 0, points.length)

Это работает.Я вижу нарисованный прямоугольник, который не может быть счастливее.То же самое касается рисования столько прямоугольников, сколько я хочу.

Однако всякий раз, когда я пытаюсь добавить что-то вроде этого: 

window.setTimeout(function() {
    let points = rectangle(120, 120, 100, 100)
    gl.bufferData(WebGLRenderingContext.ARRAY_BUFFER, convertFloat32(points), WebGLRenderingContext.STATIC_DRAW)
    gl.drawArrays(WebGLRenderingContext.LINE_STRIP, 0, points.length)
}, 1000);

или, скажем, для рисования прямоугольников в каком-либо обработчике событий DOM, все ранее нарисованное стирается, и яПонятия не имею почему.

Мой вопрос был бы - что я пропустил точно?

UPD: я раздвоил какой-то существующий пример и изменил его, чтобы иметь (своего рода) минимальный пример того, о чем я говорю- https://codepen.io/shabunc/pen/YRgzJq?editors=1010

1 Ответ

0 голосов
/ 07 декабря 2018

Существует второй аргумент - некоторые необязательные параметры - для метода getCcontext().

В вашем примере попробуйте добавить следующие строки кода: 

var canvas = document.getElementById("c");

var NO_ANTIALIAS = false, 
    CLEAR_DRAWING_BUFFER = false,
    attributes = {antialias: !NO_ANTIALIAS, preserveDrawingBuffer: !CLEAR_DRAWING_BUFFER};

var gl = canvas.getContext("webgl", attributes);

Объяснение:

  • сглаживание : это всего лишь подсказка для браузера - при его наличии попытайтесь сгладить границы рисования
  • preserveDrawingBuffer : необходимо принятьзабота о чистке буфера чертежа самим собой

Вот ссылка: Спецификация WebGL - Создание контекста

...