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
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
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
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
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
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
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
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 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
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
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
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
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
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
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
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
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
