Блог

Хорошо, итак, я пытаюсь закодировать прямоугольник с несколькими треугольными полосками, соединенными вместе. согласно:http://www.corehtml5.com/trianglestripfundamentals.php

Вам нужно позаботиться о том, чтобы треугольники оборачивались вокруг, когда у вас более одной строки. Однако, используя предложенный алгоритм в моем примере кода, я получаю неправильные результаты индекса.

Вот мой пример с выводами.

Я пробовал копировать / вставлять предложенный алгоритм, но, похоже, он не возвращает правильные результаты.

 
// Create the Index Points for the buffer array.
var rows=2;
var cols=3;
var grid = rows*cols;
var offset;
var pos = [];
var index = 0;
var mpOffset = 1;
for (var row = 0; row <= rows;   row)
{
  offsetY = row * (mpOffset / rows);
  for (var col = 0; col <= cols;   col)
  {
    offsetX = col * (mpOffset / cols);

    pos[index 0] = (offsetX);
    pos[index 1] = (offsetY);
    index =2;
  }
}
log.info("pos=" JSON.stringify(pos)); //  <-- Correct working good.
log.info("pos.length=" pos.length);

function initializeGrid(cols,rows)
{
    var trianglestrip = [];
    var RCvertices=2*cols*(rows-1);
    var TSvertices=2*cols*(rows-1) 2*(rows-2);
    var numVertices=TSvertices;
    var j=0;
    for(var i = 1; i <= RCvertices; i  = 2)
    {
        trianglestrip[ j ] = (1  i)/2;
        trianglestrip[ j  1 ] = (cols*2   i   1) / 2;
        if( trianglestrip[ j  1 ] % cols == 0) 
        {
            if( trianglestrip[ j  1 ] != cols amp;amp; trianglestrip[ j  1 ] != cols*rows )
            {
                trianglestrip[ j  2 ] = trianglestrip[ j  1 ];
                trianglestrip[ j  3 ] = (1   i   2) / 2;
                j  = 2; 
            }
        }
        j  = 2;
    }
    return trianglestrip;
}

var triStrip = initializeGrid(cols,rows);
log.info("triStrip=" JSON.stringify(triStrip)); // <-- Bad Not working.
log.info("triStrip.length=" triStrip.length);

// Generating the actual Point strip.
var actualStrip = [];
for (var i = 0 ; i < triStrip.length;   i)
{
    actualStrip.push(pos[(triStrip[i]-1)*2 0]);
    actualStrip.push(pos[(triStrip[i]-1)*2 1]);
}
log.info("actualStrip=" JSON.stringify(actualStrip));
log.info("actualStrip.length=" actualStrip.length);

  

Индексы должны быть:
1, 5, 2, 6, 3, 7, 4, 8, 8, 5, 5, 9, 6, 10, 7, 11, 8, 12

В итоге я воссоздал функцию для вычисления индексов треугольной полосы. Я не полностью протестировал его, но он может воссоздать сетку 3×2 в примере с веб-сайта.

Вот код:

 // This calculates the triangle points in a rectangular triangle strip.
// Used for 3D Webgl texture mapping.
// Copyright Joshua Langley 2019.
var rows=2;
var cols=3;
var grid = rows*cols;
var offset;
var pos = [];
var index = 0;
var mpOffset = 1;
var offsetX, offsetY;
for (var row = 0; row <= rows;   row)
{
  offsetY = row * (mpOffset / rows);
  for (var col = 0; col <= cols;   col)
  {
    offsetX = col * (mpOffset / cols);

    pos[index 0] = (offsetX);
    pos[index 1] = (offsetY);
    index =2;
  }
}
log.info("pos=" JSON.stringify(pos));
log.info("pos.length=" pos.length);

var rows=rows 1,cols=cols 1; // Important this counting Points not Squares.
var grid = rows*cols;
var offset;
var indices = [];
var indice = 0;
var offset;
var doublePoints = false;
var tPoint, bPoint;
for (var row = 0; row < rows;   row)
{ 
  for (var col = 0; col < (cols-1);   col)
  {
      offset = row * rows   col;
      tPoint = offset 1;
      bPoint = offset cols 1;

      if (bPoint > grid)
          continue;

      indices.push(tPoint);           
      indices.push(bPoint);
      if (offset > 0 amp;amp; (bPoint 1) < grid amp;amp; (offset 1) % cols == 0)
      {
          indices.push(bPoint);
          indices.push(tPoint 1);
      }                   
  }
}
log.info("indices=" JSON.stringify(indices)); // Expected Result
log.info("indices.length=" indices.length);

var actualStrip = [];
for (var i = 0 ; i < indices.length;   i)
{
    actualStrip.push(pos[(indices[i]-1)*2 0]);
    actualStrip.push(pos[(indices[i]-1)*2 1]);
}
log.info("actualStrip=" JSON.stringify(actualStrip));
log.info("actualStrip.length=" actualStrip.length);