Realtime embossing in Flash

[kH_]

Leek me leuk om dit ook even in deze thread te melden. Een uitwerking van mijn idee om een 3D embossing effect mogelijk te maken in Flash:

REALTIME EMBOSSING (http://n.domaindlx.com/kaHu/emboss_kH.html)

[Roenes]

Even voor de designleken onder ons? Wat is een emboss effect? :)

[kH_]

Haha, kijk naar het effect ;)

Nou ja...vooruit...embossing is het simuleren van een 3D weergave van een 2D plaatje. Het is net zoiets als bumpmapping.

Je kunt in de betere hobbyzaken bijvoorbeeld ook emboss sets kopen. Misschien ken je die posters ook nog wel, waar bij bijvoorbeeld een leeuw of wat voor dier/voorwerp/voorstelling dan ook als relief is weergegeven. Dus het is een soort relief ;)

Het leuke van mijn vondst is het feit dat dit eigenlijk pas in Flash Player 8 zou moeten kunnen, aangezien het een filter effect is wat op pixels werkt. Mijn vondst werkt echter simpel met de R,G en B kanalen dus werkt ook al vanaf Flash Player 5 ;)

Duzzz...het is een gewone JPEG die in relief wordt weergegeven. Het relief wordt realtime aan de hand van een sinus/cosinus golf weergegeven :D

En nu hoop ik dat het wat duidelijker is geworden en zo niet....zeg nou zelf, het ziet er relaxt uit :D

Ff voor de duidelijkheid, hier jouw Yoshi met het emboss effect weergegeven:

http://n.domaindlx.com/kaHu/yoshi.png

[behived]

ziet er cool uit, maar leer hier wel niets uit natuurlijk (lees: leg even uit hoe het werkt...)

[kH_]

Owk:

Stel je hebt een gewoon plaatje. Nu kun je ieder pixel zien als een kleur, maar je kunt het ook zien als een hoogte. Misschien dat je wel eens hebt gehoord van voxel-spacing, zo niet...doe dan net alsof je niet hebt gelezen dat ik dat heb gezegd.
Stel je hebt voor ieder pixel in het figuur een naald, die net zo lang is als de kleur van de pixel. Dus een pixel met R,G,B waarden 12,12,12 heeft een hoogte van (12+12+12)/3 CM om maar een voorbeeld te noemen (je kunt die lengte natuurlijk op tig manieren berekenen, ligt maar net aan het effect wat je wilt bereiken).
Als je nu de INVERSE van het plaatje neemt, dan is voor ieder pixel een lange naald dus juist een kleine naald. Voorbeeldje:
R,G,B van origineel is 200,200,200 --> lengte naald=200
R,G,B van inversie is dan dus 255-200,255-200,255-200=55,55,55 --> lengte naald=55

Dit moet te snappen zijn dacht ik ;)

Nu kun je dit verschil in hoogte (200 in relatie tot 55) dus effectievelijk zien als het diepteverschil. Nou, dat is de sleutel (voor mij is dat allemaal logisch, als dit voor de lezer niet zo is, geef het maar weer aan :)) tot het effect. Je hebt dus twee plaatjes nodig, 1 inverse en 1 gewone. De gewone leg je onderaan en de inverse bovenaan. Je snap natuurlijk, dat het diepteverschil niet duidelijk is, wanneer beide plaatjes direct op elkaar liggen. Je moet dan ook het bovenste plaatje zowel in de X als de Y (ligt eraan wat voor soort diepte je wilt) iets verschuiven. Op die manier komt de inverse van een pixel vlak naast het origineel te liggen en het leuke is dat je hersenen dit interpreteren als diepte (denk aan bumpmapping voor de mensen die het kennen!!). Wat je nu nog moet doen is een beetje spelen met de Alpha waarde van het bovenste plaatje, aangezien je natuurlijk ook iets van het onderste plaatje moet kunnen zien. Het is heel grappig om te zien, dat bij een bepaalde Alpha waarde je hersenen ineens zeggen..."hee, dat is diepte wat ik zie, dat is relaxt zeg...laat ik dat maar eens even aan deze mens 'zien'".

Ok, that's it dus. Simpel he??

[Roenes]

Vet gedaan moet ik zeggen en de techniek is ook erg goed! (na de uitleg nu ook duidelijk!)

Hoe ben je op dit idee gekomen? En dan vooral de theorie? Want dit is toch wel revolutionair te noemen lijkt me. Aangezien het pas zou kunnen vanaf FP8 en jij het al mogelijk maakt in FP5 :)

[kH_]

Tja, ik heb het gewoon zomaar bedacht, nadat ik dat inversie van kleuren voorbeeldje zag. Toen zat ik na te denken, goh....kun je daar niet meer mee en zo kwam ik er eigenlijk op, door ook een beetje na te denken over hoe het samenspel van kleuren nu eigenlijk werkt.

[TheDutch]

Moet deze topic niet in "Showcase" staan? :).

[kH_]

neu, tis eigenlijk niet een groots iets wat geshowed moet worden dacht ik, maarja...mag van mij best verplaatst worden hoor :)

[TheDutch]

Je bent te bescheiden ;).

[Dauntless]

't Is verplaatst naar Showcase. Ik wou het eerst verplaatsen naar ActionScript showcase, maar daar hoort hij niet echt omdat je geen AS showt, alleen het effect:).

Tussen haakjes: Mooi gedaan!!! :)

[kH_]

ah, toch verplaatst. Dank jullie voor de leuke reacties!

[ath92]

wow man! nooit geweten dat zoiets kon! maar euhm...... verliest het plaatje wel zijn kleur als je het effect eroverheen gooit?

[kH_]

Nou nee, maar dan ziet het effect er wel beter uit. Het kan namelijk ook zo:

http://n.domaindlx.com/kaHu/yoshi.png

Dat bedoel je he? ;)

[TheDutch]

Interessant hoe het werkt op tekst :)
Klik hier! (http://www.flashdevils.com/erwin/emboss_kH.swf)

[kH_]

Heej, ziet er leuk uit zo inderdaad! Je moet alleen wel ff een mask er overheen gooien, zodat je dat bewegende plaatje niet ziet bewegen (die overstekende randen).

Btw...het schokt als de *****, op hoeveel FPS heb je em ingesteld??

Toch wel grappig effectje. Je ziet wel dat het effect het mooist te zien is bij een X en Y offset van maximaal 2 ongeveer.

[TheDutch]

Ik heb dezelfde FPS als die van jouw, 60FPS. In een standalone player werkt hij wel lekker vlot. Zal wel een browser iets zijn...

Dat masker laat ik voor nu even weg, gaat om het idee ;).

Leuk spul :D

[Roenes]

Ik heb dezelfde FPS als die van jouw, 60FPS. In een standalone player werkt hij wel lekker vlot. Zal wel een browser iets zijn...In de browser lopen swf's idd velen malen langzamer. Dit valt vooral op bij swf's met een hoge FPS zoals deze :)

[TheDutch]

Het is inderdaad zo dat de FPS veelal onjuist is. In een browser bijvoorbeeld haalt het de opgegeven FPS bij lange na niet altijd, vooral wanneer je hoger dan 10FPS gaat. In een Flash Standalone Projector vaak juist net te veel dan je hebt opgegeven. In een browser is er bijvoorbeeld ook geen verschil tussen FPS waarde van 51 to 81, die draaien allemaal op 50 FPS. En een FPS boven de 100 gaat in een browser maar tot 100. Een laatste; een FPS boven de 24 zal niet constant zijn. Allemaal dingen waar je best rekening mee moet houden wanneer FPS van belang is.