I’m currently working with Open GL ES 2.0 in Android for developing games. I’m focusing on 2D graphics which consists generally of rending quads on the z=0 plane in orthographic projection. I’ve had to code up a boiler plate a couple times and I keep having to scrounge the internet for the right code to setup the view port projection. Most tutorials are for 3D and go about showing you how to setup a model view projection matrix which isn’t all that helpful when you’re working in 2D.

I spent some time tonight working it out from scratch and now that I’ve got a good grasp on it I figured I’d put a quick run down of things to remember when setting up the basic render projection.

First, when you initialize the GL view port you are started off with a basic orthographic projection. However, It’s domain and range are (-1, 1) and the origin (0,0) is centered in the view port. Also, it is skewed to match your view port dimensions. That is to say, if you have a 300 x 200 view port you will have an orthographic projection with an aspect ratio of 3/2.

When working in 2D it is much more convenient to have the origin at the top left corner of the view port and have the domain and range be [0, width] and [0, height]. So we need an orthographic matrix that transposes and scales the projection to match our view port.

The “default” orthographic matrix looks like this:

    [ 1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 0, 0,
      0, 0, 0, 1 ]

The first step, is to scale the projection to match our view port.

    [ 1/width, 0, 0, 0,
      0, 1/height, 0, 0,
      0, 0, 0, 0,
      0, 0, 0, 1 ]

Our origin is still centered, so the next step is translating the origin to the top left corner. Now because we are moving the origin from the center we are effectively losing half of our display area. To compensate we need to adjust our width & height values by half (or simply double the numerator).

    [ 2/width, 0, 0, 0,
      0, 2/height, 0, 0,
      0, 0, 0, 0,
      -1, -1, 0, 1 ]

That leaves with an origin (0,0) at the top left corner of the screen, a domain [0, width] and a range [0, -height]. The last thing to address is the negative range. Right now, we have to specify a negative why value to show up in the view port. Which kind of makes sense when you think about the coordinate system in the traditional way of Y going up and down with positive values going up. But when it comes to graphic programming it is more convenient to flip the Y axis an have positive values going downwards. To fix the Y axis lets adjust the matrix one last time.

    [ 2/width, 0, 0, 0,
      0, -2/height, 0, 0,
      0, 0, 0, 0,
      -1, 1, 0, 1 ]

There we go. Now the range is [0, height]. This orthographic projection matrix can now be used in your shader programs. Your vertex position vectors should be multiplied by this projection matrix in order to be rendered correctly in the view port.

Spent more time playing with my new software toy, Sculptris. The sculpture is based on a concept character image I found somewhere on the internet. I’ve got a lot of great material to work with.

A couple shots of Sunny with different base materials.
Read the rest of this entry »

I stumbled across Sculptris last night, and I must say I was floored. Sculptris is a 3D modeling software that allows you to create stunning 3D content as if you were sculpting with clay or wax. I’ve seen other tools like it in the past like Zbrush–but frankly they all pale in comparison to Sculptris intuitive user interface and simple, powerful toolset. More surprising is the matter that Sculptris is a 6 month old project carefully crafted by a single person, Tomas Pettersson, and is already an incredibly solid and polished piece of software. On the website Tomas does not indicate that he will push development of Sculptris on much further–but I can only hope he receives a lot of positive feed back (and donations), enough to encourage him to dedicate himself to the project for a long time coming. I’d really like to see what could become of Sculptris in a version 5.0.

I spent last night, until 3am, playing with the software. I happened to have a bunch of creature concept art I’d found around the internet saved in a folder, so I picked one out of the collection and tried to model it in Sculptris. In spite of my seriously lacking artistic talent the result was pretty amazing. I couldn’t believe how easy it was to work with the software in the first sitting and produce something great. Below is a video featuring the result of my labor, again nothing as fantastic that comes from professional 3d artists, but pretty awesome from a first time amateur.

This morning, in a fit of unexpected fan boy’ism, I created a fan home page for Sculptris. As amazing as the software is, the current website is, well it could use some improvement to be complimentary with the software. I would be over joyed to have Tomas adopt my version, or at least be inspired and update to the current layout.

You can see the fan page here.

HAR panel from TorrentFreak on Vimeo.

In order to address the issues of the existing copyright system and the need to have a system in place, I’ve come up with this new model for copyright policy.

1) Once created, any work automatically becomes copyright by the author.

2) Copyright ownership does not, nor cannot transfer. Ownership exists from the time of the work’s creation to the death of the author.

3) Copyright affords the right of the author to a monetary percentage (based on the ratio of contribution in collections of work) of any income directly attributed to the usage or distribution of owned work. The default percentage amount is 25%. However, the author of copyrighted work may enter in to contracts with distributors that alter the default percentage.

4) Copyright does not grant the right to specify who can or cannot distribute work or for what amount the work is distributed.

5) Copyrighted work can be obtained, used, or distributed for free–so long as no monetary gain is resulted from that material.

The goal of this copyright model is meant to open up copyright material in a fair and reasonable way to any party.

Benefits to Education

Educators no longer have to worry about finding material for their curriculum that fits a budget. Any material can be obtained by the instructor and made available to the students. Either by making it available on the course home page, or passing out fliers during class. Educators are also free to make a profit by comprising there own compendium of works for the course curriculum that students must purchase from the book store (as is done already) with the simple stipulation that the regulated percentage of the price go to the authors of the the material featured in the collection.

Benefits for the Author

Being as copyrighted material can no longer exclusively be held and distributed authors open up more sources of distribution and thus more opportunity for profit on their work. Authors have the comfort of know that they are entitled do a percentage of any profit made in part by contribution of their copyrighted material and as such have a legal channel to enforce that right.

Benefits for Business (Small and Large)

Being as no person or company can obtain exclusive distribution rights, as a company you have the opportunity to obtain and distribute copyrighted material that is doing well in a desire to join in on profiting from said work.

Large companies have the benefit of having a bargining chip with the author to allow them to distribute copyrighted work at reduced distribution percentage by offering highly available distribution. (IE Sell a lot, for a little).

Small companies have the benefit of competing with large companies by capitalizing on the creative freedom of the distribution model. For example, creating start up web sites with subscriber downloadable content. Since copyrighted material doesn’t have a set in stone base price, they can choose to offer as little or as much content via subscription or pay per download to create a competitive pricing model against large physical media distribution companies.

Individual Usage Benefits

Because monetary issues only come into play on profiting off of distributed material, obtaining material is a lot simpler. For one, due to the competitive nature of capitalistic markets, you’re going to find material provided cheaper and far more easier to obtain.

Due to the nature of the distribution license, all material is potentially freely available. Only a single person, possibly starting with the author himself, is needed to seed the initial distribution of material for free. Once you (or any person) gets a hold of copyrighted material (either by paying for it or by obtaining it for free) you are free to pass the material on to as many or as few people as you want (either for free or for a fee [so long as you pay the author a percentage of the profit]). A site like pirate bay (that is NOT add supported, or subscription supported, or money involved) is totally legit. Pirate bay itself becomes legit simply by paying the authors of the content distributed by its site a percentage of ad revenue.

The only issue here is determining what percentage of distribution any material represents, how much total revenue was generated and passing forward the author’s royalty percentage.

Examples

You release a compilation album of 10 songs by 10 different artists at $100 dollars. Regardless what the cost of producing the album is, you are selling it for $100 dollars. $100/10 = $10 per artist for revenue base. Multiplied by the distribution royalty percentage of 25% , $10 * .25 = $2.50. Each artist is entitled to $2.50 for each album sold. Variations of this example involve a single artist for more than one song, plus contractual stipulations reducing the distribution royalty percentage.

(more examples to come)

I was just checking out code.google.com/speed, a site designed to brain storm ideas on increasing the general speed of the net. The site allows posting of (short) ideas to be voted on. Off the top of my head I came up with an idea, summarized by this blogs title, and wanted to expand on it further than the site allows.

Opera’s recent feature announcement for Opera Unite revitalized an idea that had surfaced briefly before, putting a server service into the browser. In and of it self, this idea paves the path to many great ideas. I’d specifically like to address the use of this service as a way to increase the capacity of rich media websites to deliver large content more effectively.

Lets brainstorm how the website vimeo.com, a wonderful user contributed video site, could utilize this browser technology for content distribution. If I happen to be a user that spends a lot of time on vimeo, then I’ve likely to have downloaded many many megabytes worth of rich media content to my local temporary drive to be used by my video player (flash) to play back the media. Once I have viewed the video, all that cached data goes to waste.

What if vimeo had a site feature that allowed me as a user to “pay it forward” and help contribute to the website, not with original video content, but as an alternate content mirror. What if I could go into my user control panel and set up my preferences to act as a content peer for up to 1 Gigabyte per month. Additionally, I have to allow vimeo.com access to my Opera Unite web service via my opera browser settings (a security feature to make sure other sites dont maliciously abuse my server service).

From this point on, when ever I view a video on vimeo, the video data is stored in my temporary directory until it becomes full or the media is overwritten.  The data I download will be able to be redistributed back to other people using websites through the browser service.

The website Vimeo, when a client connects will automatically start streaming data from their servers as per usual. However, it will also have the flash client connect to other users who have enabled p2p sharing in their vimeo account and simultaneously download from those peers (until those peers quotas have been exceeded). Now data is being torrented from multiple sources and increasing the overall download speed for every one using vimeo.

Vimeo can also offer incentives for users who contribute back to the website by acting as a content peer. Valueless incentives  like rankings or site feature bonuses–or even monetary incentives like 10 cents for every 1 gig contributed. Ad revenue could be divied up between content peers. If a video has ads on the page, then it could take 50% of the profit from a single view of that ad, and split it between every content peer that contributed to that page download. We’d be working with fractions of fractions of cents, but for thousands of pages views the contributions add up.

Of course this doesn’t just apply for videos, it can also work with any kind of content that exists in large quantities. Images, Music, Videos, Software, Data.

We also have to consider security risks introduced by dispersing content to peers and having clients download from those peers. Malicious data alteration, exposing client IP addresses, etc. However these concerns are not much different from regular torrent files. Users whom already partake in torrenting should be no more apprehensive about becoming a content peer.

Inexorably when ever an interview is done with a technology figurehead regarding web 2.0, the question always arrives “What will be web 3.0″.  At which point an answer of usually remarkable length and sprinkled with trend words like interfaces, sensory inputs, rich media and other technical extraviganza that is ultimately really vague and uninsightful.

I think the reason why this typically happens is the interviewee compares the differences between the web 1.0 and web 2.0 and try to project a liklipath based on those comparisons. The reason why this becomes a difficult process and leads to empty answers is primarily because I think web 2.0 was misdefined originally. The typical view of what is web 2.0 is usually defined as rich internet applications, user driven content, data availability or any other facet of the newer super dynamic internet. The problem with this definition is that rich applications, user driven content and etc aren’t what web 2.0 is, rather they are the consequences of web 2.0, the side effects of what web 2.0.

How I classify web 2.0, as well as web 1.0 or the foreseeable web 3.0 is simply the competancy level of the end user to consume and contribute content.

With web 1.0, the content was authored primarily by the technical savy, and consumed by peers similar or lower savy. Feedback, and response was either nil or through email or at best guestbooks.

With web 2.0, the content is not authored by people of various level of technical savy, but the content is no longer restricted to static nature. It has become dynamic, not in just how the content being served but in how the content is contributed to by the end user. Authors of content have realized that users can contribute greatly to data, but also end users have become aware that they too have something to offer and in fact desire to do so.  Web 2.0 is the mutual realization that data providers and consumers can work together with fantastic result.

Web 3.0 then is already present, beginning to take root. Web 3.0 is a stage mutually consisting of developing enhancing technology for this consume/contribute paradigm and the application this technology outside the realm of the internet. And though it is one valid facit, I’m not talking about online retail, I’m speaking about other things too. Like the incorporation of the internet into the government or corporate architecture to provide transparency and accessibility. To provide review and direction that can be co-authored by consumerists and providers.

Further, we can extroplate to web 4.0. If web 3.0 is the integration of this mutual provider/consumer relationship into our society archetecture, then the need for absolute penetration of devices providing access to the internet. Admittedly theres already a large penetration of computers, laptops and other mobile devices with internet access but there will become a need where its not just a lot of people have access, but every one has access — every where and all the time.

So with the classification of the web based on the author/user interactivity we find a better progression / projection paths for these web x.0 categorizations.

At work we have a Vertical Televantage phone system. The client software that every one has to use is, to put it simply, a space thief. So much desktop space is wasted by unnecessary window chrome and empty list space. It is not really the applications fault, as it is basically a design flaw of most window user interface designs. (As a side note, I’ve come to the conclusion that all applications should be designed such that the tool bars, status bars and scroll bars should be, by default, hidden until the user indicates they want to make use of said interface by moving their mouse cursor to the region it would appear).

The problem, in this particular case, with being a space thief is that our sales employees (whom are already on 22″ wide screen monitors) have multiple windows open for their messenger, email, phone client, intranet, order entry and customer information windows. It would be rather beneficial to free up any screen real estate possible. The important information of the phone software is basically customers in their call queue, customer notes on the selected caller, and basic call control (hold, send to customer service queue etc). If some how we could condense that information and those functionality features and reduce the screen space the program took up it would reduce a lot of window clutter.

One of the technologies I’ve been exploring lately is Adobe’s new AIR product. Which is a cross platform desktop application software. I thought to myself that it would be really easy to design a nice desktop app user interface with air and if there were only some way to control the phone system through that app I’d be set!

Well luckily, the phone software when we upgraded (read paid lots of money) for the most recent version came with an API. The luck ends there however, as the API is COM based. Which basically means it has be compiled into a win32 program using .NET or VB or some other standard compiled language.  I was about to abandon the idea of pursuing this endeavor when I remembered that PHP(windows version) has a COM extension built in. Since I happen to be PHP developer I found this be rather fortuitous.

Then I had to think about just how I was going to translate user interaction with the desktop application to some PHP script running the phone server API. The obvious solution was to use XHR requests to a PHP server where the script ran. A couple problems unfolded from this tact however. The first problem, is that it takes PHP several seconds to actually load and initialize the COM API object for the phone server. So as a traditional REST based end point, it would be excruciatingly slow response time. The second problem, is that the desktop application clients would be stuck with PULL based updates. In other words, they would have to pull information updates from the server. Combined with problem one, this is a double whammy on time constraint as the client application would need near real time information updates to actively monitor thier phone queues.

Here I thought I had reached the dead end. Fortunately, after further reading through the Adobe AIR documentation I found that it supported Socket connections. With a socket connection, I could maintain a continuous read/write connection with a PHP script running as a server. This solution lands me the benefit of having a single initialization time for the COM API object, as well as providing both PULL and PUSH information updates. (PUSH meaning the server initiates a status update with the client).

But now I had to write a PHP server. And I couldn’t write a typical daemon program do to the lack of Fork on windows based machines. Another potential dead end. Technically, I could have wrote a php script that runs an infinite loop in which each iteration stops to check if it needs to handle any activity–but it would be really time consuming to come up some process control mechanisms to control the server while it was running. But I remembered working with a PHP extension for GTK called PHP-GTK which brings window applications to PHP. I decided to write a little GUI based TCP socket server. With GTK I can easily create little control and monitoring windows for the server.

Gradually, I was coming closer to the desired end goal, but as I did so, it seemed like I was involving more and more technology. But hey, that’s is the fun part of it after all. So now I know how to solve the client and server issues respectively, but I’ve actually got to come up how they are going to communicate. To be the most compatible with the Adobe AIR client and frankly because it seemed like the easiest solution, I decided on a JSON based protocol. I’d simply pass the binary string data of JSON objects which contained keys for the API method being called and parameters to be passed to the method as well as keys for response status, and method return properties.

Briefly, the process of the client server communication is as follows:

Client connects to server

Client sends JSON request to authenticate

 
{request: 'authenticate', username: user, password: pass}

Server uses the credentials to attempt to login to the phone server using the SDK COM API. If it fails a response is sent and the connection is terminated. However if the response succeeds it generates a unique id called a token and associates it with the IP:Port the client is connected from. For later requests, the token will be provided by the client and the server will simply verify the token belongs to the IP:Port of the client.

Server sends client response:

 
{status: '200', request: 'authenticate', token: 'ab223cd702ec2'}

When the user interacts with the client interface to say hold a call it will send a request to the server:

 
{request: 'hold', data: {call: 'current'}, token: 'ab223cd702ec2'}

When the server detects a state change for the user, such as a caller hanging up it will initiate a PUSH message to the client:

 
{request: 'update_caller_list', data: {caller: 2, status: 'disconnect' }}

When the client receives this update it knows to update its active caller list and remove the specified caller.

Currently, I’ve got the base work completed for this project. A working PHP server with a little window that shows socket/client status and logs messages sent and received. The client and server are successfully connecting and authenticating. At this point, all that is left to do is design the UI for the client software and come up with the protocol API that will cover updating/changing agent status as well and provide call control.

Looking back, I find it quite amusing how many different technologies came in to play to bring the project into reality. Togehter they included: JavaScript, PHP, Flash, GTK, COM, Sockets and a little programmer dedication.

Figured I’d post the hello world demo I created for the refactored canvas3d code I’ve been working on. However, this version of the demo only uses png pictures for the output, instead of the actual 3d plugin, since you probably don’t have it.

Three main steps to working with the library: Get the plugin, include the library, code your scene.

Getting the plugin

Well, you can get the plugin by searching for opengl at addons.mozilla.org or by clicking this link: Direct Link. However, it is an experimental plugin, so you will have to create an account/login (for free) to get it.

Including the Library

The second thing you will need to start working with the canvas3d library is of course, the c3dl library.
To get it, you will use to SCRIPT tags–one to specify a variable C3DL_PATH defining the path to the library and the other
to include the main c3dl.js file. The following code will do just that:

HTML

The third thing you will need to start working with the canvas3d library is of course, a canvas element. In the element
you should specify ID, WIDTH and HEIGHT attributes. The following code will do just that:

Sample 1 - First Scene

// create a scene object
var scn = new c3dl.scene('viewport');	
 
// add an object
var tri = new c3dl.primitive.triangle();	
scn.add(tri);
 
// camera setting
scn.camera.setPosition(c3dl.vector.make(0,0,-3));
scn.camera.setLookAtPoint(c3dl.vector.make(0,-0.25,0));
 
// start drawing the scene
scn.start();

Sample 2 - Specify a Context

// create a scene object
var scn = new c3dl.scene('sample2', {renderer: c3dl.renderer.OpenGLES20});	
 
// add an object
var tri = new c3dl.primitive.triangle();	
scn.add(tri);
 
// camera setting
scn.camera.setPosition(c3dl.vector.make(0,0,-3));
scn.camera.setLookAtPoint(c3dl.vector.make(0,-0.25,0));
 
// start drawing the scene
scn.start();

Sample 3 - Textures

// create a scene object
var scn = new c3dl.scene('sample3');	
 
// get handle to texture manager
var tman = scn.getTextureManager();
// load texture
var texture = tman.loadFromFile('crate.jpg');
 
// add an object
var cube = new c3dl.primitive.cube();
// apply texture
cube.addTexture(texture)
// add object to scene
scn.add(cube);
 
// camera setting
scn.camera.setPosition(c3dl.vector.make(2,-2,-3));
scn.camera.setLookAtPoint(c3dl.vector.make(0,0,0));
 
// start drawing the scene
scn.start();

Sample 4 - Lighting

// create a scene object
var scn = new c3dl.scene('sample4', {clearColor: new Array(0, 0, 0, 1.0)});	
 
// get handle to texture manager
var tman = scn.getTextureManager();
// load texture
var texture = tman.loadFromFile('crate.jpg');
 
// add an object
var cube = new c3dl.primitive.cube();
// apply texture
cube.addTexture(texture)
// add object to scene
scn.add(cube);
 
// get lighting manager
var lman = scn.getLightManager();
// create new light
var light = new c3dl.light({position: new Array(1, 1, 1, 1), diffuse: new Array(30, 0, 0, 1)});
var light2 = new c3dl.light({position: new Array(-1, 1, -1, 1), diffuse: new Array(0, 30, 0, 1)});
// apply light to scene
lman.addActiveLight(light);
lman.addActiveLight(light2);
 
// camera setting
scn.camera.setPosition(c3dl.vector.make(2,-2,-3));
scn.camera.setLookAtPoint(c3dl.vector.make(0,0,0));
 
// start drawing the scene
scn.start();

My favorite typing game (Japanese duh).

http://somoe.org/typing/

Recently at work I started working with Adobe AIR for a new project. In the prototyping phase I started investigating ways to provide a streamlined search interface. The video below is an 11 minute demo of the resulting search component I developed.

Atom Search from Jeremy Giberson on Vimeo

As I mentioned in the video, everything you see is constructed from HTML and JavaScript–which it turns out is a really fun, and really powerful way to prototype applications quickly. Despite being initially skeptical of Abobes new AIR product, I’m now quite excited by the potential of this product as a development platform.