Toon posts:

WebGL geen idee waar te beginnen

Pagina: 1
Acties:

Vraag


  • pveld
  • Registratie: Juli 2010
  • Laatst online: 31-10 23:53
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

Alle reacties


  • Woy
  • Registratie: April 2000
  • Niet online

Woy

Moderator Devschuur®
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.

“Build a man a fire, and he'll be warm for a day. Set a man on fire, and he'll be warm for the rest of his life.”


  • pveld
  • Registratie: Juli 2010
  • Laatst online: 31-10 23:53
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
  • Registratie: Mei 2008
  • Niet online
> 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.

Freelance Unity3D developer




Google Pixel 7 Sony WH-1000XM5 Apple iPhone 14 Samsung Galaxy Watch5, 44mm Sonic Frontiers Samsung Galaxy Z Fold4 Insta360 X3 Nintendo Switch Lite

Tweakers is samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer onderdeel van DPG Media B.V.
Alle rechten voorbehouden © 1998 - 2022 Hosting door True

Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee