HTML5 Canvas,webgl,css SHADERS,GLSL's ambiguous relationship

First, the previous

The development of technology is changing rapidly, maybe go home to catch a few days fish, come out a new thing. At the beginning of the new technology development, you can not foresee its future trend, life is precious, there is no need to spend too much time in-depth study of these new things, but, know, probably, to understand a full picture is very necessary. Although not the creators of the Times, nor lag behind the tide of development of the Times.

The development of the Internet is quite rapid, others do not say, on the front-end technology This piece, the emergence of some of the term or the birth of nouns let people dazzling, overwhelmed, such as: HTML5 Canvas, WebGL, CSS Shaders, GLSL and so on. Do you have the question: what are these? Do you like soy sauce or guest CCTV extras? Are they ambiguous or cross-generational?

Well, I'll gossip about these front-end technology-related names.

Ii. the faces of the respective Lushan

HTML5 Canvas
This must have listened to a lot of people, so here a few lines in a hurry to take. HTML5 Canvas is actually a canvas element that uses JavaScript to draw graphics like polylines, circles, gradients, and so on.

There are already many applications in the Web actual project. Example of rotation, fillet generation, and so on. The low version of IE browser does not support this element, but also can be called by the following JS can be used to support some of the canvas function: excanvas.js

Opengl
The title does not appear OpenGL, one because the title is very long, but this stuff is not specifically belong to the Web front-end domain.
OpenGL (Full-write open Graphics Library) is a specification that defines a cross-programming language, cross-platform programming interface, which is used for three-dimensional images (also two-dimensional). OpenGL is a professional graphics program interface, is a powerful, easy to call the bottom of the graphics library, is the industry's most widely accepted 2d/3d graphics API, is a hardware-independent software interface, since its inception has spawned a variety of computer platforms and equipment on the thousands of excellent applications.

OpenGL is easy to use and highly efficient. It has seven functions: modeling, transformations, color mode settings, lighting and material settings, texture mapping (Texture Mapping), bitmap display and image enhancement images, and dual-cache animation (double buffering).

See OpenGL Encyclopedia for details

Webgl
WebGL is a 3D drafting standard that allows the combination of JavaScript and OpenGL ES 2.0, and by adding a JavaScript binding to OpenGL ES 2.0, WebGL can be a HTML5 Canvas provides hardware 3D accelerated rendering so that Web developers can display 3D scenes and models more smoothly in the browser with the help of system displays, as well as create complex navigation and data visualizations. Obviously, the WEBGL technology standard eliminates the hassle of developing web-dedicated rendering plugins that can be used to create Web pages with complex 3D structures, and even to design 3D web games.

Because WebGL is based on OpenGL and JavaScript technology, and OpenGL has a competitive relationship with Microsoft DirectX, and Microsoft itself has developed a Silverlight plugin that is similar to WebGL, Microsoft does not support WEBGL technology. This is a good understanding, like the five elder brother Herkang in the fight for the beloved mother and sister can not hug each other.

Microsoft's not support does not affect the development of WebGL, with Firefox, Google and Apple, and so on, WebGL also began to appear in a variety of applications. For example, the little-known WebGL technology-based Google body browser (Google Body Browser) experiment Project, users can view 3D human body structure (from Cnbeta).

GLSL
GLSL is the OpenGL coloring language (Glsl――opengl shading Language) (the following can be used without looking, are professional terms, one head, two large). is a short custom program that developers use to write in OpenGL for coloring programming, which is performed on the graphics card's GPU (Graphic Processor Unit graphics processing units), instead of a part of a fixed rendering pipeline. such as: view conversion, projection transformation and so on. The shader code for GLSL (GL shading Language) is divided into 2 parts: Vertex Shader (vertex shader) and fragment (fragment shader), and sometimes geometry Shader (geometry shader). The vertex shader that is responsible for running vertex coloring. It can get the status of the current OpenGL, GLSL the built-in variables for delivery.

CSS Shaders
CSS Shaders is a brand new project that Adobe Corporation launched last week at Adobe Max.
The new standards, developed by Adobe and Apple and opera, have been submitted to the consortium to bring 3D graphics features to CSS technology.

The Shader (shader) can be understood as a small program running on the graphics side, typically used in games and other graphics-related applications. There are two kinds of shaders, one is the vertex shader, which controls the vertices of the geometry to draw a 3D surface mesh, and the other is the slice shader, which controls the color of the pixel. CSS shaders technology will allow developers to use both vertex shader and slice shader.

Using shaders in CSS can create a lot of eye-catching dynamic effects.

Adobe showed some demo videos in which Twitter's pages were rendered as curved surfaces in the first video, and the second video was more interesting, folding Google Maps and Street View rendering like a real paper map. Because shaders can be used for all HTML content, the elements of CSS shaders rendering include ordinary tables, SVG, even HTML5 video, and so on.

CSS is now ready to make some 3D animations, but the addition of a key player to the shader will make the technology more flexible and programmability-enhancing. CSS shaders can be used in conjunction with Adobe Edge to create more dynamic pages. Adobe says the edge will be more expressive in the future, and CSS shaders is designed to do just that.

CSS shaders has built in some common filters, including setting blur, shading, hue, flipping, grayscale, transparency, gamma, and more. In addition, developers are allowed to write their own shader code, using the language-as expected, and WebGL-is GLSL.

Some people may wonder, it seems that CSS shaders and WebGL function and approach, the use of language is consistent, will not conflict ah. According to some of Adobe's people, WebGL can only work on one canvas, and CSS shaders applies to any Web content. CSS is meant to be used to define the style of the Web page, the addition of shader undoubtedly can greatly increase flexibility, so that developers have more ways to create more imaginative web pages. There is no conflict between the two ~ ~

At present, there seems to be no browser bird this fellow, we need to wait for some time.

Third, the relationship arrangement

How much of the above statement reveals the relationship between the various nouns. The so-called one picture wins preface, what Mother's two aunt three aunts ' little grandson family's a dog lice and so on, is free, direct:

Well, to avoid nagging, I don't have much to say.

Iv. article mentions & reference pages

· HTML 5 Canvas
· HTML5 Canvas Cheat Sheet
· OpenGL Encyclopedia
· WebGL Encyclopedia
· 10 WebGL App Demo sites
· Use GPU to accelerate CSS? Adobe launches CSS shaders!
· Introducing CSS shaders:cinematic effects for the web
· GLSL Encyclopedia

Transferred from: http://www.zhangxinxu.com/wordpress/?p=1987

HTML5 Canvas,webgl,css SHADERS,GLSL's ambiguous relationship