├── .gitignore ├── LICENSE ├── README.md ├── animations ├── beatingdots.frag ├── marchingboxes.frag ├── movingdots.frag ├── polardots.frag └── rotatingdots.frag ├── css ├── blog.css ├── style.css └── zenburn.css ├── index.html ├── patterns ├── bricks.frag ├── checks.frag ├── diamond.frag ├── grid.frag ├── nuts.frag ├── rotTile.frag ├── sidegrid.frag └── star.frag ├── shapes ├── box.frag ├── circle.frag ├── cross.frag ├── triangle.frag └── wave.frag └── src ├── glslCanvas.js ├── highlight.min.js └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Mapzen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Procedural Textures 2 | 3 | The [Tangrams](https://github.com/tangrams) teams ([web](https://github.com/tangrams/tangram) and [native](https://github.com/tangrams/tangram-es)) are excited about the possibilities of using the OpenGL Shading Language to render maps. As Brett and Peter describe in [this article](https://mapzen.com/blog/tangram-a-mapping-library), we use them for everything from geometry extrusion to lighting effects. That’s what makes Tangram’s map engine fast, powerful and highly flexible. 4 | 5 | Another use of GLSL Shaders is for generating procedural textures in real time. This allows mappers to make interesting patterns programmatically and apply them to different geometries using custom rules. 6 | 7 | This [repository](http://github.com/tangrams/ProceduralTextures) and [on-line gallery](http://tangrams.github.io/ProceduralTextures/) show a small collection of examples to inspire mapmakers to use, code and share generative textures for maps. 8 | 9 | ## How to install this gallery on your local machine? 10 | 11 | * Clone this repository locally and run a Python HTTP Server. 12 | 13 | ``` 14 | git clone https://github.com/tangrams/ProceduralTextures 15 | cd ProceduralTextures 16 | python -m SimpleHTTPServer 8000 17 | ``` 18 | 19 | Note: in case you have Python 3.x as your default version you should use ```python -m http.server 8000``` instead. 20 | 21 | * Then open your web browser to [http://localhost:8000/](http://localhost:8000). -------------------------------------------------------------------------------- /animations/beatingdots.frag: -------------------------------------------------------------------------------- 1 | 2 | vec2 tile(vec2 _st, float _zoom){ 3 | _st *= _zoom; 4 | if (fract(_st.y * 0.5) > 0.5){ 5 | _st.x += 0.5; 6 | } 7 | return fract(_st); 8 | } 9 | 10 | float circle(vec2 _st, float _radius){ 11 | vec2 pos = vec2(0.5)-_st; 12 | return smoothstep(1.0-_radius,1.0-_radius+_radius*0.2,1.-dot(pos,pos)*3.14); 13 | } 14 | 15 | void main() { 16 | 17 | vec2 st = v_texcoord; 18 | st = tile(st,10.0); 19 | 20 | 21 | vec3 color = vec3( circle(st, (1.+sin(u_time)*0.4)*0.5) ); 22 | 23 | gl_FragColor = vec4(color,1.0); 24 | } -------------------------------------------------------------------------------- /animations/marchingboxes.frag: -------------------------------------------------------------------------------- 1 | #define PI 3.14159265358979323846 2 | 3 | vec2 rotate2D(vec2 _st, float _angle){ 4 | _st -= 0.5; 5 | _st = mat2(cos(_angle),-sin(_angle), 6 | sin(_angle),cos(_angle)) * _st; 7 | _st += 0.5; 8 | return _st; 9 | } 10 | 11 | vec2 movingTiles(vec2 _st, float _zoom, float _speed){ 12 | _st *= _zoom; 13 | float time = u_time*_speed; 14 | if( fract(time)>0.5 ){ 15 | if (fract( _st.y * 0.5) > 0.5){ 16 | _st.x += fract(time)*2.0; 17 | } else { 18 | _st.x -= fract(time)*2.0; 19 | } 20 | } else { 21 | if (fract( _st.x * 0.5) > 0.5){ 22 | _st.y += fract(time)*2.0; 23 | } else { 24 | _st.y -= fract(time)*2.0; 25 | } 26 | } 27 | return fract(_st); 28 | } 29 | 30 | float box(vec2 _st, vec2 _size, float _smoothEdges){ 31 | _size = vec2(0.5)-_size*0.5; 32 | vec2 aa = vec2(_smoothEdges*0.5); 33 | vec2 uv = smoothstep(_size,_size+aa,_st); 34 | uv *= smoothstep(_size,_size+aa,vec2(1.0)-_st); 35 | return uv.x*uv.y; 36 | } 37 | 38 | void main(void){ 39 | vec2 st = v_texcoord; 40 | st = movingTiles(st,5.,0.25); 41 | st = rotate2D(st,PI* (1.+cos(u_time*0.25))*0.5 ); 42 | vec3 color = vec3(box(st,vec2( 0.5+(1.0+cos(u_time)*0.8)*0.25 ),0.01)); 43 | gl_FragColor = vec4(color,1.0); 44 | } -------------------------------------------------------------------------------- /animations/movingdots.frag: -------------------------------------------------------------------------------- 1 | 2 | vec2 movingTiles(vec2 _st, float _zoom, float _speed){ 3 | _st *= _zoom; 4 | float time = u_time*_speed; 5 | if( fract(time)>0.5 ){ 6 | if (fract( _st.y * 0.5) > 0.5){ 7 | _st.x += fract(time)*2.0; 8 | } else { 9 | _st.x -= fract(time)*2.0; 10 | } 11 | } else { 12 | if (fract( _st.x * 0.5) > 0.5){ 13 | _st.y += fract(time)*2.0; 14 | } else { 15 | _st.y -= fract(time)*2.0; 16 | } 17 | } 18 | return fract(_st); 19 | } 20 | 21 | float circle(vec2 _st, float _radius){ 22 | vec2 pos = vec2(0.5)-_st; 23 | return smoothstep(1.0-_radius,1.0-_radius+_radius*0.2,1.-dot(pos,pos)*3.14); 24 | } 25 | 26 | void main() { 27 | vec2 st = v_texcoord; 28 | 29 | st = movingTiles(st,10.,0.5); 30 | 31 | vec3 color = vec3( circle(st, 0.5 ) ); 32 | 33 | gl_FragColor = vec4(color,1.0); 34 | } -------------------------------------------------------------------------------- /animations/polardots.frag: -------------------------------------------------------------------------------- 1 | #define PI 3.14159265358979323846 2 | #define TWO_PI 6.28318530717958647693 3 | #define PHI 1.618033988749894848204586834 4 | 5 | vec2 radialTile(vec2 _st, vec2 _vel, float _zoom){ 6 | vec2 toExtreme = vec2(0.5)-_st; 7 | vec2 polar = vec2( (PI+atan(toExtreme.y,toExtreme.x))/TWO_PI, // Angle 8 | log(length(toExtreme))*PHI*0.1); // Radius 9 | polar *= _zoom; 10 | polar += _vel; 11 | 12 | return fract(polar); 13 | } 14 | 15 | float circle(vec2 _st, float _radius){ 16 | vec2 pos = vec2(0.5)-_st; 17 | return smoothstep(1.0-_radius,1.0-_radius+_radius*0.2,1.-dot(pos,pos)*3.14); 18 | } 19 | 20 | void main() { 21 | vec2 st = v_texcoord; 22 | st = radialTile(st,vec2(u_time*-0.1),5.0); 23 | 24 | // vec3 color = vec3(st,0.0); 25 | vec3 color = vec3(circle(st , (1.+sin(u_time)*0.4)*0.5) ); 26 | 27 | gl_FragColor = vec4(color,1.0); 28 | } -------------------------------------------------------------------------------- /animations/rotatingdots.frag: -------------------------------------------------------------------------------- 1 | #define PI 3.14159265358979323846 2 | #define TWO_PI 6.28318530717958647693 3 | #define PHI 1.618033988749894848204586834 4 | 5 | vec2 radialTile(vec2 _st, vec2 _vel, float _zoom){ 6 | vec2 toExtreme = vec2(0.5)-_st; 7 | vec2 polar = vec2( (PI+atan(toExtreme.y,toExtreme.x))/TWO_PI, // Angle 8 | log(length(toExtreme))*PHI*0.1); // Radius 9 | polar *= _zoom; 10 | 11 | polar.y += _vel.y; 12 | if (fract( polar.y * 0.5) > 0.5){ 13 | polar.x += _vel.x; 14 | } else { 15 | polar.x -= _vel.x; 16 | } 17 | 18 | return fract(polar); 19 | } 20 | 21 | float circle(vec2 _st, float _radius){ 22 | vec2 pos = vec2(0.5)-_st; 23 | return smoothstep(1.0-_radius,1.0-_radius+(_radius*0.2),1.-dot(pos,pos)*3.14); 24 | } 25 | 26 | void main() { 27 | vec2 st = v_texcoord; 28 | st = radialTile(st,vec2(u_time,u_time*-0.3),6.0); 29 | 30 | // vec3 color = vec3(st,0.0); 31 | vec3 color = vec3(circle(st , (1.+sin(u_time)*0.3)*0.5) ); 32 | 33 | gl_FragColor = vec4(color,1.0); 34 | } -------------------------------------------------------------------------------- /css/blog.css: -------------------------------------------------------------------------------- 1 | code { 2 | font-family: "Courier New",monospace; 3 | font-size: 90%; 4 | line-height: 1.4em; 5 | color: #333; 6 | word-break: break-all; 7 | word-wrap: break-word; 8 | background-color: #eaeaea; 9 | padding-left: 20px; 10 | margin-top: 20px; 11 | } 12 | 13 | canvas { 14 | width: 100px; 15 | height: 100px; 16 | margin-right: 20px; 17 | margin-bottom: 20px; 18 | border: 4px solid #000; 19 | border-radius: 6px; 20 | } 21 | 22 | canvas:hover { 23 | border: 4px solid #6ea0a4; 24 | } 25 | .clearfix { 26 | clear:both; 27 | } 28 | 29 | #demo{ 30 | width: 100%; 31 | height: 100%; 32 | background-color: #3f3f3f; 33 | padding-bottom: 20px; 34 | } 35 | 36 | .demo{ 37 | display: none; 38 | } 39 | 40 | pre#demoPre { 41 | background:none; 42 | border: 0 none; 43 | } 44 | 45 | /* small mobile devices */ 46 | @media (min-width:320px) { 47 | canvas#demoCanvas { 48 | display: inline; 49 | float: left; 50 | width: 300px; 51 | height: 300px; 52 | margin-left: 20px; 53 | } 54 | } 55 | 56 | @media (min-width: 768px) { 57 | canvas#demoCanvas { 58 | display: inline; 59 | float: right; 60 | margin-top: -40px; 61 | width: 300px; 62 | height: 300px; 63 | } 64 | 65 | code#demoCode { 66 | display: inline; 67 | float: left; 68 | font-size: 100%; 69 | padding-left: 20px; 70 | width: 400px; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 300; 4 | font-size: 110%; 5 | margin-bottom: 40px; 6 | line-height: 1.5em; 7 | color: #444; 8 | margin-left: 40px; 9 | margin-right: 40px; 10 | } 11 | 12 | h1 { 13 | font-size: 200%; 14 | letter-spacing: 1px; 15 | padding-top: 40px; 16 | text-align: center; 17 | color: #4E9BB9; 18 | } 19 | 20 | a { 21 | color: #68A5BC; 22 | text-decoration: none; 23 | } 24 | 25 | h2 { 26 | font-weight: 600; 27 | font-size: 120%; 28 | line-height: 1.4em; 29 | color: #444; 30 | margin-top: 40px; 31 | margin-bottom: 20px; 32 | } 33 | 34 | h3 { 35 | font-weight: 600; 36 | font-size: 120%; 37 | line-height: 1.4em; 38 | text-align: center; 39 | padding-bottom: 40px; 40 | } 41 | 42 | h4 { 43 | font-weight: 500; 44 | color: #6ea0a4; 45 | margin-bottom: 10px; 46 | } 47 | 48 | code { 49 | display: block; 50 | font-family: "Courier New",monospace; 51 | font-size: 90%; 52 | line-height: 1.4em; 53 | color: #333; 54 | word-break: break-all; 55 | word-wrap: break-word; 56 | background-color: #eaeaea; 57 | padding-left: 20px; 58 | margin-top: 20px; 59 | border-radius: 6px; 60 | } 61 | 62 | canvas { 63 | width: 100px; 64 | height: 100px; 65 | margin-right: 20px; 66 | border: 4px solid #000; 67 | border-radius: 6px; 68 | } 69 | 70 | canvas:hover { 71 | border: 4px solid #6ea0a4; 72 | } 73 | 74 | canvas#demoCanvas{ 75 | position: absolute; 76 | right: 10px; 77 | margin-top: -40px; 78 | width: 400px; 79 | height: 400px; 80 | } 81 | 82 | .clearfix { 83 | clear:both; 84 | } 85 | code#demoCode{ 86 | position: absolute; 87 | left:0px; 88 | right:0px; 89 | font-size: 90%; 90 | padding-left: 20px; 91 | } 92 | 93 | #demo{ 94 | position: absolute; 95 | left:0px; 96 | right:0px; 97 | width: 100%; 98 | height: 100%; 99 | background-color: #3f3f3f; 100 | } 101 | 102 | .demo{ 103 | display: none; 104 | } 105 | 106 | pre#demoPre { 107 | background:none; 108 | border: 0 none; 109 | } 110 | 111 | -------------------------------------------------------------------------------- /css/zenburn.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Zenburn style from voldmar.ru (c) Vladimir Epifanov 4 | based on dark.css by Ivan Sagalaev 5 | 6 | */ 7 | 8 | .hljs { 9 | display: block; 10 | overflow-x: auto; 11 | padding: 0.5em; 12 | background: #3f3f3f; 13 | color: #dcdcdc; 14 | -webkit-text-size-adjust: none; 15 | } 16 | 17 | .hljs-keyword, 18 | .hljs-tag, 19 | .css .hljs-class, 20 | .css .hljs-id, 21 | .lisp .hljs-title, 22 | .nginx .hljs-title, 23 | .hljs-request, 24 | .hljs-status, 25 | .clojure .hljs-attribute { 26 | color: #e3ceab; 27 | } 28 | 29 | .django .hljs-template_tag, 30 | .django .hljs-variable, 31 | .django .hljs-filter .hljs-argument { 32 | color: #dcdcdc; 33 | } 34 | 35 | .hljs-number, 36 | .hljs-date { 37 | color: #8cd0d3; 38 | } 39 | 40 | .dos .hljs-envvar, 41 | .dos .hljs-stream, 42 | .hljs-variable, 43 | .apache .hljs-sqbracket { 44 | color: #efdcbc; 45 | } 46 | 47 | .dos .hljs-flow, 48 | .diff .hljs-change, 49 | .python .exception, 50 | .python .hljs-built_in, 51 | .hljs-literal, 52 | .tex .hljs-special { 53 | color: #efefaf; 54 | } 55 | 56 | .diff .hljs-chunk, 57 | .hljs-subst { 58 | color: #8f8f8f; 59 | } 60 | 61 | .dos .hljs-keyword, 62 | .hljs-decorator, 63 | .hljs-title, 64 | .hljs-type, 65 | .diff .hljs-header, 66 | .ruby .hljs-class .hljs-parent, 67 | .apache .hljs-tag, 68 | .nginx .hljs-built_in, 69 | .tex .hljs-command, 70 | .hljs-prompt { 71 | color: #efef8f; 72 | } 73 | 74 | .dos .hljs-winutils, 75 | .ruby .hljs-symbol, 76 | .ruby .hljs-symbol .hljs-string, 77 | .ruby .hljs-string { 78 | color: #dca3a3; 79 | } 80 | 81 | .diff .hljs-deletion, 82 | .hljs-string, 83 | .hljs-tag .hljs-value, 84 | .hljs-preprocessor, 85 | .hljs-pragma, 86 | .hljs-built_in, 87 | .hljs-javadoc, 88 | .smalltalk .hljs-class, 89 | .smalltalk .hljs-localvars, 90 | .smalltalk .hljs-array, 91 | .css .hljs-rules .hljs-value, 92 | .hljs-attr_selector, 93 | .hljs-pseudo, 94 | .apache .hljs-cbracket, 95 | .tex .hljs-formula, 96 | .coffeescript .hljs-attribute { 97 | color: #cc9393; 98 | } 99 | 100 | .hljs-shebang, 101 | .diff .hljs-addition, 102 | .hljs-comment, 103 | .hljs-annotation, 104 | .hljs-pi, 105 | .hljs-doctype { 106 | color: #7f9f7f; 107 | } 108 | 109 | .coffeescript .javascript, 110 | .javascript .xml, 111 | .tex .hljs-formula, 112 | .xml .javascript, 113 | .xml .vbscript, 114 | .xml .css, 115 | .xml .hljs-cdata { 116 | opacity: 0.5; 117 | } 118 | 119 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ProceduralTextures 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Procedural Textures

17 |

by Patricio Gonzalez Vivo at Mapzen

18 | 19 |

The Tangrams teams (web and native) are excited about the possibilities of using the OpenGL Shading Language to render maps. As Brett and Peter describe in this article, we use them for everything from geometry extrusion to lighting effects. That’s what makes Tangram’s map engine fast, powerful and highly flexible.

20 |

Another use of GLSL Shaders is for generating procedural textures in real time. This allows mappers to make interesting patterns programmatically and apply them to different geometries using custom rules.

21 |

This repository and on-line gallery show a small collection of examples to inspire mapmakers to use, code and share generative textures for maps.

22 | 23 |

Shapes

24 | 25 | 26 | 27 | 28 | 29 |

Tile Patterns

30 | 31 | 32 | 33 | 34 | 35 |

Pattern Designs

36 | 37 | 38 | 39 | 40 | 41 | 42 |

Animations

43 | 44 | 45 | 46 | 47 |
48 | 
49 | 			         
50 |
51 | 52 |
53 |
54 | 55 |

How to install this gallery on your local machine?

56 | 59 | 
git clone https://github.com/tangrams/ProceduralTextures
60 | cd ProceduralTextures
61 | python -m SimpleHTTPServer 8000
62 |

Note: in case you have Python 3.x as your default version you should use python -m http.server 8000 instead.

63 | 66 |
67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /patterns/bricks.frag: -------------------------------------------------------------------------------- 1 | 2 | vec2 brickTile(vec2 _st, float _zoom){ 3 | _st *= _zoom; 4 | if (fract(_st.y * 0.5) > 0.5){ 5 | _st.x += 0.5; 6 | } 7 | return fract(_st); 8 | } 9 | 10 | float box(vec2 _st, vec2 _size){ 11 | _size = vec2(0.5)-_size*0.5; 12 | vec2 uv = smoothstep(_size,_size+vec2(0.0001),_st); 13 | uv *= smoothstep(_size,_size+vec2(0.0001),vec2(1.0)-_st); 14 | return uv.x*uv.y; 15 | } 16 | 17 | void main(void){ 18 | vec2 st = v_texcoord; 19 | 20 | // "Modern metric brick of 215mm x 102.5mm x 65mm" 21 | // by http://www.jaharrison.me.uk/Brickwork/Sizes.html 22 | // 23 | // st /= vec2(2.15,0.65)/2.15; 24 | 25 | st = brickTile(st,5.0); 26 | 27 | vec3 color = vec3(box(st,vec2(0.95))); 28 | 29 | gl_FragColor = vec4(color,1.0); 30 | } -------------------------------------------------------------------------------- /patterns/checks.frag: -------------------------------------------------------------------------------- 1 | #define PI 3.14159265358979323846 2 | 3 | vec2 rotate2D(vec2 _st, float _angle){ 4 | _st -= 0.5; 5 | _st = mat2(cos(_angle),-sin(_angle), 6 | sin(_angle),cos(_angle)) * _st; 7 | _st += 0.5; 8 | return _st; 9 | } 10 | 11 | vec2 tile(vec2 _st, float _zoom){ 12 | _st *= _zoom; 13 | return fract(_st); 14 | } 15 | 16 | float circle(vec2 _st, float _radius){ 17 | vec2 pos = vec2(0.5)-_st; 18 | return smoothstep(1.0-_radius,1.0-_radius+_radius*0.2,1.-dot(pos,pos)*3.14); 19 | } 20 | 21 | float box(vec2 _st, vec2 _size, float _smoothEdges){ 22 | _size = vec2(0.5)-_size*0.5; 23 | vec2 aa = vec2(_smoothEdges*0.5); 24 | vec2 uv = smoothstep(_size,_size+aa,_st); 25 | uv *= smoothstep(_size,_size+aa,vec2(1.0)-_st); 26 | return uv.x*uv.y; 27 | } 28 | 29 | void main(void){ 30 | vec2 st = v_texcoord; 31 | st = tile(st,4.); 32 | st = rotate2D(st,PI*0.25); 33 | vec3 color = vec3(box(st,vec2(0.7),0.01)); 34 | 35 | gl_FragColor = vec4(color,1.0); 36 | } -------------------------------------------------------------------------------- /patterns/diamond.frag: -------------------------------------------------------------------------------- 1 | #define PI 3.14159265358979323846 2 | 3 | vec2 rotate2D(vec2 _st, float _angle){ 4 | _st -= 0.5; 5 | _st = mat2(cos(_angle),-sin(_angle), 6 | sin(_angle),cos(_angle)) * _st; 7 | _st += 0.5; 8 | return _st; 9 | } 10 | 11 | vec2 tile(vec2 _st, float _zoom){ 12 | _st *= _zoom; 13 | return fract(_st); 14 | } 15 | 16 | float box(vec2 _st, vec2 _size, float _smoothEdges){ 17 | _size = vec2(0.5)-_size*0.5; 18 | vec2 aa = vec2(_smoothEdges*0.5); 19 | vec2 uv = smoothstep(_size,_size+aa,_st); 20 | uv *= smoothstep(_size,_size+aa,vec2(1.0)-_st); 21 | return uv.x*uv.y; 22 | } 23 | 24 | vec2 offset(vec2 _st, vec2 _offset){ 25 | vec2 uv; 26 | if(_st.x>0.5){ 27 | uv.x = _st.x - 0.5; 28 | } else { 29 | uv.x = _st.x + 0.5; 30 | } 31 | if(_st.y>0.5){ 32 | uv.y = _st.y - 0.5; 33 | }else { 34 | uv.y = _st.y + 0.5; 35 | } 36 | return uv; 37 | } 38 | 39 | void main(void){ 40 | vec2 st = v_texcoord; 41 | st = tile(st,5.); 42 | 43 | vec2 offsetSt = offset(st,vec2(0.5)); 44 | 45 | st = rotate2D(st,PI*0.25); 46 | 47 | vec3 color = vec3( box(offsetSt,vec2(0.95),0.01) - box(st,vec2(0.3),0.01) + 2.*box(st,vec2(0.2),0.01) ); 48 | 49 | gl_FragColor = vec4(color,1.0); 50 | } -------------------------------------------------------------------------------- /patterns/grid.frag: -------------------------------------------------------------------------------- 1 | 2 | vec2 tile(vec2 _st, float _zoom){ 3 | _st *= _zoom; 4 | return fract(_st); 5 | } 6 | 7 | float box(vec2 _st, vec2 _size){ 8 | _size = vec2(0.5)-_size*0.5; 9 | vec2 uv = smoothstep(_size,_size+vec2(0.0001),_st); 10 | uv *= smoothstep(_size,_size+vec2(0.0001),vec2(1.0)-_st); 11 | return uv.x*uv.y; 12 | } 13 | 14 | void main(void){ 15 | vec2 st = v_texcoord; 16 | st = tile(st,10.0); 17 | 18 | vec3 color = vec3(box(st,vec2(0.9))); 19 | 20 | gl_FragColor = vec4(color,1.0); 21 | } -------------------------------------------------------------------------------- /patterns/nuts.frag: -------------------------------------------------------------------------------- 1 | #define PI 3.14159265358979323846 2 | 3 | float rows = 10.0; 4 | 5 | vec2 brickTile(vec2 _st, float _zoom){ 6 | _st *= _zoom; 7 | if (fract(_st.y * 0.5) > 0.5){ 8 | _st.x += 0.5; 9 | } 10 | return fract(_st); 11 | } 12 | 13 | vec2 rotate2D(vec2 _st, float _angle){ 14 | _st -= 0.5; 15 | _st = mat2(cos(_angle),-sin(_angle), 16 | sin(_angle),cos(_angle)) * _st; 17 | _st += 0.5; 18 | return _st; 19 | } 20 | 21 | void main(){ 22 | 23 | vec2 st = v_texcoord; 24 | st = brickTile(st,rows); 25 | 26 | float angle = PI*0.25*cos(u_time*0.5); 27 | 28 | if (fract(v_texcoord.y * 0.5 * rows) > 0.5){ 29 | angle *= -1.0; 30 | } 31 | 32 | st = rotate2D(st,angle); 33 | 34 | st *= 2.0; 35 | float pct = (1.0+cos(PI*st.x))*0.5; 36 | 37 | vec3 color = vec3( 1.0-smoothstep( 0.5,0.6, pow(pct,st.y) ) * 1.0-smoothstep( 0.79,0.81, pow(pct,2.0-st.y ) )); 38 | 39 | gl_FragColor = vec4(color,1.0); 40 | } -------------------------------------------------------------------------------- /patterns/rotTile.frag: -------------------------------------------------------------------------------- 1 | #define PI 3.14159265358979323846 2 | #define TWO_PI 6.28318530717958647693 3 | 4 | vec2 rotate2D(vec2 _st, float _angle){ 5 | _st -= 0.5; 6 | _st = mat2(cos(_angle),-sin(_angle), 7 | sin(_angle),cos(_angle)) * _st; 8 | _st += 0.5; 9 | return _st; 10 | } 11 | 12 | vec2 tile(vec2 _st, float _zoom){ 13 | _st *= _zoom; 14 | return fract(_st); 15 | } 16 | 17 | vec2 rotateTile(vec2 _st){ 18 | _st *= 2.0; 19 | 20 | float index = 0.0; 21 | if (fract(_st.x * 0.5) > 0.5){ 22 | index += 1.0; 23 | } 24 | if (fract(_st.y * 0.5) > 0.5){ 25 | index += 2.0; 26 | } 27 | 28 | _st = fract(_st); 29 | 30 | if(index == 1.0){ 31 | _st = rotate2D(_st,PI*0.5); 32 | } else if(index == 2.0){ 33 | _st = rotate2D(_st,PI*-0.5); 34 | } else if(index == 3.0){ 35 | _st = rotate2D(_st,PI); 36 | } 37 | 38 | return _st; 39 | } 40 | 41 | // Based on https://www.shadertoy.com/view/4sSSzG 42 | float triangle(vec2 _st, vec2 _p0, vec2 _p1, vec2 _p2, float _smoothness){ 43 | vec3 e0, e1, e2; 44 | 45 | e0.xy = normalize(_p1 - _p0).yx * vec2(+1.0, -1.0); 46 | e1.xy = normalize(_p2 - _p1).yx * vec2(+1.0, -1.0); 47 | e2.xy = normalize(_p0 - _p2).yx * vec2(+1.0, -1.0); 48 | 49 | e0.z = dot(e0.xy, _p0) - _smoothness; 50 | e1.z = dot(e1.xy, _p1) - _smoothness; 51 | e2.z = dot(e2.xy, _p2) - _smoothness; 52 | 53 | float a = max(0.0, dot(e0.xy, _st) - e0.z); 54 | float b = max(0.0, dot(e1.xy, _st) - e1.z); 55 | float c = max(0.0, dot(e2.xy, _st) - e2.z); 56 | 57 | return smoothstep(_smoothness * 2.0, 1e-7, length(vec3(a, b, c))); 58 | } 59 | 60 | float box(vec2 _st, vec2 _size){ 61 | _size = vec2(0.5)-_size*0.5; 62 | vec2 uv = smoothstep(_size,_size+vec2(0.0001),_st); 63 | uv *= smoothstep(_size,_size+vec2(0.0001),vec2(1.0)-_st); 64 | return uv.x*uv.y; 65 | } 66 | 67 | void main(void){ 68 | vec2 st = v_texcoord; 69 | 70 | st = tile(st,3.0); 71 | st = rotateTile(st); 72 | 73 | float pattern = 0.0; 74 | 75 | // st = rotate2D(st,-PI*u_time*0.25); 76 | // pattern = triangle(st, vec2(0.30,-0.5), vec2(0.70,0.-0.5), vec2(0.5,1.0), 0.01); 77 | 78 | pattern = box(st+vec2(-0.25,0.0),vec2(0.40,0.90)) + 79 | box(st+vec2(+0.25,0.0),vec2(0.40,0.90)) ; 80 | 81 | vec3 color = vec3(pattern); 82 | 83 | gl_FragColor = vec4(color,1.0); 84 | } -------------------------------------------------------------------------------- /patterns/sidegrid.frag: -------------------------------------------------------------------------------- 1 | vec2 tile(vec2 _st, float _zoom){ 2 | _st *= _zoom; 3 | return fract(_st); 4 | } 5 | 6 | float X(vec2 _st, float _width){ 7 | float pct0 = smoothstep(_st.x-_width,_st.x,_st.y); 8 | pct0 *= 1.-smoothstep(_st.x,_st.x+_width,_st.y); 9 | 10 | float pct1 = smoothstep(_st.x-_width,_st.x,1.0-_st.y); 11 | pct1 *= 1.-smoothstep(_st.x,_st.x+_width,1.0-_st.y); 12 | 13 | return pct0+pct1; 14 | } 15 | 16 | void main(void){ 17 | vec2 st = v_texcoord; 18 | st = tile(st,10.0); 19 | 20 | vec3 color = vec3(X(st,0.03)); 21 | 22 | gl_FragColor = vec4(color,1.0); 23 | } -------------------------------------------------------------------------------- /patterns/star.frag: -------------------------------------------------------------------------------- 1 | #define PI 3.14159265358979323846 2 | #define TWO_PI 6.28318530717958647693 3 | #define PHI 1.618033988749894848204586834 4 | 5 | vec2 radialTile(vec2 _st, vec2 _vel, float _zoom){ 6 | vec2 toExtreme = vec2(0.5)-_st; 7 | vec2 polar = vec2( (PI+atan(toExtreme.y,toExtreme.x))/TWO_PI, // Angle 8 | log(length(toExtreme))*PHI*0.1); // Radius 9 | polar *= _zoom; 10 | 11 | polar.y += _vel.y; 12 | if (fract( polar.y * 0.5) > 0.5){ 13 | polar.x += _vel.x; 14 | } else { 15 | polar.x -= _vel.x; 16 | } 17 | 18 | return fract(polar); 19 | } 20 | 21 | float circle(vec2 _st, float _radius){ 22 | vec2 pos = vec2(0.5)-_st; 23 | return smoothstep(1.0-_radius,1.0-_radius+_radius*0.2,1.-dot(pos,pos)*3.14); 24 | } 25 | 26 | vec2 rotate2D(vec2 _st, float _angle){ 27 | _st -= 0.5; 28 | _st = mat2(cos(_angle),-sin(_angle), 29 | sin(_angle),cos(_angle)) * _st; 30 | _st += 0.5; 31 | return _st; 32 | } 33 | 34 | vec2 tile(vec2 _st, float _zoom){ 35 | _st *= _zoom; 36 | return fract(_st); 37 | } 38 | 39 | vec2 brickTile(vec2 _st, float _zoom){ 40 | _st *= _zoom; 41 | if (fract(_st.y * 0.5) > 0.5){ 42 | _st.x += 0.5; 43 | } 44 | return fract(_st); 45 | } 46 | 47 | float box(vec2 _st, vec2 _size, float _smoothEdges){ 48 | _size = vec2(0.5)-_size*0.5; 49 | vec2 aa = vec2(_smoothEdges*0.5); 50 | vec2 uv = smoothstep(_size,_size+aa,_st); 51 | uv *= smoothstep(_size,_size+aa,vec2(1.0)-_st); 52 | return uv.x*uv.y; 53 | } 54 | 55 | vec2 offset(vec2 _st, vec2 _offset){ 56 | vec2 uv; 57 | if(_st.x>0.5){ 58 | uv.x = _st.x - 0.5; 59 | } else { 60 | uv.x = _st.x + 0.5; 61 | } 62 | if(_st.y>0.5){ 63 | uv.y = _st.y - 0.5; 64 | }else { 65 | uv.y = _st.y + 0.5; 66 | } 67 | return uv; 68 | } 69 | 70 | vec2 movingTiles(vec2 _st, float _zoom, float _speed){ 71 | _st *= _zoom; 72 | float time = u_time*_speed; 73 | if( fract(time)>0.5 ){ 74 | if (fract( _st.y * 0.5) > 0.5){ 75 | _st.x += fract(time)*2.0; 76 | } else { 77 | _st.x -= fract(time)*2.0; 78 | } 79 | } else { 80 | if (fract( _st.x * 0.5) > 0.5){ 81 | _st.y += fract(time)*2.0; 82 | } else { 83 | _st.y -= fract(time)*2.0; 84 | } 85 | } 86 | return fract(_st); 87 | } 88 | 89 | void main(void){ 90 | vec2 st = v_texcoord; 91 | st = rotate2D(st,PI*fract(u_time*0.1)); 92 | // st = brickTile(st,3.); 93 | st = radialTile(st,vec2(fract(u_time*0.5)),8.); 94 | st = radialTile(st,vec2(-fract(u_time),0.0),5.); 95 | 96 | vec3 color = vec3( box(st,vec2(0.8,0.2),0.01) ); 97 | 98 | gl_FragColor = vec4(color,1.0); 99 | } -------------------------------------------------------------------------------- /shapes/box.frag: -------------------------------------------------------------------------------- 1 | 2 | float box(vec2 _st, vec2 _size){ 3 | _size = vec2(0.5)-_size*0.5; 4 | vec2 uv = smoothstep(_size,_size+vec2(0.0001),_st); 5 | uv *= smoothstep(_size,_size+vec2(0.0001),vec2(1.0)-_st); 6 | return uv.x*uv.y; 7 | } 8 | 9 | void main(){ 10 | vec2 st = v_texcoord; 11 | vec3 color = vec3( box(st, vec2(0.9)) ); 12 | 13 | gl_FragColor = vec4(color,1.0); 14 | } -------------------------------------------------------------------------------- /shapes/circle.frag: -------------------------------------------------------------------------------- 1 | float circle(vec2 _st, float _radius){ 2 | vec2 pos = vec2(0.5)-_st; 3 | _radius *= 0.75; 4 | return 1.-smoothstep(_radius-(_radius*0.01),_radius+(_radius*0.01),dot(pos,pos)*3.14); 5 | } 6 | 7 | void main(){ 8 | vec2 st = v_texcoord; 9 | 10 | vec3 color = vec3(vec3(circle(st,0.9))); 11 | 12 | gl_FragColor = vec4( color, 1.0 ); 13 | } -------------------------------------------------------------------------------- /shapes/cross.frag: -------------------------------------------------------------------------------- 1 | float box(vec2 _st, vec2 _size){ 2 | _size = vec2(0.5)-_size*0.5; 3 | vec2 uv = smoothstep(_size,_size+vec2(0.0001),_st); 4 | uv *= smoothstep(_size,_size+vec2(0.0001),vec2(1.0)-_st); 5 | return uv.x*uv.y; 6 | } 7 | 8 | void main(){ 9 | vec2 st = v_texcoord; 10 | 11 | vec3 color = vec3( box(st, vec2(0.4,0.1)) + box(st, vec2(0.1,0.4)) ); 12 | 13 | gl_FragColor = vec4(color,1.0); 14 | } -------------------------------------------------------------------------------- /shapes/triangle.frag: -------------------------------------------------------------------------------- 1 | #define PI 3.14159265358979323846 2 | #define TWO_PI 6.28318530717958647693 3 | 4 | // Based on https://www.shadertoy.com/view/4sSSzG 5 | float triangle(vec2 _st, vec2 _p0, vec2 _p1, vec2 _p2, float _smoothness){ 6 | vec3 e0, e1, e2; 7 | 8 | e0.xy = normalize(_p1 - _p0).yx * vec2(+1.0, -1.0); 9 | e1.xy = normalize(_p2 - _p1).yx * vec2(+1.0, -1.0); 10 | e2.xy = normalize(_p0 - _p2).yx * vec2(+1.0, -1.0); 11 | 12 | e0.z = dot(e0.xy, _p0) - _smoothness; 13 | e1.z = dot(e1.xy, _p1) - _smoothness; 14 | e2.z = dot(e2.xy, _p2) - _smoothness; 15 | 16 | float a = max(0.0, dot(e0.xy, _st) - e0.z); 17 | float b = max(0.0, dot(e1.xy, _st) - e1.z); 18 | float c = max(0.0, dot(e2.xy, _st) - e2.z); 19 | 20 | return smoothstep(_smoothness * 2.0, 1e-7, length(vec3(a, b, c))); 21 | } 22 | 23 | float equilTriangle(vec2 _st, float _size, float _smoothness){ 24 | vec2 pos = vec2(1.0)-_st; 25 | // _size *= 0.5; 26 | 27 | float angle = PI*0.5; 28 | float delta = TWO_PI/3.0; 29 | vec2 v1 = vec2( pos.x + _size*cos(angle), 30 | pos.y + _size*sin(angle) ); 31 | angle += delta; 32 | vec2 v2 = vec2( pos.x + _size*cos(angle), 33 | pos.y + _size*sin(angle) ); 34 | angle += delta; 35 | vec2 v3 = vec2( pos.x + _size*cos(angle), 36 | pos.y + _size*sin(angle) ); 37 | 38 | return triangle(_st, v1, v2, v3, _smoothness); 39 | } 40 | 41 | void main(){ 42 | vec2 st = v_texcoord; 43 | // vec3 color = vec3( equilTriangle(st, 1.0, 0.001) ); 44 | vec3 color = vec3( triangle(st, vec2(0.0,0.15), vec2(1.0,0.15), vec2(0.5,0.88), 0.001) ); 45 | gl_FragColor = vec4(color,1.0); 46 | } -------------------------------------------------------------------------------- /shapes/wave.frag: -------------------------------------------------------------------------------- 1 | #define PI 3.14159265358979323846 2 | 3 | float plotX(vec2 _st, float _pct,float _antia){ 4 | return smoothstep( _pct-_antia, _pct, _st.x) - 5 | smoothstep( _pct, _pct+_antia, _st.x); 6 | } 7 | 8 | float plotY(vec2 _st, float _pct,float _antia){ 9 | return smoothstep( _pct-_antia, _pct, _st.y) - 10 | smoothstep( _pct, _pct+_antia, _st.y); 11 | } 12 | 13 | float fillX(vec2 _st, float _pct,float _antia){ 14 | return smoothstep( _pct-_antia, _pct, _st.x); 15 | } 16 | 17 | float fillY(vec2 _st, float _pct,float _antia){ 18 | return smoothstep( _pct-_antia, _pct, _st.y); 19 | } 20 | 21 | vec2 tile(vec2 _st, float _zoom){ 22 | _st *= _zoom; 23 | return fract(_st); 24 | } 25 | 26 | vec2 mirrorTile(vec2 _st, float _zoom){ 27 | _st *= _zoom; 28 | if (fract(_st.y * 0.5) > 0.5){ 29 | _st.y = 1.0-_st.y; 30 | } 31 | return fract(_st); 32 | } 33 | 34 | void main(){ 35 | vec2 st = v_texcoord; 36 | st = mirrorTile(st,5.0); 37 | 38 | vec3 color = vec3(fillY(st,0.5+sin(st.x*PI*2.0)*0.45,0.02)); 39 | 40 | gl_FragColor = vec4( color, 1.0 ); 41 | } -------------------------------------------------------------------------------- /src/glslCanvas.js: -------------------------------------------------------------------------------- 1 | var timeLoad = (new Date()).getTime(); 2 | 3 | var billboards = []; 4 | 5 | function loadShaders() { 6 | var list = document.getElementsByTagName("canvas"); 7 | 8 | // Load canvas and WebGLContexta 9 | for(var i = 0; i < list.length; i++){ 10 | var shaderURL = ""; 11 | 12 | if( list[i].hasAttribute("src") ){ 13 | shaderURL = list[i].getAttribute('src'); 14 | } 15 | 16 | var c = list[i]; 17 | var g = setupWebGL(list[i]); 18 | var p = loadShader(g,shaderURL); 19 | 20 | // UVS buffer 21 | var texCoordLocation = g.getAttribLocation(p, "a_texcoord"); 22 | var u = g.createBuffer(); 23 | g.bindBuffer( g.ARRAY_BUFFER, u); 24 | g.bufferData( g.ARRAY_BUFFER, new Float32Array([0.0, 0.0, 25 | 1.0, 0.0, 26 | 0.0, 1.0, 27 | 0.0, 1.0, 28 | 1.0, 0.0, 29 | 1.0, 1.0]), g.STATIC_DRAW); 30 | g.enableVertexAttribArray( texCoordLocation ); 31 | g.vertexAttribPointer( texCoordLocation, 2, g.FLOAT, false, 0, 0); 32 | 33 | // Vertex buffer 34 | var positionLocation = g.getAttribLocation(p, "a_position"); 35 | var v = g.createBuffer(); 36 | g.bindBuffer( g.ARRAY_BUFFER, v); 37 | g.bufferData( g.ARRAY_BUFFER, new Float32Array([-1.0, -1.0, 38 | 1.0, -1.0, 39 | -1.0, 1.0, 40 | -1.0, 1.0, 41 | 1.0, -1.0, 42 | 1.0, 1.0]), g.STATIC_DRAW); 43 | g.enableVertexAttribArray( positionLocation ); 44 | g.vertexAttribPointer( positionLocation , 2, g.FLOAT, false, 0, 0); 45 | 46 | billboards[i] = { canvas: c , 47 | gl: g, 48 | program: p, 49 | uvs: u, 50 | vertices: v }; 51 | } 52 | } 53 | 54 | function renderShaders(){ 55 | for(var i = 0; i < billboards.length; i++){ 56 | renderShader( billboards[i] ); 57 | } 58 | window.requestAnimationFrame(renderShaders); 59 | } 60 | 61 | /** 62 | * Creates the HTLM for a failure message 63 | * @param {string} canvasContainerId id of container of th 64 | * canvas. 65 | * @return {string} The html. 66 | */ 67 | var makeFailHTML = function(msg) { 68 | return '' + 69 | '' + 70 | '
' + 71 | '
' + 72 | '
' + msg + '
' + 73 | '
' + 74 | '
'; 75 | }; 76 | 77 | /** 78 | * Mesasge for getting a webgl browser 79 | * @type {string} 80 | */ 81 | var GET_A_WEBGL_BROWSER = '' + 82 | 'This page requires a browser that supports WebGL.
' + 83 | 'Click here to upgrade your browser.'; 84 | 85 | /** 86 | * Mesasge for need better hardware 87 | * @type {string} 88 | */ 89 | var OTHER_PROBLEM = '' + 90 | "It doesn't appear your computer can support WebGL.
" + 91 | 'Click here for more information.'; 92 | 93 | /** 94 | * Creates a webgl context. If creation fails it will 95 | * change the contents of the container of the 96 | * tag to an error message with the correct links for WebGL. 97 | * @param {Element} canvas. The canvas element to create a 98 | * context from. 99 | * @param {WebGLContextCreationAttirbutes} opt_attribs Any 100 | * creation attributes you want to pass in. 101 | * @return {WebGLRenderingContext} The created context. 102 | */ 103 | function setupWebGL (_canvas, _opt_attribs) { 104 | 105 | function showLink(str) { 106 | var container = _canvas.parentNode; 107 | if (container) { 108 | container.innerHTML = makeFailHTML(str); 109 | } 110 | }; 111 | 112 | if (!window.WebGLRenderingContext) { 113 | showLink(GET_A_WEBGL_BROWSER); 114 | return null; 115 | } 116 | 117 | var context = create3DContext(_canvas, _opt_attribs); 118 | if (!context) { 119 | showLink(OTHER_PROBLEM); 120 | } 121 | return context; 122 | }; 123 | 124 | /** 125 | * Creates a webgl context. 126 | * @param {!Canvas} canvas The canvas tag to get context 127 | * from. If one is not passed in one will be created. 128 | * @return {!WebGLContext} The created context. 129 | */ 130 | function create3DContext(_canvas, _opt_attribs) { 131 | var names = ["webgl", "experimental-webgl"]; 132 | var context = null; 133 | for (var ii = 0; ii < names.length; ++ii) { 134 | try { 135 | context = _canvas.getContext(names[ii], _opt_attribs); 136 | } catch(e) {} 137 | if (context) { 138 | break; 139 | } 140 | } 141 | return context; 142 | } 143 | 144 | /** 145 | * Loads a shader. 146 | * @param {!WebGLContext} gl The WebGLContext to use. 147 | * @param {string} shaderSource The shader source. 148 | * @param {number} shaderType The type of shader. 149 | * @param {function(string): void) opt_errorCallback callback for errors. 150 | * @return {!WebGLShader} The created shader. 151 | */ 152 | function createProgram(gl, shaders, opt_attribs, opt_locations) { 153 | var program = gl.createProgram(); 154 | for (var ii = 0; ii < shaders.length; ++ii) { 155 | gl.attachShader(program, shaders[ii]); 156 | } 157 | if (opt_attribs) { 158 | for (var ii = 0; ii < opt_attribs.length; ++ii) { 159 | gl.bindAttribLocation( 160 | program, 161 | opt_locations ? opt_locations[ii] : ii, 162 | opt_attribs[ii]); 163 | } 164 | } 165 | gl.linkProgram(program); 166 | 167 | // Check the link status 168 | var linked = gl.getProgramParameter(program, gl.LINK_STATUS); 169 | if (!linked) { 170 | // something went wrong with the link 171 | lastError = gl.getProgramInfoLog (program); 172 | console.log("Error in program linking:" + lastError); 173 | 174 | gl.deleteProgram(program); 175 | return null; 176 | } 177 | return program; 178 | }; 179 | 180 | /* 181 | * Fetch for files 182 | */ 183 | function fetchHTTP(url, methood){ 184 | var request = new XMLHttpRequest(), response; 185 | 186 | request.onreadystatechange = function () { 187 | if (request.readyState === 4 && request.status === 200) { 188 | response = request.responseText; 189 | } 190 | } 191 | request.open(methood ? methood : 'GET', url, false); 192 | request.send(); 193 | return response; 194 | } 195 | 196 | /* 197 | * Create a Vertex of a specific type (gl.VERTEX_SHADER/) 198 | */ 199 | function createShader( _gl, _source, _type) { 200 | var shader = _gl.createShader( _type ); 201 | _gl.shaderSource(shader, _source); 202 | _gl.compileShader(shader); 203 | var compiled = _gl.getShaderParameter(shader, _gl.COMPILE_STATUS); 204 | 205 | if (!compiled) { 206 | // Something went wrong during compilation; get the error 207 | lastError = _gl.getShaderInfoLog(shader); 208 | console.error("*** Error compiling shader '" + shader + "':" + lastError); 209 | _gl.deleteShader(shader); 210 | return null; 211 | } 212 | return shader; 213 | } 214 | 215 | /* 216 | * Loads the vert/frag Shaders 217 | */ 218 | function loadShader( _gl, _fragShaderURL ) { 219 | var vertexString = "precision mediump float;\n\ 220 | \n\ 221 | uniform vec2 u_resolution;\n\ 222 | uniform float u_time;\n\ 223 | attribute vec2 a_position;\n\ 224 | attribute vec2 a_texcoord;\n\ 225 | varying vec2 v_texcoord;\n\ 226 | \n\ 227 | void main() {\n\ 228 | gl_Position = vec4(a_position, 0.0, 1.0);\n\ 229 | v_texcoord = a_texcoord;\n\ 230 | }"; 231 | var vertexShader = createShader(_gl, vertexString, _gl.VERTEX_SHADER); 232 | 233 | var fragmentSource = fetchHTTP( _fragShaderURL ); 234 | var fragmentHeader = "precision mediump float;\n\ 235 | \n\ 236 | uniform vec2 u_resolution;\n\ 237 | uniform float u_time;\n\ 238 | varying vec2 v_texcoord;\n"; 239 | var fragmentShader = createShader(_gl, fragmentHeader + fragmentSource, _gl.FRAGMENT_SHADER); 240 | 241 | var program = createProgram( _gl, [vertexShader, fragmentShader]); 242 | _gl.useProgram(program); 243 | 244 | return program; 245 | } 246 | 247 | /* 248 | * Render loop of shader in a canvas 249 | */ 250 | function renderShader( _billboard ) { 251 | if (!_billboard.gl) { 252 | return; 253 | } 254 | 255 | // set the time uniform 256 | var timeFrame = (new Date()).getTime(); 257 | var time = (timeFrame-timeLoad) / 1000; 258 | var timeLocation = _billboard.gl.getUniformLocation( _billboard.program, "u_time"); 259 | _billboard.gl.uniform1f(timeLocation, time); 260 | 261 | // set the resolution uniform 262 | var resolutionLocation = _billboard.gl.getUniformLocation( _billboard.program, "u_resolution"); 263 | _billboard.gl.uniform2f(resolutionLocation, _billboard.canvas.width, _billboard.canvas.height); 264 | 265 | // Draw the rectangle. 266 | _billboard.gl.drawArrays(_billboard.gl.TRIANGLES, 0, 6); 267 | } 268 | 269 | -------------------------------------------------------------------------------- /src/highlight.min.js: -------------------------------------------------------------------------------- 1 | !function(e){"undefined"!=typeof exports?e(exports):(window.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return window.hljs}))}(function(e){function n(e){return e.replace(/&/gm,"&").replace(//gm,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0==t.index}function a(e){var n=(e.className+" "+(e.parentNode?e.parentNode.className:"")).split(/\s+/);return n=n.map(function(e){return e.replace(/^lang(uage)?-/,"")}),n.filter(function(e){return N(e)||/no(-?)highlight/.test(e)})[0]}function o(e,n){var t={};for(var r in e)t[r]=e[r];if(n)for(var r in n)t[r]=n[r];return t}function i(e){var n=[];return function r(e,a){for(var o=e.firstChild;o;o=o.nextSibling)3==o.nodeType?a+=o.nodeValue.length:1==o.nodeType&&(n.push({event:"start",offset:a,node:o}),a=r(o,a),t(o).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:o}));return a}(e,0),n}function c(e,r,a){function o(){return e.length&&r.length?e[0].offset!=r[0].offset?e[0].offset"}function c(e){l+=""}function u(e){("start"==e.event?i:c)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=o();if(l+=n(a.substr(s,g[0].offset-s)),s=g[0].offset,g==e){f.reverse().forEach(c);do u(g.splice(0,1)[0]),g=o();while(g==e&&g.length&&g[0].offset==s);f.reverse().forEach(i)}else"start"==g[0].event?f.push(g[0].node):f.pop(),u(g.splice(0,1)[0])}return l+n(a.substr(s))}function u(e){function n(e){return e&&e.source||e}function t(t,r){return RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var c={},u=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");c[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?u("keyword",a.k):Object.keys(a.k).forEach(function(e){u(e,a.k[e])}),a.k=c}a.lR=t(a.l||/\b[A-Za-z0-9_]+\b/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),void 0===a.r&&(a.r=1),a.c||(a.c=[]);var s=[];a.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"==e?a:e)}),a.c=s,a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var l=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=l.length?t(l.join("|"),!0):{exec:function(){return null}}}}r(e)}function s(e,t,a,o){function i(e,n){for(var t=0;t";return o+=e+'">',o+n+i}function d(){if(!w.k)return n(y);var e="",t=0;w.lR.lastIndex=0;for(var r=w.lR.exec(y);r;){e+=n(y.substr(t,r.index-t));var a=g(w,r);a?(B+=a[1],e+=p(a[0],n(r[0]))):e+=n(r[0]),t=w.lR.lastIndex,r=w.lR.exec(y)}return e+n(y.substr(t))}function h(){if(w.sL&&!R[w.sL])return n(y);var e=w.sL?s(w.sL,y,!0,L[w.sL]):l(y);return w.r>0&&(B+=e.r),"continuous"==w.subLanguageMode&&(L[w.sL]=e.top),p(e.language,e.value,!1,!0)}function v(){return void 0!==w.sL?h():d()}function b(e,t){var r=e.cN?p(e.cN,"",!0):"";e.rB?(M+=r,y=""):e.eB?(M+=n(t)+r,y=""):(M+=r,y=t),w=Object.create(e,{parent:{value:w}})}function m(e,t){if(y+=e,void 0===t)return M+=v(),0;var r=i(t,w);if(r)return M+=v(),b(r,t),r.rB?0:t.length;var a=c(w,t);if(a){var o=w;o.rE||o.eE||(y+=t),M+=v();do w.cN&&(M+=""),B+=w.r,w=w.parent;while(w!=a.parent);return o.eE&&(M+=n(t)),y="",a.starts&&b(a.starts,""),o.rE?0:t.length}if(f(t,w))throw new Error('Illegal lexeme "'+t+'" for mode "'+(w.cN||"")+'"');return y+=t,t.length||1}var x=N(e);if(!x)throw new Error('Unknown language: "'+e+'"');u(x);for(var w=o||x,L={},M="",k=w;k!=x;k=k.parent)k.cN&&(M=p(k.cN,"",!0)+M);var y="",B=0;try{for(var C,j,I=0;;){if(w.t.lastIndex=I,C=w.t.exec(t),!C)break;j=m(t.substr(I,C.index-I),C[0]),I=C.index+j}m(t.substr(I));for(var k=w;k.parent;k=k.parent)k.cN&&(M+="");return{r:B,value:M,language:e,top:w}}catch(A){if(-1!=A.message.indexOf("Illegal"))return{r:0,value:n(t)};throw A}}function l(e,t){t=t||E.languages||Object.keys(R);var r={r:0,value:n(e)},a=r;return t.forEach(function(n){if(N(n)){var t=s(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}}),a.language&&(r.second_best=a),r}function f(e){return E.tabReplace&&(e=e.replace(/^((<[^>]+>|\t)+)/gm,function(e,n){return n.replace(/\t/g,E.tabReplace)})),E.useBR&&(e=e.replace(/\n/g,"
")),e}function g(e,n,t){var r=n?x[n]:t,a=[e.trim()];return e.match(/(\s|^)hljs(\s|$)/)||a.push("hljs"),r&&a.push(r),a.join(" ").trim()}function p(e){var n=a(e);if(!/no(-?)highlight/.test(n)){var t;E.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n")):t=e;var r=t.textContent,o=n?s(n,r,!0):l(r),u=i(t);if(u.length){var p=document.createElementNS("http://www.w3.org/1999/xhtml","div");p.innerHTML=o.value,o.value=c(u,i(p),r)}o.value=f(o.value),e.innerHTML=o.value,e.className=g(e.className,n,o.language),e.result={language:o.language,re:o.r},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.r})}}function d(e){E=o(E,e)}function h(){if(!h.called){h.called=!0;var e=document.querySelectorAll("pre code");Array.prototype.forEach.call(e,p)}}function v(){addEventListener("DOMContentLoaded",h,!1),addEventListener("load",h,!1)}function b(n,t){var r=R[n]=t(e);r.aliases&&r.aliases.forEach(function(e){x[e]=n})}function m(){return Object.keys(R)}function N(e){return R[e]||R[x[e]]}var E={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},R={},x={};return e.highlight=s,e.highlightAuto=l,e.fixMarkup=f,e.highlightBlock=p,e.configure=d,e.initHighlighting=h,e.initHighlightingOnLoad=v,e.registerLanguage=b,e.listLanguages=m,e.getLanguage=N,e.inherit=o,e.IR="[a-zA-Z][a-zA-Z0-9_]*",e.UIR="[a-zA-Z_][a-zA-Z0-9_]*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such)\b/},e.CLCM={cN:"comment",b:"//",e:"$",c:[e.PWM]},e.CBCM={cN:"comment",b:"/\\*",e:"\\*/",c:[e.PWM]},e.HCM={cN:"comment",b:"#",e:"$",c:[e.PWM]},e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e});hljs.registerLanguage("cpp",function(t){var i={keyword:"false int float while private char catch export virtual operator sizeof dynamic_cast|10 typedef const_cast|10 const struct for static_cast|10 union namespace unsigned long volatile static protected bool template mutable if public friend do goto auto void enum else break extern using true class asm case typeid short reinterpret_cast|10 default double register explicit signed typename try this switch continue wchar_t inline delete alignof char16_t char32_t constexpr decltype noexcept nullptr static_assert thread_local restrict _Bool complex _Complex _Imaginaryintmax_t uintmax_t int8_t uint8_t int16_t uint16_t int32_t uint32_t int64_t uint64_tint_least8_t uint_least8_t int_least16_t uint_least16_t int_least32_t uint_least32_tint_least64_t uint_least64_t int_fast8_t uint_fast8_t int_fast16_t uint_fast16_t int_fast32_tuint_fast32_t int_fast64_t uint_fast64_t intptr_t uintptr_t atomic_bool atomic_char atomic_scharatomic_uchar atomic_short atomic_ushort atomic_int atomic_uint atomic_long atomic_ulong atomic_llongatomic_ullong atomic_wchar_t atomic_char16_t atomic_char32_t atomic_intmax_t atomic_uintmax_tatomic_intptr_t atomic_uintptr_t atomic_size_t atomic_ptrdiff_t atomic_int_least8_t atomic_int_least16_tatomic_int_least32_t atomic_int_least64_t atomic_uint_least8_t atomic_uint_least16_t atomic_uint_least32_tatomic_uint_least64_t atomic_int_fast8_t atomic_int_fast16_t atomic_int_fast32_t atomic_int_fast64_tatomic_uint_fast8_t atomic_uint_fast16_t atomic_uint_fast32_t atomic_uint_fast64_t",built_in:"std string cin cout cerr clog stringstream istringstream ostringstream auto_ptr deque list queue stack vector map set bitset multiset multimap unordered_set unordered_map unordered_multiset unordered_multimap array shared_ptr abort abs acos asin atan2 atan calloc ceil cosh cos exit exp fabs floor fmod fprintf fputs free frexp fscanf isalnum isalpha iscntrl isdigit isgraph islower isprint ispunct isspace isupper isxdigit tolower toupper labs ldexp log10 log malloc memchr memcmp memcpy memset modf pow printf putchar puts scanf sinh sin snprintf sprintf sqrt sscanf strcat strchr strcmp strcpy strcspn strlen strncat strncmp strncpy strpbrk strrchr strspn strstr tanh tan vfprintf vprintf vsprintf"};return{aliases:["c","h","c++","h++"],k:i,i:""]',k:"include",i:"\\n"},t.CLCM]},{cN:"stl_container",b:"\\b(deque|list|queue|stack|vector|map|set|bitset|multiset|multimap|unordered_map|unordered_set|unordered_multiset|unordered_multimap|array)\\s*<",e:">",k:i,c:["self"]},{b:t.IR+"::"},{bK:"new throw return",r:0},{cN:"function",b:"("+t.IR+"\\s+)+"+t.IR+"\\s*\\(",rB:!0,e:/[{;=]/,eE:!0,k:i,c:[{b:t.IR+"\\s*\\(",rB:!0,c:[t.TM],r:0},{cN:"params",b:/\(/,e:/\)/,k:i,r:0,c:[t.CBCM]},t.CLCM,t.CBCM]}]}});hljs.registerLanguage("ruby",function(e){var b="[a-zA-Z_]\\w*[!?=]?|[-+~]\\@|<<|>>|=~|===?|<=>|[<>]=?|\\*\\*|[-/+%^&*~`|]|\\[\\]=?",r="and false then defined module in return redo if BEGIN retry end for true self when next until do begin unless END rescue nil else break undef not super class case require yield alias while ensure elsif or include attr_reader attr_writer attr_accessor",c={cN:"yardoctag",b:"@[A-Za-z]+"},a={cN:"value",b:"#<",e:">"},s={cN:"comment",v:[{b:"#",e:"$",c:[c]},{b:"^\\=begin",e:"^\\=end",c:[c],r:10},{b:"^__END__",e:"\\n$"}]},n={cN:"subst",b:"#\\{",e:"}",k:r},t={cN:"string",c:[e.BE,n],v:[{b:/'/,e:/'/},{b:/"/,e:/"/},{b:/`/,e:/`/},{b:"%[qQwWx]?\\(",e:"\\)"},{b:"%[qQwWx]?\\[",e:"\\]"},{b:"%[qQwWx]?{",e:"}"},{b:"%[qQwWx]?<",e:">"},{b:"%[qQwWx]?/",e:"/"},{b:"%[qQwWx]?%",e:"%"},{b:"%[qQwWx]?-",e:"-"},{b:"%[qQwWx]?\\|",e:"\\|"},{b:/\B\?(\\\d{1,3}|\\x[A-Fa-f0-9]{1,2}|\\u[A-Fa-f0-9]{4}|\\?\S)\b/}]},i={cN:"params",b:"\\(",e:"\\)",k:r},d=[t,a,s,{cN:"class",bK:"class module",e:"$|;",i:/=/,c:[e.inherit(e.TM,{b:"[A-Za-z_]\\w*(::\\w+)*(\\?|\\!)?"}),{cN:"inheritance",b:"<\\s*",c:[{cN:"parent",b:"("+e.IR+"::)?"+e.IR}]},s]},{cN:"function",bK:"def",e:" |$|;",r:0,c:[e.inherit(e.TM,{b:b}),i,s]},{cN:"constant",b:"(::)?(\\b[A-Z]\\w*(::)?)+",r:0},{cN:"symbol",b:e.UIR+"(\\!|\\?)?:",r:0},{cN:"symbol",b:":",c:[t,{b:b}],r:0},{cN:"number",b:"(\\b0[0-7_]+)|(\\b0x[0-9a-fA-F_]+)|(\\b[1-9][0-9_]*(\\.[0-9_]+)?)|[0_]\\b",r:0},{cN:"variable",b:"(\\$\\W)|((\\$|\\@\\@?)(\\w+))"},{b:"("+e.RSR+")\\s*",c:[a,s,{cN:"regexp",c:[e.BE,n],i:/\n/,v:[{b:"/",e:"/[a-z]*"},{b:"%r{",e:"}[a-z]*"},{b:"%r\\(",e:"\\)[a-z]*"},{b:"%r!",e:"![a-z]*"},{b:"%r\\[",e:"\\][a-z]*"}]}],r:0}];n.c=d,i.c=d;var l="[>?]>",u="[\\w#]+\\(\\w+\\):\\d+:\\d+>",N="(\\w+-)?\\d+\\.\\d+\\.\\d(p\\d+)?[^>]+>",o=[{b:/^\s*=>/,cN:"status",starts:{e:"$",c:d}},{cN:"prompt",b:"^("+l+"|"+u+"|"+N+")",starts:{e:"$",c:d}}];return{aliases:["rb","gemspec","podspec","thor","irb"],k:r,c:[s].concat(o).concat(d)}});hljs.registerLanguage("apache",function(e){var r={cN:"number",b:"[\\$%]\\d+"};return{aliases:["apacheconf"],cI:!0,c:[e.HCM,{cN:"tag",b:""},{cN:"keyword",b:/\w+/,r:0,k:{common:"order deny allow setenv rewriterule rewriteengine rewritecond documentroot sethandler errordocument loadmodule options header listen serverroot servername"},starts:{e:/$/,r:0,k:{literal:"on off all"},c:[{cN:"sqbracket",b:"\\s\\[",e:"\\]$"},{cN:"cbracket",b:"[\\$%]\\{",e:"\\}",c:["self",r]},r,e.QSM]}}],i:/\S/}});hljs.registerLanguage("python",function(e){var r={cN:"prompt",b:/^(>>>|\.\.\.) /},b={cN:"string",c:[e.BE],v:[{b:/(u|b)?r?'''/,e:/'''/,c:[r],r:10},{b:/(u|b)?r?"""/,e:/"""/,c:[r],r:10},{b:/(u|r|ur)'/,e:/'/,r:10},{b:/(u|r|ur)"/,e:/"/,r:10},{b:/(b|br)'/,e:/'/},{b:/(b|br)"/,e:/"/},e.ASM,e.QSM]},l={cN:"number",r:0,v:[{b:e.BNR+"[lLjJ]?"},{b:"\\b(0o[0-7]+)[lLjJ]?"},{b:e.CNR+"[lLjJ]?"}]},c={cN:"params",b:/\(/,e:/\)/,c:["self",r,l,b]};return{aliases:["py","gyp"],k:{keyword:"and elif is global as in if from raise for except finally print import pass return exec else break not with class assert yield try while continue del or def lambda nonlocal|10 None True False",built_in:"Ellipsis NotImplemented"},i:/(<\/|->|\?)/,c:[r,l,b,e.HCM,{v:[{cN:"function",bK:"def",r:10},{cN:"class",bK:"class"}],e:/:/,i:/[${=;\n]/,c:[e.UTM,c]},{cN:"decorator",b:/@/,e:/$/},{b:/\b(print|exec)\(/}]}});hljs.registerLanguage("javascript",function(r){return{aliases:["js"],k:{keyword:"in if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const class",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document"},c:[{cN:"pi",r:10,v:[{b:/^\s*('|")use strict('|")/},{b:/^\s*('|")use asm('|")/}]},r.ASM,r.QSM,r.CLCM,r.CBCM,r.CNM,{b:"("+r.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[r.CLCM,r.CBCM,r.RM,{b:/;/,r:0,sL:"xml"}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[r.inherit(r.TM,{b:/[A-Za-z$_][0-9A-Za-z$_]*/}),{cN:"params",b:/\(/,e:/\)/,c:[r.CLCM,r.CBCM],i:/["'\(]/}],i:/\[|%/},{b:/\$[(.]/},{b:"\\."+r.IR,r:0}]}});hljs.registerLanguage("coffeescript",function(e){var c={keyword:"in if for while finally new do return else break catch instanceof throw try this switch continue typeof delete debugger super then unless until loop of by when and or is isnt not",literal:"true false null undefined yes no on off",reserved:"case default function var void with const let enum export import native __hasProp __extends __slice __bind __indexOf",built_in:"npm require console print module global window document"},n="[A-Za-z$_][0-9A-Za-z$_]*",t={cN:"subst",b:/#\{/,e:/}/,k:c},r=[e.BNM,e.inherit(e.CNM,{starts:{e:"(\\s*/)?",r:0}}),{cN:"string",v:[{b:/'''/,e:/'''/,c:[e.BE]},{b:/'/,e:/'/,c:[e.BE]},{b:/"""/,e:/"""/,c:[e.BE,t]},{b:/"/,e:/"/,c:[e.BE,t]}]},{cN:"regexp",v:[{b:"///",e:"///",c:[t,e.HCM]},{b:"//[gim]*",r:0},{b:/\/(?![ *])(\\\/|.)*?\/[gim]*(?=\W|$)/}]},{cN:"property",b:"@"+n},{b:"`",e:"`",eB:!0,eE:!0,sL:"javascript"}];t.c=r;var i=e.inherit(e.TM,{b:n}),s="(\\(.*\\))?\\s*\\B[-=]>",o={cN:"params",b:"\\([^\\(]",rB:!0,c:[{b:/\(/,e:/\)/,k:c,c:["self"].concat(r)}]};return{aliases:["coffee","cson","iced"],k:c,i:/\/\*/,c:r.concat([{cN:"comment",b:"###",e:"###",c:[e.PWM]},e.HCM,{cN:"function",b:"^\\s*"+n+"\\s*=\\s*"+s,e:"[-=]>",rB:!0,c:[i,o]},{b:/[:\(,=]\s*/,r:0,c:[{cN:"function",b:s,e:"[-=]>",rB:!0,c:[o]}]},{cN:"class",bK:"class",e:"$",i:/[:="\[\]]/,c:[{bK:"extends",eW:!0,i:/[:="\[\]]/,c:[i]},i]},{cN:"attribute",b:n+":",e:":",rB:!0,rE:!0,r:0}])}});hljs.registerLanguage("http",function(){return{i:"\\S",c:[{cN:"status",b:"^HTTP/[0-9\\.]+",e:"$",c:[{cN:"number",b:"\\b\\d{3}\\b"}]},{cN:"request",b:"^[A-Z]+ (.*?) HTTP/[0-9\\.]+$",rB:!0,e:"$",c:[{cN:"string",b:" ",e:" ",eB:!0,eE:!0}]},{cN:"attribute",b:"^\\w",e:": ",eE:!0,i:"\\n|\\s|=",starts:{cN:"string",e:"$"}},{b:"\\n\\n",starts:{sL:"",eW:!0}}]}});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",a={cN:"function",b:c+"\\(",rB:!0,eE:!0,e:"\\("};return{cI:!0,i:"[=/|']",c:[e.CBCM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{cN:"at_rule",b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[a,e.ASM,e.QSM,e.CSSNM]}]},{cN:"tag",b:c,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[e.CBCM,{cN:"rule",b:"[^\\s]",rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:!0,i:"[^\\s]",starts:{cN:"value",eW:!0,eE:!0,c:[a,e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"hexcolor",b:"#[0-9A-Fa-f]+"},{cN:"important",b:"!important"}]}}]}]}]}});hljs.registerLanguage("ini",function(e){return{cI:!0,i:/\S/,c:[{cN:"comment",b:";",e:"$"},{cN:"title",b:"^\\[",e:"\\]"},{cN:"setting",b:"^[a-z0-9\\[\\]_-]+[ \\t]*=[ \\t]*",e:"$",c:[{cN:"value",eW:!0,k:"on off true false yes no",c:[e.QSM,e.NM],r:0}]}]}});hljs.registerLanguage("objectivec",function(e){var t={keyword:"int float while char export sizeof typedef const struct for union unsigned long volatile static bool mutable if do return goto void enum else break extern asm case short default double register explicit signed typename this switch continue wchar_t inline readonly assign readwrite self @synchronized id typeof nonatomic super unichar IBOutlet IBAction strong weak copy in out inout bycopy byref oneway __strong __weak __block __autoreleasing @private @protected @public @try @property @end @throw @catch @finally @autoreleasepool @synthesize @dynamic @selector @optional @required",literal:"false true FALSE TRUE nil YES NO NULL",built_in:"NSString NSData NSDictionary CGRect CGPoint UIButton UILabel UITextView UIWebView MKMapView NSView NSViewController NSWindow NSWindowController NSSet NSUUID NSIndexSet UISegmentedControl NSObject UITableViewDelegate UITableViewDataSource NSThread UIActivityIndicator UITabbar UIToolBar UIBarButtonItem UIImageView NSAutoreleasePool UITableView BOOL NSInteger CGFloat NSException NSLog NSMutableString NSMutableArray NSMutableDictionary NSURL NSIndexPath CGSize UITableViewCell UIView UIViewController UINavigationBar UINavigationController UITabBarController UIPopoverController UIPopoverControllerDelegate UIImage NSNumber UISearchBar NSFetchedResultsController NSFetchedResultsChangeType UIScrollView UIScrollViewDelegate UIEdgeInsets UIColor UIFont UIApplication NSNotFound NSNotificationCenter NSNotification UILocalNotification NSBundle NSFileManager NSTimeInterval NSDate NSCalendar NSUserDefaults UIWindow NSRange NSArray NSError NSURLRequest NSURLConnection NSURLSession NSURLSessionDataTask NSURLSessionDownloadTask NSURLSessionUploadTask NSURLResponseUIInterfaceOrientation MPMoviePlayerController dispatch_once_t dispatch_queue_t dispatch_sync dispatch_async dispatch_once"},o=/[a-zA-Z@][a-zA-Z0-9_]*/,a="@interface @class @protocol @implementation";return{aliases:["m","mm","objc","obj-c"],k:t,l:o,i:""}]}]},{cN:"class",b:"("+a.split(" ").join("|")+")\\b",e:"({|$)",eE:!0,k:a,l:o,c:[e.UTM]},{cN:"variable",b:"\\."+e.UIR,r:0}]}});hljs.registerLanguage("bash",function(e){var t={cN:"variable",v:[{b:/\$[\w\d#@][\w\d_]*/},{b:/\$\{(.*?)\}/}]},s={cN:"string",b:/"/,e:/"/,c:[e.BE,t,{cN:"variable",b:/\$\(/,e:/\)/,c:[e.BE]}]},a={cN:"string",b:/'/,e:/'/};return{aliases:["sh","zsh"],l:/-?[a-z\.]+/,k:{keyword:"if then else elif fi for while in do done case esac function",literal:"true false",built_in:"break cd continue eval exec exit export getopts hash pwd readonly return shift test times trap umask unset alias bind builtin caller command declare echo enable help let local logout mapfile printf read readarray source type typeset ulimit unalias set shopt autoload bg bindkey bye cap chdir clone comparguments compcall compctl compdescribe compfiles compgroups compquote comptags comptry compvalues dirs disable disown echotc echoti emulate fc fg float functions getcap getln history integer jobs kill limit log noglob popd print pushd pushln rehash sched setcap setopt stat suspend ttyctl unfunction unhash unlimit unsetopt vared wait whence where which zcompile zformat zftp zle zmodload zparseopts zprof zpty zregexparse zsocket zstyle ztcp",operator:"-ne -eq -lt -gt -f -d -e -s -l -a"},c:[{cN:"shebang",b:/^#![^\n]+sh\s*$/,r:10},{cN:"function",b:/\w[\w\d_]*\s*\(\s*\)\s*\{/,rB:!0,c:[e.inherit(e.TM,{b:/\w[\w\d_]*/})],r:0},e.HCM,e.NM,s,a,t]}});hljs.registerLanguage("markdown",function(){return{aliases:["md","mkdown","mkd"],c:[{cN:"header",v:[{b:"^#{1,6}",e:"$"},{b:"^.+?\\n[=-]{2,}$"}]},{b:"<",e:">",sL:"xml",r:0},{cN:"bullet",b:"^([*+-]|(\\d+\\.))\\s+"},{cN:"strong",b:"[*_]{2}.+?[*_]{2}"},{cN:"emphasis",v:[{b:"\\*.+?\\*"},{b:"_.+?_",r:0}]},{cN:"blockquote",b:"^>\\s+",e:"$"},{cN:"code",v:[{b:"`.+?`"},{b:"^( {4}| )",e:"$",r:0}]},{cN:"horizontal_rule",b:"^[-\\*]{3,}",e:"$"},{b:"\\[.+?\\][\\(\\[].*?[\\)\\]]",rB:!0,c:[{cN:"link_label",b:"\\[",e:"\\]",eB:!0,rE:!0,r:0},{cN:"link_url",b:"\\]\\(",e:"\\)",eB:!0,eE:!0},{cN:"link_reference",b:"\\]\\[",e:"\\]",eB:!0,eE:!0}],r:10},{b:"^\\[.+\\]:",rB:!0,c:[{cN:"link_reference",b:"\\[",e:"\\]:",eB:!0,eE:!0,starts:{cN:"link_url",e:"$"}}]}]}});hljs.registerLanguage("java",function(e){var a=e.UIR+"(<"+e.UIR+">)?",t="false synchronized int abstract float private char boolean static null if const for true while long strictfp finally protected import native final void enum else break transient catch instanceof byte super volatile case assert short package default double public try this switch continue throws protected public private",c="(\\b(0b[01_]+)|\\b0[xX][a-fA-F0-9_]+|(\\b[\\d_]+(\\.[\\d_]*)?|\\.[\\d_]+)([eE][-+]?\\d+)?)[lLfF]?",r={cN:"number",b:c,r:0};return{aliases:["jsp"],k:t,i:/<\//,c:[{cN:"javadoc",b:"/\\*\\*",e:"\\*/",r:0,c:[{cN:"javadoctag",b:"(^|\\s)@[A-Za-z]+"}]},e.CLCM,e.CBCM,e.ASM,e.QSM,{cN:"class",bK:"class interface",e:/[{;=]/,eE:!0,k:"class interface",i:/[:"\[\]]/,c:[{bK:"extends implements"},e.UTM]},{bK:"new throw return",r:0},{cN:"function",b:"("+a+"\\s+)+"+e.UIR+"\\s*\\(",rB:!0,e:/[{;=]/,eE:!0,k:t,c:[{b:e.UIR+"\\s*\\(",rB:!0,r:0,c:[e.UTM]},{cN:"params",b:/\(/,e:/\)/,k:t,r:0,c:[e.ASM,e.QSM,e.CNM,e.CBCM]},e.CLCM,e.CBCM]},r,{cN:"annotation",b:"@[A-Za-z]+"}]}});hljs.registerLanguage("diff",function(){return{aliases:["patch"],c:[{cN:"chunk",r:10,v:[{b:/^\@\@ +\-\d+,\d+ +\+\d+,\d+ +\@\@$/},{b:/^\*\*\* +\d+,\d+ +\*\*\*\*$/},{b:/^\-\-\- +\d+,\d+ +\-\-\-\-$/}]},{cN:"header",v:[{b:/Index: /,e:/$/},{b:/=====/,e:/=====$/},{b:/^\-\-\-/,e:/$/},{b:/^\*{3} /,e:/$/},{b:/^\+\+\+/,e:/$/},{b:/\*{5}/,e:/\*{5}$/}]},{cN:"addition",b:"^\\+",e:"$"},{cN:"deletion",b:"^\\-",e:"$"},{cN:"change",b:"^\\!",e:"$"}]}});hljs.registerLanguage("perl",function(e){var t="getpwent getservent quotemeta msgrcv scalar kill dbmclose undef lc ma syswrite tr send umask sysopen shmwrite vec qx utime local oct semctl localtime readpipe do return format read sprintf dbmopen pop getpgrp not getpwnam rewinddir qqfileno qw endprotoent wait sethostent bless s|0 opendir continue each sleep endgrent shutdown dump chomp connect getsockname die socketpair close flock exists index shmgetsub for endpwent redo lstat msgctl setpgrp abs exit select print ref gethostbyaddr unshift fcntl syscall goto getnetbyaddr join gmtime symlink semget splice x|0 getpeername recv log setsockopt cos last reverse gethostbyname getgrnam study formline endhostent times chop length gethostent getnetent pack getprotoent getservbyname rand mkdir pos chmod y|0 substr endnetent printf next open msgsnd readdir use unlink getsockopt getpriority rindex wantarray hex system getservbyport endservent int chr untie rmdir prototype tell listen fork shmread ucfirst setprotoent else sysseek link getgrgid shmctl waitpid unpack getnetbyname reset chdir grep split require caller lcfirst until warn while values shift telldir getpwuid my getprotobynumber delete and sort uc defined srand accept package seekdir getprotobyname semop our rename seek if q|0 chroot sysread setpwent no crypt getc chown sqrt write setnetent setpriority foreach tie sin msgget map stat getlogin unless elsif truncate exec keys glob tied closedirioctl socket readlink eval xor readline binmode setservent eof ord bind alarm pipe atan2 getgrent exp time push setgrent gt lt or ne m|0 break given say state when",r={cN:"subst",b:"[$@]\\{",e:"\\}",k:t},s={b:"->{",e:"}"},n={cN:"variable",v:[{b:/\$\d/},{b:/[\$\%\@](\^\w\b|#\w+(\:\:\w+)*|{\w+}|\w+(\:\:\w*)*)/},{b:/[\$\%\@][^\s\w{]/,r:0}]},o={cN:"comment",b:"^(__END__|__DATA__)",e:"\\n$",r:5},i=[e.BE,r,n],c=[n,e.HCM,o,{cN:"comment",b:"^\\=\\w",e:"\\=cut",eW:!0},s,{cN:"string",c:i,v:[{b:"q[qwxr]?\\s*\\(",e:"\\)",r:5},{b:"q[qwxr]?\\s*\\[",e:"\\]",r:5},{b:"q[qwxr]?\\s*\\{",e:"\\}",r:5},{b:"q[qwxr]?\\s*\\|",e:"\\|",r:5},{b:"q[qwxr]?\\s*\\<",e:"\\>",r:5},{b:"qw\\s+q",e:"q",r:5},{b:"'",e:"'",c:[e.BE]},{b:'"',e:'"'},{b:"`",e:"`",c:[e.BE]},{b:"{\\w+}",c:[],r:0},{b:"-?\\w+\\s*\\=\\>",c:[],r:0}]},{cN:"number",b:"(\\b0[0-7_]+)|(\\b0x[0-9a-fA-F_]+)|(\\b[1-9][0-9_]*(\\.[0-9_]+)?)|[0_]\\b",r:0},{b:"(\\/\\/|"+e.RSR+"|\\b(split|return|print|reverse|grep)\\b)\\s*",k:"split return print reverse grep",r:0,c:[e.HCM,o,{cN:"regexp",b:"(s|tr|y)/(\\\\.|[^/])*/(\\\\.|[^/])*/[a-z]*",r:10},{cN:"regexp",b:"(m|qr)?/",e:"/[a-z]*",c:[e.BE],r:0}]},{cN:"sub",bK:"sub",e:"(\\s*\\(.*?\\))?[;{]",r:5},{cN:"operator",b:"-\\w\\b",r:0}];return r.c=c,s.c=c,{aliases:["pl"],k:t,c:c}});hljs.registerLanguage("makefile",function(e){var a={cN:"variable",b:/\$\(/,e:/\)/,c:[e.BE]};return{aliases:["mk","mak"],c:[e.HCM,{b:/^\w+\s*\W*=/,rB:!0,r:0,starts:{cN:"constant",e:/\s*\W*=/,eE:!0,starts:{e:/$/,r:0,c:[a]}}},{cN:"title",b:/^[\w]+:\s*$/},{cN:"phony",b:/^\.PHONY:/,e:/$/,k:".PHONY",l:/[\.\w]+/},{b:/^\t+/,e:/$/,r:0,c:[e.QSM,a]}]}});hljs.registerLanguage("cs",function(e){var r="abstract as base bool break byte case catch char checked const continue decimal default delegate do double else enum event explicit extern false finally fixed float for foreach goto if implicit in int interface internal is lock long null object operator out override params private protected public readonly ref sbyte sealed short sizeof stackalloc static string struct switch this true try typeof uint ulong unchecked unsafe ushort using virtual volatile void while async protected public private internal ascending descending from get group into join let orderby partial select set value var where yield",t=e.IR+"(<"+e.IR+">)?";return{aliases:["csharp"],k:r,i:/::/,c:[{cN:"comment",b:"///",e:"$",rB:!0,c:[{cN:"xmlDocTag",v:[{b:"///",r:0},{b:""},{b:""}]}]},e.CLCM,e.CBCM,{cN:"preprocessor",b:"#",e:"$",k:"if else elif endif define undef warning error line region endregion pragma checksum"},{cN:"string",b:'@"',e:'"',c:[{b:'""'}]},e.ASM,e.QSM,e.CNM,{bK:"class namespace interface",e:/[{;=]/,i:/[^\s:]/,c:[e.TM,e.CLCM,e.CBCM]},{bK:"new return throw await",r:0},{cN:"function",b:"("+t+"\\s+)+"+e.IR+"\\s*\\(",rB:!0,e:/[{;=]/,eE:!0,k:r,c:[{b:e.IR+"\\s*\\(",rB:!0,c:[e.TM],r:0},{cN:"params",b:/\(/,e:/\)/,k:r,r:0,c:[e.ASM,e.QSM,e.CNM,e.CBCM]},e.CLCM,e.CBCM]}]}});hljs.registerLanguage("json",function(e){var t={literal:"true false null"},i=[e.QSM,e.CNM],l={cN:"value",e:",",eW:!0,eE:!0,c:i,k:t},c={b:"{",e:"}",c:[{cN:"attribute",b:'\\s*"',e:'"\\s*:\\s*',eB:!0,eE:!0,c:[e.BE],i:"\\n",starts:l}],i:"\\S"},n={b:"\\[",e:"\\]",c:[e.inherit(l,{cN:null})],i:"\\S"};return i.splice(i.length,0,c,n),{c:i,k:t,i:"\\S"}});hljs.registerLanguage("nginx",function(e){var r={cN:"variable",v:[{b:/\$\d+/},{b:/\$\{/,e:/}/},{b:"[\\$\\@]"+e.UIR}]},b={eW:!0,l:"[a-z/_]+",k:{built_in:"on off yes no true false none blocked debug info notice warn error crit select break last permanent redirect kqueue rtsig epoll poll /dev/poll"},r:0,i:"=>",c:[e.HCM,{cN:"string",c:[e.BE,r],v:[{b:/"/,e:/"/},{b:/'/,e:/'/}]},{cN:"url",b:"([a-z]+):/",e:"\\s",eW:!0,eE:!0,c:[r]},{cN:"regexp",c:[e.BE,r],v:[{b:"\\s\\^",e:"\\s|{|;",rE:!0},{b:"~\\*?\\s+",e:"\\s|{|;",rE:!0},{b:"\\*(\\.[a-z\\-]+)+"},{b:"([a-z\\-]+\\.)+\\*"}]},{cN:"number",b:"\\b\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}(:\\d{1,5})?\\b"},{cN:"number",b:"\\b\\d+[kKmMgGdshdwy]*\\b",r:0},r]};return{aliases:["nginxconf"],c:[e.HCM,{b:e.UIR+"\\s",e:";|{",rB:!0,c:[{cN:"title",b:e.UIR,starts:b}],r:0}],i:"[^\\s\\}]"}});hljs.registerLanguage("glsl",function(e){return{k:{keyword:"atomic_uint attribute bool break bvec2 bvec3 bvec4 case centroid coherent const continue default discard dmat2 dmat2x2 dmat2x3 dmat2x4 dmat3 dmat3x2 dmat3x3 dmat3x4 dmat4 dmat4x2 dmat4x3 dmat4x4 do double dvec2 dvec3 dvec4 else flat float for highp if iimage1D iimage1DArray iimage2D iimage2DArray iimage2DMS iimage2DMSArray iimage2DRect iimage3D iimageBuffer iimageCube iimageCubeArray image1D image1DArray image2D image2DArray image2DMS image2DMSArray image2DRect image3D imageBuffer imageCube imageCubeArray in inout int invariant isampler1D isampler1DArray isampler2D isampler2DArray isampler2DMS isampler2DMSArray isampler2DRect isampler3D isamplerBuffer isamplerCube isamplerCubeArray ivec2 ivec3 ivec4 layout lowp mat2 mat2x2 mat2x3 mat2x4 mat3 mat3x2 mat3x3 mat3x4 mat4 mat4x2 mat4x3 mat4x4 mediump noperspective out patch precision readonly restrict return sample sampler1D sampler1DArray sampler1DArrayShadow sampler1DShadow sampler2D sampler2DArray sampler2DArrayShadow sampler2DMS sampler2DMSArray sampler2DRect sampler2DRectShadow sampler2DShadow sampler3D samplerBuffer samplerCube samplerCubeArray samplerCubeArrayShadow samplerCubeShadow smooth struct subroutine switch uimage1D uimage1DArray uimage2D uimage2DArray uimage2DMS uimage2DMSArray uimage2DRect uimage3D uimageBuffer uimageCube uimageCubeArray uint uniform usampler1D usampler1DArray usampler2D usampler2DArray usampler2DMS usampler2DMSArray usampler2DRect usampler3D usamplerBuffer usamplerCube usamplerCubeArray uvec2 uvec3 uvec4 varying vec2 vec3 vec4 void volatile while writeonly",built_in:"gl_BackColor gl_BackLightModelProduct gl_BackLightProduct gl_BackMaterial gl_BackSecondaryColor gl_ClipDistance gl_ClipPlane gl_ClipVertex gl_Color gl_DepthRange gl_EyePlaneQ gl_EyePlaneR gl_EyePlaneS gl_EyePlaneT gl_Fog gl_FogCoord gl_FogFragCoord gl_FragColor gl_FragCoord gl_FragData gl_FragDepth gl_FrontColor gl_FrontFacing gl_FrontLightModelProduct gl_FrontLightProduct gl_FrontMaterial gl_FrontSecondaryColor gl_InstanceID gl_InvocationID gl_Layer gl_LightModel gl_LightSource gl_MaxAtomicCounterBindings gl_MaxAtomicCounterBufferSize gl_MaxClipDistances gl_MaxClipPlanes gl_MaxCombinedAtomicCounterBuffers gl_MaxCombinedAtomicCounters gl_MaxCombinedImageUniforms gl_MaxCombinedImageUnitsAndFragmentOutputs gl_MaxCombinedTextureImageUnits gl_MaxDrawBuffers gl_MaxFragmentAtomicCounterBuffers gl_MaxFragmentAtomicCounters gl_MaxFragmentImageUniforms gl_MaxFragmentInputComponents gl_MaxFragmentUniformComponents gl_MaxFragmentUniformVectors gl_MaxGeometryAtomicCounterBuffers gl_MaxGeometryAtomicCounters gl_MaxGeometryImageUniforms gl_MaxGeometryInputComponents gl_MaxGeometryOutputComponents gl_MaxGeometryOutputVertices gl_MaxGeometryTextureImageUnits gl_MaxGeometryTotalOutputComponents gl_MaxGeometryUniformComponents gl_MaxGeometryVaryingComponents gl_MaxImageSamples gl_MaxImageUnits gl_MaxLights gl_MaxPatchVertices gl_MaxProgramTexelOffset gl_MaxTessControlAtomicCounterBuffers gl_MaxTessControlAtomicCounters gl_MaxTessControlImageUniforms gl_MaxTessControlInputComponents gl_MaxTessControlOutputComponents gl_MaxTessControlTextureImageUnits gl_MaxTessControlTotalOutputComponents gl_MaxTessControlUniformComponents gl_MaxTessEvaluationAtomicCounterBuffers gl_MaxTessEvaluationAtomicCounters gl_MaxTessEvaluationImageUniforms gl_MaxTessEvaluationInputComponents gl_MaxTessEvaluationOutputComponents gl_MaxTessEvaluationTextureImageUnits gl_MaxTessEvaluationUniformComponents gl_MaxTessGenLevel gl_MaxTessPatchComponents gl_MaxTextureCoords gl_MaxTextureImageUnits gl_MaxTextureUnits gl_MaxVaryingComponents gl_MaxVaryingFloats gl_MaxVaryingVectors gl_MaxVertexAtomicCounterBuffers gl_MaxVertexAtomicCounters gl_MaxVertexAttribs gl_MaxVertexImageUniforms gl_MaxVertexOutputComponents gl_MaxVertexTextureImageUnits gl_MaxVertexUniformComponents gl_MaxVertexUniformVectors gl_MaxViewports gl_MinProgramTexelOffsetgl_ModelViewMatrix gl_ModelViewMatrixInverse gl_ModelViewMatrixInverseTranspose gl_ModelViewMatrixTranspose gl_ModelViewProjectionMatrix gl_ModelViewProjectionMatrixInverse gl_ModelViewProjectionMatrixInverseTranspose gl_ModelViewProjectionMatrixTranspose gl_MultiTexCoord0 gl_MultiTexCoord1 gl_MultiTexCoord2 gl_MultiTexCoord3 gl_MultiTexCoord4 gl_MultiTexCoord5 gl_MultiTexCoord6 gl_MultiTexCoord7 gl_Normal gl_NormalMatrix gl_NormalScale gl_ObjectPlaneQ gl_ObjectPlaneR gl_ObjectPlaneS gl_ObjectPlaneT gl_PatchVerticesIn gl_PerVertex gl_Point gl_PointCoord gl_PointSize gl_Position gl_PrimitiveID gl_PrimitiveIDIn gl_ProjectionMatrix gl_ProjectionMatrixInverse gl_ProjectionMatrixInverseTranspose gl_ProjectionMatrixTranspose gl_SampleID gl_SampleMask gl_SampleMaskIn gl_SamplePosition gl_SecondaryColor gl_TessCoord gl_TessLevelInner gl_TessLevelOuter gl_TexCoord gl_TextureEnvColor gl_TextureMatrixInverseTranspose gl_TextureMatrixTranspose gl_Vertex gl_VertexID gl_ViewportIndex gl_in gl_out EmitStreamVertex EmitVertex EndPrimitive EndStreamPrimitive abs acos acosh all any asin asinh atan atanh atomicCounter atomicCounterDecrement atomicCounterIncrement barrier bitCount bitfieldExtract bitfieldInsert bitfieldReverse ceil clamp cos cosh cross dFdx dFdy degrees determinant distance dot equal exp exp2 faceforward findLSB findMSB floatBitsToInt floatBitsToUint floor fma fract frexp ftransform fwidth greaterThan greaterThanEqual imageAtomicAdd imageAtomicAnd imageAtomicCompSwap imageAtomicExchange imageAtomicMax imageAtomicMin imageAtomicOr imageAtomicXor imageLoad imageStore imulExtended intBitsToFloat interpolateAtCentroid interpolateAtOffset interpolateAtSample inverse inversesqrt isinf isnan ldexp length lessThan lessThanEqual log log2 matrixCompMult max memoryBarrier min mix mod modf noise1 noise2 noise3 noise4 normalize not notEqual outerProduct packDouble2x32 packHalf2x16 packSnorm2x16 packSnorm4x8 packUnorm2x16 packUnorm4x8 pow radians reflect refract round roundEven shadow1D shadow1DLod shadow1DProj shadow1DProjLod shadow2D shadow2DLod shadow2DProj shadow2DProjLod sign sin sinh smoothstep sqrt step tan tanh texelFetch texelFetchOffset texture texture1D texture1DLod texture1DProj texture1DProjLod texture2D texture2DLod texture2DProj texture2DProjLod texture3D texture3DLod texture3DProj texture3DProjLod textureCube textureCubeLod textureGather textureGatherOffset textureGatherOffsets textureGrad textureGradOffset textureLod textureLodOffset textureOffset textureProj textureProjGrad textureProjGradOffset textureProjLod textureProjLodOffset textureProjOffset textureQueryLod textureSize transpose trunc uaddCarry uintBitsToFloat umulExtended unpackDouble2x32 unpackHalf2x16 unpackSnorm2x16 unpackSnorm4x8 unpackUnorm2x16 unpackUnorm4x8 usubBorrow gl_TextureMatrix gl_TextureMatrixInverse",literal:"true false"},i:'"',c:[e.CLCM,e.CBCM,e.CNM,{cN:"preprocessor",b:"#",e:"$"}]}});hljs.registerLanguage("sql",function(e){var t={cN:"comment",b:"--",e:"$"};return{cI:!0,i:/[<>]/,c:[{cN:"operator",bK:"begin end start commit rollback savepoint lock alter create drop rename call delete do handler insert load replace select truncate update set show pragma grant merge describe use explain help declare prepare execute deallocate savepoint release unlock purge reset change stop analyze cache flush optimize repair kill install uninstall checksum restore check backup",e:/;/,eW:!0,k:{keyword:"abs absolute acos action add adddate addtime aes_decrypt aes_encrypt after aggregate all allocate alter analyze and any are as asc ascii asin assertion at atan atan2 atn2 authorization authors avg backup before begin benchmark between bin binlog bit_and bit_count bit_length bit_or bit_xor both by cache call cascade cascaded case cast catalog ceil ceiling chain change changed char_length character_length charindex charset check checksum checksum_agg choose close coalesce coercibility collate collation collationproperty column columns columns_updated commit compress concat concat_ws concurrent connect connection connection_id consistent constraint constraints continue contributors conv convert convert_tz corresponding cos cot count count_big crc32 create cross cume_dist curdate current current_date current_time current_timestamp current_user cursor curtime data database databases datalength date_add date_format date_sub dateadd datediff datefromparts datename datepart datetime2fromparts datetimeoffsetfromparts day dayname dayofmonth dayofweek dayofyear deallocate declare decode default deferrable deferred degrees delayed delete des_decrypt des_encrypt des_key_file desc describe descriptor diagnostics difference disconnect distinct distinctrow div do domain double drop dumpfile each else elt enclosed encode encrypt end end-exec engine engines eomonth errors escape escaped event eventdata events except exception exec execute exists exp explain export_set extended external extract fast fetch field fields find_in_set first first_value floor flush for force foreign format found found_rows from from_base64 from_days from_unixtime full function get get_format get_lock getdate getutcdate global go goto grant grants greatest group group_concat grouping grouping_id gtid_subset gtid_subtract handler having help hex high_priority hosts hour ident_current ident_incr ident_seed identified identity if ifnull ignore iif ilike immediate in index indicator inet6_aton inet6_ntoa inet_aton inet_ntoa infile initially inner innodb input insert install instr intersect into is is_free_lock is_ipv4 is_ipv4_compat is_ipv4_mapped is_not is_not_null is_used_lock isdate isnull isolation join key kill language last last_day last_insert_id last_value lcase lead leading least leaves left len lenght level like limit lines ln load load_file local localtime localtimestamp locate lock log log10 log2 logfile logs low_priority lower lpad ltrim make_set makedate maketime master master_pos_wait match matched max md5 medium merge microsecond mid min minute mod mode module month monthname mutex name_const names national natural nchar next no no_write_to_binlog not now nullif nvarchar oct octet_length of old_password on only open optimize option optionally or ord order outer outfile output pad parse partial partition password patindex percent_rank percentile_cont percentile_disc period_add period_diff pi plugin position pow power pragma precision prepare preserve primary prior privileges procedure procedure_analyze processlist profile profiles public publishingservername purge quarter query quick quote quotename radians rand read references regexp relative relaylog release release_lock rename repair repeat replace replicate reset restore restrict return returns reverse revoke right rlike rollback rollup round row row_count rows rpad rtrim savepoint schema scroll sec_to_time second section select serializable server session session_user set sha sha1 sha2 share show sign sin size slave sleep smalldatetimefromparts snapshot some soname soundex sounds_like space sql sql_big_result sql_buffer_result sql_cache sql_calc_found_rows sql_no_cache sql_small_result sql_variant_property sqlstate sqrt square start starting status std stddev stddev_pop stddev_samp stdev stdevp stop str str_to_date straight_join strcmp string stuff subdate substr substring subtime subtring_index sum switchoffset sysdate sysdatetime sysdatetimeoffset system_user sysutcdatetime table tables tablespace tan temporary terminated tertiary_weights then time time_format time_to_sec timediff timefromparts timestamp timestampadd timestampdiff timezone_hour timezone_minute to to_base64 to_days to_seconds todatetimeoffset trailing transaction translation trigger trigger_nestlevel triggers trim truncate try_cast try_convert try_parse ucase uncompress uncompressed_length unhex unicode uninstall union unique unix_timestamp unknown unlock update upgrade upped upper usage use user user_resources using utc_date utc_time utc_timestamp uuid uuid_short validate_password_strength value values var var_pop var_samp variables variance varp version view warnings week weekday weekofyear weight_string when whenever where with work write xml xor year yearweek zon",literal:"true false null",built_in:"array bigint binary bit blob boolean char character date dec decimal float int integer interval number numeric real serial smallint varchar varying int8 serial8 text"},c:[{cN:"string",b:"'",e:"'",c:[e.BE,{b:"''"}]},{cN:"string",b:'"',e:'"',c:[e.BE,{b:'""'}]},{cN:"string",b:"`",e:"`",c:[e.BE]},e.CNM,e.CBCM,t]},e.CBCM,t]}});hljs.registerLanguage("xml",function(){var t="[A-Za-z0-9\\._:-]+",e={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php",subLanguageMode:"continuous"},c={eW:!0,i:/]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xsl","plist"],cI:!0,c:[{cN:"doctype",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"|$)",e:">",k:{title:"style"},c:[c],starts:{e:"",rE:!0,sL:"css"}},{cN:"tag",b:"|$)",e:">",k:{title:"script"},c:[c],starts:{e:"",rE:!0,sL:"javascript"}},e,{cN:"pi",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"",c:[{cN:"title",b:/[^ \/><\n\t]+/,r:0},c]}]}});hljs.registerLanguage("php",function(e){var c={cN:"variable",b:"\\$+[a-zA-Z_-ÿ][a-zA-Z0-9_-ÿ]*"},i={cN:"preprocessor",b:/<\?(php)?|\?>/},a={cN:"string",c:[e.BE,i],v:[{b:'b"',e:'"'},{b:"b'",e:"'"},e.inherit(e.ASM,{i:null}),e.inherit(e.QSM,{i:null})]},n={v:[e.BNM,e.CNM]};return{aliases:["php3","php4","php5","php6"],cI:!0,k:"and include_once list abstract global private echo interface as static endswitch array null if endwhile or const for endforeach self var while isset public protected exit foreach throw elseif include __FILE__ empty require_once do xor return parent clone use __CLASS__ __LINE__ else break print eval new catch __METHOD__ case exception default die require __FUNCTION__ enddeclare final try switch continue endfor endif declare unset true false trait goto instanceof insteadof __DIR__ __NAMESPACE__ yield finally",c:[e.CLCM,e.HCM,{cN:"comment",b:"/\\*",e:"\\*/",c:[{cN:"phpdoc",b:"\\s@[A-Za-z]+"},i]},{cN:"comment",b:"__halt_compiler.+?;",eW:!0,k:"__halt_compiler",l:e.UIR},{cN:"string",b:"<<<['\"]?\\w+['\"]?$",e:"^\\w+;",c:[e.BE]},i,c,{b:/->+[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/},{cN:"function",bK:"function",e:/[;{]/,eE:!0,i:"\\$|\\[|%",c:[e.UTM,{cN:"params",b:"\\(",e:"\\)",c:["self",c,e.CBCM,a,n]}]},{cN:"class",bK:"class interface",e:"{",eE:!0,i:/[:\(\$"]/,c:[{bK:"extends implements"},e.UTM]},{bK:"namespace",e:";",i:/[\.']/,c:[e.UTM]},{bK:"use",e:";",c:[e.UTM]},{b:"=>"},a,n]}}); -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | function parseMarkdown(){ 2 | 3 | // var mdText = "No **text**"; 4 | // if(mdFileURL){ 5 | // mdText = fetchHTTP(mdFileURL); 6 | // } else { 7 | // mdText = fetchHTTP("README.md"); 8 | // } 9 | // content.innerHTML = marked(mdText); 10 | 11 | // Load codes tags that have "src" attributes 12 | var list = document.getElementsByTagName("code"); 13 | for(var i = 0; i < list.length; i++){ 14 | if( list[i].hasAttribute("src") && list[i].className == "glsl" ){ 15 | list[i].innerHTML = fetchHTTP(list[i].getAttribute("src")); 16 | hljs.highlightBlock(list[i]); 17 | } 18 | } 19 | } 20 | 21 | window.onload = function(){ 22 | parseMarkdown(); 23 | 24 | loadShaders(); 25 | renderShaders(); 26 | }; 27 | 28 | function viewShader (fragShaderURL) { 29 | 30 | var demoCode = document.getElementById("demoCode"); 31 | if(demoCode){ 32 | demoCode.innerHTML = fetchHTTP(fragShaderURL); 33 | hljs.highlightBlock(demoCode); 34 | } 35 | 36 | var demoCanvas = document.getElementById("demoCanvas"); 37 | if(demoCanvas){ 38 | demoCanvas.setAttribute("src", fragShaderURL); 39 | } 40 | 41 | document.getElementById("demo").style.display = 'block'; 42 | 43 | smoothScroll('demo'); 44 | loadShaders(); 45 | }; 46 | 47 | function currentYPosition() { 48 | // Firefox, Chrome, Opera, Safari 49 | if (self.pageYOffset) return self.pageYOffset; 50 | // Internet Explorer 6 - standards mode 51 | if (document.documentElement && document.documentElement.scrollTop) 52 | return document.documentElement.scrollTop; 53 | // Internet Explorer 6, 7 and 8 54 | if (document.body.scrollTop) return document.body.scrollTop; 55 | return 0; 56 | } 57 | 58 | function elmYPosition(eID) { 59 | var elm = document.getElementById(eID); 60 | var y = elm.offsetTop; 61 | var node = elm; 62 | while (node.offsetParent && node.offsetParent != document.body) { 63 | node = node.offsetParent; 64 | y += node.offsetTop; 65 | } return y; 66 | } 67 | 68 | function smoothScroll(eID) { 69 | var startY = currentYPosition(); 70 | var stopY = elmYPosition(eID); 71 | var distance = stopY > startY ? stopY - startY : startY - stopY; 72 | if (distance < 100) { 73 | scrollTo(0, stopY); return; 74 | } 75 | var speed = Math.round(distance / 100); 76 | if (speed >= 20) speed = 20; 77 | var step = Math.round(distance / 25); 78 | var leapY = stopY > startY ? startY + step : startY - step; 79 | var timer = 0; 80 | if (stopY > startY) { 81 | for ( var i=startY; i stopY) leapY = stopY; timer++; 84 | } return; 85 | } 86 | for ( var i=startY; i>stopY; i-=step ) { 87 | setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); 88 | leapY -= step; if (leapY < stopY) leapY = stopY; timer++; 89 | } 90 | return false; 91 | } --------------------------------------------------------------------------------