4

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?

3
  • Respondo de oídas... con WebGL creo que no puedes pintar pixeles directamente, pero lo puedes "simular" pintando cuadrados "muy pequeños", pero no me hagas mucho caso... Si solo es para probar el algoritmo, mejor usa canvas. Commented el 6 sept. 2016 a las 22:12
  • Eso eh hecho por lo pronto, ahora estoy probando el algoritmo de punto medio para circunferencias y tengo problemas :S Commented el 8 sept. 2016 a las 0:50
  • Utilizando un fragment/pixel shader Commented el 27 jun. 2018 a las 17:14

1 respuesta 1

3

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.

4
  • Gracias, es una buena opción, pero quiero hacer esto en WebGL por fines educativos. Commented el 6 sept. 2016 a las 22:02
  • @JosephAlbertoMorthimerLeon El webgl que trae el canvas del HTML usa tres dimensiones. El algoritmo que propones solo usa dos por lo tanto el contexto correcto a escoger sería 2d en lugar de webgl. Como manejarías tú las coordenadas del eje Z faltante?
    – devconcept
    Commented el 7 sept. 2016 a las 18:02
  • Haciendo que las coordenadas Z sean 0 Commented el 8 sept. 2016 a las 0:43
  • este mismo algoritmo se puede usar para la circunferencia y para el movimiento del balon de juegos como ser ping pong Commented el 27 jun. 2018 a las 17:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.