Делаю рендерер на 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