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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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