Permanently turning off the Chrome debugging message

13. July 2014

 

It’s funny the things in life that irritate the hell out of you.  This is one such example for me.  For HTML5 development, I generally use WebStorm as my IDE and Chrome as my default browser.  Webstorm has a plugin debugger that integrates directly into chrome.  However, whenever you run your application, there is this exceedingly annoying yellow bar across the screen saying “JetBrains IDE Support is debugging this tab”:

 

image

 

You can disable it by clicking the x, unfortunately each time you run your code it appears again.  It’s one of those things I just let annoy me, as opposed to looking in to a more permanent solution.  That, it turns out, was rather stupid, as this is fairly easily fixed.

 

In Chrome’s URL box, enter chrome://flags

image

 

Scroll down and locate Enable Silent Debugging and click Enable.

 

image

 

Relaunch Chrome and PRESTO, no annoying yellow bar!

 

image

General ,




Using Microsoft’s Azure for your game’s server

24. April 2014

 

This post actually came about by accident.  I’ve been playing around with Telerik’s recently open sourced Kendo UI suite and I found myself needing a web back end.  Of course I could have used my own server, but every time you do something like that you open up another potential security concern.  Ages ago I did an HTML5 tutorial where I used a free version of Heroku Node hosting and a CouchDB back end, but truth is, it was kindof a pain in the ass.  This time I decided to take a look at the state of Azure and see if it was an appropriate option.

 

So what exactly is Azure… well, that’s a confusing thing to answer.  Basically it’s Microsoft’s ____________ as a service offering.  In the ___________ you can insert the words platform, database, cloud, etc.  Basically it’s a number of cloud based offerings, from straight VM based hosting like Amazon’s EC2, to a cloud based SQL server.  What we are most interested here is “Mobile”, which is a scalable back end for mobile software and websites.  This is a way for you to deploy your code to the cloud and let someone else worry about the infrastructure, scaling, backups, etc.  It is most similar to solutions like Heroku and Google App Engine, it straddles the point between running your own servers and using a prebuilt gaming solution.

 

This article looks at Azure for smaller mobile or HTML5 games.  Things like scoreboards, matchmaking, cloud saves, that kind of thing.  If you are looking at creating a server heavy game such as an MMO you need to look elsewhere, like here.

 

So, why Azure Mobile?

  • no server to maintain
  • easy scaling
  • a free tier is available for just getting started
  • it’s pretty cheap ( relative term of course )
  • it’s Microsoft.  They’ve literally spent billions creating Servers. Bandwidth and uptime should never be an issue
  • it’s not Google.  Every time I use a Google technology like App Engine, I want to punch a donkey
  • JavaScript and now, C# backends
  • Visual Studio tooling support
  • Authentication and Notifications built in ( Google, Twitter, MS, Facebook, etc… ).  Normally a huge pain point
  • As hard as it is to believe, they are probably better at security than you

 

Why not?

  • JavaScript/C# only… want Rails for example, Mobile isn’t for you
  • Can be confusing as hell.  Documentation isn’t as good as it should be
  • Visual Studio…  some people hate it.  It’s clearly easiest working in VS, but VS can be a daunting beast
  • It’s Microsoft, for some people this is a huge negative.
  • Less control

 

So… Costs?

 

First thing you have to head over to http://azure.microsoft.com/ and sign up.  A bit of a warning, you need to sign up and give a valid credit card, but you don’t have to pay anything.  When prompted select a Pay As You Go plan.  Oh yeah, costs, like talk about that for a minute:

 

image

 

Oddly enough, changing the region has no effect on the price.  So basically you can start for free for up to 1/2 million calls per month from 500 devices and a total of 20MB of data.  At the free tier you can have up to 10 different “services”, which considering a service can have tons of API calls, isn’t really a major limit.

When you jump into the “pay” tier, you are looking at 27$ a month per “unit”.  A unit is a theoretical computing unit, for which I couldn’t for the life of me find the definition of ( in Amazon, it is strictly defined as for example 1x 1.7ghz core, 768MB RAM, etc… ) anywhere.  API calls are tripled up to 1.5M per unit.  As you can see, the BASIC tier is the first one that allows you to start scaling up performance as needed.  So if your site is getting slammed, you can crank the processing power up to 6X the base.  Perhaps the most important aspect is there is no longer any device limits… so if you have 10 users or 10 million, same price for you.  Standard basically 10X’s the resources but at about 8X the price.

 

So, what about data costs?  20MB is obviously a pretty small amount, what’s this cost?  This is pretty straight forward as well:

 

image

 

So basically > 20MB and < 100MB is $5.27 a month.  Then another $5.27 to raise that cap to a GB, then basically a lowering amount for each additional GB as you add more, eventually settling at about 1$ a GB a month.  Trying to do direct pricing comparison to Amazon is tricky, as the bill in a completely different manner.  For example, storage for their RDS MySQL hosting is only 12.5 cents a GB however you pay for processing, transactions, etc.  Frankly it was the confusion of Amazon pricing that lead me to choose SoftLayer ages ago.

 

Creating a Mobile Services service

 

Everything is managed from the Azure portal and for the most part it’s pretty straight forward.  Its located at http://manage.windowsazure.com

image

 

All your various Azure services, websites, databases, etc… are available down the right hand side.  For now we just care about Mobile Services.

To get started, Click the Mobile Services tab then the + NEW in the bottom left corner.

image

 

Now simply click Create

image

 

The process is about as easy as it gets.  You need to select a unique ( across Azure, not just your projects ) prefix for the URL.  The key question is what kind of Backend you want, JavaScript or .NET.  I personally like .NET so that is what I am going with.

image

 

Finally you configure your database settings and then you are done:

image

 

Enter Visual Studio

 

Now head back to the Mobile Services tab if it doesn’t take you there automatically.  Now you want to select an App type ( it really doesn’t matter ), then download the project file.

 

image

 

The download file is simply a Visual Studio solution coupled with a NuGet install.  Extract the archive then double click the sln file to open it in Visual Studio.  Don’t worry, this works fully with the free version of Visual Studio if that’s what you’ve got.

It should look something like this:

image

 

Don’t worry, it’s nowhere near as complicated as it looks.  By default the project comes with a working value TodoItem.  You can go ahead and run your Mobile Service, it works 100% locally, which is kinda cool.  Press F5 and you will see:

image

 

Click Try it out and you will see the scaffolding it created for you:

image

Pretty cool.  Keep in mind, HighScore was created by me, so you wont have that. 

 

Mobile Services works just like any typical RESTful service.  You make a request using URLs, for example http://localhost:51289/tables/TodoItem (your port number will vary!) returns:

image

While http://localhost:51289/tables/TodoItem/1 returns the TodoItem with the id 1, like so:

image

Of course a complete description of REST is wayyyyy beyond the scope of this tutorial.  For more details IBM did a pretty good job explaining them, but there are hundreds of similar documents on the web.

 

Finally some freaking coding

 

Now let’s add our own service.  First let’s create a Controller.  A controller is basically what maps a URL to an action.  In your solution, right click the Controllers folder, select Add and Controller, like so

image

 

Select Web API 2 Controller – Empty

image

Then click Add.

 

In the dialog, name it.  This is going to be about the easiest controller you’ve ever seen in your life.  The Hello World of web services.

image

Now let’s look at some code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace arghService.Controllers
{
    public class HelloController : ApiController
    {
        public string Get()
        {
            return "Hello World from GET request";
        }

        public string Post()
        {
            return "Hello world from POST request";
        }
    }
}

 

Now if you request /api/Hello/ either via POST (form) or GET (url), it will return a Hello string.

 

Of course, this example isn’t really all that useful, let’s try and create a more useful service, a simple high score board.  First we need a datatype to store our highscore’s in.  Simply right click the Models folder and select Add->Class…

image

 

Name it HighScore.cs and click Add.  Add the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace arghService.Models
{
    public class HighScore
    {
        public int Id { get; set; }
        public int Score { get; set; }
        public string Name { get; set; }
    }
}

 

Now add a new Controller, just like before.  This time call it HighScoreController.cs.  Let’s take a look at some code:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using arghService.Models;
using Microsoft.WindowsAzure.Mobile.Service.Security;

namespace arghService.Controllers
{

    public class HighScoreController : ApiController
    {
        public static List<HighScore> scores = new List<HighScore> {
            new HighScore {Id=1,Name="Mike",Score=42},
            new HighScore {Id=2,Name="Bob",Score=43}
        };

        protected override void Initialize(System.Web.Http.Controllers.HttpControllerContext controllerContext)
        {
            base.Initialize(controllerContext);
        }

        public IEnumerable<HighScore> GetAllHighScores()
        {
            return scores;
        }


        [HttpGet]
        public IHttpActionResult GetHighScoreByName(string name)
        {
            var score = scores.FirstOrDefault((s) => s.Name == name);
            if (score != null)
                return Ok(score);
            return NotFound();
        }

        public IHttpActionResult PutHighScore(HighScore highScore){
            scores.Add(highScore);
            return Ok();
        }
    }
}

 

Run this code and then in the generated help page you will now see:

image

Click the PUT api/HighScore link and you can test your new service out clicking the Try This Out link.

image

 

Now try out the GET api/HighScore link and you will see your new entry in the results:

image

 

So there you go, an ultra simple REST web service exposing a high score list.  Granted, the code is pretty awful.  It’s not thread safe, it has no persistence when the server ends, no security, etc.  But it illustrates how simple the basics actually are.

 

Going Live

 

Now that you’ve got your service working locally, its time to deploy to Azure.  Fortunately it’s as simple as right clicking your project and selecting Publish:

image

 

To configure your publish profile, you can download this from the Azure Mobile Services portal.  In the Dashboard tab, select Download publish profile.

image

 

And now your Azure service is online, assuming there were no errors.  Mine for example is at http://argh.azure-mobile.net/.  Now here is one of the infuriating parts of dealing with Microsoft…  no matter how far I search, I cant figure out the authentication being requested here if you want to access the generated HTML5 scaffolding.  Fortunately it shouldn’t matter at this point, as you should only be accessing your service from code at this point.

 

 

Let’s look at calling our service in Fiddler.

Here is a request:

image

And here is the response:

image

 

Woot!

 

Other nice things

 

There are a few other perks to using Azure…  first is the out of the box authentication options:

image

 

Writing OAuth code is frankly a bit of a pain in the ass, so its nice to see Microsoft have taken care of it for you.  So if you want your users to authenticate against Twitter, Facebook, Google, etc… it’s incredibly simple.

 

The Database.  We never each touched on the SQL side of Azure and it makes your life pretty easy.  Basically it works just like the Azure project did, you download a local project to work and test with, then deploy it back to Azure:

image

 

You have a standard SQL Connection string you can connect with, so you can treat an Azure database just like any other local or remote DB.

 

Push Notifications.  Just like they have made authenticating to multiple services easy, so have they done with push notifications:

image

Windows, Windows Phone, Apple and Google Notification are all supported.

 

Automatic scaling…

image

While not supported on the free tier, you can easily set up your service to scale up when needed, or perhaps more important, to not scale up.

 

 

All told, Azure is a pretty impressive service but needs better documentation.  You spend a lot of time trying to work out things that should be extremely simple ( not what account to log in with… ), but what is there is pretty intuitive.  The scope of Web API ( the library used for actually writing the code ) is massive and again, could use some better documentation.  Normally MSDN is a bastion of information, but in this case, the pickings are pretty slim.

 

From my experiences, this is vastly more polished than Amazon’s offerings… or at least, easier.  That said, Amazon has an entire ecosystem built over their offerings that provide that polish for you.  Google…  well it’s just crap frankly.  Besides after they pulled this and with their habit of killing of popular products rather suddenly, I wouldn’t dream of using their services personally.

General, Programming ,




GWT and Windows 8. GWT DMP Plugin has crashed possible fix

23. September 2013

 

I’ve recently been having a bit of a fight with Google development tools, GWT and the GWT plugin for Chrome on Windows 8 specifically.  Following the linked instructions I did manage to get the plugin installed, however today I started experiencing a new joy…  Every few minutes I would experience:

 

 

 

It would sometimes happen on load, other times when I tabbed back to Eclipse.  Apparently the GWT plugin is notoriously fragile.  Given the fact it doesn’t even run on Windows 8 without something of a song and dance, this isn’t really shocking.  I did however find a fix.  If you experience a GWT DMP Plugin crash in Chrome, check the following.

 

Go to chrome://extensions in Chrome.  Locate the plugin and click options:

image

 

In my case, there were no inclusions set for some reason.  Make sure localhost is added like so.  ( I did 127.0.0.1 too just in case… )

 

image

 

And, no more crashes!  That said, I’m still fed up with the entire process.  There is a project called Super Dev Mode that removes the plugin requirement completely, but there is an element of complexity involved. 

General ,




Unity and Intel Optimus: Unity Editor has stopped working fix

5. September 2013

 

So I fired up Unity today on my laptop and

 

image

 

Oh dear, this isn’t good.  After some playing around it turns out Unity doesn’t play well with Intel GPUs right now.  Thing is, I don’t have an Intel GPU, I’m running an nVidia GTX765.  Enter Optimus.

 

What’s Optimus?  It’s an Intel technology that allows your computer to pick between using the integrated chipset to save memory or the dedicated GPU for performance.  The fix is pretty simple, set Unity to run on the nVidia GPU.

 

Open the nVidia control panel.

Select Manage 3D Settings

image

 

Select the Program Settings tab and Click the Add button.

image

 

Select Unity then click Add Selected Program

image

 

In the Select the preferred graphics processor for this program dropdown, select High-Performance nVIdia

image

 

Click Apply.

 

Load Unity.  VOILA!  No more crash.

Now, if you happen to have only an Intel GPU, um… sorry.

General ,




Computer Graphics: Principles and Practices 3rd Edition. A trip down memory lane.

12. August 2013

 

So today on Safari Books Online came a book that was a complete flash from my past.  Computer Graphics: Principles and Practices 3rd edition has been released.  What’s so special about this book?

cgpap3

Three things… 

 

First, it was the textbook I used to learn computer graphics a very long time ago.

Second, it was one of the only ( incredibly expensive ) books I had to purchase for school that I actually found valuable.  ( Code Complete was the other book, if you were curious )

Third, it’s one of the only dead tree books I have kept.  I am almost entirely digital these days, so you have to be a good book for me to keep you around, especially given the size of a few of the condos I’ve moved into over time, I’ve gone through a lot of book purges!  When you consider how incredibly out-dated it had become, the world of graphics has changed a great deal since the second edition of the book was released in 1990!  On top of that, all of the code examples where in Pascal, using a library I’d never heard of at the time, or used since.

 

Fortunately with the release of the 3rd edition, I now have one less piece of dead tree fighting for space in my house!  There are a few things to know about this book, it’s has no code for OpenGL or Direct3D, it’s not really about that.  The book actually uses WPF for it’s examples, but don’t worry, the concepts are easily applied elsewhere. The entire point of this book is to teach graphics programming concepts, not really about the implementation.  If you don’t already know one of those APIs, you are going to want to pick up an additional book on your graphics library of choice ( if needed. )  That said, this will make you **understand** what you are doing with either of those graphics libraries.  You will find when reading this book, it doesn’t really matter what programming languages or library you use, you will be able to digest and adapt to your tools of choice without a lot of effort.  This book has been almost completely re-written at this point, and does cover the modern graphics pipeline.

 

What does it cover?  Well, just about everything actually.  That’s why I kept it around all these years.  For example, here is the Table of Contents:

  1. Introduction
  2. Introduction to 2D Graphics Using WPF
  3. An Ancient Renderer Made Modern
  4. A 2D Graphics Test Bed
  5. An Introduction to Human Visual Perception
  6. Introduction to Fixed-Function 3D Graphics and Hierarchical Modeling
  7. Essential Mathematics and the Geometry of 2-Space and 3-Space
  8. A Simple Way to Describe Shape in 2D and 3D
  9. Functions on Meshes
  10. Transformations in Two Dimensions
  11. Transformations in Three Dimensions
  12. A 2D and 3D Transformation Library for Graphics
  13. Camera Specifications and Transformations
  14. Standard Approximations and Representations
  15. Ray Casting and Rasterizations
  16. Survey of Real-Time 3D Graphics Platforms
  17. Image Representation and Manipulation
  18. Images and Signal Processing
  19. Enlarging and Shrinking Images
  20. Textures and Texture Mapping
  21. Interaction Techniques
  22. Splines and Subdivision Curves
  23. Splines and Subdivision Surfaces
  24. Implicit Representations of Shape
  25. Meshes
  26. Light
  27. Materials and Scattering
  28. Color
  29. Light Transport
  30. Probability and Monte Carlo Integration
  31. Computing Solutions to the Rendering Equation: Theoretical Approaches
  32. Rendering in Practice
  33. Shaders
  34. Expressive Rendering
  35. Motion
  36. Visibility Determination
  37. Spatial Data Structures
  38. Modern Graphics Hardware

 

… so as you may be able to tell, this isn’t a short book.  In fact it’s 1264 pages in length, which would be why this isn’t a proper review, I am not done the book.  In fact, it’s one of those book I will probably never read entirely front to back.  Instead I jump in to the areas I need, unless of course I struggle with the concepts being taught, then I tend to read the entire chapter until I’ve gotten the subject down.  Of course, I read chapters from time to time just for something to do.

 

That’s another great part of this book.  I am no math wiz, I have forgotten far too much, so with many pure math texts I struggle.  This is why this book is very good.  It’s not simple by any means, but it doesn’t just throw an equation at you and leave you scratching your head.  Things are introduced in escalating difficulty, but if you have a late high school or first year university math education, you should be OK.

 

The math is fully explained over the course of the book.  If you have trouble parsing out equations, they are explained fairly well in the book including how to decipher them.   The book doesn’t magically make math easy, but it does do an effective job of explaining it, so that even a non-genius can make sense of things.  Here for example is the excerpt on Euler Angles, and is typical of how things are explained:

 

Example taken from book:


 

11.2.2. Euler Angles

Euler angles are a mechanism for creating a rotation through a sequence of three simpler rotations (called roll, pitch, and yaw). This decomposition into three simpler rotations can be done in several ways (yaw first, roll first, etc.); unfortunately, just about every possible way is used in some discipline. You’ll need to get used to the idea that there’s no single correct definition of Euler angles.

The most commonly used definition in graphics describes a rotation by Euler angles (φ, θ, ψ) as a product of three rotations. The matrix M for the rotation is therefore a product of three others:

1

Thus, objects are first rotated by angle φ in the xy-plane, then by angle θ in the zx-plane, and then by angle ψ in the yz-plane. The number φ is called pitch, θ is called yaw, and ψ is called roll. If you imagine yourself flying in an airplane (see Figure 11.1) along the x-axis (with the y-axis pointing upward) there are three direction changes you can make: Turning left or right is called yawing,pointing up or down is called pitching, and rotating about the direction of travel is called rolling.These three are independent in the sense that you can apply any one without the others. You can, of course, also apply them in sequence.

jet

 

Figure 11.1: An airplane that flies along the x-axis can change direction by turning to the left or right (yawing), pointing up or down (pitching), or simply spinning about its axis (rolling).

Writing this out in matrices, we have

2

3

With the proper choice of φ, θ, and ψ, such products represent all possible rotations. To see this, we’ll show how to find φ, θ, and ψ from a rotation matrix M. In other words, having shown how to convert a (φ, θ, ψ) triple to a matrix, we’ll show how to convert a matrix M to a triple (φ′, θ′, ψ′), a triple with the property that if we convert it to a matrix, we’ll get M.

The (1, 3) entry of M, according to Equation 11.14, must be sin θ, so θ is just the arcsine of this entry; the number thus computed will have a non-negative cosine. When cos θ ≠ = 0, the (1, 1) and (1, 2) entries of M are positive multiples of cos φ and – sin φ by the same multiplier; that means φ = atan2(–m21, m11). We can similarly compute ψ from the last entries in the second and third rows. In the case where cos θ = 0, the angles φ and ψ are not unique (much as the longitude of the North Pole is not unique). But if we pick φ = 0, we can use the lower-left corner and atan2 to compute a value for ψ. The code is given in Listing 11.1, where we are assuming the existence of a 3 × 3 matrix class, Mat33, which uses zero-based indexing. The angles returned are in radians, not degrees.

Listing 11.1: Code to convert a rotation matrix to a set of Euler angles.


  1  void EulerFromRot(Mat33 m, out double psi,
  2                             out double theta,
  3                             out double phi)
  4   {
  5    theta = Math.asin(m[0,2]) 
//using C# 0-based indexing!
  6    double costheta = Math.cos(th);
  7    if (Math.abs(costheta) == 0){
  8       phi = 0;
  9       psi = Math.atan2(m[2,1], m[1,1]);
10    }
11    else
12    {
13       phi = atan2(-m[0,1], m[0,0]);
14       psi = atan2(-m[1,2], m[2,2]);
15    }
16
  }


It remains to verify that the values of θ, φ, and ψ determined produce matrices which, when multiplied together, really do produce the given rotation matrix M, but this is a straightforward computation.


Inline Exercise 11.3:

Write a short program that creates a rotation matrix from Rodrigues’ formula (Equation 11.17 below) and computes from it the three Euler angles. Then use Equation 11.14 to build a matrix from these three angles, and confirm that it is, in fact, your original matrix. Use a random unit direction vector and rotation amount in Rodrigues’ formula.


Aside from the special case where cos θ = 0 in the code above, we have a one-to-one mapping from rotations to (θ, φ, ψ) triples with –π/2 < θ ≤ π/2 and –π < φ, ψ ≤ π. Thus, the set of rotations in 3-space is three-dimensional.

In general, you can imagine controlling the attitude of an object by specifying a rotation using θ, φ, and ψ. If you change any one of them, the rotation matrix changes a little, so you have a way of maneuvering around in SO(3). The cos θ = 0 situation is tricky, though. If θ = π/2, for instance, we find that multiple (φ, ψ) pairs give the same result; varying φ and ψ turns out to not produce independent changes in the attitude of the object. This phenomenon, in various forms, is called gimbal lock, and is one reason that Euler angles are not considered an ideal way to characterize rotations.

 



If you can make sense of the above, you will be good with this book.  This sample is pretty typical of how things in this book are covered.  So if you are looking for a text for learning or brushing up on computer graphics Computer Graphics: Principles and Practices is probably one of the best.  With the exception of Physics, and library specific instructions, this book has pretty much everything you might need to know.

General, Programming , , ,