代码之家 › 专栏 › 技术社区 › shabunc

WebGL上下文完全被重新绘制,没有明显的原因

webgl opengl-es javascript

shabunc · 技术社区 · 7 年前

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);

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

UPD:我已经分叉了一些现有的示例,并对其进行了修改,使其具有(某种)我所说的最小示例- https://codepen.io/shabunc/pen/YRgzJq?editors=1010

1 回复 | 直到 7 年前

deblocker 7 年前

还有第二个参数-一些可选参数-用于 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);

说明:

:这只是对浏览器的提示-如果可用,请尝试平滑绘制边框的步骤
:您需要注意清除图形

以下是参考资料: WebGL Specification - Context creation

推荐文章

Viktor Sehr · glTexSubImage2D对gles 3.0上的帧速率有很大影响

8 年前

pats · 在Libgdx中定位和旋转动画

9 年前

G.L · 标记的2D位置

9 年前

harryisaac · SceneKit自定义几何体纹理错误

9 年前

user2694310 · 不同平台/硬件的不同GL着色器结果(YUV到RGB)

9 年前

creizyz · Android MediaCodec输出格式:GLES外部纹理(YUV/NV12)到GLES纹理(RGB)

9 年前

Jenya Fomin · 如何使用OpenGL ES(c++)创建普通正方形?(请举例)[结束]

9 年前

user8581488 · OpenGL ES3阴影贴图问题

9 年前

andrey · android opengl texImage2D:内部格式和类型参数

9 年前

alfoks · Android上的LibGdx“shaperender”不支持alpha频道

9 年前