HT for Web基于HTML5的图像操作(三)

上篇采用了HTML5的Canvas的globalCompositeOperation属性达到了染色效果,其实CSS也提供了一些常规图像变化的设置参数,关于CSS的过滤器Filter设置可参考 http://www.html5rocks.com/en/tutorials/filters/understanding-css/,CSS的设置的确很方便,不需要我们了解底层实现逻辑,仅需要提供简单的设置参数值即可,但这样的方式毕竟无法达到随心所欲变化的效果,这有点想OpenGL早期只能通过Fixed Function Pipeline进行开发,和如今采用Shading Language可实现丰富多彩变化的质变,因此这篇我们将采用WebGL的SL代码方式折腾点更好玩的效果。

第一篇我们已经提到图像操作的本质是对输入输出的数据变化,因此染色仅是最简单直观的基本变化,通过WebGL的SL代码我们甚至可以实现图像扭曲等变化效果,先上张最终变化效果的截图,原图就是Hightopo官网的banner,染色+扭曲的效果如上:

Vertex代码如下

attribute vec2 aVertexPosition;
attribute vec2 aTexturePosition;
varying vec2 vTexturePosition;
void main() {
    vTexturePosition = aTexturePosition;
    gl_Position = vec4(aVertexPosition, 0.0, 1.0); 
}

Fragment代码如下:

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; 
}

相应JavaScript代码如下:

    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);
}

以上Vertext和Fragment的代码很多很容易理解,采用HT for WebFromPane插件很容易实现控制参数面板可进行编辑实时呈现变化效果,以下为操作控制面板动态变化的视频效果:http://v.youku.com/v_show/id_XODMzMTU0OTA0.html

最后如果你耐心细致地阅读到此,对前端游戏开发感兴趣,感觉自己悟性不错,愿意在厦门发展的同学可与联系我,我的邮箱为eric@… 省略部分你应该知道的,不限制性别、学历和年龄,只要你想用心做自己喜欢的事,我期待着与你交流和加盟!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏点滴积累

PhiloGL学习(6)——深情奉献:快乐的一家

 前言 话说上一篇文章结尾讲到这一篇要做一个地球自转以及月球公转的三维动画,提笔,不对,是提键盘开始写的时候脑海中突然出现了几年前春晚风靡的那首歌:蒙古族小丫头...

3464
来自专栏数据结构与算法

BZOJ2152: 聪聪可可(点分治)

聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃、两个人都想玩儿电脑(可是他们家只有一台电脑)……遇到这种问题,一般情况...

993
来自专栏owent

ECUST 09年 校赛个人赛第三场部分解题报告(A,D,F,I)

首先是VC6.0的algorithm里没有min函数,而我用min做变量名导致CE4次,找了半天才找出来

981
来自专栏写代码的海盗

乐呵乐呵得了 golang入坑系列

开场就有料,今天返回去看了看以前的文章,轻松指数有点下降趋势。一琢磨,这不是我的风格呀。一反思,合着是这段时间,脑子里杂七杂八的杂事有点多,事情一多,就忘了快乐...

3525
来自专栏java一日一条

java提高篇之java的四舍五入

四舍五入是我们小学的数学问题,这个问题对于我们程序猿来说就类似于1到10的加减乘除那么简单了。在讲解之间我们先看如下一个经典的案例:

1452
来自专栏ccylovehs

JavaScript模拟自由落体

但是实际呈现的效果却不尽人意,应该是反弹位移计算有误,经反复思考无果(若哪位大拿有更好的实现方式欢迎评论告知)

1161
来自专栏ml

HDUOJ-----4506小明系列故事——师兄帮帮忙

小明系列故事——师兄帮帮忙 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/3276...

2947
来自专栏HansBug's Lab

3361: [Usaco2004 Jan]培根距离

3361: [Usaco2004 Jan]培根距离 Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 16  S...

3555
来自专栏一棹烟波

求数组的局部极小值和极大值

最近看到一个有意思的求数组局部极小值,极大值的代码,贴出来分享一下,源代码是matlab版的,我用我的较为暴力的诸多for循环将其修改为C++版的,不得不感叹m...

6217
来自专栏我和未来有约会

[Silverlight动画]转向行为 - 机车

机车类是转向角色的基类,但它不提供任何转向行为,只处理与运动相关的基本内容,如位置,速度,质量以 及角色接触场景边缘后的反应(反弹还是穿越出现在另一边)。转向机...

2146

扫码关注云+社区

领取腾讯云代金券