WebGL 上下文无缘无故地完全重绘 [英] WebGL context is redrawn completely for no apparent reason

问题描述

我正在试验 WebGL，在我看来，我遗漏了一些非常基本的东西，但仍然无法在文档和示例中找到究竟是什么.所以想象我想画一个矩形，我做这样的事情:

I'm experimenting with WebGL and it seems to me that I've missing something very basic but still can not find in docs and examples what exactly. So imagine I want to draw a rectangle, id do something like this:

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)

这有效.我看到画了一个矩形，再高兴不过了.绘制尽可能多的矩形也是如此.

This works. I see a rectangle drawn an cannot be more happier. Same holds true about drawing as many rectangles as I want to.

但是，每当我尝试添加这样的内容时:

However, whenever I'm trying to add something like this:

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 事件处理程序中绘制矩形，之前绘制的所有内容都被删除了，我不知道为什么.

or, say to draw rectangles in some DOM event handler, all that previously has been drawn is erased and I have no clue why.

我的问题是 - 我到底错过了什么?

My question would be - what do I missing exactly?

UPD:我已经分叉了一些现有示例并将其修改为(某种)我正在谈论的最小示例 - https://codepen.io/shabunc/pen/YRgzJq?editors=1010

UPD: I've forked some existing example and modified it to have (sort of) minimal example of what I'm talking about - https://codepen.io/shabunc/pen/YRgzJq?editors=1010

推荐答案

getCcontext() 方法有第二个参数 - 一些可选参数.

There is a a second argument - some optional parameters - for the getCcontext() method.

在您的示例中，尝试添加以下代码行:

In Your example, try adding following lines of code:

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:您需要注意清除绘图自己缓冲

• antialias: this is just a hint for the browser - when available, try to smooth drawing borders
• preserveDrawingBuffer: You need to take care of clearing the drawing buffer by Your self

这是参考:WebGL 规范 - 上下文创建

这篇关于WebGL 上下文无缘无故地完全重绘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！