HTML5 and webgl

Source: Internet
Author: User

Note:[Reprinted please indicate the source of the article and keep it as it is]

Source: please
Author: Li Jiayi


First, let's take a look.HTML5New Features

  • Web socket defines a set of APIs that allow web pages to use the Web SOCKET protocol for duplex communication with remote hosts.
  • Web storage defines a set of APIs that can store data persistently in the form of key-value on the Web Client.
  • Web SQL A set of APIs are defined to store data in databases and use SQL-like queries.
  • Web workers Defines a set of APIs that allow scripts to run in the background and perform operations similar to threading.
  • Webgl defines a set of APIs that allow the use of Apis similar to Open GL on web pages. It is actually a set of 3D graphics APIs based on OpenGL ES 2.0. These APIs are used through the canvas tag of HTML 5.

It can be seen from the above that WebGl is actually a part of the new features provided by html5. it is presented through the canvas Element of html5.

In this way, page developers can use the canvas label to open up a div-like area to implement 3d rendering in this area. The usage is similar to that of common OpenGL.

In fact, canvas labels also appear in html5. The first supported is 2d drawing, and now WebGl-based 3d Painting.

The game Quake II implements WebGL-based transplantation so that you can use a browser to play a large 3d game like Quake.

In fact, Quake II is a HTML5-based game.

The following are HTML5 technical elements used by Quake for WebGL:

  • Webgl is used for 3D rendering.
  • HTML audio is used for audio.
  • The local storage API is used for local persistent storage.
  • Web socket is used for network communication.

Of course, Quake can run on the Browser and cannot leave JavaScript.

Currently, HTML5 has been promoted to a large extent. Although it is still in the draft stage, mainstream browsers have adopted a positive attitude to support it.

We can see many HTML5 features in the latest browsers. Google and Apple are important drivers.

From the features and usage of HTML5, it is not difficult to see why Google and Apple are so keen on HTML5.


If you want to Build on your own machine and run it, follow these steps:


I tried it on Ubuntu and recorded the steps as follows:

Step 1
Sudo apt-Get install mercurial
Sudo apt-Get install Vorbis-Tools
Sudo apt-Get install openjdk-6-jdk
Sudo apt-Get install lame

Step 2
Hg clone quake2-gwt-port
CD quake2-gwt-port

Step 3
./Build-dedicated-server (will build the tools and the client and server code ).
* If you run into memory issues, try export maven_opts =-xmx512m

Step 4
./Install-resources (will download, unpack, and convert the original quake II demo resources ).
CP-r Maven-build/Server/target/gwtquake/war/gwtquake war
* Due to a glitch in our Maven build files, you currently also need CP-r Maven-build/Server/target/gwtquake/war/gwtquake war. We are fixing this.

Step 5
./Run-dedicated-server [port] (will run the local quake II server ).

Step 6
./Chromium -- enable-webgl

Step 7
Http: // localhost: 8080/gwtquake.html
Navigate to: http: // localhost: 8080/gwtquake.html (or whatever port you specified to the server ).

Remember to use chromium.


In addition, if you don't want to be so troublesome, you can try the online version directly. There should be a lot of searches,

For example: 8080/gwtquake.html

What problems encountered, refer to the

Finally, share a quake video played by browser.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.