Отключение очистки Canvas в WebGL

396
14 января 2017, 14:18

Что сделать, чтобы элемент Canvas не очищался при каждом новом шаге?

public draw(gl: GL): void {
    // position: Point;
    this.backGL.startDrawing(-position.x, -position.y, this.backGL.getWidth(), this.backGL.getHeight());
    // Рисование (без использования метода clean)
    this.backGL.endDrawing();
}

Класс GL:

public startDrawing(x: number = 0, y: number = 0, width: number = this.width, height: number = this.height): void {
    this.vertexPositions = [];
    this.vertexColors = [];
    this.translationPoint = new Point(0, 0);
    this.scalingPoint = new Point(1, 1);
    this.loadIdentity();
    this.projection = makeOrtho(x, x + width, y + height, y, 0.1, 100);
}
public endDrawing(): void {
    // this.clear(); // Я не использую функцию clean, но canvas всё-равно очищается
    this.mvTranslate([this.translationPoint.x, this.translationPoint.y, -10]);
    this.mvMatrix.x(Matrix.Diagonal([this.scalingPoint.x, this.scalingPoint.y, 1, 1]));
    this.context.bindBuffer(this.context.ARRAY_BUFFER, this.squareVerticesBuffer);
    this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(this.vertexPositions), this.context.STATIC_DRAW);
    this.context.vertexAttribPointer(this.vertexPositionAttribute, 3, this.context.FLOAT, false, 0, 0);
    this.context.bindBuffer(this.context.ARRAY_BUFFER, this.squareVerticesColorBuffer);
    this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(this.vertexColors), this.context.STATIC_DRAW);
    this.context.vertexAttribPointer(this.vertexColorAttribute, 4, this.context.FLOAT, false, 0, 0);
    this.setMatrixUniform(this.projection, "uPMatrix");
    this.setMatrixUniform(this.mvMatrix, "uMVMatrix");
    this.context.drawArrays(this.context.TRIANGLES, 0, this.vertexPositions.length / 3);
}
Answer 1

Проблему решил сам. Оставлю ответ здесь, может кому пригодится.

При получении контекста Canvas нужно указать, что буффер рисования нужно не заменять, его нужно копировать. Делается это добавлением {preserveDrawingBuffer: true} в качестве второго аргумента в функции получения контекста.

Пример:

        // var canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById(id);
        this.context =
            canvas.getContext("webgl", {preserveDrawingBuffer: true}) ||
            canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
READ ALSO
Как получить состояние кнопки мышки в mouseover?

Как получить состояние кнопки мышки в mouseover?

Все предлагают запоминать состояние в событиях mousedown, mouseup

285
Не работает блок &ldquo;Поделиться&rdquo; корректно

Не работает блок “Поделиться” корректно

Вставила блок на странице сайта http://wwwsuperkot

256
Возьмут ли на работу на front-end, если я изучаю dart, а не JavaScript? [требует правки]

Возьмут ли на работу на front-end, если я изучаю dart, а не JavaScript? [требует правки]

Сейчас большинство использует js, но что если я пишу на dart? Я имею ввиду, dart ведь легко конвертируется в js (dart2js)Просто на js очень мало писал и не знаю,...

333
Можно ли разбить js файл на модули? [дубликат]

Можно ли разбить js файл на модули? [дубликат]

На данный вопрос уже ответили:

369