HT for Web HTML5-based image operations (3), hthtml5

HT for Web HTML5-based image operations (3), hthtml5

The previous article used the globalCompositeOperation attribute of the Canvas of HTML5 to achieve the dyeing effect. In fact, CSS also provides some setting parameters for regular image changes, for more information about CSS Filter settings, see Pipeline Function Pipeline for development. Today, Shading Language can be used to achieve a variety of qualitative changes, therefore, we will use the SL code of WebGL to make it more interesting.

In the first article, we have mentioned that the essence of image operations is changes in input and output data. Therefore, dyeing is only the simplest and most intuitive basic change, through the SL code of WebGL, we can even achieve the effect of image distortion and other changes. First, let's see the final effect of the changes. The source image is the banner of the Hightopo official website. The effect of dyeing + distortion is as follows:

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(gl.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(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);}

The preceding Vertext and Fragment codes are easy to understand. Using the FromPane plug-in of HT for Web, you can easily edit the control parameter panel and display the changes in real time, the following Video Effects of dynamic change of the Operation Control Panel: http://v.youku.com/v_show/id_XODMzMTU0OTA0.html

Finally, if you read this carefully and patiently, you are interested in front-end game development and feel that you have a good understanding. If you are willing to develop in Xiamen, contact me. My email is eric @... You should know nothing about gender, education, and age. As long as you want to do what you like with your heart, I look forward to communicating with you and joining us!