如何在webgl中绘制完美的线条

Question

我想用webgl绘制完美的线条。我没有在渲染器上下文中设置任何内容。我应该为 protected $table = 'agency_persons'; 启用或设置或提供什么选项来帮助我绘制一条看起来不错的线？我认为使用线性和某些东西（我不知道）给我一条不像楼梯的线。

＆＃13;

＆＃13;

canvas.getContext

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

提前致谢。

Answer 1

我猜not like stairs你的意思是别名。根据{{​​3}}，您可以在检索webgl渲染上下文时打开相应的标记。

假设你有这样的画布：

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

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

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

如需了解更多信息，请阅读MDN web docs。

Answer 2

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

原始大小：?

大小2x以上的样式：?

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

两个屏幕截图都是在真实屏幕上制作的，未按比例缩放。