WebGL - Three.js, Ammo.js, Physi.js, Unity

Aus­nahm­swei­se mal kein Spiel. Eher et­was zum ent­span­nen und zu­rück­leh­nen. Sich ein­fach mal den Lu­xus gön­nen und zu­seh­en wie die Zeit ver­geht.

Die Idee ist an sich nicht wirk­lich neu. Ich woll­te ei­gent­lich nur wis­sen, ob ich es schaf­fe, so et­was als Echt­zeit­si­mu­la­tion hin­zu­be­kom­men, inkl. ak­tu­el­ler Uhr­zeit.

Da sich die Uh­ren der Form des Un­ter­grun­des an­pas­sen, muss­te ich die­ses Mal auf die (zu­min­dest für mich) Low-Level Phy­sics-En­gine Ammo.js zu­rück­grei­fen. Da die­se ech­te Soft­bo­dys un­ter­stützt. Al­ler­dings zu las­ten der Per­for­mance. Aus diesem Grund soll­te man ei­gent­lich auch auf sog. Mesh-­Colli­der (wel­che ich für den Wir­bel ver­wen­det ha­be) ver­zich­ten, da hier, ähn­lich wie beim Soft­bo­dy, für die Kol­li­sions­be­rech­nung wirk­lich al­le Pun­kte und Drei­ecks­flä­chen des Ob­jekts he­ran­ge­zo­gen wer­den müssen.

Ob­wohl das Gan­ze viel­leicht tri­vi­al aus­sieht, hat hier vor al­lem die CPU (ei­gent­lich nur ein Core, aber trotz­dem) ei­ni­ges zu be­rech­nen. Es ist ein­fach viel schwie­ri­ger zu si­mu­lie­ren, dass ein Kör­per den An­de­ren nicht durch­dringt, als ihn ein­fach durch­flie­gen zu las­sen.

Am lieb­sten hät­te ich na­tür­lich schmel­zen­de Uh­ren, al­ler­dings mit Uhr­zei­ger, si­mu­liert. Hier­zu müss­te aber zwi­schen den ein­zel­nen Punk­ten zu­sätz­lich eine Art Fe­der­be­rech­nung statt­fin­den. Lei­der ha­be ich die­se Funk­tion bei Ammo.js (noch) nicht ent­deckt. Al­ler­dings wür­den dann wahr­schein­lich auch mo­der­ne Ga­ming­rech­ner vor ho­hen Her­aus­for­de­run­gen ge­stellt wer­den.

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 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 Ver­sion mit Unity 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.

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­res­sant 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.

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.

Lei­der zei­gen mit­tler­wei­le al­le ak­tu­el­len Brow­ser die­ses Bei­spiel nur mehr 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.