HT for Web HTML5-based image Operations (III)

The Globalcompositeoperation property of the canvas using the HTML5 has reached the dyeing effect, in fact, CSS also provides some general image changes of the setting parameters, the filter filter settings for CSS can refer to HTTP.// The setup of Www.html5rocks.com/en/tutorials/filters/understanding-css/,CSS is very convenient, do not need us to understand the underlying implementation logic, only need to provide simple set parameter values, However, such a way can not achieve the effect of arbitrary changes, it is a bit like OpenGL early only through the fixed Function pipeline development, and now adopt shading language can achieve a variety of changes in the qualitative change, So we'll use WEBGL's SL code to toss a little more fun.

In the first article we have already mentioned that the essence of the image operation is the data changes of the input and output, so the dyeing is only the most simple and intuitive basic changes, through the WebGL SL code we can even achieve image distortion and other changes, first on the final change effect, the original is Hightopo official website of the banner, The effect of dyeing + twisting is as above:

The vertex code is as follows:

Attribute vec2 avertexposition;attribute vec2 atextureposition;varying vec2 vtextureposition;void main () { Vtextureposition = Atextureposition;gl_position = VEC4 (avertexposition, 0.0, 1.0); }

The fragment code is as follows

Precision Mediump float;varying vec2 vtextureposition;            Uniform sampler2d Usampler; Uniform VEC4 Ucolor; Uniform float uradius;uniform float uangle;uniform vec2 ucenter;            void Main () {                      vec2 vec = vtextureposition-ucenter;   float distance = length (VEC);   if (distance < Uradius) {   float ratio = (uradius-distance)/Uradius;   float angle = ratio * ratio * UANGLE;   float s = sin (angle);   float c = cos (angle);   VEC = VEC2 (vec.x * c-vec.y * s, vec.x * s + vec.y * c);   }                                  Gl_fragcolor = Texture2d (Usampler, Ucenter+vec) * UCOLOR; }

The corresponding JavaScript code is as follows:

Gl.viewport (0, 0, gl.viewportwidth, gl.viewportheight); Gl.clearcolor (0.0, 0.0, 0.0, 1.0); Gl.clear (GL. Color_buffer_bit); vertexshader = Loadshaderfromdom ("Shader-vs"); Fragmentshader = Loadshaderfromdom ("Shader-fs"); var program = Gl.createprogram (); Gl.attachshader (program, vertexshader); Gl.attachshader (program, Fragmentshader); Gl.linkprogram (program), Gl.useprogram (program), var vertexbuffer = Gl.createbuffer (); Gl.bindbuffer (GL. Array_buffer, VertexBuffer); Gl.bufferdata (GL. Array_buffer, New Float32array ([ -0.7, 0.7,-0.7, -0.7,0.7, 0.7,-0.7, -0.7,0.7, -0.7,0.7, 0.7]), GL. Static_draw) var vertexlocation = gl.getattriblocation (program, "Avertexposition"); Gl.vertexattribpointer ( Vertexlocation, 2, GL. FLOAT, False, 0, 0); Gl.enablevertexattribarray (vertexlocation); var texturebuffer = Gl.createbuffer (); Gl.bindbuffer ( Ell Array_buffer, Texturebuffer); Gl.bufferdata (GL. Array_buffer, New Float32array ([0, 1,0, 0,1, 1,0, 0,1, 0,1, 1]), GL. Static_draw) var texturelocation = gl.getattriblocation (program, "ATexTureposition "); Gl.vertexattribpointer (Texturelocation, 2, GL. FLOAT, False, 0, 0); Gl.enablevertexattribarray (texturelocation); Gl.activetexture (GL. TEXTURE0); Gl.bindtexture (GL.                texture_2d, TEXTURE); gl.uniform1i (Gl.getuniformlocation (program, ' Usampler '), 0); GL.UNIFORM4FV (gl.getuniformlocation (program, ' Ucolor '), Torgba (formpane.v (' color ')); gl.uniform1f ( Gl.getuniformlocation (program, ' Uradius '), formpane.v (' radius ')); gl.uniform1f (The Gl.getuniformlocation (program, ' Uangle '), formpane.v (' angle ')) GL.UNIFORM2FV (gl.getuniformlocation (program, ' Ucenter '), [formpane.v (' CenterX '), 1-            FORMPANE.V (' CenterY ')]); Gl.drawarrays (GL. Triangles, 0, 6);}

Many of the above Vertext and fragment code are easy to understand, the use of HT for Web Frompane plug-in is easy to implement control parameters panel can be edited real-time rendering changes, the following is the operation Control Panel dynamic changes in video effects:/http V.youku.com/v_show/id_xodmzmtu0ota0.html

Finally, if you read this patiently and carefully, interested in the development of the front-end game, I feel that I have a good understanding, willing to develop in Xiamen students can contact me, my mailbox for [email protected] ... Omit the part you should know, do not limit sex, education and age, as long as you want to do what you like, I look forward to communicating with you and join!

HT for Web HTML5-based image Operations (iii)