Pure Shading Language Draw HTML5 clock

Today is the last day of 2014, this moment always reminds people of the clock, in a few hours the earth will be a year older, so make a HTML5 version of the clock is the task we are going to accomplish today, the implementation of HTML5 clock drawing generally in three ways, the first way to adopt CSS, such as http://www.css-tricks.com/examples/CSS3Clock/; the second way to implement SVG, such as http://www.css-tricks.com/examples/CSS3Clock/ The third, 2D rendering using Cavnas, such as the clock example of a custom drawing in the HT for Web, in the vector guide, the implementation of the HT example is as follows, and its implementation code is attached to the last part of this article.

All three of these are easier to understand implementations, and today we will be using the less common WebGL pure shading Language implementation, which is extremely efficient, after all, we are using WEBGL technology that can be accelerated with GPU hardware, In the CPU code perspective, only two triangles are drawn, and the rendering logic of the real dials is fully implemented when the GPU shading the two triangles for fragment.

Through here Http://js.do/hightopo/glsl-clock play the final implementation of the results and implementation of code, the implementation of GLSL is the most important is to determine the current coordinate position of the gl_fragcolor color, we will always be divided into the dial, outer ring, scale, The hours, minutes and seconds of the second part of the code, leaving a continuous blend code is equivalent to layer-wise plotting logic, the following functional technical points are explained:

• The clamp (UV,-size/2.0, size/2.0) in the RECT function is our technique of determining whether a point is in a rectangular area
• function rotate (vec2 uv,float angle) Rotates the sitting punctuation to a horizontal or vertical position so we can determine the comparison between the Rect and line parameters
• Blend function Mix (shapecolor, BackColor, Smoothstep (0.0, 0.005, shape)) is commonly used to mix mix and smoothstep to achieve better handling of edge smoothing effects GLSL common techniques

To illustrate the blending effect of mix and smoothstep, I've got a http://js.do/hightopo/glsl-smooth-clrcle example where you can try to get rid of the more obvious edge jagged edges of the # define smooth. You can also adjust the smoothstep (0.49, 0.5, D) 0.49 for the smaller parameters such as 0.3 experience progressive effect, the following is a comprehensive comparison of several effects

The fragment shader implementation code for GLSL is as follows:

#ifdef gl_esprecision mediump float; #endifuniform float time;uniform vec2 resolution;float pi = 3.1415926; Float tau = pi * 2.0;vec2 Rotate (vec2 uv,float angle); float Circle (vec2 uv,float R); float Rect (vec2 uv,vec2 size,float R); Float Line (vec2 uv,vec2 start,vec2 end,float R), float Merge (float a,float b), float Outline (float a,float R), VEC3 Blend (VEC 3 BackColor, vec3 shapecolor, float shape), float secstep (float x);                                       void Main (void) {VEC2 res = resolution/resolution.y;vec2 UV = (GL_FRAGCOORD.XY/RESOLUTION.Y); UV-= res/2.0; float Secang = (secstep (time)/60.0) * tau;float Minang = (time/3600.0) * tau;float Hourang = (time/43200.0) * Tau;float clockface = Circle (UV, 0.45); float Clocktrim = Outline (clockface, 0.01); VEC2 Secdom Ain = Rotate (UV, Secang); float clocksec = line (SecDomain, vec2 (0.0, -0.15), vec2 (0.0, 0.35), 0.001); clocksec = Merge (clocksec, Circle (UV, 0.01)); CL Ocksec = Merge (clocksec, Rect (secdomain-vec2 (0.0, -0.08), VEC2 (0.012, 0.07), 0.0); float clockmin = line (Rotate (UV, Minang), VEC2 (0.0,-0.08), vec2 (0.0, 0.35), 0.005); float Clockhour = line ( Rotate (UV, Hourang), VEC2 (0.0,-0.05), VEC2 (0.0,0.3), 0.007); clockhour = Merge (Clockhour, Circle (UV, 0.02)); float Tickmarks = 1.0;vec2 Tickdomain = uv;for (int i = 0;i < 60;i++) {Tickdomain = Rotate (Tickdomain, tau/60.0); VEC2 size = (MoD (float (i + 1), 5.0) = = 0.0)? VEC2 (0.08, 0.01): vec2 (0.04, 0.002); Tickmarks = Merge (Tickmarks, Rect (TICKDOMAIN-VEC2 (0.38, 0.0), size, 0.0));} VEC3 Facecolor = Mix (VEC3 (1.0, 1.0, 0.0), VEC3 (1.0, 1.0, 1.0), uv.x+0.5); VEC3 Trimcolor = Mix (vec3 (0.0, 1.0, 0.0), VEC3 (0.0, 0.0, 1.0), UV.Y + 0.5); VEC3 Seccolor = VEC3 (1.0, 0.0, 0.0); VEC3 Handcolor = vec3 (0.0, 0.0, 0.0); VEC3 color = Mix (VEC3 (1.0, 0.0, 0.0), VEC3 (1.0, 1.0, 1.0), uv.y+0.5); color = Blend (CO                    Lor, Facecolor, clockface); color = blend (color, trimcolor, clocktrim); color = blend (color, trimcolor, tickmarks); color = Blend (color, handcolor, clockhour); color = BLend (color, handcolor, clockmin); color = Blend (color, seccolor, clocksec); gl_fragcolor = VEC4 (color, 1.0);}             float Secstep (float x) {Float interp = smoothstep (0.80, 1.0, MOD (x, 1.0)), return floor (x) + Interp + (sin (interp * pi)); Float Line (vec2 uv,vec2 start,vec2 end,float r) {return Rect (uv-(End+start)/2.0, VEC2 (R, End.y-start.y), r);}            Float Rect (vec2 uv,vec2 size,float r) {return length (Uv-clamp (UV,-size/2.0, size/2.0))-R; VEC2 Rotate (vec2 uv,float angle) {return mat2 (cos (angle), sin (angle),-sin (angle), cos (angle)) * UV;} Float Circle (vec2 uv,float r) {return length (UV)-r;} Float Merge (float a,float b) {return min (a, b);} Float Outline (float a,float r) {return ABS (a)-r;} VEC3 Blend (vec3 backColor, vec3 shapecolor, float shape) {return Mix (Shapecolor, BackColor, Smoothstep (0.0, 0.005, S Hape));}

HT for Webin theVector ManualThe custom-drawn Clock example implementation code is as follows:

function init () {Datamodel = new ht. Datamodel (); graphview = new Ht.graph.GraphView (datamodel); view = Graphview.getview (); view.classname = ' main '; Document.body.appendChild (view); Window.addeventlistener (' Resize ', function (e) {graphview.invalidate ();}, False); Ht. Default.setcomptype (' Clock-face ', function (g, RECT, comp, data, view) {var cx = rect.x + rect.width/2;var cy = Rect.y + Rect.height/2;var theta = 0;var r = math.min (Rect.width, Rect.height)/2 * 0.92;g.strokestyle = "#137"; for (var i = 0; i < 60;  i++) {G.beginpath (); G.arc (cx + math.cos (theta) * R, Cy + Math.sin (theta) * R, I% 5 = = = 0? 4:1, 0, Math.PI * 2, true); G.closepath (); g.linewidth = i% 5 = = 0? 2:1;g.stroke (); theta = theta + (6 * math.pi/180);}); Ht. Default.setimage (' clock ', {width:500,height:500,comps: [{type: ' Circle ', Relative:true,rect: [0, 0, 1, 1],background: ' Yellow ', gradient: ' Linear.northeast '},{type: ' Clock-face ', Relative:true,rect: [0, 0, 1, 1]},{type:function (g, Rect, COMP, data, view) {//get current Timevar date = data.a (' date '); if (!date) {return;} var hours = date.gethours (), var minutes = Date.getminutes (), var seconds = date.getseconds (); hours = hours > 12? Hours-12:hours;var hour = hours + minutes/60;var minute = minutes + Seconds/60;var Clockradius = 250;//Save Curre NT Contextg.save (); G.translate (Clockradius, Clockradius); G.beginpath ();//Draw Numbersg.font = ' 36px Arial '; G.fillstyle = ' #000 '; g.textalign = ' center '; g.textbaseline = ' middle '; for (var n = 1; n <=; n++) {var theta = (n-3 ) * (MATH.PI * 2)/12;var x = Clockradius * 0.75 * Math.Cos (theta); var y = Clockradius * 0.75 * Math.sin (theta); G.filltex T (n, x, y);} Draw Hourg.save (); var theta = (hour-3) * 2 * math.pi/12;g.rotate (theta); G.beginpath (); G.moveto ( -15,-5); G.lineto (-1 5, 5); G.lineto (Clockradius * 0.5, 1); G.lineto (Clockradius * 0.5,-1); G.fill (); G.restore ();//Draw Minuteg.save (); var theta = (minute-15) * 2 * math.pi/60;g.rotate (theta); G.beginpath (); G.movetO ( -15,-4); G.lineto ( -15, 4); G.lineto (Clockradius * 0.8, 1); G.lineto (Clockradius * 0.8,-1); G.fill (); G.restore ();//Draw  Secondg.save (); var theta = (seconds-15) * 2 * math.pi/60;g.rotate (theta); G.beginpath (); G.moveto ( -15,-3); G.lineto (-15, 3); G.lineto (Clockradius * 0.9, 1); G.lineto (Clockradius * 0.9,-1); G.fillstyle = ' #0f0 '; G.fill (); G.restore (); G.restore ( );}}]}); var node = new ht. Node (), Node.setposition (node.setsize), node.setimage (' clock '), Node.a (' Date ', new Date ()), NODE.S ( ' Image.stretch ', ' centeruniform ');d atamodel.add (node); graphview.seteditable (true); SetInterval (function () {NODE.A (' Date ', new Date ());}, 1000);}

Pure Shading Language Draw HTML5 clock