La forma más rápida de implementar z-buffering para un procesador de software?

Question

Estoy implementando un javascript procesador de software (para fines académicos).Se encarga de representar un objeto en 3d en forma de triángulos, y se ocupa de la Proyección en Perspectiva, desde el espacio 3d a 2d en el espacio.

Hasta ahora, he utilizado el lineTo y fillRect para representar los vértices y las líneas en la pantalla.Incluso he usado lineTo para hacer Línea de análisis triángulo relleno.(usted puede comprobar a cabo el proyecto aquí)

Hasta ahora, el FPS ha sido bastante buena.Pero la última parte de la tarea es implementar z-Buffering :P.A mi entender, la única manera de hacer esto es dejar de llenar mi triángulos utilizando lineTo y los llenan con una matriz de 1px líneas o una matriz de 1px plazas.(porque antes de dibujar cada "píxel", tengo que comprobar el búfer de profundidad y a ver si me debe dibujarlo o no).

El problema es que el llenado de los triángulos con pequeños rectángulos o líneas es LENTO.Se pone todo a 2FPS.Así que mi pregunta es, ¿hay algún método para dibujar un pixel en lugar de una pequeña línea (que puede ser más rápido)?

O bien, ¿qué otra cosa puedo hacer para acelerar las cosas?Mi objetivo es tener girar lo suficientemente rápido como para hacer una demostración de este principio.(6-10 fps sería suficiente)

Saludos.

[EDITAR] Mientras espero por la respuesta, voy a proceder a modificar mi triángulo relleno de funciones para dibujar 4px del tamaño de "píxeles" en lugar de 1px.Pero que se ven jaggedy...

Answer 1

Mira esto: http://jsfiddle.net/ZXjAM/2/

// points 0,1,2,3 front face
var fAvgZ = (cube.processPoints[0].colorZ + 
    cube.processPoints[1].colorZ + 
    cube.processPoints[2].colorZ + 
    cube.processPoints[3].colorZ) / 4 / 20;

// points 0,2,4,6 top
var tAvgZ = (cube.processPoints[0].colorZ + 
    cube.processPoints[2].colorZ + 
    cube.processPoints[4].colorZ + 
    cube.processPoints[6].colorZ) / 4 / 20;

// points 4,5,6,7 rear
var reAvgZ = (cube.processPoints[4].colorZ + 
    cube.processPoints[5].colorZ + 
    cube.processPoints[6].colorZ + 
    cube.processPoints[7].colorZ) / 4 / 20;

// points 1,3,5,7 bottom
var bAvgZ = (cube.processPoints[1].colorZ + 
    cube.processPoints[3].colorZ + 
    cube.processPoints[5].colorZ + 
    cube.processPoints[7].colorZ) / 4 / 20;

// points 2,3,6,7 right side
var rAvgZ = (cube.processPoints[2].colorZ + 
    cube.processPoints[3].colorZ + 
    cube.processPoints[6].colorZ + 
    cube.processPoints[7].colorZ) / 4 / 20;

// points 0,1,4,5 left side
var lAvgZ = (cube.processPoints[0].colorZ + 
    cube.processPoints[1].colorZ + 
    cube.processPoints[4].colorZ + 
    cube.processPoints[5].colorZ) / 4 / 20;

var layers = [{key:0, val:fAvgZ},
          {key:1, val:fAvgZ},
          {key:2, val:tAvgZ},
          {key:3, val:tAvgZ},
          {key:4, val:reAvgZ},
          {key:5, val:reAvgZ},
          {key:6, val:bAvgZ},
          {key:7, val:bAvgZ},
          {key:8, val:rAvgZ},
          {key:9, val:rAvgZ},
          {key:10, val:lAvgZ},
          {key:11, val:lAvgZ}];

var outLay = layers.sort(function(a,b){
    return (a.val - b.val);
});

for(var i = 0; i < outLay.length; i++)
{
    var k = outLay[i].key;
    ...
}

Este es, de ninguna manera, la forma más eficaz a medio/ordenar los valores de punto, y probablemente se puede hacer con menos líneas de código utilizando el cubo de la pre-existentes propiedades, pero el concepto básico sigue siendo el mismo.

Me estoy dando cuenta que el promedio de z-index y el uso que para asumir la estratificación de la orden.Obviamente, esto no funciona para todo, pero por simple poliedros, debería ser suficiente.

Esto se puede simplificar a:

var layers = [];
for (var i = 0; i < cube.sides.length; i++){
    var side = cube.sides[i];
    var avg = (cube.processPoints[side.a].colorZ + 
               cube.processPoints[side.b].colorZ + 
               cube.processPoints[side.c].colorZ) / 3 / 20;                   
    layers.push({key:i, val:avg});
}

var outLay = layers.sort(function(a,b){
    return (a.val - b.val);
});

Allí no parecen ser algunos de fringe casos donde hay un rápido de pedido-problema.

Esto parece ser más exactos: http://jsfiddle.net/ZXjAM/4/

var layers = [];
for (var i = 0; i < 12; ++i){
    var side1 = cube.sides[i];
    var side2 = cube.sides[++i];
    var avg = (cube.processPoints[side1.a].colorZ + 
               cube.processPoints[side1.b].colorZ + 
               cube.processPoints[side1.c].colorZ + 
               cube.processPoints[side2.a].colorZ + 
               cube.processPoints[side2.b].colorZ + 
               cube.processPoints[side2.c].colorZ) / 6;                   
    layers.push({key:i-1, val:avg});
    layers.push({key:i, val:avg});
}

var outLay = layers.sort(function(a,b){
    return (a.val - b.val);
});