GLSL/JavaScript: GLSL-Sandbox für "Einzelbildmodus" anpassen ?!

[0xMöbius]

Moin!
Also erstmal: Ich kann mich nicht entscheiden, ob es sich eher um "Grafikprogrammierung" oder "Webzeugs" handelt. Vermutlich doch das andere..;)

Also jeder hier kennt bestimmt die GLSL-Sandbox www.glslsandbox.com, deren Quellcode es hier gibt https://github.com/mrdoob/glsl-sandbox.
Im Ordner "static" sollte alles relevante enthalten sein.

Ich bin schon längere Zeit dabei, nebenbei auf Lichtstrahlen zu wandeln. Und so langsam verlasse ich den Echtzeit-Bereich, (ja - billig-PC)...
So ist das halt früher oder später, wenn man immer mehr Hilfs- und Sekundärstrahlen berechnet.
Ist aber nicht tragisch, da ich eh nur auf ein Standbild aus bin.
Das Problem dabei ist die GLSL-Sandbox. Die hat leider keinen Pause-Knopf. Es wird also Bild für Bild berechnet, selbst wenn ein Einzelbild 5 Minuten dauert.
- Eine sehr zuverlässige Methode seinen PC auf Eis zu legen..

Soo, jetzt habe ich mir gedacht, einfach mal den Code anschauen.. Habe ich erwähnt, dass ich bislang nichts mit HTML/JavaScript gemacht habe!?
Naja zu HTML/CSS habe ich mir gerade ein kleines Tutorial reingeschraubt. Immerhin weiß ich jetzt was wozu gedacht ist.
Nur JavaScript scheint wohl am umfangreichsten zu sein. Das habe ich dann auch festgestellt, als ich auf GLSL-Sandboxs "codemirror.js" gestoßen bin. Bis dahin war ich noch optimistisch, wegen der Kürze der Dateien..

Jetzt zur eigentlichen Frage/Bitte:
Ist es ohne großen Aufwand möglich, noch einen "Pause"-/"Render-On-Click"-Knopf hinzuzufügen?
Bonus wäre außerdem noch ein "In Datei rendern".
Und das Sahnehäubchen ein "In mehrere Dateien rendern" (um zB. versch. Farbkanäle parallel zu rendern/speichern). Ok, bei dem Punkt würde ich jetzt aus dem Stehgreif schon bei OpenGL scheitern, wird aber irgendwie gehen..

Also, ist so ein "Pause"-/"Render-On-Click"-Knopf OGL-ES 2 / WebGL - und HTML/JS - seitig möglich (keine Ahnung welche Restriktionen es da gibt) ?
Und falls das, für jemanden, der sich damit auskennt, einfach ist: Kann mir wer sagen, wie das geht ?!

Also gefühlsmäßig müsste man da was ider der "index.html" abändern. Zumindest hoffe ich das, da ich in der Datei noch am ehesten durchblicke..
Ich tippe auf Zeile 864 "function animate()" ...
Zeile 147 sieht auch interessant aus: "window.setTimeout( callback, 1000 / 60 )"
Ich habe aber keine Ahnung, was/wo "window", oder "callback" genau ist .. und warum gibt es Funktionsdefs in Funktionen ??

Naja,
MfG
0xMöbius

[rapso]

schreibst du einen raytracer?

[0xMöbius]

Naja, Raytracer wäre wohl etwas übertrieben. Abgesehen von den Schatten, ist die Beleuchtung eigentlich klassisch. Aber für weiche Schatten ist das schon ganz nett - wenn man nicht gerade Echtzeit braucht..

Ich habs inzwischen schon hinbekommen. War einfacher als befürchtet..
Das Rendern der Szene dauert jetzt schon ein paar Sekündchen, aber eigentlich kann ich mich jetzt austoben. Dann dauerts eben ein paar Sekunden mehr..

PS. JavaScript ist die Hölle.. Typsicherheit? Eindeutigkeit? Nachvollziehbarer Parser? - Wer braucht das schon..
Das kenne ich so nur von diverser Mathesoftware. Aber da ist das nicht so schlimm, weil der Code normalerweise nicht aus ~8000 Zeilen besteht. Außerdem gibt es da auch nur 1-2 Basistypen: reelle Zahlen und Strings.. Bei JavaScript muss man ja immer Angst haben, nicht gerade eine bereits vergebene Variable erneut zu vergeben, oder aus einem bool sonstwas zu machen. Außerdem läuft nen Skript für mich von oben nach unten. Was der Parser hier genau macht, weiß wohl nur er selbst.. Ich habe mal versucht, eine Variable als struct zu nutzen, genauer gesagt 2. Bei einer gings, bei der anderen nicht. - Lustig.
Interessant ist, dass man z.B. Funktionen je nach Bedingung unterschiedlich definieren kann. Interessanter ist, dass nicht jeder Browser damit klar kommt. Einen Schritt nach vorne, zwei zurück.. Dann doch gleich die Bedingung in einer Funktion verwursten..
Hoffentlich fehlt mir nur ne ordentliche JavaScript-IDE oder so.. Also der Einstieg in C++ war jedenfalls einfacher.

[XMAMan]

Gibts keinen Weg, dass du in einer Hochsprache entwickelst und daraus wird dann der JavaScript-Code generiert?

Ich dächte, ich hätte sowas in Zusammenhang mit WebGL oder so schonmal gehört.

[rapso]

im falle eines Raytracers schlage ich vor, dass du pro frame nur einen pixel oder eine zeile von pixeln renders, dann hast du regelmaessig updates.

zum browser coden nutze ich: http://kripken.github.io/emscripten-site/docs/getting_started/index.html

mittlerweile kann man damit auf jeder platform (linux,osx,win) einfach das sdk laden und zu js compilieren.

es gibt noch cheerp, hab ich bisher nicht probiert: http://leaningtech.com/cheerp/