Chinaunix首页 | 论坛 | 博客
  • 博客访问: 952032
  • 博文数量: 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-12-31 21:20:52

今天是2014年的最后一天,这个时刻总会让人想起时钟,再过几个小时地球人都要再老了一岁,于是搞个HTML5版的时钟就是我们今天要完成的任务,实现HTML5的时钟绘制一般会采用三种方式,第一种采用CSS的实现方式,例如 ;第二种采用SVG的实现方式,例如 ;第三种采用Cavnas的2D绘制方式,如中《》中自定义绘制的clock例子,HT的例子的实现效果如下,其实现代码附在本文的最后部分。

Screen Shot 2014-12-31 at 8.19.17 PM

以上三种方式都是较容易理解的实现方式,今天我们将采用的则是较为少见的WebGL纯Shading Language实现方式,这种方式极其高效,毕竟我们采用的是可利用GPU硬件加速的WebGL技术,CPU代码角度看仅有两个三角形的绘制,真正表盘的绘制逻辑完全在GPU对两个三角形进行Fragment Shading时实现。

Screen Shot 2014-12-31 at 8.08.48 PM

可通过这里  玩玩最后的实现效果以及实现代码,采用GLSL的实现最重要的就是决定当前坐标位置的gl_FragColor的颜色,我们将始终分为表盘、外圈、刻度、时针、分针和秒针几个部分,代码后部分的留个连续Blend代码相当于逐层绘制的逻辑,以下几个函数技术点说明:

  • Rect函数中的clamp(uv, -size/2.0, size/2.0))是我们决定点是否在矩形区域的技巧
  • 函数Rotate(vec2 uv,float angle)将坐标点旋转到水平或垂直位置方便我们确定Rect和Line参数进行对比
  • Blend函数mix(shapeColor, backColor, smoothstep(0.0, 0.005, shape))是常用的混合mix和smoothstep达到更好处理边缘平滑效果GLSL常用技巧

为了说明mix和smoothstep的融合效果,我搞了个  的例子,你可以尝试去掉#define SMOOTH后边缘锯齿较明显的问题,也可以调节smoothstep(0.49, 0.5, d)的0.49为0.3等较小的参数体验渐进的效果,以下为几种效果的综合对比

Screen Shot 2014-12-31 at 7.09.28 PM

GLSL的Fragment Shader实现代码如下:

点击(此处)折叠或打开

  1. #ifdef GL_ES
  2. precision mediump float;
  3. #endif

  4. uniform float time;
  5. uniform vec2 resolution;

  6. float pi = 3.1415926;
  7. float tau = pi * 2.0;

  8. vec2 Rotate(vec2 uv,float angle);

  9. float Circle(vec2 uv,float r);
  10. float Rect(vec2 uv,vec2 size,float r);
  11. float Line(vec2 uv,vec2 start,vec2 end,float r);
  12. float Merge(float a,float b);
  13. float Outline(float a,float r);

  14. vec3 Blend(vec3 backColor, vec3 shapeColor, float shape);

  15. float SecStep(float x);

  16. void main( void )
  17. {
  18.         vec2 res = resolution / resolution.y;
  19.         vec2 uv = ( gl_FragCoord.xy / resolution.y );
  20.         uv -= res / 2.0;

  21.         float secAng = (SecStep(time) / 60.0) * tau;
  22.         float minAng = (time / 3600.0) * tau;
  23.         float hourAng = (time / 43200.0) * tau;

  24.         float clockFace = Circle(uv, 0.45);
  25.         float clockTrim = Outline(clockFace, 0.01);

  26.         vec2 secDomain = Rotate(uv, secAng);
  27.         float clockSec = Line(secDomain, vec2(0.0, -0.15), vec2(0.0, 0.35), 0.001);
  28.         clockSec = Merge(clockSec, Circle(uv, 0.01));
  29.         clockSec = Merge(clockSec, Rect(secDomain - vec2(0.0, -0.08), vec2(0.012, 0.07), 0.0));

  30.         float clockMin = Line(Rotate(uv, minAng), vec2(0.0,-0.08), vec2(0.0, 0.35), 0.005);
  31.         float clockHour = Line(Rotate(uv, hourAng), vec2(0.0,-0.05), vec2(0.0,0.3), 0.007);
  32.         clockHour = Merge(clockHour, Circle(uv, 0.02));

  33.         float tickMarks = 1.0;
  34.         vec2 tickDomain = uv;
  35.         for(int i = 0;i < 60;i++)
  36.         {
  37.             tickDomain = Rotate(tickDomain, tau / 60.0);
  38.             vec2 size = (mod(float(i + 1), 5.0) == 0.0) ? vec2(0.08, 0.01) : vec2(0.04, 0.002);
  39.             tickMarks = Merge(tickMarks, Rect(tickDomain - vec2(0.38, 0.0), size, 0.0));
  40.         }

  41.         vec3 faceColor = mix(vec3(1.0, 1.0, 0.0), vec3(1.0, 1.0, 1.0), uv.x+0.5);
  42.         vec3 trimColor = mix(vec3(0.0, 1.0, 0.0), vec3(0.0, 0.0, 1.0), uv.y + 0.5);
  43.         vec3 secColor = vec3(1.0, 0.0, 0.0);
  44.         vec3 handColor = vec3(0.0, 0.0, 0.0);

  45.         vec3 color = mix(vec3(1.0, 0.0, 0.0), vec3(1.0, 1.0, 1.0), uv.y+0.5);
  46.         color = Blend(color, faceColor, clockFace);
  47.         color = Blend(color, trimColor, clockTrim);
  48.         color = Blend(color, trimColor, tickMarks);
  49.         color = Blend(color, handColor, clockHour);
  50.         color = Blend(color, handColor, clockMin);
  51.         color = Blend(color, secColor, clockSec);    

  52.         gl_FragColor = vec4(color, 1.0);
  53. }
  54. float SecStep(float x)
  55. {
  56.     float interp = smoothstep(0.80, 1.0, mod(x, 1.0));
  57.     return floor(x) + interp + (sin(interp * pi)) ;
  58. }
  59. float Line(vec2 uv,vec2 start,vec2 end,float r)
  60. {
  61.     return Rect(uv-(end+start)/2.0, vec2(r, end.y - start.y), r);
  62. }
  63. float Rect(vec2 uv,vec2 size,float r)
  64. {
  65.     return length(uv - clamp(uv, -size/2.0, size/2.0)) - r;    
  66. }
  67. vec2 Rotate(vec2 uv,float angle)
  68. {
  69.     return mat2(cos(angle), sin(angle),-sin(angle), cos(angle)) * uv;
  70. }
  71. float Circle(vec2 uv,float r)
  72. {
  73.     return length(uv) - r;    
  74. }
  75. float Merge(float a,float b)
  76. {
  77.     return min(a, b);    
  78. }
  79. float Outline(float a,float r)
  80. {
  81.     return abs(a) - r;    
  82. }
  83. vec3 Blend(vec3 backColor, vec3 shapeColor, float shape)
  84. {
  85.     return mix(shapeColor, backColor, smoothstep(0.0, 0.005, shape));
  86. }
中《》中自定义绘制的clock例子实现代码如下:

点击(此处)折叠或打开

  1. function init() {
  2.     dataModel = new ht.DataModel();
  3.     graphView = new ht.graph.GraphView(dataModel);
  4.     view = graphView.getView();

  5.     view.className = 'main';
  6.     document.body.appendChild(view);
  7.     window.addEventListener('resize', function(e) {
  8.         graphView.invalidate();
  9.     }, false);

  10.     ht.Default.setCompType('clock-face', function(g, rect, comp, data, view) {
  11.         var cx = rect.x + rect.width / 2;
  12.         var cy = rect.y + rect.height / 2;
  13.         var theta = 0;
  14.         var r = Math.min(rect.width, rect.height)/2 * 0.92;
  15.         
  16.         g.strokeStyle = "#137";
  17.         for (var i = 0; i < 60; i++) {
  18.             g.beginPath();
  19.             g.arc(
  20.                 cx + Math.cos(theta) * r,
  21.                 cy + Math.sin(theta) * r,
  22.                 i % 5 === 0 ? 4 : 1,
  23.                 0, Math.PI * 2, true);
  24.             g.closePath();
  25.             g.lineWidth = i % 5 === 0 ? 2 : 1;
  26.             g.stroke();
  27.             theta = theta + (6 * Math.PI / 180);
  28.         }
  29.     });

  30.     ht.Default.setImage('clock', {
  31.         width: 500,
  32.         height: 500,
  33.         comps: [
  34.             {
  35.                 type: 'circle',
  36.                 relative: true,
  37.                 rect: [0, 0, 1, 1],
  38.                 background: 'yellow',
  39.                 gradient: 'linear.northeast'
  40.             },
  41.             {
  42.                 type: 'clock-face',
  43.                 relative: true,
  44.                 rect: [0, 0, 1, 1]
  45.             },
  46.             {
  47.                 type: function(g, rect, comp, data, view) {
  48.                     // get current time
  49.                     var date = data.a('date');
  50.                     if(!date){
  51.                         return;
  52.                     }
  53.                     
  54.                     var hours = date.getHours();
  55.                     var minutes = date.getMinutes();
  56.                     var seconds = date.getSeconds();
  57.                     hours = hours > 12 ? hours - 12 : hours;
  58.                     var hour = hours + minutes / 60;
  59.                     var minute = minutes + seconds / 60;
  60.                     var clockRadius = 250;

  61.                     // save current context
  62.                     g.save();

  63.                     g.translate(clockRadius, clockRadius);
  64.                     g.beginPath();

  65.                     // draw numbers
  66.                     g.font = '36px Arial';
  67.                     g.fillStyle = '#000';
  68.                     g.textAlign = 'center';
  69.                     g.textBaseline = 'middle';
  70.                     for (var n = 1; n <= 12; n++) {
  71.                         var theta = (n - 3) * (Math.PI * 2) / 12;
  72.                         var x = clockRadius * 0.75 * Math.cos(theta);
  73.                         var y = clockRadius * 0.75 * Math.sin(theta);
  74.                         g.fillText(n, x, y);
  75.                     }

  76.                     // draw hour
  77.                     g.save();
  78.                     var theta = (hour - 3) * 2 * Math.PI / 12;
  79.                     g.rotate(theta);
  80.                     g.beginPath();
  81.                     g.moveTo(-15, -5);
  82.                     g.lineTo(-15, 5);
  83.                     g.lineTo(clockRadius * 0.5, 1);
  84.                     g.lineTo(clockRadius * 0.5, -1);
  85.                     g.fill();
  86.                     g.restore();

  87.                     // draw minute
  88.                     g.save();
  89.                     var theta = (minute - 15) * 2 * Math.PI / 60;
  90.                     g.rotate(theta);
  91.                     g.beginPath();
  92.                     g.moveTo(-15, -4);
  93.                     g.lineTo(-15, 4);
  94.                     g.lineTo(clockRadius * 0.8, 1);
  95.                     g.lineTo(clockRadius * 0.8, -1);
  96.                     g.fill();
  97.                     g.restore();

  98.                     // draw second
  99.                     g.save();
  100.                     var theta = (seconds - 15) * 2 * Math.PI / 60;
  101.                     g.rotate(theta);
  102.                     g.beginPath();
  103.                     g.moveTo(-15, -3);
  104.                     g.lineTo(-15, 3);
  105.                     g.lineTo(clockRadius * 0.9, 1);
  106.                     g.lineTo(clockRadius * 0.9, -1);
  107.                     g.fillStyle = '#0f0';
  108.                     g.fill();
  109.                     g.restore();

  110.                     g.restore();
  111.                 }
  112.             }
  113.         ]
  114.     });

  115.     var node = new ht.Node();
  116.     node.setPosition(150, 150);
  117.     node.setSize(250, 250);
  118.     node.setImage('clock');
  119.     node.a('date', new Date());
  120.     node.s('image.stretch', 'centerUniform');
  121.     dataModel.add(node);

  122.     graphView.setEditable(true);
  123.     
  124.     setInterval(function(){
  125.         node.a('date', new Date());
  126.     }, 1000);
  127. }

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