WebGL geen idee waar te beginnen

[pveld]

Beste mensen

Ik heb de klok wel horen luiden, maar ik heb overduidelijk geen idee waar de klepel hangt. Dus ik ben op zoek naar wat pointers om me op weg te helpen.

Ik ben op zoek naar een manier om bepaalde druktechnieken een online voorbeeld te genereren aan de hand van bronbestanden aangezien het daadwerkelijk drukken van die voorbeelden als samples te bewerkelijk en te duur is.

De druktechnieken zijn:
- Het toevoegen van glanzende folie, al dan niet met 3D effect aan een gedrukt vel papier
- Het toevoegen van glanslak, als dan niet met 3D effect aan een gedrukt vel papier

Ik heb een gif gemaakt van een voorbeeld met die techniek:


Ik vermoed dat ik voor het dynamisch creëren van dergelijke samples uitkom op dingen als WebGL en aanverwante libraries. Maar dat is (voor nu) behoorlijk buiten mijn comfort zone.

Het goede nieuws is dat ik redelijke vrijheid heb om de benodigde "halffabrikaten" te maken. Dus de drukdata en los daarvan de data waar folie of vernis moet komen. Maar ook hier ontbreekt me de kennis om dit bruikbaar te maken in een webbrowser.

Ik heb al wat rondgekeken op de github van three,js. Daar heb ik iets gevonden wat een vergelijkbaar 3D effect geeft. (https://threejs.org/examples/#webgl_materials_bumpmap) Maar hoe nu verder? Ik heb die source bekeken en kon niet 123 bedenken hoe ik dat ombuig naar een vel papier met 3D en glans effecten.

Is wat ik wil uberhaubt mogelijk? Waar kan ik het beste beginnen? Of moet ik er helemaal niet aan beginnen en lekker een specialist inhuren?

Dank, Peter

[Woy]

Waar wil je nu eigenlijk precies hulp bij? Ik heb het idee dat WebGL niet zozeer het probleem is waar je tegenaan loopt, maar überhaupt hoe je dmv computer graphics een weergave kunt maken die de werkelijkheid benaderd.

[pveld]

Woy schreef op donderdag 27 augustus 2020 @ 11:39:
Waar wil je nu eigenlijk precies hulp bij? Ik heb het idee dat WebGL niet zozeer het probleem is waar je tegenaan loopt, maar überhaupt hoe je dmv computer graphics een weergave kunt maken die de werkelijkheid benaderd.

In principe is dat waar. Laat ik het anders formuleren. Na weken puzzelen en lezen, heb ik de indruk dat het benaderen van die werkelijkheid in een browser neerkomt op het gebruik van WebGL. Folie en vernis: texture maps? 3D effect: bumpmaps... Maar nogmaals, dat zijn aannames want dit is totaal niet mijn specialiteit.

Dus ik ben op zoek naar iemand die zegt of dit kan of niet, of dit klopt of niet en of dit een richting is om verder te onderzoeken of niet. Alle verdere aanwijzingen zijn mooi meegenomen maar ik ben ook niet te beroerd voor een stuk zelfstudie of trial & error.

[TJHeuvel]

> Is wat ik wil uberhaubt mogelijk?
Ja hoor, alles kan

> Waar kan ik het beste beginnen?
Lezen lezen en nog meer lezen, maar daar was je al aan begonnen. Een aantal termen welke van pas kunnen komen zijn Physically Based Shading, dit is een techniek van tekenen welke (zoals de naam doet vermoeden) tracht de realiteit na te bootsen. Mocht je dat wiel zelf opnieuw willen uitvinden, een BRDF is wat je wilt begrijpen.

Gelukkig is dat niet echt nodig, ThreeJS alle moeilijke materie al voor je opgelost. Ze noemen het hun Standard material, en de manual zit vol met links naar handige artikelen.

Om alvast wat te spoilen, je wilt een materiaal met een hoge specular, dit maakt het glanzend en zal het de omgeving reflecteren. Omdat we er niet vanuit kunnen gaan dat iedereen een RTX 2080TI video kaart heeft moeten we vantevoren uittekenen hoe de omgeving eruit ziet, zodat we dit in de reflectie kunnen weergeven. Dit is een environment map, het voorbeeld laat goed zien wat er gebeurd, nl dat de achtergrond en omgeving een statisch plaatje is en dit gebruikt word in de reflectie. Rechtsbovenin kan je de `metalness` waarde omhoog slepen, dan lijkt het al heel erg op wat je wilt.


> Of moet ik er helemaal niet aan beginnen en lekker een specialist inhuren?
Misschien wel ja, dat kan je het beste zelf evalueren. Overigens heb je misschien niet genoeg aan 1 programmeur, maar heb je ook iemand nodig die de bovengenoemde maps kan maken. Een (3d) artist kan daar mee helpen. Mocht je het ook in een VR/AR omgeving willen, kan je ook nog kijken naar het Aframe framework.