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
