Как нарисовать идеальную линию в WebGL

Question

Я хочу нарисовать идеальную линию, используя 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>

Заранее спасибо.

Answer 1

Я думаю, по not like stairs ты имеешь в виду псевдоним. Согласно веб-документам MDN вы можете включить соответствующий флаг при получении контекста рендеринга webgl.

Предположим, у вас есть такой холст:

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

Вы можете включить сглаживание:

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

Для получения дополнительной информации, пожалуйста, прочитайте соответствующую документацию.

Answer 2

Попробуйте установить лучшее разрешение (атрибуты ширины и высоты), чем реальный размер в атрибуте стилей CSS. Например:

Оригинальный размер:

ht tps://stackru.com/images/a7a8be9ffa1a91a92f013b6a09de7c1767acef78.png

Размер 2x + стили:

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

ht tps://stackru.com/images/e2623372c6a838d28befa719c7f5bc8d7e34b600.png

Оба скриншота сделаны с реального экрана и не масштабируются.