久々にCanvasで3Dのオブジェクトを描画してみる。（隠面処理付き）

JavaScript

草刈りで疲れているというのに、興味をそそられた。
睡眠時間がないじゃん！
しかも今日は筋トレの日。
ベンチプレスが５０キロで停滞中。

CANVASで網目模様を描く方法を教えて下さい
http://okwave.jp/qa/q9151762.html

<!DOCTYPE html>
  <meta charset="UTF-8">
  <title>3D</title>
  <style>

canvas { background : #ddd; }

  </style>
<body>
<canvas width="1024" height="512"></canvas>
<script>
//3Dの物体を多角形の平面の集合（配列）として考える
//平面は、[x,y,z]の座標をn個もった配列として考える

//球体よりも多角柱が簡単そうなのでその平面の集合体を作る関数を作る
function prism (r, h, n0, n1) {
  var rst = [];
  //前処理として高さ(h)を無視してn角形のxとzを求める
  var ax = [], az = [];
  var k = 360 / n0;
  for (var i = 0; i <= n0; i++) {
    ax.push (Math.sin (k * i * Math.PI / 180) * r);
    az.push (Math.cos (k * i * Math.PI / 180) * r);
  }
  var hh = h / 2;//中心座標の高さを0にしたいので２で割る
  //まず上部と下部の面を同時に作る
  var t = [], b = [];
  for (var i = 0; i <= n0; i++) {
    t.push ([ax[i], hh, az[i]]);
    b.push ([ax[i], -hh, az[i]]);
  }
  rst.push (t);
  //側面の四角形の平面を作る
  var y0, y1;
  for (var i = 0; i < n1; i ++) {
    y0 = hh - (h / n1) * i;
    y1 = hh - (h / n1) * (i + 1);
    for (var j = 0; j < n0; j++) {
      rst.push ([
        [ax[j], y0, az[j]],
        [ax[j], y1, az[j]],
        [ax[j+1], y1, az[j+1]],
        [ax[j+1], y0, az[j+1]]
      ]);
    }
  }
  rst.push (b.reverse ());
  return rst;
}

//多角柱を作ってみる
var takakutyuu = prism (4, 9, 24, 10);
//回転するのは面倒なのでパス

//各x,y,z座標に移動する関数
function move3D (m, x, y, z) {
  var rst = [];
  var s0, s1, buf;
  while (s0 = m.shift ()) {
    buf = [];
    while (s1 = s0.shift ()) {
      s1[0] += x;
      s1[1] += y;
      s1[2] += z
      buf.push (s1);
    }
    rst.push (buf);
  }
  return rst;
}

//移動させてみる
takakutyuu = move3D (takakutyuu, 0, 8, 0);



//3Dの物体を2Dの座標へと変換する
function cov3to2 (m, zz, sc) {
  var rst = [];
  var s0, s1, buf, s;
  while (s0 = m.shift ()) {
    buf = [];
    while (s1 = s0.shift ()) {
      s = (zz + s1[2]) / sc;
      s1[0] /= s;
      s1[1] /= s;
      buf.push (s1);
    }
    rst.push (buf);
  }
  return rst;
}

//描く
function draw (c, a, o) {
  var ctx = c.getContext ('2d');
  var ox = c.width / 2 + o[0];
  var oy = c.height / 2 + o[1];
  var b, p;
 

  ctx.lineWidth = 1;
  ctx.strokeStyle = 'rgb(0,0,0)';
  
  for (var i = 0; b = a[i++]; ) {
    p = (b[2][0] - b[1][0]) * (b[0][1] - b[1][1]) -
        (b[2][1] - b[1][1]) * (b[0][0] - b[1][0]);
    if (p <= 0) {
      ctx.beginPath ();
      ctx.moveTo (ox + b[0][0], oy + b[0][1]);
      for (j = 1; p = b[j++]; ) {
        ctx.lineTo (ox + p[0], oy + p[1]);
      }
      ctx.lineTo (ox + b[0][0], oy + b[0][1]);
      ctx.stroke();
    }
  }
}


draw (
  document.querySelector ('canvas'), 
  cov3to2 (takakutyuu, 20, 500),
  [200, -200]
);

</script>