3D의 기본적인 지식을 이해하고 싶어서, 「3차원 CG의 기초와 응용[신정판]( h tp //오. gl/G코 Q4y )」이라고 하는 서적을 구입했습니다. 얇고 읽기 쉬운 것 같은 책이지만 샘플 소스가 없기 때문에, 공부가 테라 샘플을 만들면서 읽어 나가려고 생각합니다. 누구나 즉시 추시를 할 수 있도록 HTML + Javascript로 샘플을 만들어갑니다.

완전한 샘플은 이쪽
htps : // 기주 b. 코 m / 나카 칸 0629 / 3ds dy

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