cw
ar

WebGL - Three.js, Physi.js, Unity3D

Bilder/Videos WebGL (Web 3.D)

Web 3.D

Mit WebGL ...

...kann der Brow­ser di­rekt mit der Gra­fik­kar­te kom­mu­ni­zie­ren und die Er­geb­nis­se, ohne zu­sätz­lich­es Plug­in, ex­trem schnell via HTML5-Canvas dar­stel­len.

Mittler­wei­le kön­nen eigentlich al­le mo­der­nen Brow­ser mit Web­GL um­ge­hen. Vie­les funk­tio­niert übri­gens auch schon auf mo­bi­len Ge­rä­ten. Al­ler­dings soll­te man hier be­ach­ten, dass die­se Sys­te­me im Web noch nicht ganz so lei­stungs­fä­hig sind wie z.B. Desk­top­rech­ner oder Note­books.

Bin ge­spannt ob und wann sich Web­GL-An­wen­dun­gen durch­set­zen wer­den. Ver­wen­dungs­zwec­ke für sol­che, wie z.B. Ar­chi­tek­tur­vi­su­ali­sie­run­gen, Au­to­kon­fi­gu­ra­to­ren, Kü­chen- bzw. Ein­rich­tungs­pla­ner, 3D-Pro­dukt­an­sich­ten, Spie­le usw. gibt es ganz sich­er genug.

Three.js ...

...ist ein Frame­work um in­ter­ak­ti­ve 3D-Sze­nen ganz nor­mal mit Ja­va­script, ohne Kennt­nis der durch­aus ge­wöhn­ungs­be­dürf­ti­gen Web­GL-Syn­tax, zu er­stel­len.

Physi.js ...

...ist ein sehr leis­tungs­fä­hi­ges und per­for­man­tes Phy­sik-Plug­in für Three.js.

Bitte unbedingt beachten!

Die Bei­spie­le sind (noch) nicht für mo­bi­le End­ge­rä­te ge­eig­net bzw. da­für op­ti­miert worden.

Mindestvoraussetzungen
  • Win7 64bit bzw. ver­gleich­ba­res Sys­tem.
  • Aktuelle (3D) Grafik­kar­te (so ab ca. 2010).
  • (Dual-)/Quadcore-CPU > 2GHz (v.a. für Phy­sik­be­rech­nun­gen).
  • Aktuellster Grafik­trei­ber.
  • WebGL fähiger Brow­ser in der ak­tu­ells­ten Ver­sion.
  • Gute Belüftung (v.a. bei Note­books).

Columnmania

Columnmania Poster

Das Spiel­prin­zip ist (wie im­mer) ein­fach. Die­ses Mal an­ge­lehnt an das Spiel Columns aus den 90'er Jah­ren. Es er­in­nert auch ein bis­schen an Tetris.

Die fal­len­den Blöc­ke müs­sen nur in die rich­ti­ge Spal­te be­wegt wer­den, um mind. 3 glei­che Stei­ne in ei­ner Rei­he zu bil­den. Egal ob ho­ri­zon­tal, ver­ti­kal oder di­ago­nal. Die­se wer­den ent­fernt, so dass die ver­blei­ben­den Blöc­ke in der Spal­te nach­rut­schen. Wäh­rend des Fal­lens kann die Rei­hen­fol­ge der Stei­ne, zy­klisch von oben nach un­ten ge­än­dert wer­den. Das Spiel ist zu en­de, wenn kei­ne Stei­ne mehr nach­fol­gen kön­nen, weil man ganz oben an­ge­kom­men ist. Die Fall­ge­schwin­dig­keit wird na­tür­lich lang­sam aber ste­tig erhöht.

Die Sym­bole auf den Stei­nen sind übri­gens nicht nur design­tech­ni­scher Schnick­schnack, son­dern haupt­säch­lich für Far­ben­blin­de be­stimmt.

Die­se WebGL-Va­ri­an­te wur­de ge­nau so wie die An­dro­id bzw. PC Ver­sion mit Unity 3D er­stellt. Im grun­de muss­te, nach ein paar An­pas­sun­gen, beim Er­stel­len nur die Platt­form ge­än­dert wer­den. Lei­der kann es auch bei ei­ner schnel­len Ver­bin­dung et­was dau­ern, bis der In­halt an­ge­zeigt wird.

START Columnmania

Screenshots

Falling blocks
Matching blocks
Matching blocks at start
Playmode: Hard
Playmode: Hardest
Main Menu
Settings Menu
Create blocks at start

Bekannte Phänomene

  • Manch­mal wird das Spiel Im Fire­fox nach ei­ner gewis­sen Zeit lang­sam. ⇒ Al­le Brow­ser­fens­ter schlie­ßen und er­neut ver­su­chen.
  • Teil­wei­se ver­zerrt Chrome im Voll­bild­mo­dus das Bild. ⇒ Vor dem Wech­seln in den Voll­bild­mo­dus das Brow­ser­fens­ter ma­xi­mie­ren.

SIMPLE BALL

Simple Ball Poster

Ein Ex­pe­ri­ment um die phy­si­ka­li­schen Be­rech­nun­gen in Echt­zeit von Physi.js zu tes­ten. Ein ein­fach­es Flip­per­spiel, mit dem Wich­tig­sten was da­zu ge­hört, wie Multi-, Extra­ball, stoßen inkl. TILT und an­de­ren Funk­tio­nen. In­te­re­ssant wird es übri­gens ab 2 oder mehr Bäl­len. Ab 4 Bäl­le kann es so­gar stres­sig wer­den ;-). Bren­nen in der Mit­te al­le blau­en Lämp­chen gibt es so­gar et­was spe­ziel­les. Ob­wohl der Flip­per ein­fach ge­hal­ten ist, ist es oft gar nicht so leicht den Ball lan­ge ge­nug im Spiel zu halten.

Im gro­ßen und gan­zen ist die Si­mu­la­tion von Physi.js wirk­lich klas­se. Nur die Con­straints bei den Paddles ha­ben mich et­was Ner­ven ge­kos­tet, da hier die Si­mu­la­tion un­ter be­stimm­ten (un­ge­klär­ten) Um­stän­den völ­lig ver­rückt spielt. Ich hof­fe, dass es mit Hil­fe der ein­ge­bau­ten Kor­rek­tu­ren, nur mehr äu­ßerst sel­ten vor­kommt, wenn über­haupt. Eine 2D-En­gine hät­te übri­gens völ­lig aus­ge­reicht – aber egal.

Im Chrome, Fire­fox und ei­nem ak­tu­el­len Edge (so ab 2016) läuft das Bei­spiel meist sehr flüs­sig, wo­bei Chrome, zu­min­dest bei mir, doch noch ein biss­chen schnel­ler ist.

SIMPLE BALL wur­de übri­gens als Chrome­ex­pe­ri­ment an­er­kannt.

START SIMPLE BALL

Screenshots

Start
Multiball
Center - Ring completed
New Highscore

Bekannte Phänomene

  • Das Spiel ist zu lang­sam. ⇒ Gra­fik­trei­ber und Brow­ser up­da­ten, ggf. Chrome oder Fire­fox ver­wen­den so­wie mö­glichst vie­le Hin­ter­grund­pro­zes­se be­en­den. Wenn das al­les nichts hilft, neue Gra­fik­kar­te oder bes­ser neu­en Rech­ner mit ak­tu­el­ler Gra­fik­kar­te be­sor­gen ;-). Lei­der brem­sen auch man­che Vi­ren­scan­ner bzw. Hin­ter­grund­pro­zes­se selbst neue Rech­ner stark aus.
  • In (hof­fent­lich nur) sehr sel­te­nen Fäl­len (wenn über­haupt) kann es vor­kom­men, dass sich ein Paddle selt­sam ver­hält. ⇒ Är­gern, schim­pfen, flu­chen und wenn der High­score über­schrit­ten ist, das Spiel mit [Esc] be­en­den. So dass we­nig­stens die Pun­kte ge­spei­chert werden.

Little Museum Of My Art

Mein kleines Museum - Vorderansicht

Die ers­ten Ver­suche mit Three.js und Web­GL. Ei­ne et­was an­de­re Art der Prä­sen­ta­tion von Bil­dern und Videos.

Dieses Bei­spiel funk­tio­niert mit­ler­wei­le lei­der nur mehr im Chrome kor­rekt. Fire­fox (neu­er­dings), IE11, Edge und Ope­ra zeigen die­ses Bei­spiel lei­der nur feh­ler­haft an. Das liegt aber eher an der et­was äl­te­ren Ver­sion von Three.js, wel­che hier ver­wen­det wird. Durch die vie­len Än­de­run­gen bzw. Op­ti­mie­run­gen, die in der Zwi­schen­zeit bei Three.js statt­ge­fun­den ha­ben, ist ei­ne Mi­gra­tion auf die neu­este Ver­sion, ziem­lich auf­wän­dig. Viel­leicht ir­gen­dwann mal.

START Museum

Screenshots

Mein kleines Museum - von links
Vor dem Eingang
Eingangsbereich von rechts
Raum links vom Eingang aus
Raum mitte vom Eingang aus
Raum mitte von hinten links
Raum rechts hinten
Eingangsbereich in Richtung Ausgang

Bekannte Phänomene

  • Ganz selten ein Freeze nach Klick auf ein Vi­deo oder ruc­kel­ige Wie­der­ga­be der Vi­de­os (im Chrome). ⇒ Gra­fik­trei­ber up­daten.
  • Teilw. langsame Wie­der­ga­be (im Fire­fox), auch auf ak­tu­el­len Sys­te­men. ⇒ Nach La­den des kom­plet­ten In­halts die Fen­ster­grö­ße des Brow­sers leicht än­dern.
  • In seltenen Fäl­len kam Fire­fox wäh­rend des La­de­vor­gangs durch­ein­an­der. ⇒ Brow­ser schlie­ßen und er­neut ver­su­chen.
  • Es kann auch bei schnel­ler Ver­bin­dung et­was dau­ern, bis der In­halt an­ge­zeigt wird. ⇒ Ge­duld.
Previous Next
Info

Da es noch nicht so vie­le Image­vie­wer bzw. Bil­der­ka­ru­sells im Web gibt, muss­te ich ei­nen ei­ge­nen Me­dia­vie­wer, für Bil­der, Vi­de­os und nor­ma­len HTML In­halt, er­stel­len. ;-)

Allerdings ve­rwen­det die­ser, so­fern es der Brow­ser zu­lässt, nur CSS-Trans­for­ma­tio­nen und -Über­blen­dun­gen (Tran­si­tions). Die Über­gän­ge sind somit Hard­ware­be­schleu­nigt und wer­den hier nur durch wech­seln der je­wei­li­gen CSS-Klas­sen er­zeugt.

Close