Paint a pixel with WebGL

Question

Paint a pixel with WebGL

Navigation

#1 by (2 votes)

3

I am trying to implement the Bresenham algorithm to paint lines with WebGL .

I want to paint pixel by pixel of the line thanks to this algorithm.

My question is, is there any way to paint a pixel in WebGL?

javascript webgl

asked by Joseph Alberto Morthimer Leon 06.09.2016 в 22:48

source

1 answer

Warnin of sqlsrv_fetch_array () expects parameter 1 to be resource SQL Contains: Escaping query operators

score 2 · Accepted Answer

You do not need webgl for this. The canvas brings functions for representation in two dimensions since the mentioned algorithm does not draw in depth (you are only drawing points).

To draw a point use

ctx.fillRect(x, y, 1, 1);

Fill in the pixel in x, and

This would be the algorithm

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>

You draw a line but composed of points.