Estoy tratando de implementar el algoritmo de Bresenham para pintar lineas con WebGL.
Quiero pintar pixel por pixel de la línea gracias a este algoritmo.
Mi pregunta es, ¿hay alguna forma de pintar un pixel en WebGL?
Estoy tratando de implementar el algoritmo de Bresenham para pintar lineas con WebGL.
Quiero pintar pixel por pixel de la línea gracias a este algoritmo.
Mi pregunta es, ¿hay alguna forma de pintar un pixel en WebGL?
No necesitas webgl
para esto. El canvas trae funciones para representación en dos dimensiones ya que el citado algoritmo no dibuja en profundidad (solo estas dibujando puntos).
Para dibujar un punto usa
ctx.fillRect(x, y, 1, 1);
Rellena el pixel en x, y
Este sería el algoritmo
function Bresenham(ctx, x0, y0, x1, y1) {
var x, y, dx, dy, p, incE, incNE, stepx, stepy;
dx = (x1 - x0);
dy = (y1 - y0);
if (dy < 0) {
dy = -dy;
stepy = -1;
} else {
stepy = 1;
}
if (dx < 0) {
dx = -dx;
stepx = -1;
} else {
stepx = 1;
}
x = x0;
y = y0;
ctx.fillRect(x0, y0, 1, 1);
if (dx > dy) {
p = 2 * dy - dx;
incE = 2 * dy;
incNE = 2 * (dy - dx);
while (x != x1) {
x = x + stepx;
if (p < 0) {
p = p + incE;
} else {
y = y + stepy;
p = p + incNE;
}
ctx.fillRect(x, y, 1, 1);
}
} else {
p = 2 * dx - dy;
incE = 2 * dx;
incNE = 2 * (dx - dy);
while (y != y1) {
y = y + stepy;
if (p < 0) {
p = p + incE;
} else {
x = x + stepx;
p = p + incNE;
}
ctx.fillRect(x, y, 1, 1);
}
}
}
var paint = document.getElementById('painting');
var ctx = paint.getContext('2d');
ctx.fillStyle = 'black';
Bresenham(ctx, 30, 10, 120, 90);
canvas {
width: 200px;
height: 200px;
}
<canvas id="painting"></canvas>
Te dibuja una línea pero compuesta de puntos.
2d
en lugar de webgl
. Como manejarías tú las coordenadas del eje Z faltante?
Commented
el 7 sept. 2016 a las 18:02