Der "ich hab da mal was gebastelt" Experimente Thread (WebGL, CSS3/HTML5, JS, etc.)

[z3ck3]

Hey,

ich dachte ich mache mal nen Thread auf für kleinere Experimente. Ich hatte mich am Wochenende endlich mal zusammen gerauft und mit mal three.js angesehen. Da das ganze so gar nicht meine Welt ist, ist mir das absolut nicht einfach gefallen. Ich glaube ich habe für das Endergebnis am Ende insgesamt ca. 16h gebraucht, also zwei volle Arbeitstage oO. Gut das das niemand bezahlen muss. ;)

Hier das Ergebnis:
http://owja.de/ oder
http://owja.de/?stats=1&composer=1
(inkl. FPS Anzeige und die Möglichkeit die Composer Size zu ändern)

* 5 Point Lights
* 1 Spotlight
* Bloom Shader, Film Shader, FXAA Shader

Als Vorlage hatte ich nur das Logo als SVG Datei. Die Pfade musste ich erst einmal umwandeln. Da hat mir folgendes Tool auf die schnelle weiter geholfen: svg-to-canvas (http://www.professorcloud.com/svg-to-canvas/)

Sonst habe ich mich vor allem durch die Beispiele von three.js inspirieren lassen. Was ich aber leider gar nicht hin bekommen habe sind Shadowmaps zusammen mit dem Postprocessing Effekten.

Insgesamt hat das wirklich viel Spaß gemacht und ich denke ich werde mich da bei Zeit auch weiter mit beschäftigen. Dafür fehlt mir nur die nächsten Wochen leider die Zeit, außerdem habe ich noch ein privates Projekt vor das auf createjs basieren wird. Aber ich wollte es vor allem auch überhaupt einmal gemacht haben.

lg
z3c

[exzentrik]

Unter Opera 34 ist nichts zu sehen. Leere Seite. WebGL habe ich via Flags aktiviert.

Unter Edge funktioniert es, wenn auch sehr ruckelig/langsam. Müsste das im Idealfall flüssig animiert sein?

[dreas]

unter maxthon 4.9.0 läuft es ruckelfrei und flüssig.

[Tyrann]

im Firefox 43 läufts flüssig

[HarryHirsch]

läuft hier auf opera, firefox und chrome.
jeweils aktuellste version.

[z3ck3]

Läuft bei mir auch in allen Browsern flüssig (Edge, Firefox, Chrome). Auf meinem Sony Xperia Z1 Compact ruckelts allerdings in allen Browsern.

Ich kann ja mal ne FPS Anzeige einbauen und einen Durchschnittswert der letzten X Sekunden oder sowas falls Interesse besteht.

[Fusion_Power]

Unter Opera 34 ist nichts zu sehen. Leere Seite. WebGL habe ich via Flags aktiviert.

Unter Edge funktioniert es, wenn auch sehr ruckelig/langsam. Müsste das im Idealfall flüssig animiert sein?

Unter Opera 12 leider auch nix, nur ne weiße Seite. :freak: Meine Regel Nr.1: egal welche Website, sie muss unter Opera 12 laufen!

[derpinguin]

Unter Opera 12 leider auch nix, nur ne weiße Seite. :freak: Meine Regel Nr.1: egal welche Website, sie muss unter Opera 12 laufen!
Ich nehme an, dass du der Einzige mit der Regel bist? :freak:

[Fusion_Power]

Ich nehme an, dass du der Einzige mit der Regel bist? :freak:
Ich nehme auch an ich bin der einzige verbliebene Opera 12 Nutzer weltweit, also JA. :freak:

[z3ck3]

Hab mal fix was gebastelt:

http://owja.de/?stats=1&composer=1

Übder die Paramter aktiviert man die Statistik und die Möglichkeit die Größe des Composers anzupassen. Bei Retina Bildschirmen ist er default auf 2 (bei meinem Sony jedenfalls).

[exzentrik]

Die Counter sehe ich unter Opera 34 sogar. Aber den eigentlichen Test nicht. :freak: Unter Edge sind's konstante 5 fps.

[z3ck3]

Ich vermute mal das dann das WebGL rendering bei dir gar nicht läuft.

Ich kann übrigens im Edge meinen gesamten PC zum neustart bewegen wenn ich den Composer Factor auf 4 oder höher stelle. In Firefox kommt es nur ab und zu zu abstürzen beim umschalten inkl. neustart des NVidia Treibers XD

Sonst im Firefox:
Factor 5 etwa 18fps
Factor 4 etwa 24fps
Factor 3 etwa 42fps
Factor <3 immer 60 fps

Größer als 5 geht nicht (6 wäre bei mir eine Auflösung von 11148 x 6066)

Windows 10, GTX 570, i7 875k

[HarryHirsch]

60fps (vsync) in den oben genannten browsern

[z3ck3]

Kannst den Factor der Composergröße erhöhen. Damit sinken die fps oder der Browser/PC säuft ab :D :D :D

[Radeonfreak]

IE11 Win10 64Bit 60fps und selbst mit Faktor 9 noch 28 FPS.

[z3ck3]

Hab noch mal bis Faktor 20 erweitert. 28fps@F9 macht mich gerade neidisch. :D

F4 braucht bei mir etwa 1GB Ram (GPU-Z). Das das ist dann schon knapp am Limit der GTX570. Denke darum säuft er auch ab wenn ich auf F5 stelle.

[Radeonfreak]

Sooo. Im IE11 geht's bis Faktor 11 bei 20fps, in Edge bis Faktor 12 bei 20 FPS. Bei allem darüber kommt bei beiden gar nichts mehr. Alles schwarz.

[z3ck3]

Ja, dann geht dir ab F13 vermutlich der Grafik Speicher aus. Immerhin stürzt dein Browser nicht ab, oder der Grafiktreiber startet neu. Gestern konnte ich mit Edge sogar einen PC Neustart verursachen. :D

[exzentrik]

Wegen eines Freezing-Fehlers in Opera 34 hatte ich die Hardware-Beschleunigung aus. So konnte der Test natürlich nicht angezeigt werden. :freak:

Jedenfalls habe ich mit aktivierter HWA konstante 144 fps bei Standardeinstellung. Ab Faktor 7 habe ich ein schwarzes Bild (eventuell wegen des noch nicht vollständig implementierten WebGL?). Bei Faktor 6 noch rund 34 fps. Am Grafikspeicher kann es nicht liegen: Habe eine Titan X mit 12 GB VRAM.

[z3ck3]

Lass einfach mal GPU-Z nebenbei laufen. Dort wird die Speicherbelegung angezeigt. Bei mir steigt der Browser jedenfalls immer aus sobald meine 1,2GB voll sind. Teilweise mit schwarzem Browserfenster, teilweise wirds weiß, oft stürzt dabei kurz darauf der Grafiktreiber ab und startet neu. Einmal gabs einen kompletten Systemneustart :D

Die Intern gerenderte Auflösung steht bei der Composer Einstellung ganz unten unter "current" (F4 ist bei mir z.b. 7432 x 4044, was 900MB laut GPU-Z belegt).

[Radeonfreak]

Bei 12 hab ich eine Auslastung von 3182 MB.

13 geht schon gar nicht mehr. Macht der eine Sprung ein GB aus? :confused:

[z3ck3]

337 MB (nicht geladen)
439 MB @F1 = +102 MB (1858 x 1011)
579 MB @F2 = +140 MB (3716 x 2022)
723 MB @F3 = +144 MB (5574 x 3033)
945 MB @F4 = +222 MB (7432 x 4044)

@Firefox

Was auffällt ist das eben auch nicht immer der Speicher freigegeben wird. Mal hab ich bei F4 schon über 1GB, mal ist es sogar nur 915MB. Schließt man den Tab bleibt der Speicher voll bin man die Seite wieder öffnet und reduziert sich dann auf das (vermutliche) minimum.

Als ich gerade das Fenster verkleinerte, kam ich bis F7, bei F8 stürzte er dann ab obwohl erst ca. 800MB belegt waren. Nach dem Browser Neustart mal direkt auf F8 geswitcht (7936 x 5032) und läuft grad mit ca. 1040MB Speicherbelegung. Vielleicht liegt es also auch an der Gesamtgröße.

Edit: Ähnliches wenn ich das Fenster auf grob die hälfte des Bildschirms verkleinere: von F6 auf F7 stürze er ab. Nach dem Neustart direkt auf F7 geht. 12922 x 4403 @1155MB @12 FPS

Ich kann ja auch nur vermuten, da mir das technische Hintergrundwissen fehlt. :D :D

Welche Auflösung zeigt er dir bei F12 an?

[Radeonfreak]

Sorry, grad von der Arbeit heim.

Ähm...

current: 16152 x 11244 bei F12

[z3ck3]

Ich denke mal das schlicht der Speicher limitiert, also dann tatsächlich an die 800MB dazu kommen können.

Was mich aber generell wudnert ist, das bei mir der Treiber neustartet und teilweise der Browser abstürzt. Eigentlich sollte das ja irgendwie abgesichert sein. Mit ein paar Zeilen Code könnte man ja sonst diverse Systeme abstürzen lassen. Bei Endlosschleifen, Alertboxen und Scripte die die CPU stark auslasten ist das ja auch abgesichert. WebGL/Canvas scheinen da ein wenig "flexibel" zu sein.

[Radeonfreak]

Hmm..bei mir stürzt nix ab. :confused:

[z3ck3]

Kannst du wieder zurück wechseln auf einen niedrigeren Faktor und der Rendert dann wieder fleißig? ^^

Edit: Bei mir stürzt der Grafiktreiber bei jedem Browser ab Faktor 5/6 ab. Im Edge werden sogar kurz beide Monitore schwarz.

[Radeonfreak]

Jupp, geht. :)

[z3ck3]

Hm, woran liegt es das du das kannst und ich nicht? ^^ Verhalten sich GTX570 und GTX980 so unterschiedlich?

Bei mir Verursacht das eben den genannten Absturz des Treibers und Browsers und den folgenden Eintrag im Ereignislog: "Der Anzeigetreiber "nvlddmkm" reagiert nicht mehr und wurde wiederhergestellt."

[Radeonfreak]

Mindestens ein mal am Tag den Computer zärtlich streicheln....:comfort:

Nee, keine Ahnung. =)