如何在webgl中画出完美的线条答案

【问题标题】：how to draw perfect line in webgl如何在webgl中画出完美的线条
【发布时间】：2018-03-21 23:38:22
【问题描述】：

我想用 webgl 画出完美的线条。我没有在渲染器上下文中设置任何东西。我应该启用或设置什么或给canvas.getContext 提供什么选项来帮助我画一条看起来不错的线？我认为使用线性和其他东西（我不知道）给我一条不像楼梯的线。

canvas = document.getElementById('canvas');
canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    gl = canvas.getContext('webgl2',{
        antialias: true,
        depth: false,
        stencil: false
    });
    gl.viewport(0,0,canvas.width,canvas.height);



array = {
  pos: {
    numComponents: 2,
    data: [-0.03, -1  ,  0.03, 1],
  },
};

Program = twgl.createProgramInfo(gl, [
  `#version 300 es
    precision highp float;
    in vec2 pos;
    void main(){gl_Position = vec4(pos, 0.0 , 1.0);}`,
  `#version 300 es
    precision highp float;
    out vec4 Color;
    void main(){Color.xyz = vec3(0.0) ; Color.a = 1.0;}
    `
]);
Attrib = twgl.createBufferInfoFromArrays(gl, array);

obj = {
  type: gl.LINES,
  programInfo: Program,
  bufferInfo: Attrib,
  //count: 1
};
requestAnimationFrame(() => twgl.drawObjectList(gl, [obj]));

<canvas id="canvas"></canvas>
<script src="https://twgljs.org/dist/3.x/twgl.min.js"></script>

提前致谢。

【问题讨论】：

您好，很遗憾，您的问题似乎不是很详细。为了获得一些帮助，您应该提供一些代码。向我们展示您迄今为止所做的尝试。也请考虑阅读Helpcenter中的Asking guidelines。
我没有看到星星。画布是否抗锯齿取决于浏览器。您可以请求它不抗锯齿，它不会但要求它抗锯齿允许浏览器忽略您的请求。您可以使画布的大小大于显示的大小。您还可以创建自己的抗锯齿帧缓冲区并将其解析到画布上。但是，您应该知道 WebGL2 仅支持 1 像素宽的行。对于其他任何事情，您需要draw lines yourself using triangles。

标签： html5-canvas webgl webgl2 twgl.js

【解决方案1】：

我猜not like stairs 是指别名。根据MDN web docs，您可以在检索 webgl 渲染上下文时打开相应的标志。

假设你有一个这样的画布：

<canvas id="canvas"></canvas>

您可以通过以下方式打开抗锯齿：

var canvas = document.getElementById('canvas');
var gl = canvas.getContext('webgl',
                 { antialias: true });

更多信息请阅读documentation。

【讨论】：

我已经这样做了，但没有任何改变。还是很糟糕
@MohamadHoseinAlahdadian 请在您的问题中提供一些代码。否则很难确定确切的问题。
这看起来和我放大后得到的一样好。线条的质量也取决于显示器的分辨率。
我认为 WebGL 将 MSAA 限制在 2x 或 4x 的最低限度（这看起来更像是 2x）。答案是肯定的，可以通过各种方法使用 GLSL 或组合 CPU 代码 + GLSL 来改进这一点，并产生各种结果。但是，除非您选择廉价的类似 FSAA 的技术（这可能无法解决问题），否则这将需要您进行全新的开发（例如使用超过 2 个样本手动重新实现 MSAA）。
另外，您必须记住，WebGL（或 OpenGL）并非专门用于在白底黑字中绘制简单的 2D 几何图形（要实现这一点，您最好使用简单的 Context2D）。 . 所以优先级不在 AA 上，因为：resources-premium.vzaar.com/vzaar/vz2/cb1/target/… 是你应该实现的更多。

【解决方案2】：

尝试在 CSS styles 属性中设置比实际尺寸更好的分辨率（width 和 height 属性）。例如：

原尺寸：m> ?

尺寸 2x + 样式： ?

<canvas width=800 height=400 styles="width: 400; height: 200;" id="canvas"/>

两张截图均来自真实屏幕，未缩放。

【讨论】：