0

正方形 (この場合は壁) の位置、「カメラ」の位置と回転、およびその他の要因を考慮して、2D キャンバスにレンダリングされたときに正方形の 4 つのポイントがどこにあるべきかを計算する方法を知っています。 .

ただし、実際に正方形をレンダリングする方法はわかりません。画像がある場合、四隅が計算した 4 つの点に配置されるように描画するにはどうすればよいですか?

詳細: 私が実際にやろうとしているのは、迷路内のビューをレンダリングすることです。以前、Doom や Wolfenstein 3D と同様に、レイキャスティングを使用してこれを行いました。ただし、これは小さなビューでのみうまく機能しました (320x240 に落ち着きました)。これをフルスクリーンでレンダリングしたいと思います。そのようなシーン (正方形の壁、スプライト ベースのオブジェクトなど) をレンダリングするためのアドバイスをいただければ幸いです。

4

1 に答える 1

2

完全にはわかりませんが、これらの行に沿った何かがあなたが求めていると思います:

//Credit to Andrea "6502" Griffini.
//Pass context, image and points of triangle to draw
function textureMap(ctx, texture, pts) {
  var x0 = pts[0].x, x1 = pts[1].x, x2 = pts[2].x;
  var y0 = pts[0].y, y1 = pts[1].y, y2 = pts[2].y;
  var u0 = pts[0].u, u1 = pts[1].u, u2 = pts[2].u;
  var v0 = pts[0].v, v1 = pts[1].v, v2 = pts[2].v;

  ctx.save(); ctx.beginPath();
  ctx.moveTo(x0, y0);
  ctx.lineTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.closePath(); ctx.clip();

  var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
  var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
  var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
  var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2;
  var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
  var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
  var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;

  ctx.transform(delta_a/delta, delta_d/delta, delta_b/delta, delta_e/delta, delta_c/delta, delta_f/delta);
  //Edit to allow for repeated image
  var x_max = Math.max(u0,u1,u2); var x_min = Math.min(u0,u1,u2);
  var y_max = Math.max(v0,v1,v2); var y_min = Math.min(v0,v1,v2);
  var x_iter = x_max-x_min; var y_iter = y_max-y_min;

  for (var x=0; x<x_iter; x+=texture.width) {
    for (var y=0; y<y_iter; y+=texture.height) {
      ctx.drawImage(texture, x, y);
    }
  }
  ctx.restore();
};

右のクレートのようなレンダリングの効果: http://www.placidcow.hostoi.com/pages/ExGl%20Crate.htm

希望が役立ちます！

于 2013-02-24T20:31:05.823 に答える