HTML5 to achieve real-time 3D games

Original text:Http://

There are some versions of this article in China, which is reproduced in the Translation:Original.

-- -- -- -- -- -- -- -- -- -- -- -- -- -- --

Six weeks ago, we wanted to achieve a HTML5 with aTwitch3D game is feasible. Finally we finished a few games and we were surprised by the results we achieved.

You can try one of the Games:Hockey Air


At present, most of the browser support for WebGL has been very good,Three.jsIs very useful for the use of WebGL library. It provides a simple API, built-in utility functions, communication module, etc., its disadvantages are... Very few documents. But you can learn how to implement the functions you need through many existing examples.

Some examples of the use of theState.jsAndDat.GUITo monitor and modify the frame frequency settings, these two libraries are very useful. Dat.GUI can be used to fine tune delay compensation algorithm and game appearance, such as light intensity, material properties, etc..

We are fromTurboSquidBought 3D model required in the game (air hockey, mallet and, three.js puck) forBlenderExport plug-ins and rely on this plugin we can easily the blender scenes (to buy) model for the JSON format for the browser. In the process of separating the model, adjusting the number of materials and reducing the number of polygons, we hone the use of Blender to optimize file size.

Blender interface

If you are just contact 3D, webgl and three.js will appear more abstruse, because there will be a lot of strange terms and concepts. Since we are not familiar with the 3D, so the adjustment of the light and material spent a lot of time. We have repeatedly tried a variety of adjustments, and repeatedly refresh, experience the effect. When you seeMr.doob speech on RO.ME project(to the wall), just think there is a better way, that isIn the final effect of the synthesis of the final effect of the various components of a separate small demo in order to facilitate the adjustment effect.

Network Communications

We want to try to create a timely response to the low delay, the game to challenge the player's reaction is feasible, hockey air looks very appropriate. Ice hockey mobile hammer and requires a good network performance. As long as the network has a slight delay, the game can be greatly reduced. Luckily,WebSocketProvided a good performance.

Our network scheme is relatively simple, but this has been the way to prove our point of view:It is feasible to use HTML5 to implement interactive (twitch, I do not know how to translate) games!The network scheme is as follows:

  • The client sends the server location to the game player ice hammer.
  • Based on the server before the position, the calculation of two internationally ice hammer speed is then calculated whether there is a collision, ice hockey new speed and position.
  • The server sends the latest position of ice hockey and ice hammer to two client, client interface.

Of course, the delay will complicate the process. If the data packets from the server to the client needs 50 milliseconds, then the player will eventually see the interface is 50 milliseconds ago,This makes it hard for players to hit the ice hockey.. Our solution to this problem is:

  • The client calculates the time delay before the server, such as 50 milliseconds.
  • When the client receives the position and speed of ice hockey from the server, the position and speed of the ice hockey is calculated by using the same method as the server.
  • Then the client shows the ice hockey in the budget.

So, the players do not need to calculate the delay caused by the location of the error to hit the ice hockey.

There are also many popular to verify the effectiveness of the lag compensation technology can improve the gameplay of the game. However, we only use the above method in the demo - the 90's game networking technology, because it is enough to make us create an interesting, real-time, browser, multi player game.

In addition, it is worth mentioning that everything should be based on the service side of the data, all of the real-time multiplayer games are so against cheating.


We believe that in order toHTML5 as the front end + Node.js for the back endThis form of development, can reduce development time, because the client and server can reuse code. Especially in real-time games, because of this kind of case, the front and back side needs the same simulation calculation logic.Compared with the previous project, the client and server in the same way as the logical reuse, for us to save about 30% of the time.

We try to use RequireJS to write the client code, but the AMD (Modules/AsynchronousDefinition) way to encapsulate all of our code, it will make people at any time! Luckily, we found out.BrowserifyThis artifact, which provides a lot of Node standard libraries for the realization of the package. This codeEvents = require 'events',Game extends event.EventEmitter classYou can run at the same time in both the server and the client. Unfortunately, Browserify is not compatible with Backbone.js, for this, we wrote 50 linesCoffeeScriptTo replace the functions we need in Backbone.js.

Choosing CoffeeScript instead of directly writing JavaScript is because it can streamline the code, and all the Node management tools (such as nodemon, forever) seem to support CoffeeScript.At the beginning we are concerned with the use of CoffeeScript to write the code is difficult to debug, but the fact proved that CoffeeScript generated JS code is highly readable.

Browserify uses a new code mapping standard, which helps to use the Chrome developer tools to visit the code, and believe that it will not take long for us to debug the CoffeeScript directly on the tour. (Translation: chrome can directly debug CoffeeScript, related linksHttp://

Performance and optimization

As mentioned above, we use Node.js as the server, in addition to Node.js, we feel no other solution can be achieved we let the server and the client to run the same code. So far, we have been very satisfied with the performance of 512M, in our load test, the Rackspace VM Node machine can simultaneously support about 100 games. Because the performance is so good, we have little time to optimize the performance.

HTML5 GC Collection we were initially concerned that GC GC Chrome FireFox cause might game noticeable pauses in blips in smoothness play Hockey are Air Garbage there and GC pauses noticeable. However, we did not take time to reduce the number of GC appear, of course, we believe that if the code is written more carefully to reduce waste, the Firefox may get better performance.


Tour on the game development, the biggest obstacle is the lack of tools. We see that there are a lot of game framework, but either on the game development limited or that they had been acquired in the or is not released (annotation: this sentence can be rather baffling, Original: we see a lot of frameworks, but they either constrain, you into making your game a certain way, or they get acquired and are never released.) on game development excellent library and a number of components, but developers need to own to combine them.

Flash and Unity have built up a good development environment, iOS and Live Arcade Xbox platform, also provides a terminal to the terminal solution to create and publish games. But the browser platform is still too new, write HTML5 games like writing assembly code as trouble. In our development process, we can not find a scroll bar to adjust the color of the ice or the intensity of the light. To get the result we have to run and get the literal code in a very complex software. (we wanted any of that we d 'have to build it or buy in (literally) a heavier framework. to if ()

We are very pleased to see the possibility of achieving a close to the hand handle control synchronous multiplayer browser. As fans of StarCraft and Halo, we are ready to see the two of them in the browser, and we hope to inspire you to see their expectations in the browser.

We can get an early version of our game and game development tools:Http://

Related reading

For more complete information about compiler optimizations, seeOptimized notification.