3d Versuch

[netTrek]

OK... ich glaub jetzt ist die 3D Engine von mir "nett" - Hoffe ich langeweile euch nicht zu sehr und würde mich über Feedback freuen:

// Hilfsmethoden
// Kostante Rad - dieser Wert wird benötigt um die Winkel von Bogenmaß auf RAD zu berechnen´
Math.RAD = Math.PI/180;
// Sin Funktion für Grad Zahlen
Math.sinD = function(degrees) {
    return Math.sin(degrees*Math.RAD);
};
// Cos Funktion für Grad Zahlen
Math.cosD = function(degrees) {
    return Math.cos(degrees*Math.RAD);
};
// POINT
// Die Point Klasse verwaltet die Punkte im 2D Raum
function Point(x, y) {
    this.x = x == undefined ? 0 : x;
    this.y = y == undefined ? 0 : y;
}
// connectPoints verbindet den Punkt auf dem die Funktion angewandt  wurde 
// mit den Punkten die als Parameter (list := Array) übergeben wurden
// targetMC ist die Instanz in der die Verbindung in form von Linien dargestellt werden soll
Point.prototype.connectPoints = function(targetMC,list) {
    var count = list.length;
    targetMC.moveTo(this.x, this.y);
    for (var i=0; i<count; i++) {
        targetMC.lineTo(list[i].x, list[i].y);
    }
    targetMC.lineTo(this.x, this.y);
};
// Point3D
// Die Point3D Klasse verwaltet die Punkte im 3D Raum
function Point3D(x, y, z) {
    this.x = x == undefined ? 0 : x;
    this.y = y == undefined ? 0 : y;
    this.z = z == undefined ? 0 : z;
}
// move - Verschieb einen Punkt um einen Vektor und gibt einen neuen punkt zurück
Point3D.prototype.moveNew = function(dx, dy, dz) {
    return new Point3D (dx+this.x, dy+this.y, dz+this.z)
}
// Die Methode getFlashCoord berechnet die 3D Koordinaten mittels Zentralprojektion  in 2D Koordinaten 
// Für Flash um. Da Flash nicht kartesischen Koordinaten arbeitet wird das Vorzeichen
// der Y-Koordinate gewechselt.
// viewDistanz ist die Distanz zur Projektionsfläche. Dieser Wert wird benötigt und im Zweifel 
// Mit dem defaultWert 300 angegebn
// Die Methode gibt ein neues Objekt der Klasse Point mit den entsprechenden Koordinaten zurück.
Point3D.prototype.getFlashCoord = function(viewDistanz) {
    // get Perspective
    viewDistanz = viewDistanz == undefined ? 300 : viewDistanz;
    var div = this.z+viewDistanz;
    // division durch mit null ist nicht möglich
    div = div == 0 ? .0000000001 : div;
    // perspektivenfaktor
    perspective = viewDistanz/div;
    return new Point(this.x*perspective, this.y*-perspective);
};
// Die Methode dient dem Debugging und gibt lediglich die aktuellen Werte eines Punktes zurück.
Point3D.prototype.printPoint3D = function() {
    trace("x:= "+this.x);
    trace("y:= "+this.y);
    trace("z:= "+this.z);
};
// rotX - rotiert den Punkt um die X-Achse. Als Parameter wird der Rotationswinkel 
// (degrees) erwartet
Point3D.prototype.rotX = function(degrees) {
    var ca = Math.cosD(degrees);
    var sa = Math.sinD(degrees);
    var tempY = this.y*ca-this.z*sa;
    var tempZ = this.y*sa+this.z*ca;
    this.y = tempY;
    this.z = tempZ;
};
// rotY - rotiert den Punkt um die Y-Achse. Als Parameter wird der Rotationswinkel 
// (degrees) erwartet
Point3D.prototype.rotY = function(degrees) {
    var ca = Math.cosD(degrees);
    var sa = Math.sinD(degrees);
    var tempX = this.x*ca+this.z*sa;
    var tempZ = this.z*ca-this.x*sa;
    this.x = tempX;
    this.z = tempZ;
};
// rotY - rotiert den Punkt um die Y-Achse. Als Parameter wird der Rotationswinkel 
// (degrees) erwartet
Point3D.prototype.rotZ = function(degrees) {
    var ca = Math.cosD(degrees);
    var sa = Math.sinD(degrees);
    var tempX = this.x*ca - this.y*sa;
    var tempY = this.x*sa + this.y*ca;
    this.x = tempX;
    this.y = tempY;
};
// Klasse Object3d verwaltet ein 3D Objekt
function Object3d() {
    this.areas = new Array();
    this.points= new Array();
}
// Verwaltet einzelne (nicht einer Fläche angehörigen) Punkte der Klasse Point3D
Object3d.prototype.addPoint = function (point) {
    var pos = undefined;
    for (var i in this.points) {
        // kontrolliere ob der Punkt bereits vorhanden ist
        if (this.points[i].x == point.x && this.points[i].y == point.y && this.points[i].z == point.z){
            pos = i;
        }
    }
    // wenn der Punkt noch nicht vorhanden ist füge ihn hinzu
    if (pos == undefined) {
        this.points.push (point);
        pos = this.points.length-1;
    }
    // gebe den Array Index des Punktes zurück
    return pos; 
}
// addArea verwaltet Flächen eines 3D Objektes und erwartet daher als Parameter eine Liste von
// Punkten (der Klasse Point3D) die eine Fläche definieren
Object3d.prototype.addArea = function () {
    var area = new Array;
    var count = arguments.length;
    for (var i=0; i<count; i++) {
        var pointIndex = this.addPoint(arguments[i]);
        area.push(pointIndex);
    }
    this.areas.push(area);
}
Object3d.prototype.rot = function (axis, degrees) {
    for (var i in this.points) {
        var currentPoint = this.points[i];
        var fct = "rot"+axis.toUpperCase();
        currentPoint[fct](degrees);
    }
}
// rotX rotiert das gesamte 3D Objekt um die X-Achse bezüglich des angegebenen Rotationswinkels
Object3d.prototype.rotX = function (degrees) {
    this.rot("x", degrees);
}
// rotY rotiert das gesamte 3D Objekt um die Y-Achse bezüglich des angegebenen Rotationswinkels
Object3d.prototype.rotY = function (degrees) {
    this.rot("Y", degrees);
}
Object3d.prototype.rotZ = function (degrees) {
    this.rot("Z", degrees);
}
// Zeichne die Flächen
Object3d.prototype.drawAreas = function (target) {
    for (var i in this.areas){
        var currentArea = this.areas[i];
        var areaPoints = new Array();
        for (var j in currentArea) {
            var pointIndex = currentArea[j];
            var point = this.points[pointIndex];
            var flashPoint = point.getFlashCoord()
            areaPoints.push(flashPoint);
        }
        var startPoint = areaPoints.shift();
        startPoint.connectPoints(target,areaPoints);
    }
}
 
// Anwendungstest:
/*
................h-------e
............d---|---a ..|
............|...g---|---f
............c-------b
*/
 
this.createEmptyMovieClip("test_mc", 1);
test_mc._x = 400;
test_mc._y = 300;
 
// Würfel
    // vorderen Vektroen
test_mc.a = new Point3D(50, 50, -50);
test_mc.b = new Point3D(-50, 50, -50);
test_mc.c = new Point3D(-50, -50, -50);
test_mc.d = new Point3D(50, -50, -50);
    // hinteren Vektoren
test_mc.e = new Point3D(50, 50, 50);
test_mc.f = new Point3D(-50, 50, 50);
test_mc.g = new Point3D(-50, -50, 50);
test_mc.h = new Point3D(50, -50, 50);
    // 3d Objekt definieren
test_mc.cube = new Object3d();
// vorder Seite
test_mc.cube.addArea (test_mc.a, test_mc.b, test_mc.c, test_mc.d);
// hinter Seite
test_mc.cube.addArea (test_mc.e, test_mc.f, test_mc.g, test_mc.h);
// rechte Seite
test_mc.cube.addArea (test_mc.a, test_mc.e, test_mc.f, test_mc.b);
// unter Seite
test_mc.cube.addArea (test_mc.g, test_mc.f, test_mc.b, test_mc.c);
// linke Seite
test_mc.cube.addArea (test_mc.d, test_mc.h, test_mc.g, test_mc.c);
// ober Seite
test_mc.cube.addArea (test_mc.h, test_mc.e, test_mc.a, test_mc.d);
 
// Rotationswinkel
test_mc.degrees = 1;
this.test_mc.onEnterFrame = function() {
    if (Key.isDown(Key.UP)) {
        this.cube.rotX (this.degrees);
    }
    if (Key.isDown(Key.DOWN)) {
        this.cube.rotX (-this.degrees);
    }
    if (Key.isDown(Key.RIGHT)) {
        this.cube.rotY (this.degrees);
    }
    if (Key.isDown(Key.LEFT)) {
        this.cube.rotY (-this.degrees);
    }   
    if (Key.isDown(Key.PGUP)) {
        this.cube.rotZ (this.degrees);
    }
    if (Key.isDown(Key.PGDN)) {
        this.cube.rotZ (-this.degrees);
    }
    this.clear();
    this.lineStyle(1);
    this.cube.drawAreas(this)
}; 

Alternativ hier noch die Koordinaten für eine Pyramide

// Pyramide
test_mc.a = new Point3D(0, 0, -50);
test_mc.b = new Point3D(-100, -100, 50);
test_mc.c = new Point3D(100, -100, 50);
test_mc.d = new Point3D(100, 100, 50);
test_mc.e = new Point3D(-100, 100, 50);
 
test_mc.cube = new Object3d();
test_mc.cube.addArea (test_mc.a, test_mc.b, test_mc.c);
test_mc.cube.addArea (test_mc.a, test_mc.c, test_mc.d);
test_mc.cube.addArea (test_mc.a, test_mc.d, test_mc.e);
test_mc.cube.addArea (test_mc.a, test_mc.e, test_mc.b); 

SABAN

[Madokan]

Langweilen, wie das den?

Liebe Grüsse
Matze

[secp]

ja, ist mehr als nur nett, ich werds mir mal anschauen.

Hast du schon getestet wieviele punkte halbwegs flüssig darstellbar sind?

[Sven G.]

Geschrieben von Madokan
Langweilen, wie das den?

Liebe Grüsse
Matze

LOL das gleihe hab ich mir auch direkt gedacht! Ist echt gut geworden, werde da dann morgen auf der Arbeit erst mal etwas dran rumfrekeln bzw. das Coding mal genauer unter die Lupe nehmen

Gruss

[netTrek]

@ secp
ne Sorry... hab ich noch nicht ist aber ne gute Anregung!

@ Sven G. & madokan
Das freut mich

SABAN

[NastyFrog]

Sieht gut aus, aber 220 Zeilen. Das ist schon ganz schön heavy.

[beachmeat]

dann schreibs kürzer

[michael]

nett?!?

HUT AB!!
Daumen hoch!

gruss
michael

[cornholio]

Mütze ab.

Noch ein Tip aus alten 386iger Tagen:

Bei 3d-Engines wurde damals niemals die Wirkliche Sin - Cos - Funktion genommen, weil die echt rechenintensiv ist. Bei einer hinreichenden Anzahl von Punkten macht das schon was aus.
Anstelle dessen bildete man die Funktion auf eine zuvor berechnete Liste von Winkel - Wert - Paaren (z.B. im 2° - Abstand) ab.

--> sin (37.7°) naja, kann man gleich 38° nehmen

Weiss natürlich nicht, inwieweit bei FMX noch relevant ist, wie schnell sin / cos sind.

mfg c

[flory]

cornholio,
Deine Bildunterschrift ist Programm, was
(Spässchen)

in Flash bringt das nichts, im Gegenteil:
Arrays sind eine ziemlich lahme Sache, während die Math-Funktionen ziemlich schnell abgearbeitet werden.
Seit 486er Tagen (!) gehören mathematische Funktionen auch zum Inventar der CPU, deshalb bringen Lookup-Tables wahrscheinlich nicht mal in C++ was.

das einzige, was Sin/Cos etwas schneller macht sind Referenzen, wie z.B. var sin=Math.sin .

Die Umrechnung von Grad in Rad und der zusätzlich Funktionsaufruf im Beispiel von netTrek sind aber performancetechnisch ziemlich
ungünstig, aber für nen Würfel geht das schon.

Florian

[cornholio]

aaah, kapiert.

mfg c

[NastyFrog]

Ich will ja nicht angeben, aber wenn du es willst:
NastyScape: NastyScape 3D
Knapp unter 300 Zeilen

[NastyFrog]

Achso, oder diesen hier:
http://www26.brinkster.com/nastyf/3D Geschafft 4.html
http://www26.brinkster.com/nastyf/3D Geschafft 5.html