JürgenB: Problem mit webgl - linkProgram braucht mehrere Minuten

problematische Seite

Hallo,

ich habe mich in letzter Zeit mit webGL beschäftigt, u.A. mit dem Rechnen auf der Grafikkarte. Leider benötigt das Initialisieren der Shader-Programme (im FF die Methode linkProgram, Chrome bleibt an einer anderen Stelle hängen, Edge läuft) auf älteren Rechnern ca. 5 Minuten. Der Browser ist in dieser Zeit komplett eingefrohren, eine der CPUs ist voll ausgelastet. Danach funktioniert das Programm so, wie gewünscht. Eine reine 3D-Grafik funktioniert dagegen auch auf diesen Rechnern ohne Kunstpause.

Hat von euch jemand eine Idee, woran das liegen könnte und wie ich das abfangen kann?

Gruß
Jürgen

  1. problematische Seite

    Welche Schritte muss ich auf der verlinkten Seite unternehmen, um den problematischen Fall zu reproduzieren?

    Wenn ich auf den Button 3D Plot klicke, öffnet sich ohne Verzögerung eine 3D-Ansicht der Mandelbrot-Menge und ich kann mit der Maus die Kamera steuern. Hab keine Performance-Probleme beobachten können, getestet mit aktuellem Chrome.

    1. problematische Seite

      Hallo,

      du musst die Seite nur öffnen. Die Initialisierung erfolgt nach dem Laden im domcontentloaded-Handler. Wenn dann die Grafik mit dem 3D-Button erscheint, ist dein Rechner nicht betroffen.

      Gruß
      Jürgen

      1. problematische Seite

        Auch ich habe mit aktuellem FF keine Probleme

      2. problematische Seite

        Hallo,

        du musst die Seite nur öffnen. Die Initialisierung erfolgt nach dem Laden im domcontentloaded-Handler. Wenn dann die Grafik mit dem 3D-Button erscheint, ist dein Rechner nicht betroffen.

        Mein Rechner ist jetzt 5 Jahre alt und war damals schon eher ein mittelklasse Notebook, voriges Jahr habe ich ihn mit 16GB DDR3 Ram und einer 512GB SSD ausgestattet. Ich fürchte, dass dir bei noch älteren Rechnern, die keine Hardware-Beschleunigung für GPU-intensive Rechenoperationen bieten, die Hände gebunden sind. Benutzt du rohes WebGL oder benutzt du Three.js? Dann könntest du noch probieren den WebGL-Renderer durch den SVG-Renderer oder den 2D-Canvas-Renderer auszutauschen und hoffen, dass dir das etwas bringt - ich hab da allerdings keine zu großen Hoffnungen.

        1. problematische Seite

          Hallo,

          ich benutze rohes webGL, wobei die reine 3D-Grafik ja auch auf den alten Kisten funktioniert. Nur die zum Rechnen benutzten Shader hängen meine alten Testrechner auf. Einer ist ca. 5, der andere ca. 7 Jahre alt. Mein 6 Jahre alter Dienstlaptop ist nicht betroffen.

          Gruß
          Jürgen

          1. problematische Seite

            ich benutze rohes webGL, wobei die reine 3D-Grafik ja auch auf den alten Kisten funktioniert. Nur die zum Rechnen benutzten Shader hängen meine alten Testrechner auf.

            Dann hat dein Rechner vermutlich keine Hardware-Unterstützung für GPU-intensive Operationen und versucht die Operationen auf der ALU zu simulieren. Prüf nochmal ob in deinen Browsern die Hardware-Beschleunigung eingeschaltet ist, aber sonst sieht es nicht gut aus.

            1. problematische Seite

              Hallo,

              das dachte ich auch zuerst, aber wenn die Initialisierung der Shader-Programme nach 5 Minuten gelaufen ist, laufen die Rechnungen rasend schnell.

              Gruß
              Jürgen

              1. problematische Seite

                das dachte ich auch zuerst, aber wenn die Initialisierung der Shader-Programme nach 5 Minuten gelaufen ist, laufen die Rechnungen rasend schnell.

                Hmmmpf… das hab ich erst gelesen nachdem ich meine neue Antwort verfasst habe. Wenn du mal ein Performance-Profil aufzeichnest und hier postest, sowie dort beschrieben, würde ich mir das mal angucken, vielleicht finde ich etwas Auffäliges.

                1. problematische Seite

                  Hallo,

                  es wird im Chrome immer seltsamer:

                  rufe ich die Seite auf, kommt nach ca 25 sec. eine leere Grafik. In der Fehlerkonsole steht WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost, was darauf schließen lässt, das die Rechnung auf der Grafikkarte nicht ordentlich durchgeführt wurde. Nach meinen Kontrollausgaben ist aber alles ordentlich gelaufen. Reloads bestätigen das Verhalten.

                  Jetzt schalte ich die Performancemessung an:

                  die ersten Male wird die GPU nicht angezeigt und ich erhalte die Browsermeldung, dass webGL blockiert wurde. Ich habe dann die Möglichkeit dieses zu ignorieren oder die Seite neu zu laden. Dabei wird manchmal in der Performancemessung die GPU angezeigt, und manchmal auch nicht. Und nach einigen Versuchen funktioniert es dann plötzlich.

                  Das Verhalten ist nach meinem momentanen Kenntnisstand nicht vorhersehbar. Aber da das Problem ja nur wenige betrifft, würde es mir reichen, das lange Einfrieren des Browsers zu unterdrücken. Kann man in Javascript einen Timeout setzen?

                  Gruß
                  Jürgen

                  1. problematische Seite

                    Das ist alles wirklich sehr weird. Vielleicht liegt es einem Hardware- oder Treiber-Fehler, vielleicht ist aber auch eine Browser-Erweiterung daran Schuld, um letzteres auszuschließen könntest du mal den Browser im Inkognito-Modus laufen lassen, da sind stadardmäßig alle Erweiterungen deaktiviert.

                    Das Verhalten ist nach meinem momentanen Kenntnisstand nicht vorhersehbar. Aber da das Problem ja nur wenige betrifft, würde es mir reichen, das lange Einfrieren des Browsers zu unterdrücken.

                    Du kannst WebGL afaik. in einem Web Worker ausführen. Dann laufen UI und WebGL in getrennten Threads und blockieren sich nicht gegenseitig.

                    Edit: Hier ist ein aktuellerer Beitrag über WebGL Worker https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/

                    1. problematische Seite

                      Hallo,

                      Das ist alles wirklich sehr weird.

                      zumal es ja nur die Rechnung auf der GPU betrifft. Die 3D-Grafik funktioniert ja.

                      Vielleicht liegt es einem Hardware- oder Treiber-Fehler, vielleicht ist aber auch eine Browser-Erweiterung daran Schuld, um letzteres auszuschließen könntest du mal den Browser im Inkognito-Modus laufen lassen, da sind stadardmäßig alle Erweiterungen deaktiviert.

                      im Inkognito-Modus sieht es genauso aus.

                      Das Verhalten ist nach meinem momentanen Kenntnisstand nicht vorhersehbar. Aber da das Problem ja nur wenige betrifft, würde es mir reichen, das lange Einfrieren des Browsers zu unterdrücken.

                      das ist auch mein Wunsch. Aber es gibt wohl keine Möglichkeit, JS-Methoden eine maximale Laufzeit mitzugeben.

                      Du kannst WebGL afaik. in einem Web Worker ausführen. Dann laufen UI und WebGL in getrennten Threads und blockieren sich nicht gegenseitig.

                      damit würde der Browser nicht mehr einfrieren. Die alternative Version der problematischen Seite arbeitet mit Workern und ohne GPU. Dann hätte ich Multithreading mit Workern durch Multithreading auf GPUs ersetzt, um dann wieder einen Workerthread einzubauen 😟

                      Edit: Hier ist ein aktuellerer Beitrag über WebGL Worker https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/

                      danke für den Link. Das sieht interessant aus, da man vom Worker aus direkt an die Hardware (canvas) kommt.

                      Gruß
                      Jürgen

            2. problematische Seite

              Prüf nochmal ob in deinen Browsern die Hardware-Beschleunigung eingeschaltet ist, aber sonst sieht es nicht gut aus.

              In Chrome hast du in den Entwickler-Tools den Reiter "Performance", da hast du unter anderem die Möglichkeit die Seite neuzuladen und die anfallenden arbeiten in einem Profil aufzuzeichnen. Wenn die Leiste "GPU", wie im Screenshot gezeigt, dort nicht existiert oder dort keine Daten aufgezeichnet worden, ist die Hardware-Beschleunigung entweder deaktiviert oder dein Rechner unterstützt sie nicht.

  2. problematische Seite

    Hallo JürgenB,

    ich habe einen Core i5 3xxx Prozessor und eine Radeon HD 7700, nix besonderes.

    Das Mandelbrötchen backt wie der Teufel. Keine Startverzögerung- Vor 2 Jahren habe ich das mit C# (und C++ Kern) mit SSE-Instruktionen versucht, das war lange nicht so schnell. Dafür genauer, ich kann tiefer zoomen bis es pixelt.

    Ich bin trotzdem sehr beeindruckt.

    Wenn es bei Dir hängt - kann es am Grafiktreiber liegen?

    Rolf

    --
    sumpsi - posui - clusi
    1. problematische Seite

      Wenn es bei Dir hängt - kann es am Grafiktreiber liegen?

      Offensichtlich ein lokales (Treiber, Hardware, Erdstrahlung...) Problem. Bei mir rennt das astrein: drei Jahre alter (damals schon Mittelklasse) Rechner, Grafikkarte mit damaligem Neuwert von höchstens 20,- Euro.

    2. problematische Seite

      Hallo Rolf,

      ich habe einen Core i5 3xxx Prozessor und eine Radeon HD 7700, nix besonderes.

      ich habe es auch noch mal auf anderen alten Rechnern getestet, auch mit Intel-Onboard-Grafik, und dort trat die Verzögerung nicht auf. Im Edge funktioniert es auch auf den beiden besagten Rechnern.

      Das Mandelbrötchen backt wie der Teufel. Keine Startverzögerung- Vor 2 Jahren habe ich das mit C# (und C++ Kern) mit SSE-Instruktionen versucht, das war lange nicht so schnell. Dafür genauer, ich kann tiefer zoomen bis es pixelt.

      das frühere Verpixeln liegt daran, dass webGL nur 32-bit Floats kann. Daher läuft auf meiner normalen Seite noch die Multithread-Version auf Workerbasis.

      Ich bin trotzdem sehr beeindruckt.

      Wenn es bei Dir hängt - kann es am Grafiktreiber liegen?

      das ist auch meine Vermutung. Die Rechner sind sehr alt und da kann es unter Window 10 schon mal Treiberprobleme geben. Seltsam ist nur, das die Probleme nur beim Übersetzen und Einrichten des Rechenprogramms auftreten, nicht aber bei der 3D-Grafik.

      Gruß
      Jürgen