Scott Hanselman

Easy accelerated 3D Games in a browser with JavaScript and WebGL using Three.js or Babylon.js

June 11, '14 Comments [12] Posted in Gaming | Javascript | Open Source
Sponsored By

Let's ignore that we haven't got a web-agreed-upon way to do just about anything, much less basic line-of-business apps with data-bound text boxes over data, and just revel in the fact that we can do hardware-accelerated 3D graphics in our browsers with WebGL. This works today in all the latest browsers.

I noticed this fantastic mini-game promoting Assassin's Creed over at http://race.assassinscreedpirates.com that uses WebGL via a library called Babylon.js. On my Windows machine it runs perfectly in IE11, Chrome 37, or Firefox 30. (Yes, in retrospec, the version numbering for browsers is getting out of hand.)

Some folks on Macs have reported issues with WebGL. Check out https://www.browserleaks.com/webgl for YOUR browser's capabilities.

This Pirate Ship game is really worth checking out and it's fun for the kids. You can also check out the Developer Teardown and learn how they built it.

3D Assassin's Creed Pirates in my browser

I wanted to get a better understanding of exactly how difficult it is (or easy!) to get in to WebGL in the browser. I found this article over at SitePoint by Joe Hewitson and started with some of his sample code where he compares two popular WebGL libraryes, three.js and babylon.js. The Assassin's Creed game here is written using Babylon.js.

Three.js seem to be  a general layer on top of WebJS, aiming to make scene creation and animation easy. Using Joe's sample (that I changed a little) along with a texture.gif, I was able to make this spinning 3D cube easily.

There's a live example running at http://hanselstorage.blob.core.windows.net/blog/WebGL.html you can see in your modern browser. Below is just a static image.

I would have animated it but that would have been a meg. ;)

Three.js is on the left and Babylon.js is on the right. It doesn't really matter given the static image, but one think you'll notice immediately if you run the live sample is that you can zoom in and out, pan, grab, and manipulate the babylon.js cube. I could have hooked up some events to the three.js cube, or perhaps added a physics engine like Physijs and made it interact with the world, I suppose. It struck me though, that this little example shows the difference in philosophy between the two. Babylon seems to be more of a game engine or a library that wants to help you make games so there's interactions, collision detection, and lighting included.

Three.js supports many renderers, cameras, and lighting. You can use all WebGL capabilities such as lens flares. It supports all the usual objects and geometries as well. Their examples are extensive with over 150 coding examples covering everything you'd want to know from fonts, models, textures, to sounds. There's even an in-browser Three.js editor.

Babylon includes a lot including a physics engine from cannon.js built in, full scene graph, offline mode, textures, special effects and post processes, many cameras including Oculus Rift (!) lots of meshes. Babylon.js even supports standard Gamepads via like the Xbox One controller natively via the Gamepad API spec.

Anyway, here is the cube on the right from Joe's code that I modified slightly, using babylon.js:

// Babylon.js 
var canvas = document.getElementById('babylonCanvas');
var engine = new BABYLON.Engine(canvas, true);
var sceneB = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), sceneB);

var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(0, -1, 0), sceneB);
//light.diffuse = new BABYLON.Color3(1, 0, 0);
//light.specular = new BABYLON.Color3(1, 1, 1);

var box = BABYLON.Mesh.CreateBox("box", 3.0, sceneB);
var material = new BABYLON.StandardMaterial("texture", sceneB);
box.material = material;
material.diffuseTexture = new BABYLON.Texture("texture.gif", sceneB);

sceneB.activeCamera.attachControl(canvas);

engine.runRenderLoop(function () {
box.rotation.x += 0.005;
box.rotation.y += 0.01;
sceneB.render();
});

I also commented out the lighting but you can see how easy it is to add lighting to a scene if you like. In this case there was a diffuse red light along with a specular white.

With babylon.js I could change the size of the scene by changing the size of the canvas. With three.js the width and height are pulled in programmatically from the enclosing div.


Here is the near-same box created with three.js.

// Three.js 
var div = document.getElementById('three');
var height = div.offsetHeight;
var width = div.offsetWidth;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
div.appendChild(renderer.domElement);

var camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.z = 400;

var sceneT = new THREE.Scene();

var cube = new THREE.CubeGeometry(200, 200, 200);

var texture = THREE.ImageUtils.loadTexture('texture.gif');
texture.anisotropy = renderer.getMaxAnisotropy();

var material = new THREE.MeshBasicMaterial({ map: texture });

var mesh = new THREE.Mesh(cube, material);
sceneT.add(mesh);

animate();

function animate() {
requestAnimationFrame(animate);

mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render(sceneT, camera);
}

Both libraries have amazing Examples Galleries and you should check them out.

Also note that there's a contest running until June 20th, 2014 over at http://www.modern.ie/en-us/demos/assassinscreedpirates where you'll create your own shader within the browser and submit it for judging. Contestants must be over 16 years of age and from one of the following countries: United States of America, United Kingdom, France, Germany, Spain, or Australia. The contest starts here and the grand prize is an Assassin’s Creed Collector’s Black Chest Edition and an Xbox One.

Create your Shaders in the browser

Even if you don't win, do check out the in-browser shader editor. It's amazing.


Sponsor: A big welcome to my friends at Octopus Deploy. They are sponsoring the blog feed this week. Using NuGet and powerful conventions, Octopus Deploy makes it easy to automate releases of ASP.NET applications and Windows Services. Say goodbye to remote desktop and start automating today!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

How to use an Xbox One controller on your Windows PC

June 9, '14 Comments [19] Posted in Gaming
Sponsored By

B00CMQTUSS_XboxOne_Controller_F_TransBG_RGB_2013The Xbox One controller is fantastic. Even if you don't have an Xbox One, the controller now works on a Windows PC with a standard micro-USB cable. Any Steam and Windows game that supports standard XInput works great. I've played Tomb Raider and Bioshock Infinite and both worked wonderfully. Everything works smoothly and even vibration feedback is supported.

I've previously used the Xbox 360 Controller's "Wireless Receiver Adapter" for Windows to pair XBox 360 controllers. It also works great, but I frankly prefer a plug-in and remove model, rather than having another adapter.

Soon the drivers for the Xbox One controller will be available on Windows Update. That means you'll be able to just plugin the Xbox One controller into any PC and the drivers will just download.

Until then, you'll want to install one these drivers depending on your machine:

Once these drivers are installed, plugin the Xbox One Controller to any USB port. There's a micro-USB port on the top of the Xbox One so you can use a regular USB cable. I used the one from my Kindle because it's very long.

The controller shows up as a Gamepad in Windows and works with any game that supports a standard joystick. Here's  a screenshot from my PC:

image

Here's an animated gif of me moving the controller and seeing the result in the Properties Dialog. You can see it's got all 10 buttons, 3 axes and the POV hat.

If you've got a Xbox One controller, you should grab a micro-USB cable and get this set up today. If you're considering a new PC controller, I recommend this controller even if you don't have an Xbox One.

Related Links


Sponsor: A big welcome to my friends at Octopus Deploy. They are sponsoring the blog feed this week. Using NuGet and powerful conventions, Octopus Deploy makes it easy to automate releases of ASP.NET applications and Windows Services. Say goodbye to remote desktop and start automating today!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Microsoft "Video Kinect" Chat Review - Video Chat on the Big Screen, The Good and The Bad

March 22, '11 Comments [11] Posted in Gaming | Remote Work | Reviews
Sponsored By

Video Kinect Call I use Video Chat all the time. Like ALL the time. If you check out the Remote Work section of my blog you'll find dozens of posts about optimizing your video chat experience. Living in rural Oregon and wrking remotely for Microsoft, as well as my job as a community-focused open source individual means that I'm skyping or video calling people much of the week.

I have a Cisco Umi for work, and I use HiDef video cameras and Skype for talking to folks during the day. However, I'm always trying to find out the best way to talk to The Wife and Kids when I'm on the road. I wrote an article a while back called Skyping the Wife: Foolproof Video Conferencing with Your Family While on the Road where I setup auto-answer for Skype so my wife wouldn't have to do anything. However, Skype seems to have removed or hidden the auto-answer feature lately as they are constantly moving their features and options around. Plus, whenever I call home with Skype my wife has to drag out the laptop and with its camera's small field of view I usually just end up seeing the tops of the boy's heads. It's a hassle.

A few weeks ago I saw on Twitter that my Xbox 360 with Kinect supports Video Chat using an app called Video Kinect. Apparently this is already installed when you setup your Kinect so you probably have it already!

Video Kinect is effectively a Windows Live Messenger client. You can chat other Kinect/Xbox Live folks, but you can also chat or receive calls from anyone on your Live Messenger list of friends. One you log in to Messenger (be sure to save your password) you will see avatars for Xbox folks and Live Messenger icons (no faces, sadly) for Windows people.

Video Kinect Friends List

You can call from any of these screens, using your controller or your hands via Kinect.

Video Kinect contact list

First thing you should do, IMHO, is turn off the AutoZoom feature. It uses a Digital Zoom to artificially pan/zoom to the face of the person speaking. It's very disjointed, inconsistent but more importantly, it doesn't allow you to really appreciate the wide field of view that the Kinect camera gives you. It's massive and you can see the whole room...this reason alone is why I think Video Kinect will be THE way I talk to the family when travelling. Especially when the kids are running around.

Video Kinect options

The resolution of the Kinect is 640x480 which is pretty darn good. It looks fabulous from my laptop on the receiving side. See the pic below.

Video call with Video Connect and Live Messenger

The audio is excellent as well, surprisingly so. I can hear and see everything that's going on in the TV room which is fantastic with active kids.

The Good

The Kinect has a great webcam. Good resolution and easy to see.

It's on the big screen and using the big stereo. The kids, ahem, connect more with the large system than the laptop. Daddy's actual size on the flat screen.

The Bad

Either Video Kinect, the codec, or the camera sucks for quick quick action. I see only blurs when the kids are running around. Not sure if this is hardware or software, but it's pointed and reproducible. It's not a deal breaker, but it's clear that they've optimized for the "sit and chat" scenario, not the "watch the kids go insane" scenario. Surprisingly the latter is the 80% in my 80/20 world.

There's no option for FullScreen with PIP. Your local image is the same size as the remote one. At leas make this an option. It's weird.

Answering a call ON the Xbox is ridiculously hard. My wife was unable to do it and it takes too many button pushes. You have to press the center Guide button, then down to select the call notification from an Inbox that comes in like a game invite. "Friend wants to Video Kinect with you..." And all this must happen in (it seems) less than 30 seconds. I called and called and the wife just couldn't do it. This means that all our calls have to be originated by her. When she calls me, I just click Answer in Windows Live Messenger. She also found it too hard to log in, so I just keep it logged in at home as me and I log in as her when remote. I asked some friends and over half said they do the same. It's a common scenario that they (the Powers That Be) aren't optimizing for.

The Wish List

  • Fullscreen
  • Easier or auto-answer
  • Easier to launch Kinect
  • Better framerate
  • Skype support

Still, it's pretty sweet, and since I don't have Skype TV and my Umi is in my office, for me Video Kinect plus Live Messenger is the best solution for travelers calling kids back home today.

Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Hanselminutes Podcast 240 - Developing Indie Games for Xbox 360 and XNA with George Clingerman

November 19, '10 Comments [2] Posted in Gaming | Learning .NET | Podcast
Sponsored By

Kissy Poo Xbox Live Indie Game for Kids This week Scott talks to George Clingerman, a member of the Independent Xbox Game Development Community (Indie Games) who also runs http://www.xnadevelopment.com. George is a business developer by day and a game developer by night, using C# and managed code in both instances. How does this all work and how can you develop and sell your own games?

Links from the Show

NOTE: If you want to download our complete archives as a feed - that's all 240 shows, subscribe to the Complete MP3 Feed here.

Also, please do take a moment and review the show on iTunes.

Subscribe: Subscribe to Hanselminutes Subscribe to my Podcast in iTunes

Download: MP3 Full Show

Do also remember the complete archives are always up and they have PDF Transcripts, a little known feature that show up a few weeks after each show.

Telerik is our sponsor for this show.

Building quality software is never easy. It requires skills and imagination. We cannot promise to improve your skills, but when it comes to User Interface and developer tools, we can provide the building blocks to take your application a step closer to your imagination. Explore the leading UI suites for ASP.NET AJAX,MVC,Silverlight,Windows Forms and WPF. Enjoy developer tools like .NET Reporting, ORM, Automated Testing Tools, Agile Project Management Tools, and Content Management Solution. And now you can increase your productivity with JustCode, Telerik’s new productivity tool for code analysis and refactoring. Visit www.telerik.com.

As I've said before this show comes to you with the audio expertise and stewardship of Carl Franklin. The name comes from Travis Illig, but the goal of the show is simple. Avoid wasting the listener's time. (and make the commute less boring)

Enjoy. Who knows what'll happen in the next show?

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Accidental Prescience and the Secrets of Project Natal

June 23, '09 Comments [16] Posted in Channel9 | Gaming
Sponsored By

I can't remember which episode, but a few years ago I mentioned on my podcast that I didn't understand why companies were spending so much time with touch screens and multi-touch input devices when we all have a perfectly good input device staring at us, unused, everyday - our webcams. Minority Report was not only a great movie, but a great user experience idea.

Johnny Chung Lee (I thought he and I had a bromance going, but it's just a fauxmance. It's one way, sniff, he doesn't know I'm alive! ;) did some amazing work in this space using the Wii remote a while back.

minority-report

Ever since I saw Minority Report, perhaps even before since it's such an obvious idea, I've been searching and trying to figure out when and how this is going to happen. From my point of view, there's just no reason I shouldn't be able to make a small gesture and push a window over to another monitor. Swipe down in the air, minimize. It if was reliable, it'd be a perfect and elegant addition to the mouse and keyboard.

Johnny now works for Microsoft, and recently we learned that he's been working with the team that is doing Project Natal. If you've been under a virtual rock, here's a video what Natal does. Basically it tracks your body and you become the game controller. If it works, it'll be epic. If it fails, it'll be sad. The real question is WHEN. My bet is Christmas, only because it's obvious.

From Johnny's Blog:

The 3D sensor itself is a pretty incredible piece of equipment providing detailed 3D information about the environment similar to very expensive laser range finding systems but at a tiny fraction of the cost. Depth cameras provide you with a point cloud of the surface of objects that is fairly insensitive to various lighting conditions allowing you to do things that are simply impossible with a normal camera.

But once you have the 3D information, you then have to interpret that cloud of points as "people". This is where the researcher jaws stay dropped. The human tracking algorithms that the teams have developed are well ahead of the state of the art in computer vision in this domain. The sophistication and performance of the algorithms rival or exceed anything that I've seen in academic research, never mind a consumer product. At times, working on this project has felt like a miniature “Manhattan project” with developers and researchers from around the world coming together to make this happen.

Before the world (or I) had ever heard of Project Natal, I pounced on interviewed Johnny at Mix 09 in Las Vegas. Recently Raleigh Buckner mentioned on Twitter that there was a lot "said without actually saying" in that interview, and darn it, he's right. I asked the right questions, and Johnny answered, but we (the collective) didn't see!

Now, go watch the interview again, this time with the knowledge of Project Natal's existence...

Johnny Lee on Computer Vision

Wow. I just bumped into Johnny Lee in the halls here at Mix09. I'm a huge fanboi with a man-crush on this dude. You've seen Johnny before on Channel 9 talking to Robert Hess.  Johnny's a legend (in my mind) in the computer vision space, and he put up with me gushing at him here at Mix09. We chatted in the hall about computer vision, what he's working on, how he got the gig at Microsoft and where he sees the future of human-computer-interaction.

Crazy stuff. I'm very excited to see how far they can take this.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Page 1 of 24 in the Gaming category Next Page

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.