Med WebGL och Molehill runt omkring så finns en ny lekplats för oss flashutvecklare. Först kände jag mig lite stressad över det faktum att jag måste konkurrera med människor som gjort detta i flera år på skrivbordet, konsoler, mobiler och med plugins som Unity. Men det är bara bra. Det finns massor av information och kunskap runt omkring soos som väntar på att vi ska konsumera det. Vi kan skärpa
Mer tid för att hålla på med Three.js och WebGL. Det primära målet är att få en djupare förståelse för shaders genom att bara hålla på lite med det. Om du vill veta grunderna om shaders i three.js rekommenderas det att du läser mer om det online. Men i det här inlägget ska jag försöka förklara några av de saker jag har lärt mig under processen hittills. Jag vet att
Det nya Chrome-experimentet ”Cube Slam” är en påminnelse om det förflutna. Kalla det vad du vill, men Cube Slam är egentligen bara Pong. Det är förstås multiplayer om du så vill, men det kan även spelas mot en björn som heter Bob. Den grova grafiken har en mycket ren, sentimental kvalitet. Naturligtvis är Chrome-experiment till för att testa nya coola funktioner, inte bara för att få oss att slösa bort
Introduktion Urban Jungle Street View är ett experiment för att leka med djupdata i Google Steet View. Det är så enkelt och kraftfullt att använda Google Maps API. Så mycket data i dina händer. För stilen på kartan används guiden Styled Maps för att se vilka olika typer av inställningar det finns och exportera inställningarna som JSON. Ett tips är att stänga av alla funktioner först med {”stylers”: [ {
Några av er har redan sett de senaste experimenten som jag publicerat. Inget nytt sedan dess, jag vill bara lägga upp det här också. Det här är andra gången jag provar three.js. Det är ett mycket kompetent ramverk med massor av funktioner och exempel tillgängliga. Om du har en idé så går det blixtsnabbt att sätta ihop en snabb demo. Inspirationen till detta experiment är planterad i min egen trädgård.
Bakgrund Jag har äntligen börjat leka med Unity3D. Första målet är att få en överblick över hur shaders fungerar. Detta kommer att vara praktiskt oavsett vilken plattform jag sen väljer som mitt mål. Min favoritmetod när det gäller att lära sig är att importera saker från ett annat språk. Här får jag möjlighet att lära mig två nya språk samtidigt. Och allt ”trial and error” inblandat inspirerar mig ofta att
Träd och vegetation Den här delen var anledningen till att jag började med allt det här. Det är tack vare Den Ivanovs arbete och hans experiment. Att skapa 3d-objekt manuellt i papervision3D är lite för avancerat för mig. Jag lade till några funktioner och gjorde det möjligt att anpassa det. Här är några exempel: Jag använde 3d studio max för att skapa de olika bladen. Du kan justera bladet med
Karta För att få kartan att se ut som en gigantisk bottenplatta användS ett rutat transparent texturöverlägg. När du flyttar mitten av kartan så uppdateras lagrets bakgrundsposition för att matcha kartans rörelse. När du zoomar in i på den så ändras storleken på bakgrunden. Utöver det läggs det först en gradientfyllning för lite glans, och sedan ”tree js” lagret ovanpå. Detta innehåller några träd och buskar, och även landmärken på
Okej, låt oss lägga till lite vatten. Denna gång i en pool. Ett sätt skulle vara att ställa in varje vertex under en viss nivå till samma y-värde, men jag ville också styra geometrin under ytan. SplitMesh-verktyget i papervision löste det för mig. Först delade jag nätet och la sedan till ytterligare ett plan i den korsningen. Det var lite knepigt att få z-sortering rätt när man förhandsgranskade alla delar
Jag snubblade över en intressant mönsterskapande process häromdagen, kallad reaktionsdiffusion. För att citera wikipedia: ”Reaktions-diffusionssystem är matematiska modeller som förklarar hur koncentrationen av ett eller flera ämnen fördelade i rymden förändras under inverkan av två processer: lokala kemiska reaktioner där ämnena omvandlas till varandra, och diffusion som orsakar ämnen som sprids ut över en yta i rymden.” Det finns många olika typer och varianter med namn som gör att det
Cube slam ett ansikte mot ansikte ”pong”-inspirerat spel som du kan spela antingen mot en ai eller dina vänner var som helst i världen – genom att helt enkelt dela en unik länk. Huvudsyftet med att skapa cube slam var att visa världen förmågan hos webrtc som gör det möjligt för användare att kommunicera med ljud och video i webbläsaren Google Chrome. Utvecklarna var väldigt säkra på vad de ville
Prestanda var verkligen viktigt eftersom vi behövde göra plats för spelmotorn och speciellt webRTC-kodningen/avkodningen. Jag kan nämna några av de saker jag implementerade: Inaktiverad kantutjämning En uppenbar sådan. Denna parameter har kopplats på/av så många gånger under utvecklingen. Jag ville verkligen ha det aktiverat, eftersom de många raka linjerna som kvadratiska objekt skapar, ser ganska taggiga ut, speciellt med alla långsamma kamerarörelser. Men prestandan på långsammare maskiner fick oss att
Vegetationsfördelning Nästa steg är att fördela träden vi nyss skapade i terrängen. Jag använder höjdkartan som källa. Jag skapar en array med objekt som representerar alla pixlar. Anledningen till detta är att jag nu kan filtrera och sortera dessa punkter. Filtrera först bort alla punkter i det definierade intervallet, baserat på y-värdet och intervallet som definieras i editorn. Sedan, sortera ut ett specificerat antal slumpmässiga punkter, sortera dem på z-värdet
Jag inser att alla mina inlägg hittills har en sak gemensamt. Perlin-ljud. Så varför göra ett undantag den här gången. Kommer du ihåg inlägget om brand? Få animationen att gå åt motsatt håll, ändra färgerna och några parametrar, lägg in en textur och blanda med blendmodes och filter och du får dig ett annat element av naturen. Vatten. När jag spelar förstapersonsskjutare som i Just Cause, Far Cry eller Uncharted
Låt oss skapa landskap Det är äntligen dags att återge ett landskap med alla de olika delarna som jag har täckt hittills. Jag är verkligen nyfiken på andras produktioner och renderingstid, så ladda upp din egen den till galleriet när du skapar ditt eget landskap. Galleriet kommer att publiceras så fort jag fått in en samling bilder. Det här verktyget är i en mycket experimentell fas och dessa applikationer använder
Jag har några förbättringar för dig sedan sist! Nytt i den här versionen är terräng, en skidåkare och lite snöpartiklar. I denna demo, har jag försökt att kombinera olika värden för att se hur åkaren och snön påverkas. Alla parametrar är sammankopplade, så man kan få ganska coola resultat. Terräng Jag nämnde att jag kunde lägga till effekter till varje lager i höjdkartan/texturkomp. Jag har nu lagt till perlinbrus till
Ett sista inlägg innan semestern. För de som undrar vad det handlar om: Det kallas en ”Julapelsin”, en dekoration som vi brukar göra i Sverige och en del andra europeiska länder runt jul. Man trycker in kryddnejlika, den där fina väldoftande kryddan, i en apelsin eller clementin. Bara slumpmässigt eller i strukturerade mönster. Sätt sen några sidenband runt den och häng upp den någonstans för en trevlig julstämning. Försök att
Google har lanserat Chrome-experimentet Cube Slam, ett pongspel för att demonstrera webbläsarens videochattstöd via WebRTC. Google har lanserat ett Chrome-experiment som heter Cube Slam, en version av pong, som låter dig spela ansikte mot ansikte mot dina vänner oavsett var de är i världen. Det verkliga målet här är att demonstrera företagets webbläsarimplementering av WebRTC. För de som inte vet så är WebRTC ett projekt med öppen källkod som låter
Procedurgrafik är verkligen min favorit. Konceptet att skapa visuella saker med bara kod. Kommer verkligen väl till pass när du är en skit-designer och fortfarande vill göra visuella saker. Här kan du se resultatet av ännu ett experiment på denna bana. Det är en ögonskuggare för att skapa procedurögon. Den valda 3D-motorn är Away3d. Jag använder ett CompositeMaterial som består av ett PhongMultiPassMaterial och ett SphericEnvMapPBMaterial (för miljöreflektioner). Bitmappen som
Det här är en nyinspelning av ett gammalt experiment med procedurögon som gjorts för länge sedan. Den här gången är det gjort med three.js och shaders. Så i princip börjar det med sfärgeometrin. Topparna nära kanten av z-axeln har en inverterad z-position i förhållande till den ursprungliga radien, och bildade iris som en konkav parabolsk skiva på sfären. Shadern gör då sin grej. Genom att läsa av uv-koordinaten och ytpositionerna
Tja, vad jag just har förklarat hittills så är det vad vi slutade med att göra i projektet, grafikmässigt. För att komma till den punkten var processen, som alltid, full av iterationer och förändringar, försök och framför allt misstag. När vi startade projektet så baserades idén på rörelsespårning som ingångskontroll. Vi började utforska det som primär kontroll plus en sekundär kontroll med mus eller tangentbord. Vi fick rörelsespårningen att fungera
Det första steget var att skapa en terräng att leka med. För det behövde jag en höjdkarta. Det finns många sätt att skapa dem, som ”The Diamond-Square Algorithm”, fraktaler, rita för hand eller till och med använda en verklig höjd från satellitdata. Men ett enkelt och vanligt sätt att få en procedurterräng är att använda Perlin-brus, en funktion inbyggd i Flash. Att generera en höjdkarta och tillämpa den på ett
Skapa ett antal snöbollar och sätt ihop dem till en snögubbe. Leden skapas genom att rita in i en duk som skickas in i markskuggaren som en höjdkarta. I vertex shader är hörnen förskjutna längs y-axeln och i fragment-shadern används den för bump-mapping. Snön blir också lite mörkare när den är under en tröskelhöjd. Spårets form definieras av den radiella gradienten som används när man ritar till duken. Det är
Reflektioner Om du har märkt det så är marken något reflekterande. Detta görs med en blandning av enkla knep. Vi har inte att göra med ray-traced rendering här så vi måste använda geometri och shaders. Ett sätt kan vara att använda schablonbufferten medan du renderar för att använda marken som en mask och invertera all geometri längs y-axeln. Istället är marken gjord av ett plan där vi skapar vår lokala
Det har varit mycket att ta itu med den senaste tiden så jag har hållit en låg profil på nätet. Men igår kväll så gjorde jag äntligen ett litet experiment. Det är en liten leksak att göra modeller gjorda av kuber i away3d. Eller faktiskt, det finns bara vanliga plan. Jag misstänker att det borde vara mycket snabbare om jag skapade geometrin inuti ett enda objekt, men detta var tillräckligt
Spegeleffekten använder också ett eget renderingsmål. Du kan prova effekten genom att trycka på ”M” i spelet. Scenen renderas till detta ett renderingsmål och sätts som en textur på ett plan som matchar skärmstorleken som vi kan animera. När övergången är klar är body-taggen utformad med en ”transform scaleX(-1)” och vi kan byta till vanligt renderingsläge igen. En bonus är att all html är inverterad också. Testa det, men det
Ett experiment från Twitter jag hittade för ett halvår sedan, men har glömt att lägga till det här. Det är i princip samma experiment som eldbollen, den här gången med en kamera inuti nätet och lite extra justeringar Det är en av de tidiga testprototyperna. För att bearbeta bilden och isolera rörelsen använder jag en modifierad version av glfx.js. Några små tips angående överläggsstrukturen. Om du vill att ett överlägg
Himlen är bara en vanlig sprite med gradientfyllningar. Ville hålla polygonantalet på lägsta möjliga och göra processen snabb. Ett lager för himlen och ett för solen. Ett mer exakt sätt att lösa detta skulle vara en vanlig sky-box, men jag använde en fast vinkel med kameran, för jag tyckte det var överdrivet. Och kanske svårt att skapa himlens textur dynamiskt. Molnskiktet läggs inuti skyspriten med rotationX inställt på 80. Det
Chrome-experiment: Cube Slam låter dig spela mot dina vänner medan du ser dem. Föreställ dig att blanda det klassiska spelet Brick Breaker och fotboll. Det är ungefär vad du får med det nya spelet Cube Slam för Chrome. De nya Chrome-experimentet låter användare spela och se varandra oavsett var de befinner sig i världen. Man kan helt enkelt dela en länk med en vän och spelet är igång. Det finns
Förra gången visade jag dig renderingsprocessen för himlen. Jag kommer nu att lägga till en enkel och vanlig atmosfärisk effekt, dimma. Det finns inga andra föremål än terrängen och himlen än, så det här inlägget är ganska så kort. Genom att lägga till en gradientfyllning till terrängstrukturen så får jag en väldigt enkel dimeffekt. Himlen och havet får en gradientfyllning baserat på dimfärgen och avståndet. Andra föremål, som vegetation, får
Varje liten glödlampa i ljusslingan har en gemensam begränsning. Avslutningsfogen har noll massa så den kommer att fastna på fasaden utan att falla ner. Du kan klicka/knacka för att ändra positionen för dessa positioner. För att skapa reflektionerna klonas och inverteras geometrin, läggs till en andra scen som renderas till ett separat renderingsmål med oskärpa applicerat på det. Resten av scenen renderas sedan ovanpå det första passet utan att rensa
Cube Slam är ett roligt pongspel online som använder alla framsteg i den moderna webbarkitekturen (WebRTC-åtkomst till webbkameror och mikrofoner, anpassat webbljud-API, WebGL-acceleration, CSS3, Google Cloud-anslutning och öppen källkod för att utveckla) för att ge sina användare en upplevelse som de inte har lyckats få någon annanstans. Utmana helt enkelt din vän till spelet, och du kommer att transporteras in i den snyggt renderade 3D-världen som har en skärm med
Då och då fick man det där flödet av kreativitet och man jobbar med ett experiment lite längre än vanligt. Ett steg triggar nästa och så vidare. Jag får inte den känslan så ofta, men den här gången fick jag det. Det började med att experimentera med träd i papervision3D. När jag fick igång ett träd tänkte jag på att det skulle vara coolt att använda det i en skog.
Leka med elden Förra gången så gjorde jag lite ved. Låt oss nu bränna upp det. Experimenterar fortfarande med samma 3D-perlinbrus som tidigare, men den här gången animerat. När du kan ta kontroll över varje pixel av brus är det lätt att lägga till extra regler för att forma brusets form, som turbulens baserat på y-värde eller en offset-animation längs z-axeln för att få lite djup. Att applicera ”ryggar”
Det här är ett litet spel för småbarn. Det är till för att de ska kunna träna grundläggande matematiska tal, addition och subtraktion, på ett roligt och enkelt sätt. När du svarar rätt så släpper vakten in dig genom porten och ytterligare ett spår läggs till i soundtracket, vilket utvecklar musiken allt eftersom. Den countryinspirerade musiken är en 8 bars loop med flera spår gjorda i Logic. Varje spår läggs
Optimera arbetsflödet En sak som kan vara riktigt repetitiv är att konvertera och ladda 3d-modeller. Det finns många sätt att göra detta på, men i den här installationen exporterade vi obj-filer från 3d Studio Max och konverterade dem med python-skriptet som är tillgängligt som ett fristående kommandoradsverktyg. Så för att göra livet enklare la vi till det här kommandot i byggprocessen och mappen med modeller till bevakningslistan för att övervaka
Jag är inte riktigt färdig med att experimentera med 3d perlin-brus. En annan cool funktion som jag inte har sett i Flash är att linda in bruset på en sfär sömlöst. För att få texturen att lindas sömlöst utan förvrängning så kan vi använda brusets 3d-karaktär på ett intressant sätt. Om vi utvärderar 3d-positionen för varje punkt på ytan av en sfär så kan vi få bruset i den specifika
Cube Slam är ett onlinespel som du kan spela gratis i moderna webbläsare. Cube Slam är utvecklat med html5-teknik, och det är tillgängligt på PC och mobil. Du kan spela spelet gratis online på din dator, Android-enheter och även på din iPhone och iPad. Cube Slam är ett fantastiskt arkadspel som låter dig spela det klassiska arkadspelet pong! Du kan spela mot en vän med delad skärmkontroll eller mot en
Fler roliga bollar. Dags att bli nostalgisk med en klassiker från 80-talet: Plasmalampan. Jag har aldrig haft möjlighet att äga en själv, kanske är det därför jag är så fascinerad av dem. Det finns även små USB-drivna nuförtiden. Jag har haft den här idén för en demo länge och äntligen gjort en ganska så enkel. Den elektriska blixten består av rör som är förskjutna och animerade i vertex shader, precis
Den här är en enkel visualisering för att publicera ett nytt spår. Där man styr födelsen av fragment med musen eller beröring. Detta skapas med enkla plan och lådor. I början av projektet kunde vi ställa in alla dimensioner med inställningar under körning. Senare, när vi hittade en bra balans, låstes måtten och inställningsmöjligheten togs bort så att vi kunde anpassa omgivningen. Mest arbete lades på reflektionerna. Massor av att
Bilderna i det förra inlägget skapades med detta verktyg. Jag använder höjdkartan för att skapa en normal karta med en utmärkt klass som heter SphericalDispToNormConverter. Så eftersom jag nu har en höjdkarta och en normal karta kan Away3D göra resten. Materialet som används i detta exempel är PhongMultiPassMaterial. När ”förskjutningskartan” är inaktiverad används ett enkelt BitmapMaterial. away3D-teamet har verkligen gjort ett bra jobb med pixelbender-materialen. Bland inställningarna kan man välja
Björnen Bob Han blev en irriterande vän under utvecklingen. Som hans lärare och tränare så är jag lite stolt över honom nu, när jag skriver detta så har över 2 miljoner spelare träffat honom. Han använder en blandning av morph-animationer (tomgång, blinkande, morph-frame-uttryck och triggade animationer) och transformationer (skakar, går ut, fokuserar eller följer bollen etc). Rendera flera mål Vissa av effekterna behövde fler renderingsmål. Ett renderingsmål är en duk
Denna demo är ett roligt sätt att demonstrera en enkel procedur shader. När du börjar arbeta med svarven så kommer du att rista in i det imaginära utrymme som definieras av siffror och beräkningar. Masn kan föreställa sig ytan som en utsiktsplats till en beräknad värld, redo att utforskas och justeras. Det här är inget fancy jämfört med de fraktala strålmarschande shadersna runt omkring, men det är lite magiskt att
Ett element i naturen, rök och eld! Observera först att kodsnuttarna nedan har tagits ur sitt sammanhang och att de använder inbyggda variabler och syntax från three.js. Om du har gjort shaders tidigare så kommer du att känna igen variabler som mvPosition och viewMatrix, eller uniformer och texturuppslagningar. Bruset genereras i en fragmentskuggning, appliceras på ett plan inuti en dold scen, återges till en textur och länkas till målmaterialet. Innan
Knacka på trä Min nästa väg på min resa genom procedurdomäner går genom skogen. Inte så revolutionerande kanske, men jag har inte sett det i blixt förut och det är tillräckligt med utmaning för mig. Och det är ett bra sätt att lära sig grunderna i texturer. Här är de första testerna För sfären använder jag den sfäriska kartläggningen från föregående inlägg. Kuben har en textur för varje sida. En
Det här är en ny test av ett gammalt experiment jag gjorde i papervision3D för några år sedan. Denna version är skriven i javascript och Three.js. Det är riktigt trevligt att leka med krafterna i WebGL. Jag har bara använt de inbyggda shadersna i Three.js hittills, men det verkar vara en ganska så enkel process. Molehill och Away3D får fortfarande mycket uppmärksamhet från mig, men det är en speciell känsla
Cube Slam är ett onlinespel utformat, designat och byggt för Google Creative Lab som visar upp möjligheterna med WebRTC API på ett lekfullt sätt. North Kingdom, har tillsammans med Public Class och Dinahmoe format det kreativa konceptet, användarupplevelsen, teknisk inriktning, design, art direction och produktion. Det är ett Pong-liknande spel, tagit till nästa nivå. De lade till fysik, hinder, extrafunktioner och effekter. Men viktigast av allt, man kan bjuda in
När jag gjorde research för terrängredigeraren så hittade jag många olika metoder för att skapa brus. En av mina favoritalgoritmer är ”ridged fraktal brus”. Jag har inte hittat några exempel på detta i AS3 så jag skapade min egen version baserad på Optimized Perlin Noise som setts i communityn tidigare. Jag tror att vägen till den källan började med Ron Valstars AS3-version, sedan med en optimerad version av Quasimondo, och
Hur ser den typiska produktionen av en cyklisk brandrendering ut? Även med tung kompositering ser dessa brandrenderingar fortfarande inte äkta ut och passar aldrig bra in i en scen. En stor ljus, dyster röra. Varför ser de alltid så dåliga ut? Tro det eller ej men Blender gör faktiskt ett fantastiskt jobb med att simulera eld och rök, de största problemen introduceras i simuleringens skuggning. Simulerad låga behandlas som en
