Ziel

Mein Ziel ist es 64 Noise Animationen in einem 8x8 Grid im Web mit three.js darzustellen. Über das Grid lege ich ein Video, dass alle Noises verformt werden und man somit das Video in diesen erkennen kann. 
Inspiriert dazu hat mich vor allem diese Seite: https://hiddeninnoise.com/

Ob und wie das möglich ist erkunde ich in diesem Projekt.

Erste Versuche

Arbeitsweise

Zuerst Arbeitete ich mit einem einfachen Objektmodifikator in Blender (siehe erste Versuche).Dann stieg ich auf den Shadereditor um, welcher aber nur in einem langsameren Renderer funktionierte. Schließlich begann ich mit Geometry-Nodes mein Objekt zu verformen.

Dabei legte ich mir ein Template (1) an, was von Noise zu Noise wuchs.
Dies besteht vorallem aus diversen Loopern (2). Dabei habe ich welche für Normale Wertekurven, Glitches, Sinuskurven, Gradrotationen und Steps mit einer Geschwindigkeit von 120 Bpm.
Das zweite Element ist Das Video-Overlay (3). Damit kann ich das vorher gerenderte Video skalieren und verschieben um den richtigen Ausschnit für jeden Noise zu bekommen.
Zudem kommt ein Output (4) und Natürlich die Noise Texturen an sich (5). Manchmal auch komlexer (6).

Noises

Die ersten Noise Animationen mit Geometry-Nodes

Noises für das Endprodukt werden weniger für sich stehen müssen, weswegen ich versuche sie jeweils mit einem simpleren Konzept zu gestalten.
Die masse bringt den Kontrast!

Noises mit schärferem Konzept

Overlay Video

Beim Overlay Video benutze ich einen anderen Renderer. Dieser braucht pro Bild sehr viel länger, lässt mich aber Volumetrics und Refractions benutzen. Somit werde ich auch beim Endergebnis hauptsächlich weiche Kanten bekommen.
Um einen noch interessanten Effekt zu bekommen begrenze ich die Renderzeit pro Bild und lasse das Bild somit frühzeitig denoisen. dadurch erzeuge ich digitale Artefakt und bekomme einen leichten Glitch-Effekt.

Zwischenegrebnis

Todos

Um zum Endergebnis zu kommen müssen noch einige Hürden überwunden werden.

1. Geometry Nodes in Shapekeys umwandel um diese als ein glb zu exportieren.

2. 64 Noises fertig stellen (nur noch 54 to go yeah)

3. glb Datein mit three.js in meinen Code laden

4. falls 1. nicht klappt werde ich die Texturen als Gifs exportieren und in meinen Code laden. (Gif optimierung für kleinere Datein)

5. Hosting?

Forführung

Über die letzten Wochen habe ich weitere 54 noises erstellt. Und eine Ansicht dafür programmiert. Dafür habe ich eine kleine Webseite gemacht programmiert in welcher man diese in einem 8x8 Grid sehen und mischen kann. 

Diese befindet sich in den Zusätzlichen Materialien des Incom Projektes als .zip Datei.

Endergebnis

Das Endergebnis kann man am besten begutachten, wenn man diese Datei herunterlädt und die Index.html aufruft.

Endergebnis

Fazit

Bei diesem Projekt habe ich einige Punkte anreißen können die mich schon eine Weile interessiert haben.
Ich habe in Blender die Geometry Nodes benutz um die Noise Animationen zu generieren und eine simple Webseite programmiert um diese darzustellen. 
Mein eigentlicher  Plan war es die Animationen in Three.js im Web zu zeigen. Dies war aber leider nicht möglich, da man diese nicht als .glb Datein exportieren konnte. Somit renderte ich die Animationen und  lernte dabei auch, dass .webm Videos sehr performant im web sind.
Mit diesen programmierte ich dann. Ich lerne dabei die Grundlagen von HTML, JS und CSS. Dabei war das Hosting der Webseite kein Anspruch. Die Daten der Animationen sind zwar schon komprimiert, jetzt aber noch sehr groß. Falls man diese Webseite hosten würde, könnte man noch die Dateigröße signifikant verkleinern, dafür aber auch an Qualität einbüßen.
Da dies nicht mein Anspruch war, entschied ich mich es dabei zu belassen und somit eine bessere Präsentation zu gewährleisten.