0

Делаю рендерер на canvas без webgl

вот основной метод, в который я передаю координаты вершин p0,p1,p2 и текстурные координаты u0,v0,u1,..

vertexShader приводит вершину к экранным координатам, далее отсекаются ненужные, рисуется треугольник, в которые зальется часть трансформированного изображения, и далее все по схеме как в CanvasRenderer метода patternPath от three.js

   drawFace = function(img, p0, p1, p2, u0, v0, u1, v1, u2, v2) {



    p0=vertexShader(p0.clone());
    p1=vertexShader(p1.clone());
    p2=vertexShader(p2.clone());


    if(p0.z<-1 || p1.z<-1 || p2.z<-1 || p0.z>1 || p1.z>1 || p2.z>1)return;


    var chw = half_width;
    var chh = half_height;

    if((p0.x<-chw || p0.x>chw) && (p1.x<-chw || p1.x>chw) && (p2.x<-chw || p2.x>chw))return;
    if((p0.y<-chh || p0.y>chh) && (p1.y<-chh || p1.y>chh) && (p2.y<-chh || p2.y>chh))return;



    u0*=img.width;
    u1*=img.width;
    u2*=img.width;

    v0=1-v0;
    v1=1-v1;
    v2=1-v2;

    v0*=img.height;
    v1*=img.height;
    v2*=img.height;


      context.beginPath();
      context.moveTo(p0.x, p0.y);
      context.lineTo(p1.x, p1.y);
      context.lineTo(p2.x, p2.y);
      context.closePath();

      p1.x -= p0.x;
      p1.y -= p0.y;
      p2.x -= p0.x;
      p2.y -= p0.y;


      u1 -= u0;
      v1 -= v0;
      u2 -= u0;
      v2 -= v0;

      var det = 1 / (u1*v2 - u2*v1),

          // linear transformation
          a = (v2*p1.x - v1*p2.x) * det,
          b = (v2*p1.y - v1*p2.y) * det,
          c = (u1*p2.x - u2*p1.x) * det,
          d = (u1*p2.y - u2*p1.y) * det,

          // translation
          e = p0.x - a*u0 - c*v0,
          f = p0.y - b*u0 - d*v0;

      context.save();
      context.transform(a, b, c, d, e, f);
      context.clip();
      context.drawImage(img, 0, 0);
      context.restore();
}

Изучил исходник CanvasRenderer (начиная с метода render) и Projector(который занимает приведением координат к экранным), ничего необычного не обнаружил. Принцип тот же, что и в коде выше(там даже больше расчетов и проверок), но все равно получаю следующее - при средних отрендеренных 800 фейсах получаю 53 fps, но в случае с моим кодом те же fps получаю только при 200 фейсах.

В чем секрет такого результата для three.js? Может я что-то пропустил, изучая CanvasRenderer от three.js

1 ответ 1

1

Оказывается, способ с .clip() .drawImage() тяжелее, чем тот, который используется в CanvasRenderer, а именно canvas pattern

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

для рендеринга примитивов с одной и той же текстурой создается шаблон, который потом используется для отрисовки дальнейших примитивов (см. метод textureToPattern). То есть, при отрисовке фейса используются уже готовые данные, а не генерируются при отрисовке каждого фейса

Именно это дало тот результат, который показывает CanvasRenderer

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.