[Projekt] Devader

[Schrompf]

Wieviele DrawCalls hast Du denn? Und wieviel dynamische Rechenzeit (also pro Frame zu machende Arbeit) hat jeder? Du bist nach meiner Vermutung etwas zu sehr auf die GPU-Seite fixiert. Ruckeln kann es aber genauso wegen der CPU-Seite.

"Blödes 2D" :) Sowas hab ich mir bei Splatter oft anhören dürfen. 2D-Spiele können genauso gut CPU und GPU verbraten wie 3D-Spiele.

[marcgfx]

das blöde 2d mein ich natürlich nicht so, allerdings muss ich mich schon fragen, wieso ich so viel schwierigkeiten mit der performance habe. keine komplexen 3d berechnungen, wenig draw calls. allerdings ist die ganze graphik auf 3d ausgelegt und ich benutz intensiv alpha-blending.

draw calls mache ich momentan bewusst nur 2. einen für den hintergrund und einen für den vordergrund. aktuell werden diese auf zwei unterschiedliche versteckte canvas gerendert (anderes gl object und anderes program/shader) und danach in einem dritten zusammen gezeichnet. lustigerweise ist dies schneller, als die beiden einfach anzuzeigen und ich habe ausserdem die möglichkeit im mehrspielermodus die zwei buffer-canvas mehrfach zu verwenden.
vermutlich macht der browser selber noch ein paar calls, die ich nicht beeinflussen kann.

ich habs mir nochmal genau angeschaut, damit ich besser beschreiben kann was ich mache:
der hintergrund verwendet 4 texturen, die ~400*300px gross sind.
dazu zwei vertexbuffer für den trianglestrip, der eine beinhaltet die positionen der andere einen zusätzlichen wert für den fragmentshader, damit er weiss was gerendert werden soll.
beim hintergrund gibt es kaum veränderungen, die einzigen die geschehen sind im zweiten vertexbuffer und hier update ich nur ab dem ersten veränderten wert (der sehr weit hinten im buffer liegt)

der vordergrund (alle objekte, bäume, autos, sträucher) verwendet eine textur/spritesheet.
hier habe ich vertexbuffer für textur, position, offset, size, modus (z.b. alpha)
bäume und autos werden in jedem frame sortiert und neu im buffer eingefügt, die statischen sträucher werden nicht angetastet.

was ich noch tun möchte:
wenn möglich würde ich gerne alles auf ein canvas zeichnen und nicht wie bisher auf zwei.
option 1: ich wechsle das program (da ich anderen shader brauche).
option 2: ich erweitere meiner shader so, dass ich auch alles was auf der strecke/hintergrund zu sehen ist damit gezeichnet werden kann -> shader wird ziemlich gross und ich weiss nicht genau wie ich trianglestrip und triangles vereinen kann (kann ich überhaupt zwei drawcalls in einem pass machen)

ich habe mir überlegt ob ich nicht alle texturen (auch die 4 für den boden in das sprite-sheet packe). wenn ich das programm wechsle, kann ich das überhaupt? bzw kann ich die selbe textur in zwei shadern verwenden ohne sie immer wieder an die gpu zu übergeben.

bin um jede hilfe froh, ich bin schon lange nicht mehr in meiner wassertiefe.

[marcgfx]

achja cpu: die ist auch ganz gut ausgelastet, aber scheint nicht das problem zu sein. z.B. wenn ich die ansicht auf meinem lahmen laptop auf fullscreen verändere gibt es sofort ein stocken, mit einer kleineren ansicht hab ich aber fast 60fps. der grössere ausschnitt hat für die cpu aber kaum einen einfluss. das weist anscheinend auf ein problem mit der fillrate (ganz sicher was das ist bin ich mir auch nicht).

[Spiele Programmierer]

Die Füllrate ist einfach ist einfach, wieviele Pixel pro Sekunde gefüllt werden können. Hättest du zum Beispiel 600 000 000 Pixel pro Sekunde, hieße das, dass du bei 60 FPS maximal 10 000 000 Pixel pro Frame zeichnen könntest. Wenn du also einen Fensterausschnitt von zum Beispiel 1000 * 1000 hast, könntest du den in einem Frame theoretisch 10 Fullscreen Quads(Jeden Pixel 10 mal überzeichnen) rendern, dann limitiert die Fillrate deine Leistung.

Nur mal theoretisch. In der Praxis ist sie sehr viel höher und ich halte es für unwahrscheinlich, dass es dein Problem ist.
In der Regel ist aber nicht die Füllrate kritisch, sondern zum Beispiel der Fragment Shader, der dabei für jeden "Pixel" läuft.

[marcgfx]

macht sinn. vor allem auch in bezug auf meine beobachtungen. mit vereinfachtem shader lief es endlich auch auf meinem laptop (ich habe aber auf die texturen als problem getippt). naja ich denke wenn ich alles in eine drawcall und in eine textur reinkriege dürfte ich bestimmt eine performance verbesserung erwarten. ich habe die boden/strecken texturen bereits testhalber in mein spritesheet eingebaut, ohne merkliche nachteile auf der testhardware. wenn auch das nicht zu einem lauffähigen spiel in bester qualität führt, werde ich wohl den shader optimieren müssen. vermutlich muss ich dann auf spielereien wie noise und fraktale verzichten, was aber zu verschmerzen ist.

[marcgfx]

weiterhin am optimieren, ich bin nicht sicher ob es viel gebracht hat. hintergrund und vordergrund verwenden jetzt die selbe textur und werden endlich auch in den selben context gerendert. damit entfällt das compositing, was aber nicht viel auszumachen scheint. auf meinem laptop besteht weiterhin das problem, das sobald der bildausschnitt zu gross wird es anfängt massiv zu ruckeln. dazu muss ausserdem noch ein vereinfachter fragment shader verwendet werden. einzige variante die ich noch nicht ausprobiert habe ist alles in einen einzigen drawcall reinzuwürgen. würde aber bedeuten, dass ich für den untergrund überflüssige vertexbuffer generieren muss und ausserdem dass ich alles entweder in triangles(objekte) oder in einen trianglestrip(strecke/hintergrund) umwandeln muss.

ansonsten sehe ich nur die lösung mit unterschiedlichen qualitätsstufen, was mir auch nicht wahnsinnig gefällt. irgendwie müsste ich diese dynamisch anpassen können, wenn ich merke dass der rechner lagt. bzw. dynamisch den sichtbaren ausschnitt verkleinern. alles nicht so befriedigend. evtl. habe ich auch einfach eine form der optimierung übersehen.

[Schrompf]

Die Optimierung auf einen DrawCall kannst Du Dir dann wirklich sparen. Anscheinend bist Du tatsächlich pixelshader-limitiert. Was ich auf heutiger Gamer-Hardware eigentlich für unmöglich gehalten habe, außer man baut gerade am nächsten GI-Konzept. Aber ok, wir reden ja von einem Laptop - Mobile-Hardware ist wirklich drastisch schlechter als Desktop-Hardware.

Was genau tust Du denn im PixelShader? Vielleicht können wir billigere Alternativen empfehlen.

[marcgfx]

es sind die spielereien die besonders teuer sind:
- fraktale (mandelbrot/julia) -> kann ich weglassen
- perlin-noise das verwendet wird um zwei texuren miteinander zu vermischen

wenn ich für den hintergrund nur eine farbe, oder eine mit farbe gemischte textur verwende ist es deutlich besser. habe inzwischen ein paar "qualitätsstufen" eingebaut, schlussendlich hat die einstellung nur auf die hintergrund textur eine auswirkung. auf dem laptop läuft die tiefste einstellung, ich muss aber zusätzlich den sichtbereich verkleinern.

was auch noch passiert: der browser rendert das html, u.a. mein hud, welches über der action liegt. anscheinend wird das auch auf der gpu gemacht.
ich habe eben eine option eingebaut um es ohne hud zu testen. es scheint die performance minimal zu verbessern, kein quantensprung.

falls jemand interessiert ist, die shader kann man über den zusatz "&shader=[1-4]" einstellen, oder auch auf der start seite. die option "&nohud" -> kein hud.

ich habe ausserdem einen verdacht, dass meine letzten optimierungen eher nachteilig waren. wieso kann ich mir nicht erklären, ausser chrome macht noch was ganz cleveres im hintergrund dass ich nicht verstehe.
zuvor: vordergrund und hintergrund auf einen eigenen canvas gerendert und danach in einem dritten gezeichnet.
jetzt: es wird alles auf ein canvas gerendert. ich muss jetzt aber einen shader wechsel vornehmen, bei dem ich die vertexbuffer enable/disable die ich brauche.

[marcgfx]

ich habe einen kleinen durchbruch erzielt! ich konnte mein spiel auf einem iphone 5 zum laufen bringen. durch spielen mit verschiedenen einstellungen siehts auch ganz passabel aus, wenn auch etwas pixelig. jetzt muss ich noch an der touch-steuerung arbeiten, wenn möglich möchte ich auf ein eingeblendetes steuerkreuz verzichten können. aktuell lässt sich alles mit einem finger steuern, geht richtung analog stick, aber es ist eindeutig noch zu schwer zu kontrollieren.

an der webgl performance habe ich nicht mehr geschraubt, ich werds mal vorerst so lassen und muss halt mit qualitätsstufen arbeiten. schön wäre wenn ich performance abhängig switchen könnte, aber das ist vermutlich auch nicht ganz so banal. das meine optimierungen für die katz waren, war auch eine fehleinschätung. ich hatte meist noch ein webgl debug-plugin aktiv, dies hat der performance nicht geholfen...

[marcgfx]

wers ausprobieren will, es müsste im browser auf neuen mobile geräten passabel laufen (iphone 5 ist ok). auf meinem iphone flackerts zum teil, weiss noch nicht wieso. frisst viel batterie.

die steuerung ist gewöhnungsbedürftig/experimentell. ein finger irgendwo aufs display, leicht nach oben drücken -> gas, nach unten -> bremsen, links/rechts ... es reagiert äusserst sensibel. bei den settings unten links kann man die sensibilität einstellen (touchx, touchy). je höher der wert desto sensibler.

link in signatur ;)
der start screen ist noch auf desktop ausgerichtet. am besten einfach mal play drücken.

[@zimmer]

Wie cool endich darf ichs spielen, habs aber nur inter win7 probiert

[marcgfx]

danke fürs ausprobieren. also es ist jetzt schon länger online verfügbar, das was ihr seht ist meistens mein aktueller zwischenstand. es kann durchaus sein, dass es mal ne fehlerhafte version ist :?

[marcgfx]

es gibt einige neuerungen. meine akustische lösung mit soundmanager2 von schillmania hat ausgesorgt. auf mobile hat die flash-lösung nicht funktioniert, ausserdem hat es mich fast zu mp3 gezwungen, das gewisse lizenzierungsproblem mit sich bringt. ich bin jetzt auf eine implementation von webaudio umgestiegen. die neuerung hat noch ein paar nette sachen mit sich gebracht die schon immer auf der "will ich haben" liste standen. stereo sound ist nun endlich wieder möglich! webaudio implementiert ausserdem den doppler-effekt, was meinen autos ein ganz neues feeling gibt. ich habe ausserdem fleissig sound-effekte hinzugefügt.

videos aufzeichnen und im eigenen format speichern funktioniert wieder (ist nicht online), falls ich doch auf die alte ki-kampf idee zurückgreifen möchte.

es gibt ein neues emp-extra, für das ich kleinere erweiterungen in der engine machen musste (bislang gab es kein skalieren von bildern). ich weiss noch nicht ob es ein gutes extra ist, aber ich lass es mal. die aktuelle version ist mit extras und speedups überladen, ein rennen ist es kaum noch. teilweise gehts nur noch ums blanke überleben ;). ist aber nur temporär, ich muss es noch besser einstellbar machen.

die extras sind jetzt nur sterne, ich habe den quadratischen rahmen entfernt. war mir zu mario-kart like und hat ausserdem die speedups-verdeckt, wenn alles sehr kompakt wurde. desweiteren bin ich am überlegen ob ich sowas wie produkt-placement machen könnte... ob dafür wohl jemand was zahlen würde?

141208star.png (95.92 KiB) 4586 mal betrachtet

[marcgfx]

mal wieder mach ich nicht was ich soll... ich wollte die welt etwas lebendiger machen: die bäume wackeln jetzt, wenn man schnell dagegen fährt. theoretisch könnte ich damit wind simulieren, mal sehen...
es gibt jetzt ein levelpack "crazy" das nur fussbälle und "tesla"-spulen erzeugt. am besten mit einem custom race testen, wenn interesse besteht. die tesla spulen stossen den spieler ab (nicht aber die bälle). ist leider nicht sehr performant.
ansonsten ein paar bugs gefixt und vermutlich auch einige hinzugefügt.

[marcgfx]

habe ein massives performance problem bei meinen tesla spulen entdeckt. anstatt radius*2 als einflussgebiet, wurde radius*radius verwendet, also sozusagen alles. neben abweisenden spulen, habe ich nun auch anziehende. diese stellen aber definitiv ein performance problem dar, weil immer mehr objekte in ihrer nähe zu vielen kollisionen führt. nebenbei gibts dann auch komische physik-reaktionen. ich darf das also sicher nur sehr sparsam einsetzen.

[marcgfx]

versuche momentan die umgebung etwas interaktiver zu gestalten und auch variantenreicher. im halbschlaf kam mir die idee ich könnte grosse kugeln einbauen, die ich bloss auf verschiedene grössen skalieren muss für variantenreichtum. die grösseren kugeln sind kaum zu verschieben, die kleineren lassen sich problemlos stossen. was etwas stört sind die kanten. mit gl_nearest gibt es stufen, mit gl_linear sehen aber alle graphiken verwaschen aus. was dazwischen gibts wohl nicht?
ein punkt der mich schon länger störte: man wusste nie wie es um den zustand des eigenen autos steht. ich habe jetzt ein blinken eingeführt, das intensiver wird je beschädigter das fahrzeug ist.

[marcgfx]

ich hab mir kürzlich 4 xbox 360 controller zugelegt (erst 2 ausgepackt). natürlich nur um zu testen ob ich mein spiel damit zum laufen krieg. die implementation war erstaunlich einfach, aktuell ist es aber noch nicht im gui ersichtlich. grundsätzlich steuert controller 1 den ersten spieler usw. ich habe auch bereits analog-stick support, sliden geht auch. hat überhaupt jemand gamepads für den pc?

womöglich brauchts einen refresh, das mit dem cache hab ich noch nicht so ganz im griff.

[@zimmer]

Ich habe einen ps3 oder 4 pad und wolllte den noch aus probieren

[marcgfx]

wäre schon daran interessiert obs läuft ;) . ich hab die xbox controller mit chrome getestet, weiss nicht wie gut es auf anderen browsern läuft.

[marcgfx]

versuche aktuell etwas zu optimieren. im 4 spieler modus wurde bislang für jedes fahrzeug die spielerfarbe des fahrzeugs einzeln im texture-atlas angelegt. bei den gegnern habe ich nur eine textur angelegt und mit einem hue-rotate unterschiedliche farben erzeugt. den selben ansatz habe ich jetzt bei den spielern eingesetzt. gab ein paar (blöde) probleme, die aber nichts mit der idee an sich zu tun hatten. u.a. weiss ich noch nicht wie ich im start-screen die geschichte lösen soll. css bietet selbst einen hue-rotate an, der ist aber wie ich feststellen musste, leider völlig unbrauchbar. svg bietet eine eigene lösung an, aber der versuch html in svg in html mit filter ist vorerst gescheitert (alles bis auf das filtern hat geklappt).

im bild ist das problem denke ich gut zu erkennen. die rahmen sind die erwarteten hauptfarben für die fahrzeuge. im kleineren bild ist das resultat im spiel selbst.

[marcgfx]

habe eben ein weiteres fahrzeug freigeschaltet. dieses hat einen geschützturm und kann schiessen. es ist aber mehr ne spielerei, als für rennen geeignet. link weiterhin in meiner signatur.



cooles tool gefunden um gifs vom screen zu erstellen: https://screentogif.codeplex.com/

[marcgfx]

ich versuch mal wieder hier zu posten. hoffentlich klappts... habe eben "werbebanner" eingebaut, mit konkurrenzlogo. wenn das posten geht werd ich evtl. noch ne zfx variante machen :)

hier ist sie schon, das logo musste ich aber nachbauen:

[Krishty]

Klasse! So sieht man mehr vom Spiel als in 100 Standbildern. Und es sieht prächtig aus. (Ich liebe ja GIFs und wünsche mir immer welche für ZFX; bin nur selber zu faul, welche zu machen.)

[Spiele Programmierer]

Ich wollte es mal ausprobieren, funktioniert aber nicht.
Bei der Version von deiner Seite kommt bei mir im Firefox mit GTX 760 Hardware nur ein schwarzes Bild. Menüs, Minimap und Musik funktionieren.

[marcgfx]

@krishty:
seh ich auch so, leider brauchts etwas mehr bandbreite. wenn ichs übertreibe, wird die seite ewig laden, was auch wieder nervt :)
@spielprogrammierer:
danke fürs ausprobieren, sorry für den schwarzen screen. leider kann ich nur vermutungen anstellen. grundsätzlich kriege ich bei shader-fehlern einen schwarzen screen, alles andere läuft dann weiter. evtl. könntest du kurz für mich in die firefox-console reinschauen?

habe die darstellung des nächsten checkpoints verändert. jetzt werden nicht nur die punkte eingefärbt sondern die ganze linie und der pfeil (wenns einen hat). ich benutz zum einfärben die komplementärfarbe der strecke (leicht verändert). erste versuche sehen ganz gut aus, könnte aber sein dass es bei gewissen kombinationen in die hose geht. die neuste version wurde eben hochgeladen.

[Spiele Programmierer]

Ich kenne mich mit Web-Development nicht wirklich aus, ich weiß also nicht wie ich an die Konsole komme. Ich habe jetzt mal in "Tools" -> "Web Developer" -> "Web Console" geschaut und dort kommen keine Meldungen an, sondern nur "The Web Console logging API (console.log, console.info, console.warn, console.error) has been disabled by a script on this page.".

Allerdings verstehe ich gerade nicht, warum du das nicht einfach selbst die Meldungen irgendwo sichtbar ausgibst.

[marcgfx]

du hast am richtigen ort geschaut. dort kommen aber die meisten meldungen nur an, wenn die konsole beim laden der seite bereits offen war. den grossteil der logs schreibe ich in meine eigene console (oben rechts drauf klicken). allerdings ist das im web bereich nicht wirklich standard. meistens verwendet man die eingebaute console. unter anderem, da die eigene console zuerst aufgesetzt werden muss und die ausgabe in html auch erst gemacht werden kann, wenn die seite geladen wurde und etwas angezeigt wird. die konsole habe ich allerdings nicht disabled, komisch diese meldung. ich geh mal davon aus, dass du keine plugins hast die sowas beeinflussen könnten.

[Spiele Programmierer]

Ich habe schon eine reihe Plugins.
Ich habe mal eben kurz alle deaktiviert und das scheint zumindest die Konsole aktiviert zu haben...
Die ausgegebenen Informationen sehen für mich allerdings nicht unbedingt so aus, als ob sie wirklich hilfreich bei der Lösung des Problems wären:

Code: Alles auswählen

"000 stored: player4" game.min.js:1:26001
"000 stored: log" game.min.js:1:26001
"000 stored: Raceset_customtrack" game.min.js:1:26001
"000 stored: touchfx" game.min.js:1:26001
"000 stored: player3" game.min.js:1:26001
"000 stored: scrollport" game.min.js:1:26001
"000 stored: player2" game.min.js:1:26001
"000 stored: Racemode" game.min.js:1:26001
"000 stored: RacerandomLevel" game.min.js:1:26001
"000 stored: player1" game.min.js:1:26001
"000 stored: showfps" game.min.js:1:26001
"000 stored: fullscreen" game.min.js:1:26001
"000 stored: volume" game.min.js:1:26001
"000 stored: touchfy" game.min.js:1:26001
"000 stored: Raceset_racedata" game.min.js:1:26001
"000 stored: showlog" game.min.js:1:26001
"000 stored: Raceunit" game.min.js:1:26001
"000 stored: difficulty" game.min.js:1:26001
"000 stored: Racesettings" game.min.js:1:26001
"000 stored: touchr" game.min.js:1:26001
"000 stored: key" game.min.js:1:26001
"000 stored: getItem" game.min.js:1:26001
"000 stored: setItem" game.min.js:1:26001
"000 stored: removeItem" game.min.js:1:26001
"000 stored: clear" game.min.js:1:26001
"000 stored: length" game.min.js:1:26001
"pause: focused"

[marcgfx]

hab leider nicht rausfinden können was bei dir schief geht. ich könnte die vermutung anstellen, dass es was mit der graphikkarte zu tun hat, bzw. das der shader nicht kompatibel ist (ich hab aber zu wenig ahnung davon).
die aktuelle version müsste in chrome, opera, firefox laufen, sowie safari (nur mac) und internet explorer (nur sehr langsam).

[marcgfx]

ich arbeite aktuell am lade-screen. evtl. werde ich teile davon auch für die zukünftige einstiegsseite verwenden.
zu kompliziert?
http://data.cyberlympics.com/html/test.html