HTML 5 to achieve multiplayer real time 3D games

Six weeks ago we would like to try to use HTML5 to implement a twitch3d game is feasible. Finally we finished a few games and were surprised at the effect we had achieved.

You can try one of the Games: Air Hockey

Graphics

Most browsers now support WebGL Well, three.js is a useful library for using WEBGL. It provides a concise API, built-in practical functions, communication modules and so on, its disadvantage is ... Few documents. But you can learn how to implement the functionality you need through a number of existing examples.

Some examples use state.js and dat. GUI to monitor frequency frames and modify settings, both libraries are very useful. Dat. GUI can be used to fine-tune the delay compensation algorithm and game appearance, such as light intensity, material properties, etc.

We bought the 3D model (air hockey, mallet and Puck) from Turbosquid, thanks to Three.js's blender export plug-in, which we can easily turn into the blender scene (using the purchased model) JSON format for use in browsers. In the process of separating the model, adjusting the material and reducing the number of polygons, we honed the blender's skills to optimize the file size.

Blender interface

If you are new to the WebGL and Three.js will be more difficult, because there will be a lot of unfamiliar terminology and concepts. Because we are not familiar with the class, we spend a lot of time on the adjustment of light and material. We repeatedly try various adjustments, repeatedly refresh, experience the effect. When you see Mr.doob in RO. Me project on the speech (need to flip the wall), just think of a better way, that is, in the synthesis of the final effect before the various parts of the first separate small demo to facilitate the adjustment effect.