Home

News

Software
  - HTML
  - DHTML
  - Javascript
  - CGI
  - VRML
  - Linux
  - Dirty-Progs
    - CSS-DIV-Slicer
    - Sprite-Painter
    - FLV-CCC
    - CPU-Eater
    - Pixel-Evolution
    - MediaPanelyzer
    - OpenGL ISS
    - OpenGL Planets
    - PicOfPics
    - OpenGL Henrys
    - VidSplitt

  - PHP
    - Src2Textarea
    - Volltext-Suche
    - Hilfsfunktionen

Bilder

Texte

Alles fliesst

Comics

Musik

Leben

Links

Sitemap

Admin


TV News bei
Quotenmeter

VRML - Ein Tutorial

VRML-Tutorial von Daniel Schwamm (14.02.1998)

Aus "Heimat des Dilettantismus"
http://www.henrys.de/daniel/index.php?cmd=software_vrml_index.htm

Virtual Reality Modeling Language ist simpel. Daher finde ich es erstaunlich, daß man VRML-Worlds im Web relativ selten findet. Zumal in Netscape ab Version 3.x ein VRML 1.0-Plugin bereits integriert ist. Um diesen Mißstand zu beseitigen, folgt nun ein kleiner VRML-Kurs.

Man nehme einen x-beliebigen ASCII-Editor, z.B. Notepad in Windows, und tippe folgendes ein:

#VRML V1.0 ascii
AsciiText{string 'Hello world!'}


Man speichere dies als "vrmlkurs1.wrl" und betrachte sich das Ergebnis z.B. mit Netscape.

(=> vrmlkurs1.wrl)

Wie wär's mit einer Ebene im Raum? No Problem:

#VRML V1.0 ascii
Cube{
  width 1000
  height 10
  depth 1000
}


(=> vrmlkurs2.wrl)

Naja, der Hintergrund wäre in blau schöner. Und die Ebene sollte grün sein.

#VRML V1.0 ascii
DEF BackgroundColor Info{
 string '0 0 .6'              # rot gruen blau-intensitaet 0-1
}
DEF mat0 Material{
 diffuseColor  .6 .9 .6       # rot gruen blau-intensitaet 0-1
}
Cube{
  width 1000
  height 10
  depth 1000
}


(=> vrmlkurs3.wrl)

So eine Ebene ohne was drauf ist öde. Verpassen wir ihr doch eine dunkelgraue, mh ... Säule.

#VRML V1.0 ascii
DEF backgroundcolor Info{
 string '0 0 .6'              # rot gruen blau-intensitaet 0-1
}
DEF mat0 Material{
 diffuseColor  .7 1 .7       # rot gruen blau-intensitaet 0-1
}
Cube{
  width 1000
  height 10
  depth 1000
}
DEF mat1 Material{
 diffuseColor  .3 .3 .3       # rot gruen blau-intensitaet 0-1
}
DEF saeule Cylinder {
  radius 100
  height 300
}


(=> vrmlkurs4.wrl)

Sitzt blöd, die Säule. Besser wäre es, wenn sie hinten links auf der Ebene hocken würde. Dazu muß man allerdings ein wenig rechnen. Um ein VRML-Objekt umzuplazieren, muß sein 3D-Mittelpunkt umtransformiert werden. Let's take a look:

#VRML V1.0 ascii
DEF backgroundcolor Info{
 string '0 0 .6'              # rot gruen blau-intensitaet 0-1
}

DEF mat0 Material{
 diffuseColor  .7 1 .7       # rot gruen blau-intensitaet 0-1
}
Cube{
  width 1000
  height 10
  depth 1000
}

DEF mat1 Material{
 diffuseColor  .3 .3 .3       # rot gruen blau-intensitaet 0-1
}
Translation {
  translation -400 155 -400   # 400 nach links, 155 hoch, 400 nach hinten
}
DEF saeule Cylinder {
  radius 100
  height 300
}


Wieso funktioniert das? Vor der Definition der Säule liegt der "Objekteplazierungs-Ausgangspunkt" in (x/y/z)=(0/0/0), d.h. genau in der inneren Mitte der Ebene. Um die Säule auf die Ebene zu setzten, muß der "Objekteplazierungs-Ausgangspunkt" daher um 155 Punkte erhöht werden, damit der Säulenmittelpunkt genau so weit über dem 0/0/0-Mittelpunkt schwebt, daß der Säulenfuß auf der Ebene aufsitzt, deren oberer Rand sich wiederum in 5 Punkten Höhe vom 0/0/0-Mittelpunkt befindet.

Brrrr! Mathematikkram läßt sich nur schwer verbal formulieren, wewegen schon die alten Griechen hierfür eine Formelsprache entwickelt haben. In diesem Falle gilt:

Höhe Säulemittelpunkt = Ursprungshöhe + (Höhe Ebene / 2) + (Höhe Säule / 2)
          155         =        0      + (    10     / 2) + (    300    / 2)


(=> vrmlkurs5.wrl)

So eine Ebene und so eine Säule machen noch mehr her, wenn sich rechts von der Säule eine schwarze Kugel befindet, oder? Also knallen wir eine hin:

#VRML V1.0 ascii
DEF backgroundcolor Info{
 string '0 0 .6'              # rot gruen blau-intensitaet 0-1
}

DEF mat0 Material{
 diffuseColor  .7 1 .7       # rot gruen blau-intensitaet 0-1
}
Cube{
  width 1000
  height 10
  depth 1000
}

DEF mat1 Material{
 diffuseColor  .3 .3 .3       # rot gruen blau-intensitaet 0-1
}
Translation {
  translation -400 155 -400   # 400 nach links, 155 hoch, 400 nach hinten
}
DEF saeule Cylinder {
  radius 100
  height 300
}

DEF mat2 Material{
 diffuseColor 0 0 0       # rot gruen blau-intensitaet 0-1
}
Translation {
  translation -200 155 -400   # 200 nach links, 155 hoch, 400 nach hinten
}
Sphere {
  radius 50
}


(=> vrmlkurs6.wrl)

Hoppla, wat is nu passiert? Die dreckige Kugel hat's beinahe in's NIL verschlagen. Grund: Die Translation-Koordinaten sind korrekt zum Ursprung angegeben, wir haben aber zuvor den "Objektplazierungs-Ausgangspunkt" durch Plazierung der Säule umgebogen. Wir müssen daher die Koordinaten relativ zu diesen neuem "Ursprung" setzen. Das ergibt:

#VRML V1.0 ascii
DEF backgroundcolor Info{
 string '0 0 .6'              # rot gruen blau-intensitaet 0-1
}

DEF mat0 Material{
 diffuseColor  .7 1 .7       # rot gruen blau-intensitaet 0-1
}
Cube{
  width 1000
  height 10
  depth 1000
}

DEF mat1 Material{
 diffuseColor  .3 .3 .3       # rot gruen blau-intensitaet 0-1
}
Translation {
  translation -400 155 -400   # 400 nach links, 155 hoch, 400 nach hinten
}
DEF saeule Cylinder {
  radius 100
  height 300
}

DEF mat2 Material{
 diffuseColor 0 0 0       # rot gruen blau-intensitaet 0-1
}
Translation {
  translation 200 0 0   # 100 nach rechts, höhe bleibt, tife bleibt
}
Sphere {
  radius 50
}


(=> vrmlkurs7.wrl)

Okay, die Kugel wurde gebändigt. Trotzdem finde ich, daß das Plazieren von Objekten abhängig vom absolutem Ursprung i.d.R. leichter ist, als vom relativem, sich ständig änderndem Ursprung. Glücklicherweise gestattet es VRML, Objekte separiert anzulegen, d.h. unabhängig von zuvor gemachten Arbeitsschritten. "Separierte Objekte" lassen sich auch leicht klonen, was wir im nächsten Beispiel anhand der Kugel sehen werden:

#VRML V1.0 ascii
DEF backgroundcolor Info{
 string '0 0 .6'              # rot gruen blau-intensitaet 0-1
}

DEF ebene Separator{
  DEF mat0 Material{
    diffuseColor  .7 1 .7       # rot gruen blau-intensitaet 0-1
  }
  Cube{
    width 1000
    height 10
    depth 1000
  }
}

DEF saeule Separator{
  DEF mat1 Material{
    diffuseColor  .3 .3 .3       # rot gruen blau-intensitaet 0-1
  }
  Translation {
    translation -400 155 -400   # 400 nach links, 155 hoch, 400 nach hinten
  }
  DEF saeule Cylinder {
    radius 100
    height 300
  }
}

DEF kugeln Separator{
  Translation {
    translation -200 155 -400   # 200 nach links, 155 hoch, 400 nach hinten
  }
  DEF kugel Separator{
    DEF mat2 Material{
      diffuseColor 0 0 0       # rot gruen blau-intensitaet 0-1
    }
    Sphere{
      radius 50
    }
  }
  Translation{
    translation -400 0 0   # 400 nach links, höhe bleibt, tiefe bleibt
  }
  USE kugel

  Translation{
    translation 200 0 200   # 200 nach rechts, höhe bleibt, 200 vor
  }
  USE kugel

  Translation{
    translation 0 0 -400   # x bleibt, höhe bleibt, 400 zurück
  }
  USE kugel
}


(=> vrmlkurs8.wrl)

4 Kugeln um die Säule herum? Nett, aber statisch. Ein bißchen Dynamik kann nichts schaden. Wie schön, daß VRML Spingroups kennt. Positiv ist auch, daß Material-Definitionen im voraus gemacht werden können. And here is the result:

#VRML V1.0 ascii
DEF backgroundcolor Info{
 string '0 0 .6'              # rot gruen blau-intensitaet 0-1
}

DEF mat0 Material{
  diffuseColor  .7 1 .7       # rot gruen blau-intensitaet 0-1
}
DEF mat1 Material{
  diffuseColor  .3 .3 .3       # rot gruen blau-intensitaet 0-1
}
DEF mat2 Material{
  diffuseColor 0 0 0       # rot gruen blau-intensitaet 0-1
}

DEF ebene Separator{
  USE mat0
  Cube{
    width 1000
    height 10
    depth 1000
  }
}

DEF saeule Separator{
  USE mat1
  Translation {
    translation -400 155 -400   # 400 nach links, 155 hoch, 400 nach hinten
  }
  DEF saeule Cylinder {
    radius 100
    height 300
  }
}

DEF spin SpinGroup {
  rotation 0 1 0 .1              # rotiere um höhnenachse mit tempo .1

  DEF kugeln Separator{
    Translation {
      translation -200 155 -400   # 200 nach links, 155 hoch, 400 nach hinten
    }
    DEF kugel Separator{
      USE mat2
      Sphere{
        radius 50
      }
    }
    Translation{
      translation -400 0 0   # 400 nach links, höhe bleibt, tiefe bleibt
    }
    USE kugel

    Translation{
      translation 200 0 200   # 200 nach rechts, höhe bleibt, 200 vor
    }
    USE kugel

    Translation{
      translation 0 0 -400   # x bleibt, höhe bleibt, 400 zurück
    }
    USE kugel
  }
}


(=> vrmlkurs9.wrl)

So, dass sieht doch schon ganz ansprechend aus. Doch das Sahnehäubchen kommt erst jetzt: Texturen. Damit lassen sich beliebige Bilder auf VRML-Objekte kleben. Im folgenden verwende ich diese Pics:

Ein Bild von mir, ganz klar. Bin in der World übrigens interaktiv - 'n Klick auf mich und ihr landet auf meiner Homepage! Software - VRML - Daniel
Ein Bild der süßen Winona Software - VRML - Winona Ryder
Wolken, weiß und rein Software - VRML - Clouds
Ein garstiger Totenkopf Software - VRML - Skull

Und mit diesen Mixturen versehen, erhalten wir:

#VRML V1.0 ascii
DEF backgroundcolor Info{
 string '0 0 .6'              # rot gruen blau-intensitaet 0-1
}

DEF backgroundimage Info{
 string 'clouds.gif'
}

DEF mat0 Material{
  diffuseColor  .7 1 .7       # rot gruen blau-intensitaet 0-1
}

DEF mat1 Material{
  diffuseColor  .3 .3 .3       # rot gruen blau-intensitaet 0-1
}
DEF mat2 Material{
  diffuseColor 0 0 0       # rot gruen blau-intensitaet 0-1
}

DEF ebene Separator{
  USE mat0
  Texture2Transform {
    scaleFactor 1 1
  }
  Texture2{
    filename 'winona.jpg'
  }
  Cube{
    width 1000
    height 10
    depth 1000
  }
}

DEF saeule Separator{
  WWWAnchor{
    name 'http://www.henrys.de/daniel'
    description 'Daniels Homepage'

    USE mat1
    Texture2Transform {
      scaleFactor 1 1
    }
    Texture2{
      filename 'dan1.jpg'
    }
    Translation {
      translation -400 155 -400   # 400 nach links, 155 hoch, 400 nach hinten
    }
    DEF saeule Cylinder {
      radius 100
      height 300
    }
  }
}

DEF spin SpinGroup {
  rotation 0 1 0 .1              # rotiere um höhnenachse mit tempo .1

  DEF kugeln Separator{
    Texture2Transform {
      scaleFactor 3 1
    }
    Texture2{
      filename 'skull.gif'
    }
    Translation {
      translation -200 155 -400   # 200 nach links, 155 hoch, 400 nach hinten
    }
    DEF kugel Separator{
      USE mat2
      Sphere{
        radius 50
      }
    }
    Translation{
      translation -400 0 0   # 400 nach links, höhe bleibt, tiefe bleibt
    }
    USE kugel

    Translation{
      translation 200 0 200   # 200 nach rechts, höhe bleibt, 200 vor
    }
    USE kugel

    Translation{
      translation 0 0 -400   # x bleibt, höhe bleibt, 400 zurück
    }
    USE kugel
  }
}


(=> vrmlkurs10.wrl)

Virtual Reality Modeling Language ist simpel. Habe mir ein Tool zusammenprogrammiert, was die Geschichte noch einfacher macht: VRML-Worlds per Drag & Drop. In Zukunft bastel ich mir bestimmt noch ein paar Welten zusammen. Zu finden sind diese dann hier:

(=> vrmldir.html)

Das Tool liegt auf der Buchhorn & Melzer-Downloadseite. Wen's interessiert - hier klicken!
 


| Home | News | Software | HTML | DHTML | Javascript | CGI | VRML | Linux | Dirty-Progs | CSS-DIV-Slicer | Sprite-Painter | FLV-CCC | CPU-Eater | Pixel-Evolution | MediaPanelyzer | OpenGL ISS | OpenGL Planets | PicOfPics | OpenGL Henrys | VidSplitt | PHP | Src2Textarea | Volltext-Suche | Hilfsfunktionen | Bilder | Texte | Alles fliesst | Comics | Musik | Leben | Links | Sitemap | Admin |

© by DanPHPEd - Letzte Änderung: 08. Mai 2009