Modo più veloce per implementare Z-Buffering per un rendering software?

Question

Sto implementazione di un rendero software JavaScript (per scopi accademici). Gestisce che rappresenta un oggetto 3D come triangoli e gestisce la proiezione prospettica dallo spazio 3D allo spazio 2D.

Fino ad ora, ho usato il lineTo e fillRect per rappresentare i vertici e le linee sullo schermo. Ho persino usato lineTo per eseguire il riempimento del triangolo della linea di scansione. (Puoi controllare il progetto qui >)

Finora il FPS è stato abbastanza buono. Ma l'ultima parte dell'assegnazione è implementare Z-buffering: p. A mia conoscenza, l'unico modo per farlo è smettere di riempire i miei triangoli usando lineTo e riempirli con una serie di linee 1px o una serie di quadrati 1px. (Perché prima di disegnare ogni "pixel", devo controllare il buffer di profondità e vedere se dovrei effettivamente disegnarlo o no.)

Il problema è che i triangoli di riempimento con minuscoli rettangoli o linee sono lenti. Ottiene tutto fino a 2 fps. Quindi la mia domanda è, c'è qualche metodo per disegnare un pixel invece di una piccola linea (che potrebbe essere più veloce)?

In alternativa, cos'altro posso fare per accelerare le cose? Il mio obiettivo è di farlo girare abbastanza velocemente da demo il principio. (6-10 fps sarebbe sufficiente)

applausi.

[modifica] Mentre aspetto una risposta, procederò a modificare le mie funzioni di riempimento del triangolo per disegnare 4 px di "pixel" invece di 1 px. Ma questo sembrerà Jaggedy ...

Answer 1

Verifica questo: http://jsfiddle.net/zxjam/2/ Questo è, senza alcun modo, il modo più efficiente per mettere in media / ordinare i valori del punto, e può probabilmente essere fatto con meno linee di codice utilizzando le proprietà preesistenti del cubo, ma il concetto di base rimane lo stesso. .

Sto trovando l'indice Z medio e lo sto usando per assumere l'ordine di stratificazione.Ovviamente, questo non funzionerà per tutto mai, ma per il semplice polyhedra, dovrebbe essere sufficiente.

Questo può essere semplificato per:

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);
});

.

Sembra che ci siano alcuni casi di frangia dove c'è un problema di ordinazione rapido.

Questo sembra essere più accurato: 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);
});

.