[WebGL Primer] Two, before you start WebGL, learn about canvas

Note: The article is translated from http://wgld.org/, the original author Sambonja 広 (doxas), the article if there is my additional instructions, I will add [Lufy:], in addition, The WEBGL research is not deep enough, some professional words, if the translation is wrong, you are welcome to correct.

HTML5AndCanvasLabel

Now ( 2 months)HTML5 is still in the draft stage.

HTML5 supports web-side multimedia functions and canvas features, adding a lot of new and more reasonable tag tags, and each browser is gradually refining these new features.

Canvas The object represents a html canvas element, like its name, defines a API supports scripted clients to draw graphics or images, which can be manipulated by api . Of course webgl is also using canvas , but before that, let's briefly explain canvas .

Lufy : year month Japan officially announced the condensation of a large number of network workers ' efforts HTML5 The specification has been formally finalized, and there are reports that the end,HTML5 will become a complete standard of finished products.

CanvasBasic knowledge of tags

Like canvas and img , it is a rectangular area that can be sized freely.

The rectangular area can be manipulated by JavaScript , which can be used to draw graphics, text, etc. freely. Furthermore, you can add shadows, paint, and rotate the drawing. In addition, images commonly used on theWeb , such as gif,jpg,png , can also be drawn directly.

However, it is not possible to manage objects and methods that manipulate animation, and so on. That is, in order to make dynamic applications, it is common to use JavaScript for loop processing.

In the rendering speed, because JavaScript in recent years the speed of execution is constantly rising rapidly, so, if not particularly complex applications, to reach 60FPS is not a problem. Here's a little game I used to do with canvas , and now I'm going to post it. * has been uploaded to the jsdo.it.

Not using WebGL, just using the canvas generic API, has been able to achieve this level. Although the actual running results depend on the operating environment, it's pretty good.

WebGLAndCanvas

As you can see, using canvas has been able to draw a variety of graphs freely, so why use WebGL for processing?

In fact, the little game on the jsdo.it , which was posted just now, is using the 2d context feature of canvas .

The context is an object that encapsulates the various APIs for drawing processing, which contains all the drawing functions and properties that you can imagine as a command tower, where all the settings and processing commands are issued by it.

the 2d context can be used to depict graphics, text and image data, but only for this, like its name, only for 2d space drawings.

And this relative,WebGL is three-dimensional, can be painted 3D graphics, different from the previous 2dcontext, it is called Webglcontext.

The webglcontext object, like a 2dcontext object, provides a variety of properties and methods that can be used to draw graphics using WebGL through webglcontext.

Summarize

On the context, when I wrote this article, only two definitions of 2d and WebGL were provided. But Webglcontext is temporarily called Experimental-webgl, later, there may be new types, this is not considered now.

All content on this site is illustrated using WebGL , and 2dcontext and future new contextare not intended to be studied. (Of course, some 2dcontext content may also appear ... ) ）

Next time, you'll start by introducing the basics of 3d drawing.

reprint Please specify: transfer from Lufy_legend's blog Http://blog.csdn.net/lufy_legend