HTML5 Game Development » WebGL

http://www.html5gamedevs.com/tag/webgl/page/3/ - [HTML5 Game Development » WebGL]

 

• WebGL Inspector

  This is an excerpt from the linked article, written by the original author:

  

  WebGL Inspector is a tool inspired by gDEBugger and PIX with the goal of making the development of advanced WebGL applications easier. What Firebug and Developer Tools are to HTML/JS, WebGL Inspector is to WebGL.

  Note: this is alpha software – if you find bugs, let me know (or better yet, fork and fix them!

  http://benvanik.github.com/WebGL-Inspector/

• WebGL Game – Invaders From Space

   

  This is an excerpt from the linked article, written by the original author:

  

  Invaders From Space is a nice little WebGL game clone of the arcade classic, Space Invaders. This game utilizes PlayCanvas, a game engine scripted from HTML5, Javascript, and WebGL which allows developers to create the graphical quality we’ve all come to expect from next generation browser games.

  But enough talk, grab your laser cannon, the next wave of aliens is coming!

  http://www.webgl.com/2012/03/webgl-game-invaders-from-space/

• Introducing gloc for Open Web Shader Linking

   

  This is an excerpt from the linked article, written by the original author:

  

  We have just released our first version of gloc, a toolkit for WebGL and OpenGL ES2 GLSL shaders. The purpose of gloc is to make it much easier to build – and much easier to share – shaders. As a result, we hope gloc will help to further the creative potential of 3D graphics on the web and mobile platforms. (gloc links our creativity!)

  With gloc, shaders and shader fragments, for numerical and graphics functions, become portable first-class web resources.

  What gloc enables:

  • Libraries of shader functions
  • Capability-based shader component fall-backs
  • Collaborative shading effect mash-ups
  • LD_PRELOAD-like functionality
  • Compression by factorization of common shader functions

  http://blog.ashimagroup.net/2012/03/15/introducing-gloc-for-open-web-shader-linking/

• WebGL Game – Balloon Gunner 3D

   

  This is an excerpt from the linked article, written by the original author:

  

  Here is one more user submission, Balloon Gunner 3D, a WebGL game created by Bob Wood (Java version) and Matt Milton (Windows Phone 7 version). According to Bob, Balloon Gunner 3D “started life as a Windows Phone 7 game, and was then rewritten in Java for Android before being massively tweaked to run using Google’s GWT (same thing that Gmail is written with) and WebGL.”

  O.K. sounds good Bob. On to Google Chrome’s app store to launch the game (for free) and I’m met with Balloon Gunner 3D’s summary :”The islands of your Empire have been invaded, and only you and your war balloon can save them!! Fly your balloon through an array of different missions and enemies. Use cannons, missiles and bombs to blast your way to victory in this 3D shoot’em up with a “steampunky” flavor.” The game’s segue does not disappoint.

  http://www.webgl.com/2012/03/webgl-game-balloon-gunner-3d/

• WebGL Game Demo – A Little Anxious When It’s Dark (ALAWID)

   

  This is an excerpt from the linked article, written by the original author:

  

  A Little Anxious When It’s Dark (ALAWID) is a WebGL demo created by Tapio, a Linux programmer from Helsinki as a submission for a 7 day Rougelike Challenge competition. The premise of the game is this, ”Descend to the dungeon full of monsters and search for the hidden treasure that awaits its discovery. A mysterious portal will take you to the next level, but you might want to find and pick up some supplies first. It also might be a good idea to avoid excess monster hunting – that will get you killed eventually. Sneaking around enemies just might keep you alive long enough to see the treasure.”

  Tapio does a good job summing up the gameplay and graphical/engine features:

  http://www.webgl.com/2012/03/webgl-game-demo-a-little-anxious-when-its-dark-alawid/

• WebGL Demo – Terrain Generation: Diamond-Square Algorithm and Three.js

   

  This is an excerpt from the linked article, written by the original author:

  

  Terrain Generation is another user submitted WebGL demo, created by Sann-Rémy Chea from Paris. This impressive demo utilizes the three.js framework and the diamond-square algorithm (a.k.a. the random midpoint displacement fractal) to produce a fully customizable application with a perspective projection camera viewpoint.

  Sann-Rémy sums up the changeable parameters as such:

  http://www.webgl.com/2012/03/webgl-demo-terrain-generation-diamond-square-algorithm-and-three-js/

• Spacegoo Mosquitoes

   

  This is an excerpt from the linked article, written by the original author:

  

  You must kill mosquitoes with the helicopter. The mosquitoes are moving faster and faster, and their apparition rate is growing. If there are more than 30 mosquitoes, you loose.

  http://www.spacegoo.com/mosquitoes/

• HTML5 Rocks – Mixing Positional Audio and WebGL

   

  This is an excerpt from the linked article, written by the original author:

  

  In this article I’m going to talk about how to use the positional audio feature in the Web Audio API to add 3D sound into your WebGL scenes. To make the audio more believable, I will also introduce you to the environmental effects possible with the Web Audio API. To get a more thorough introduction to the Web Audio API, check out the Getting started with Web Audio API article by Boris Smus.

  To do positional audio, you use the AudioPannerNode in the Web Audio API. The AudioPannerNode defines the position, orientation and velocity of a sound. Additionally, the Web Audio API audio context has a listener attribute that lets you define the position, orientation and velocity of the listener. With these two things you can create directional sounds with doppler effects and 3D panning.

  Here’s a 3D scene with flat audio. Not very exciting. Just a sound playing without any effects. Use WASD or the arrow keys to move and drag with the mouse to look around.

  http://www.html5rocks.com/en/tutorials/webaudio/positional_audio/

• Deathmatch.io – A WebGL Multiplayer Game In Progress

   

  This is an excerpt from the linked article, written by the original author:

  

  You do like video games, don’t you? And with new technologies like WebGL and WebSockets in our hands what would be more obvious, as a web developer, than creating an own fancy multilayer browser game?

  The JavaScript engines are fast enough these days and WebSockets can handle network communications in realtime. Maybe it would be easier to use Flash, which just got 3D support, or the Unity game engine, which is actually pretty awesome, but I wanted to create an open source game that doesn’t rely on external plugins and runs on every devise including smart phones, tables or TVs – simply everything that can handle a modern web browser.

  But of course that’s not the case, not every browser supports WebGL yet and various devises require customizations! But it’s not hopeless, at least the latest releases of Firefox, Chrome, Safari and the current alpha version of Opera support WebGL already well. Who knows when the lovely Internet Explorer will get to this point but I can live with that.

  http://mj.io/deathmatchio-webgl-multiplayer-game-in-progress

• Mini Mass Effect

   

  This is an excerpt from the linked article, written by the original author:

  

  Just some eye candy, but a lovely set of 3D mini Mass Effect models rendered in threeJS.

  http://alteredqualia.com/three/examples/webgl_mini_mass_effect.html

• WebGL Plasma Ball

   

  This is an excerpt from the linked article, written by the original author:

  

  Beautiful stuff!

  http://inear.se/plasmaball/

• GenShaders – Part 1

   

  This is an excerpt from the linked article, written by the original author:

  

  I recently embarked on a new experiment which I believe will be of particular interest to the Displayhack audience.
  I started with a fairly simple question: is it possible to use genetic algorithms to generate coherent, aesthetically pleasing textures?

  As the idea evolved in my mind and in conversations with friends, I decided to build a simple app to test out the concept and write about it as it progressed.

  Before I dive in, give the current version a shot. You can access the bleeding edge at demoseen.com/genshadersand the current version at demoseen.com/genshaders-1 – I wanted to keep these separate so that you could see where I was at each point.

  http://www.displayhack.org/2012/genshaders-part-1/

• Shatterquest

   

  This is an excerpt from the linked article, written by the original author:

  

  This is a quite innovative 3D game involving bouncing your ball around a house, smashing windows of the right colour and using colour changing blocks to do so! The camera is a little hard to get used to, but on the whole it’s nice to see something original.

  http://shatterquest.com

• Let’s Make a 3D Game with HTML5: 01

   

  This is an excerpt from the linked article, written by the original author:

  

  So we will kick off the second installment of Let’s Make a 3D Game with HTML5. This series of tutorials is meant to help one get a better understanding on how to create a slick 3D game with the newest of WebGL technologies.

  As stated before in my previous tutorial, we are going to be building a 3D shooter that is an homage to some of the classic games of yesteryears. The goal of this installment of the series is to get an understanding of how to create a graphics pipeline. But before we get to into the nitty-gritty, we need an update on some of the tools and frameworks we are going to use.

  http://cyborgdino.com/2012/03/lets-make-a-3d-game-with-html5-01/

• A WebGL RenderManager to handle multiple setups by Thibaut Despoulain

   

  This is an excerpt from the linked article, written by the original author:

  

  After experimenting more with Three.js, and working with more complex scenes and setups, I recently felt the need of a structured manager to handle multiple scenes, cameras and render loops.

  Indeed, working with more than one scene/camera/render setup can quickly become messy, juggling with many variables for each setup.

  To counter this, I developped a tiny Three.js extension: THREE.Extras.RenderManager. Head past after the break to download and learn more about it.

  http://bkcore.com/blog/3d/webgl-three-js-extension-rendermanager.html

• WebGL three.js Road

   

  This is an excerpt from the linked article, written by the original author:

  

  A driveable car and characters to run around a strange tilt-shifted road

  http://alteredqualia.com/three/examples/webgl_road.html

• Nomo Racer – 3D Multiplayer Game (WebGL + WebSocket)

   

  This is an excerpt from the linked article, written by the original author:

  

  I’m György Pesti, a Budapest based programmmer, currently working as the lead programmer of a company named nomosolutions.com. The aim in creating this game was to see what the WebGL and WebSocket technologies are capable of, and find out whether these tools could provide real-life solutions.

  This is more of an experiment than anything else. Think of it as an experimental demo game.

  I realized that with these technologies it is absolutely possible to create in-browser plugin-free online 3d multiplayer games. With other browser vendors joining the trend of providing support for webgl and websocket, development will get easier, and the game experience will get better. Websocket communication is not yet fluent though. I’m not sure if it’s the websocket server or the browser implementation, but it doesn’t work a 100% as it should, and I had to deal with issues like lost websocket packets, and handle errors like it on the client side.

  At this moment I don’t have the time or the resources to take this project any further.

  http://racer.nomo.hu/

• Erik Möller – WebGL 101 videos

   

  This is an excerpt from the linked article, written by the original author:

  

  Four score and seven days ago I set out to record a little video of some simple WebGL samples I had made. Originally I made the samples just to have a little introductory WebGL get-together at work, but when I had written them I figured “I might just as well whip a movie together for people outside of the office”. It turned out to be a massive undertaking (for being a hobby project) with writing, recording and editing. I’m glad I didn’t realize just how much work it would be or I probably would never have started it. I have edited movies before… minute long teasers and trailers… not feature film length videos like this one turned out to be.

  In the end I’m pretty happy with the result. No one likes to listen to their own voice of course and I’m no exception, and there are a couple of typos in the code, lots of places where I stumble on words and if I would’ve done it all over again I could probably have done the presentation a lot better. That said, I think it turned out nice and I really do hope it’ll be a good resource and complement to other sites like learningwebgl.com and MDN for people wanting to start playing around with WebGL.

  The sample sources produced in the video is available on github

  Here are all the video chapters for your convenience:

  http://my.opera.com/emoller/blog/2012/02/29/webgl-101

• How to Enable WebGL for Blocked Graphics Cards in Firefox

   

  This is an excerpt from the linked article, written by the original author:

  

  WebGL is amazing. Take a look at X-Wing or First-Person Tetris in Firefox. What do you mean it’s not working?

  My laptop’s two years old but, despite having a reasonable dedicated graphics card, WebGL is disabled in Firefox. Mozilla blacklist specific GPUs based on the driver version number, i.e.

  • NVIDIA cards require a driver numbered 8.17.12.5721 or greater
  • AMD/ATI cards are 8.741.0.0 or greater
  • Intel cards normally require 6.14.11 on XP, 7.15.10 on Vista or 8.15.10 on 7 (although some products are completely blocked)
  • Macs require OS version 10.6 or newer

  In general, blacklisting is a good thing. You don’t want WebGL crashing the browser because your card doesn’t support the right number of Z/Stencil ROP Units, 128-bit floating point HDR, anisotropic texture filtering or some other bizarre feature no one understands.

  http://www.sitepoint.com/firefox-enable-webgl-blacklisted-graphics-card

• Creatures & Castles – A diabolically addictive puzzle game.

   

  This is an excerpt from the linked article, written by the original author:

  

  An action-puzzle game in which you help a young treasure hunter steal vast quantities of treasure from a medieval castle. Trace a path of magical footprints for the treasure hunter to follow and set them on their way to safety, avoiding traps and the treasure guards. The less magic you use guiding the treasure hunter, the higher your score.

  NOW WITH ADDITIONAL LEVEL SET AVAILABLE FOR IN-APP PURCHASE: The Egyptian Pyramid! Battle Mummies, Acolytes, Scarab Beetles and the dangers of the shifting sands to bring home even more ill-gotten gains!

  KIDS THESE DAYS!

  Young Timmy and Susie love their bedtime stories about treasure hunters and wild adventures. So, in the dead of night they tiptoe out of the house and set off on an adventure to raid the nearest castle… and find themselves in a world of trouble.

  TO THE RESCUE!

  Help them in their predicament by laying out a magical path of footprints for them to follow, steal their ill-gotten gains and escape from the depths of the castle…

  http://creaturesandcastles.hiive.com/