Metallic-Roughness-Creator

Byte-Welt - Projekte / Projects Allgemeines zu Projekten / Generals
1

Für das PBR in glTF (Physically Based Rendering im GL Transmission Format) werden Informationen über die Oberflächenbeschaffenheit in Texturen abgelegt.

Es scheint “üblich” zu sein, dass dabei die jeweiligen Tools (z.B. der “Substance Painter”) die “Metallic” und “Roughness”-Informationen getrennt rausschreiben.

Für glTF müssen sie aber im Rot- bzw. Grün-Kanal EINER Textur kombiniert werden.

Dafür hab’ ich mal ein hoch-interaktiv-intuitives :rolleyes: Online-Tool zusammengepfuscht:

Liegt unter https://javagl.github.io/MetallicRoughnessCreator/MetallicRoughnessCreator.html

(Viel von der Implementierung ist sicher kagge. Bei einigem weiß ich das auch, und bei einigem ist es mir egal. Trotzdem bin ich für Verbesserungsvorschläge offen. Dass es in JavaScript offenbar mal wieder nicht möglich ist, den elementarsten Mist zu machen, wie etwa einen “Save image as…”-Button, hat mich schon wieder zu einigem Kopfschütteln veranlasst, aber das wird sicher seine Gründe haben :rolleyes: )

2

Die Sandbox? Du bietest ja ein File zum Download an, das will der Browser wohl nicht JavaScript überlassen. Wäre nicht ein Redirect in einem zweiten Tab eine (unbequeme) Lösung?

3

Nun, es gibt da wohl einige Optionen aber… räusper … tief lufthol… unbehanglich lange rum-räusper … Wenn man einen Link hat, der zu einer (“binär”)-Datei führt, und man klickt da drauf, fragt der Browser (je nach Einstellung) “Was willst du damit machen, wo hin willst du die speichern?”. Wenn man danach sucht, findet man absurd-quirkige Dinge: “Ja, erstell’ ein <a>, setz’ das href, und führ’ dann a.click() aus” (funktioniert nicht). Oder “Erstell’ ein <a> mit ‘download’-attribute” (funktioniert nicht), oder “Ersetz’ das ‘image/png’ in der Daten-URI durch ‘application/octet-stream’” (funktioniert nicht). Warum es unmöglich sein soll, einen Button zu machen, der einen “Save as…”-Dialog aufgehen läßt, erschließt sich mir nicht (und das kann mit der Sandbox nichts zu tun haben - mit Rechtsklick+SaveImageAs kann man ja auch einen Dialog aufmachen, um das ganze irgendwo hin zu speichern…). Es kann wohl so bleiben, wie es ist, es gibt schlimmeres.

4

Also der Download Tag funktioniert bei mir prima unter Edge, Firefox und Chrome; also den wichtigsten Browsern (74 %), ausgeschlossen IE 11 (20 %).
Aber ganz ehrlich, die Leute die dein Tool nutzen verwenden nicht den IE.
Man muss sowieso für IE Berge bewegen weil er sich so an ziemlich alle Standards nur vage oder einfach überhaupt nicht hält.

5

Also ein


var a = document.createElement('a');
a.href = '/files/target.pdf';
a.download = true;
a.click();

hatte auf FF erstmal nicht funktioniert (kein Effekt). Und auch sonst scheint es da nur irgendwelche Workarounds zu geben. Ob und wann man dieses Ersetzen mit “application/octet-stream” machen muss, ist mir auch nicht ganz klar. Aber alles nicht so wichtig: Verwenden wird das wohl kaum jemand, und wenn doch, dann mag er gefälligst Rechtsklicken. (Ich hatte ja auch Ambitionen wie einen “JPG Quality Slider” oder einen “Busy-Indicator” solange er das PNG erstellt (was laaaange dauern kann), aber dafür müßte mir noch etwas langweiliger sein…)

6

a.download = ‘target.pdf’;

7

Hatte ich auch probiert (mit “.png”). Das Problem ist, dass “a.click()” anscheinend nichts macht. Was man dann mit Websuchen schnell findet ist


var evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(evt);

aber vermutlich würde das Sonntags bei Vollmond auf dem IE auch wieder nicht funktionieren und… wieder mal unbehaglich lange räusper … sooo wichtig ist das nicht.