3Dの基本的な知識を理解したくて、『３次元CGの基礎と応用［新訂版］（ http://goo.gl/GKoQ4y ）』という書籍を購入しました。薄くて読みやすそうな本なのですがサンプルソースがないので、勉強がてらサンプルを作りながら読み進めようと思います。誰でもすぐに追試ができるよう、HTML + Javascriptでサンプルを作っていきます。

完全なサンプルはこちら
https://github.com/nakaken0629/3dstudy

3.3. ペインタアルゴリズム

ペインタアルゴリズムは、遠くのものから順番にポリゴンを書いていくというシンプルなアルゴリズムです。手前のポリゴンが奥のポリゴンを上書きするので、結果隠れてしまうということです。
このサンプルでは、ペインタアルゴリズムを無効にする（チェックを外す）と、手前にあるようなポリゴンより先に、その後面にあるように見えるポリゴンが消えてしまっています。

サンプルソース

session3_3.htmlより

var main = function() {
    /* p -> polygon（多角形） */
    var p = new Array(POLYGON_COUNT);
    for (var i = 0; i < POLYGON_COUNT; i++) {
        p[i] = makeTriangle();
    }

    var draw = function() {
        cls();
        p2 = sort(p);
        loop: for (var j = 0; j < POLYGON_COUNT; j++) {
            fillTriangle(p2[j]);
            /* 180km/hで近づく */
            for(var i = 0; i < p2[j].v.length; i++) {
                p2[j].v[i].z -= 3000;
            }
            for(var i = 0; i < p[j].v.length; i++) {
                if (p2[j].v[i].z > 600) {
                    continue loop;
                }
            }
            /* 全ての頂点が前方クリッピングの外に出たら、新しいポリゴンを作成 */
            p[j] = makeTriangle();
        }
    };
    var proc = setInterval(draw, 20);

/* ポリゴンを距離順にソートする */
var sort = function(list) {
    if (!document.forms[0].enabled.checked) {
        return list;
    }
    list.sort(
        function(p0, p1) {
            z0 = (p0.v[0].z + p0.v[1].z + p0.v[2].z) / 3.0;
            z1 = (p1.v[0].z + p1.v[1].z + p1.v[2].z) / 3.0;
            if (z0 < z1) return 1;
            if (z0 > z1) return -1;
            return 0;
        }
    );
    return list;
};