Question

我是一个相对较新的JavaScript并且掌握它我一直在研究3D引擎，我偶然发现了奇怪的事情。当我渲染一个禁用线框的填充网格时，我的三角形之间会出现间隙。

以下是一个例子：

＆＃13;

// vertices
var v1 = [40,20];
var v2 = [125,35];
var v3 = [165,105];
var v4 = [35,95];

// draw on screen 1
var canvas = document.getElementById("screen");
var context = canvas.getContext("2d");
triangle(v1,v2,v3,context,true);
triangle(v3,v4,v1,context,true);

// draw on screen 2
var canvas = document.getElementById("screen2");
var context = canvas.getContext("2d");
triangle(v1,v2,v3,context,false);
triangle(v3,v4,v1,context,false);

// draw triangle method
function triangle(v1,v2,v3, context,wireframe)
{
  context.beginPath();
  context.moveTo(v1[0],v1[1]);
  context.lineTo(v2[0],v2[1]);
  context.lineTo(v3[0],v3[1]);
  context.lineTo(v1[0],v1[1]);
  context.closePath();
  context.fillStyle = "#333";
  context.fill();
  if (wireframe)
  {
    context.strokeStyle = "#0f3";
    context.stroke();
  }
}

＆＃13;

body
{
	background-color: #ddd;
}
canvas 
{
  border:2px solid #000;
}

＆＃13;

<canvas id="screen" width="200" height="150" ></canvas>
<canvas id="screen2" width="200" height="150"></canvas>

＆＃13;

从本质上讲，这两个多边形似乎没有正确连接。

使线框与三角形颜色相同不是解决方案。我想在不看边缘的情况下应用纹理。
绘制连接的多边形不是解决方案，每个三角形可能都有自己的纹理变换。
我应该透支三角形来缩小差距吗？
这是一个抗锯齿问题吗？

提前致谢。

上图：禁用线框时显示三角形之间的间隙

更新9-apr-2017

我已经考虑过各种方案来解决我的问题，包括写一个三角形例程。记下下面。然而，绘制两个三角形坦克我的FPS相当多。我需要一种更快的方法将像素放在画布上，但这是另一篇文章，因为它不在主题上。

但是，我认为将三角形扩展半像素是一种更好/更快的解决方案，因为fill（）方法是由浏览器内部而不是JavaScript执行的。

Answer 1

一种解决方案是将三角形膨胀一点以填补空白。此代码膨胀1％。

我认为更理想的是通过0.5像素膨胀的代码，然而，代码会有点贵，因为它会涉及计算向量长度......

// vertices
var v1 = [80,40];
var v2 = [250,70];
var v3 = [230,210];
var v4 = [70,190];

// draw on screen 1
var canvas = document.getElementById("screen");
var context = canvas.getContext("2d");
triangle(v1,v2,v3,context,true);
triangle(v3,v4,v1,context,true);

// draw on screen 2
var canvas = document.getElementById("screen2");
var context = canvas.getContext("2d");
inflateTriangle(v1,v2,v3,context,false);
inflateTriangle(v3,v4,v1,context,false);

// draw triangle method
function inflateTriangle(v1,v2,v3, context,wireframe)
{
	//centre of tri
  xc=(v1[0]+v2[0]+v3[0])/3;
  yc=(v1[1]+v2[1]+v3[1])/3;
  
  //inflate tri by 1%
  x1= xc+(v1[0]-xc)*1.01;
  x2= xc+(v2[0]-xc)*1.01;
  x3= xc+(v3[0]-xc)*1.01;
  y1= yc+(v1[1]-yc)*1.01;
  y2= yc+(v2[1]-yc)*1.01;
  y3= yc+(v3[1]-yc)*1.01;
  


  context.beginPath();
  context.moveTo(x1,y1);
  context.lineTo(x2,y2);
  context.lineTo(x3,y3);
  
  context.closePath();
  context.fillStyle = "#333";
  context.fill();
  if (wireframe)
  {
    context.strokeStyle = "#0f3";
    context.stroke();
  }
}

<body>

<canvas id="screen" width="400" height="300" style="border:2px solid #000;"></canvas>
<canvas id="screen2" width="400" height="300" style="border:2px solid #000;"></canvas>

</body>

JavaScript - 移除线框时三角形之间的间隙

1 个答案: