Chinaunix首页 | 论坛 | 博客
  • 博客访问: 951131
  • 博文数量: 110
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1997
  • 用 户 组: 普通用户
  • 注册时间: 2013-12-15 22:39
个人简介

HT for Web 3D. HT for modern web and mobile app development. www.hightopo.com

文章分类

全部博文(110)

文章存档

2020年(1)

2018年(28)

2017年(21)

2016年(10)

2015年(28)

2014年(19)

2013年(3)

我的朋友

分类: HTML5

2014-11-23 19:24:03

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

Screen Shot 2014-11-23 at 6.00.06 PM

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

Vertex代码如下:

点击(此处)折叠或打开

  1. attribute vec2 aVertexPosition;
  2.     attribute vec2 aTexturePosition;
  3.     varying vec2 vTexturePosition;
  4.     void main() {
  5.         vTexturePosition = aTexturePosition;
  6.         gl_Position = vec4(aVertexPosition, 0.0, 1.0);
  7.     }

Fragment代码如下:

点击(此处)折叠或打开

  1. precision mediump float;

  2.     varying vec2 vTexturePosition;
  3.     uniform sampler2D uSampler;

  4.     uniform vec4 uColor;
  5.     uniform float uRadius;
  6.     uniform float uAngle;
  7.     uniform vec2 uCenter;

  8.     void main() {
  9.      vec2 vec = vTexturePosition - uCenter;
  10.      float distance = length(vec);
  11.      if (distance < uRadius) {
  12.          float ratio = (uRadius - distance) / uRadius;
  13.          float angle = ratio * ratio * uAngle;
  14.          float s = sin(angle);
  15.          float c = cos(angle);
  16.          vec = vec2(vec.x * c - vec.y * s, vec.x * s + vec.y * c);
  17.      }
  18.      gl_FragColor = texture2D(uSampler, uCenter+vec) * uColor;
  19.     }

相应JavaScript代码如下:

点击(此处)折叠或打开

  1. gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  2.     gl.clearColor(0.0, 0.0, 0.0, 1.0);
  3.     gl.clear(gl.COLOR_BUFFER_BIT);

  4.     vertexShader = loadShaderFromDOM("shader-vs");
  5.     fragmentShader = loadShaderFromDOM("shader-fs");

  6.     var program = gl.createProgram();
  7.     gl.attachShader(program, vertexShader);
  8.     gl.attachShader(program, fragmentShader);
  9.     gl.linkProgram(program);

  10.     gl.useProgram(program);

  11.     var vertexBuffer = gl.createBuffer();
  12.     gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  13.     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
  14.         -0.7, 0.7,
  15.         -0.7, -0.7,
  16.         0.7, 0.7,
  17.         -0.7, -0.7,
  18.         0.7, -0.7,
  19.         0.7, 0.7
  20.     ]), gl.STATIC_DRAW);
  21.     var vertexLocation = gl.getAttribLocation(program, "aVertexPosition");
  22.     gl.vertexAttribPointer(vertexLocation, 2, gl.FLOAT, false, 0, 0);
  23.     gl.enableVertexAttribArray(vertexLocation);

  24.     var textureBuffer = gl.createBuffer();
  25.     gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer);
  26.     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
  27.         0, 1,
  28.         0, 0,
  29.         1, 1,
  30.         0, 0,
  31.         1, 0,
  32.         1, 1
  33.     ]), gl.STATIC_DRAW);
  34.     var textureLocation = gl.getAttribLocation(program, "aTexturePosition");
  35.     gl.vertexAttribPointer(textureLocation, 2, gl.FLOAT, false, 0, 0);
  36.     gl.enableVertexAttribArray(textureLocation);

  37.     gl.activeTexture(gl.TEXTURE0);
  38.     gl.bindTexture(gl.TEXTURE_2D, texture);
  39.     gl.uniform1i(gl.getUniformLocation(program, 'uSampler'), 0);
  40.     gl.uniform4fv(gl.getUniformLocation(program, 'uColor'), toRGBA(formPane.v('color')));
  41.     gl.uniform1f(gl.getUniformLocation(program, 'uRadius'), formPane.v('radius'));
  42.     gl.uniform1f(gl.getUniformLocation(program, 'uAngle'), formPane.v('angle'));
  43.     gl.uniform2fv(gl.getUniformLocation(program, 'uCenter'), [formPane.v('centerX'), 1-formPane.v('centerY')]);
  44.     gl.drawArrays(gl.TRIANGLES, 0, 6);
  45. }

以上Vertext和Fragment的代码很多很容易理解,采用的很容易实现控制参数面板可进行编辑实时呈现变化效果,以下为操作控制面板动态变化的视频效果:

Screen Shot 2014-11-23 at 6.02.26 PM

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

阅读(2555) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~