├── .gitignore ├── INTRO.md ├── LICENSE.md ├── Makefile ├── README.md ├── benchmark.py ├── benchmark_template.frag ├── block.yaml ├── blocks.frag ├── color ├── README.md ├── conversion-full.yaml ├── conversion.yaml ├── palette-full.yaml ├── palette.yaml ├── tools-full.yaml └── tools.yaml ├── docs.py ├── elevation ├── README.md ├── contours-full.yaml ├── contours.yaml ├── dash-full.yaml ├── dash.yaml ├── normal-full.yaml ├── normal.yaml ├── rainbow-full.yaml ├── rainbow.yaml ├── ramp-full.yaml ├── ramp.yaml ├── stripes-full.yaml └── stripes.yaml ├── filter ├── README.md ├── dithered-full.yaml ├── dithered.yaml ├── grain-full.yaml ├── grain.yaml ├── grid-full.yaml ├── grid.yaml ├── hatch-full.yaml ├── hatch.yaml ├── height-full.yaml ├── height.yaml ├── imgs │ ├── grid.png │ ├── hatch.png │ ├── lut-0000.png │ ├── lut-0001.png │ ├── lut-0002.png │ ├── lut-0003.png │ ├── lut-0004.png │ ├── lut-0005.png │ ├── lut-0006.png │ ├── lut-0007.png │ ├── lut-0008.png │ ├── lut-0009.png │ ├── lut-0010.png │ ├── lut-0011.png │ ├── lut-0012.png │ └── lut-0013.png ├── lut-full.yaml ├── lut.yaml ├── test │ ├── filter-grain.json │ ├── filter-grain.png │ ├── filter-grid.json │ ├── filter-grid.png │ ├── filter-hatch.json │ ├── filter-hatch.png │ ├── filter-lut.json │ ├── filter-lut.png │ ├── filter-tv.json │ ├── filter-tv.png │ ├── grain-grain.frag │ ├── grain-grain.png │ ├── grid-grid.frag │ ├── grid-grid.png │ ├── hatch-hatch.frag │ ├── hatch-hatch.png │ ├── lut-lut.frag │ ├── lut-lut.png │ ├── tv-tv.frag │ └── tv-tv.png ├── tv-full.yaml └── tv.yaml ├── functions ├── README.md ├── aastep-full.yaml ├── aastep.yaml ├── decode-full.yaml ├── decode.yaml ├── easing-full.yaml ├── easing.yaml ├── map-full.yaml ├── map.yaml ├── pulse-full.yaml ├── pulse.yaml ├── zoom-full.yaml └── zoom.yaml ├── fx ├── README.md ├── imgs │ ├── sem-sky-0001.jpg │ ├── sem-sky-0002.jpg │ └── sem-sky-0003.jpg ├── water-full.yaml └── water.yaml ├── generative ├── README.md ├── caustics-full.yaml ├── caustics.yaml ├── fbm-full.yaml ├── fbm.yaml ├── imgs │ ├── tex12.png │ └── tex16.png ├── noise-full.yaml ├── noise.yaml ├── random-full.yaml ├── random.yaml ├── test │ ├── caustics-getCaustic_3iter.frag │ ├── caustics-getCaustic_3iter.png │ ├── caustics-getCaustic_4iter.frag │ ├── caustics-getCaustic_4iter.png │ ├── caustics-getCaustic_5iter.frag │ ├── caustics-getCaustic_5iter.png │ ├── fbm-fbm_float_3oct.frag │ ├── fbm-fbm_float_3oct.png │ ├── fbm-fbm_float_5oct.frag │ ├── fbm-fbm_float_5oct.png │ ├── fbm-fbm_float_8oct.frag │ ├── fbm-fbm_float_8oct.png │ ├── fbm-fbm_vec2_3oct.frag │ ├── fbm-fbm_vec2_3oct.png │ ├── fbm-fbm_vec2_5oct.frag │ ├── fbm-fbm_vec2_5oct.png │ ├── fbm-fbm_vec2_8oct.frag │ ├── fbm-fbm_vec2_8oct.png │ ├── fbm-fbm_vec3_3oct.frag │ ├── fbm-fbm_vec3_3oct.png │ ├── fbm-fbm_vec3_5oct.frag │ ├── fbm-fbm_vec3_5oct.png │ ├── fbm-fbm_vec3_8oct.frag │ ├── fbm-fbm_vec3_8oct.png │ ├── generative-caustic.json │ ├── generative-caustic.png │ ├── generative-fbm.json │ ├── generative-fbm.png │ ├── generative-noise.json │ ├── generative-noise.png │ ├── generative-random.json │ ├── generative-random.png │ ├── generative-voronoi.json │ ├── generative-voronoi.png │ ├── noise-gnoise_vec2.frag │ ├── noise-gnoise_vec2.png │ ├── noise-gnoise_vec3.frag │ ├── noise-gnoise_vec3.png │ ├── noise-noise_float.frag │ ├── noise-noise_float.png │ ├── noise-noise_float_t.frag │ ├── noise-noise_float_t.png │ ├── noise-noise_vec2.frag │ ├── noise-noise_vec2.png │ ├── noise-noise_vec2_t.frag │ ├── noise-noise_vec2_t.png │ ├── noise-noise_vec3.frag │ ├── noise-noise_vec3.png │ ├── noise-noise_vec3_t.frag │ ├── noise-noise_vec3_t.png │ ├── noise-snoise_vec2.frag │ ├── noise-snoise_vec2.png │ ├── noise-snoise_vec2_t.frag │ ├── noise-snoise_vec2_t.png │ ├── noise-snoise_vec3.frag │ ├── noise-snoise_vec3.png │ ├── noise-snoise_vec3_t.frag │ ├── noise-snoise_vec3_t.png │ ├── random-random2_vec2.frag │ ├── random-random2_vec2.png │ ├── random-random2_vec2_t.frag │ ├── random-random2_vec2_t.png │ ├── random-random3_vec2.frag │ ├── random-random3_vec2.png │ ├── random-random3_vec2_t.frag │ ├── random-random3_vec2_t.png │ ├── random-random3_vec3.frag │ ├── random-random3_vec3.png │ ├── random-random3_vec3_t.frag │ ├── random-random3_vec3_t.png │ ├── random-random_float.frag │ ├── random-random_float.png │ ├── random-random_float_t.frag │ ├── random-random_float_t.png │ ├── random-random_vec2.frag │ ├── random-random_vec2.png │ ├── random-random_vec2_t.frag │ ├── random-random_vec2_t.png │ ├── random-random_vec3.frag │ ├── random-random_vec3.png │ ├── random-random_vec3_t.frag │ ├── random-random_vec3_t.png │ ├── voronoi-voronoi.frag │ └── voronoi-voronoi.png ├── voronoi-full.yaml └── voronoi.yaml ├── geometry ├── README.md ├── dynamic-height-full.yaml ├── dynamic-height.yaml ├── dynamic-width-full.yaml ├── dynamic-width.yaml ├── matrices-full.yaml ├── matrices.yaml ├── normal-full.yaml ├── normal.yaml ├── projections-full.yaml ├── projections.yaml ├── rotation-full.yaml ├── rotation.yaml ├── tilt-full.yaml └── tilt.yaml ├── global.yaml ├── index.html ├── lines ├── README.md ├── chevron-full.yaml ├── chevron.yaml ├── dash-full.yaml ├── dash.yaml ├── datastream-full.yaml ├── datastream.yaml ├── dots-full.yaml ├── dots-glow-full.yaml ├── dots-glow.yaml ├── dots.yaml ├── glow-full.yaml ├── glow.yaml ├── outline-full.yaml ├── outline.yaml ├── rainbow-full.yaml ├── rainbow.yaml ├── stripes-full.yaml ├── stripes.yaml ├── waves-full.yaml └── waves.yaml ├── patterns ├── README.md ├── dots-full.yaml ├── dots.yaml ├── grid-full.yaml ├── grid.yaml ├── stripes-full.yaml ├── stripes.yaml ├── waves-full.yaml ├── waves.yaml ├── zigzag-full.yaml └── zigzag.yaml ├── points ├── README.md ├── cross-full.yaml ├── cross.yaml ├── dot-full.yaml ├── dot.yaml ├── glow-full.yaml ├── glow.yaml ├── shape-full.yaml └── shape.yaml ├── polygons ├── README.md ├── diagonal-dash-full.yaml ├── diagonal-dash.yaml ├── diagonal-grid-full.yaml ├── diagonal-grid.yaml ├── diagonal-stripes-full.yaml ├── diagonal-stripes.yaml ├── dots-full.yaml ├── dots.yaml ├── glass-walls-full.yaml ├── glass-walls.yaml ├── pixelate-full.yaml ├── pixelate.yaml ├── shimmering-full.yaml ├── shimmering.yaml ├── stripes-full.yaml ├── stripes.yaml ├── windows-full.yaml └── windows.yaml ├── setup.py ├── shader.py ├── shapes ├── README.md ├── circle-full.yaml ├── circle.yaml ├── cross-full.yaml ├── cross.yaml ├── digits-full.yaml ├── digits.yaml ├── polygons-full.yaml ├── polygons.yaml ├── rect-full.yaml ├── rect.yaml ├── simplex-full.yaml ├── simplex.yaml ├── test │ ├── circle-circle.frag │ ├── circle-circle.png │ ├── circle-circleBorder.frag │ ├── circle-circleBorder.png │ ├── circle-circleDF.frag │ ├── circle-circleDF.png │ ├── polygons-shape.frag │ ├── polygons-shape.png │ ├── polygons-shapeBorder.frag │ ├── polygons-shapeBorder.png │ ├── polygons-shapeDF.frag │ ├── polygons-shapeDF.png │ ├── rect-rect.frag │ ├── rect-rect.png │ ├── rect-rectBorder_rnd.frag │ ├── rect-rectBorder_rnd.png │ ├── rect-rectDF.frag │ ├── rect-rectDF.png │ ├── rect-rect_rnd.frag │ ├── rect-rect_rnd.png │ ├── shapes-circle.json │ ├── shapes-circle.png │ ├── shapes-polygons.json │ ├── shapes-polygons.png │ ├── shapes-rect.json │ └── shapes-rect.png ├── type-full.yaml └── type.yaml ├── source-elevation.yaml ├── source-terrain.yaml ├── space ├── README.md ├── constant-full.yaml ├── constant.yaml ├── screen-full.yaml ├── screen.yaml ├── test │ ├── constant-constant.frag │ ├── constant-constant.png │ ├── screen-screen.frag │ ├── screen-screen.png │ ├── screen-screen_nonstretch.frag │ ├── screen-screen_nonstretch.png │ ├── space-constant.json │ ├── space-constant.png │ ├── space-screen.json │ ├── space-screen.png │ ├── space-tex.json │ ├── space-tex.png │ ├── space-tile.json │ ├── space-tile.png │ ├── tex-tex.frag │ ├── tex-tex.png │ ├── tile-tile.frag │ └── tile-tile.png ├── tex-full.yaml ├── tex.yaml ├── tile-full.yaml ├── tile.yaml ├── uz-full.yaml └── uz.yaml ├── terrain ├── README.md ├── base-full.yaml ├── base.yaml ├── geometry-full.yaml ├── geometry.yaml ├── lines-full.yaml ├── lines.yaml ├── polygons-full.yaml ├── polygons.yaml ├── terrain-full.yaml └── terrain.yaml ├── test.html ├── test.jpg ├── texture ├── README.md ├── non-repetitive-full.yaml ├── non-repetitive.yaml ├── test │ ├── non-repetitive-repete_texture.frag │ ├── non-repetitive-repete_texture.png │ ├── texture-non-repetitive.json │ ├── texture-non-repetitive.png │ ├── texture-zoom-fade.json │ ├── texture-zoom-fade.png │ ├── zoom-fade-zoom_fade.frag │ └── zoom-fade-zoom_fade.png ├── zoom-fade-full.yaml └── zoom-fade.yaml ├── tiling ├── README.md ├── brick-full.yaml ├── brick.yaml ├── simplex-full.yaml ├── simplex.yaml ├── test │ ├── brick-brick.frag │ ├── brick-brick.png │ ├── simplex-rotatedSimplex.frag │ ├── simplex-rotatedSimplex.png │ ├── simplex-simplex.frag │ ├── simplex-simplex.png │ ├── tile-tile.frag │ ├── tile-tile.png │ ├── tiling-brick.json │ ├── tiling-brick.png │ ├── tiling-simplex.json │ ├── tiling-simplex.png │ ├── tiling-tile.json │ ├── tiling-tile.png │ ├── tiling-truchet.json │ ├── tiling-truchet.png │ ├── truchet-mirror.frag │ ├── truchet-mirror.png │ ├── truchet-rotate.frag │ └── truchet-rotate.png ├── tile-full.yaml ├── tile.yaml ├── truchet-full.yaml └── truchet.yaml ├── toc.json └── tools.py /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.pyc 3 | -------------------------------------------------------------------------------- /INTRO.md: -------------------------------------------------------------------------------- 1 | # Tangram Blocks 2 | 3 | Gallery of **reusable building blocks for Tangram** to make beautiful maps simpler. 4 | 5 | Writing custom styles for [Tangram](https://mapzen.com/projects/tangram/) can be tricky because you need to know some GL Shading Language, but using this 6 | library for recipes, you can mix and reuse some of the snippets of shader code blocks that flavor our maps. 7 | 8 | ## How to use them? 9 |
10 | 11 | So first you need to `import` the block to the [YAML scene file](https://mapzen.com/documentation/tangram/Scene-file/) you are working on. That will look something like this: 12 | 13 | ```yaml 14 | import: 15 | - https://tangrams.github.io/blocks/filter/grain.yaml 16 | ``` 17 | 18 | Then you need to ```mix``` it with the custom styles of your choise. For example: 19 | 20 | ```yaml 21 | styles: 22 | buildings: 23 | base: polygons 24 | mix: [filter-grain] 25 | ``` 26 | 27 | Some of the blocks like [points](#points), [lines](#lines), [polygons](#polygons), [fx](#fx) and [filter](#filter) automatically will add the necessary lines to the `normals`, `color` and `filter` blocks to make it work. So you don't have to do anything else other than add it to the `mix:`. Then you can tweak the values from the ```defines``` to your own prefernces. For example in the above example we can increase the detail and amount of the grain by modifying these two defines: 28 | 29 | ```yaml 30 | styles: 31 | buildings: 32 | base: polygons 33 | mix: [filter-grain] 34 | shaders: 35 | defines: 36 | GRAIN_AMOUNT: .4 37 | NUM_OCTAVES: 3 38 | ``` 39 | 40 | The rest of the building blocks just provide reusable GLSL functions into the `global` shader block. 41 | 42 | To learn basic principles about shaders we recomend reading [The Book of shaders](http://thebookofshaders.com/), if you are interested to learn about [shaders inside Tangram read tangram documentation about that subject](https://mapzen.com/documentation/tangram/Shaders-Overview/). 43 | 44 | ## Want to contribute? 45 | 46 | If you have made a nice shader style you are proud of and want to share it, send me an email to or a DM to [@patriciogv](https://twitter.com/patriciogv) and I will be happy to help you make a **block** out of it. 47 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | ### The MIT License (MIT) 2 | 3 | *Copyright (c) 2016 [Mapzen](http://mapzen.com/)* 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 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | default: all 2 | 3 | clean: clean-docs clean-standalones clean-benchmarks 4 | 5 | clean-standalones: 6 | rm -R */*-full.yaml 7 | 8 | clean-docs: 9 | rm -R */README.md 10 | rm README.md 11 | 12 | clean-benchmarks: 13 | rm -R */*.json 14 | rm -R */*.frag 15 | 16 | standalones: 17 | python setup.py standalones 18 | 19 | benchmarks: 20 | python setup.py benchmarks 21 | 22 | docs: 23 | python setup.py docs 24 | 25 | all: 26 | python setup.py -------------------------------------------------------------------------------- /benchmark_template.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | #pragma tangram: uniforms 14 | 15 | #pragma tangram: camera 16 | #pragma tangram: material 17 | #pragma tangram: lighting 18 | #pragma tangram: raster 19 | #pragma tangram: defines 20 | 21 | varying vec2 v_texcoord; 22 | 23 | #pragma tangram: global 24 | 25 | void main() { 26 | vec3 normal = vec3(0.,0.,1.); 27 | vec4 color = vec4(0.,0.,0.,1.); 28 | 29 | #pragma tangram: normal 30 | 31 | #pragma tangram: color 32 | 33 | #pragma tangram: filter 34 | 35 | gl_FragColor = color; 36 | } -------------------------------------------------------------------------------- /block.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | block: 3 | shaders: 4 | defines: 5 | ADD: '+' 6 | SUBTRACT: '-' 7 | MULTIPLY: '*' 8 | 9 | PI: 3.1415926535897932384626433832795 10 | TWO_PI: 6.2831853071795864769252867665590 11 | HALF_PI: 1.5707963267948966192313216916398 12 | QUATER_PI: .785398163 13 | 14 | EPSILON: 0.0000001 15 | 16 | deg2rad(d): (((d)*3.1415926535897932384626433832795)/180.0) 17 | rad2deg(d): (((d)*180.0)/3.1415926535897932384626433832795) -------------------------------------------------------------------------------- /color/conversion-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | color-conversion: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | description: 'Set of functions to convert colors between color systems/spaces. 8 | 9 | For more information on this theme read [this chapter of The Book 10 | of Shaders about color](http://thebookofshaders.com/06/). 11 | 12 | ' 13 | licence: MIT 14 | tangram-version: 0.0.7 15 | version: 0.0.1 16 | shaders: 17 | blocks: 18 | global: "// Convert a color from RGB to HSB\nvec3 rgb2hsb (vec3 c)\ 19 | \ {\n vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);\n \ 20 | \ vec4 p = mix(vec4(c.bg, K.wz),\n vec4(c.gb,\ 21 | \ K.xy),\n step(c.b, c.g));\n vec4 q = mix(vec4(p.xyw,\ 22 | \ c.r),\n vec4(c.r, p.yzx),\n \ 23 | \ step(p.x, c.r));\n float d = q.x - min(q.w, q.y);\n float\ 24 | \ e = 1.0e-10;\n return vec3(abs(q.z + (q.w - q.y) / (6.0 *\ 25 | \ d + e)),\n d / (q.x + e),\n q.x);\n\ 26 | }\n\nvec3 rgb2hsb (vec4 c) {\n return rgb2hsb(c.rgb);\n}\n\n\ 27 | // Convert a color from HSB to RGB\n// By Inigo Quiles ( https://www.shadertoy.com/view/MsS3Wc\ 28 | \ )\nvec3 hsb2rgb (vec3 c) {\n vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),\n\ 29 | \ 6.0)-3.0)-1.0,\n \ 30 | \ 0.0,\n 1.0 );\n rgb = rgb*rgb*(3.0-2.0*rgb);\n\ 31 | \ return c.z * mix(vec3(1.0), rgb, c.y);\n}" 32 | -------------------------------------------------------------------------------- /color/conversion.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | color-conversion: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | Set of functions to convert colors between color systems/spaces. 12 | For more information on this theme read [this chapter of The Book of Shaders about color](http://thebookofshaders.com/06/). 13 | shaders: 14 | blocks: 15 | global: | 16 | // Convert a color from RGB to HSB 17 | vec3 rgb2hsb (vec3 c) { 18 | vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); 19 | vec4 p = mix(vec4(c.bg, K.wz), 20 | vec4(c.gb, K.xy), 21 | step(c.b, c.g)); 22 | vec4 q = mix(vec4(p.xyw, c.r), 23 | vec4(c.r, p.yzx), 24 | step(p.x, c.r)); 25 | float d = q.x - min(q.w, q.y); 26 | float e = 1.0e-10; 27 | return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), 28 | d / (q.x + e), 29 | q.x); 30 | } 31 | 32 | vec3 rgb2hsb (vec4 c) { 33 | return rgb2hsb(c.rgb); 34 | } 35 | 36 | // Convert a color from HSB to RGB 37 | // By Inigo Quiles ( https://www.shadertoy.com/view/MsS3Wc ) 38 | vec3 hsb2rgb (vec3 c) { 39 | vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), 40 | 6.0)-3.0)-1.0, 41 | 0.0, 42 | 1.0 ); 43 | rgb = rgb*rgb*(3.0-2.0*rgb); 44 | return c.z * mix(vec3(1.0), rgb, c.y); 45 | } -------------------------------------------------------------------------------- /color/palette-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | color-palette: 3 | doc: 4 | author: 5 | name: Inigo Quiles 6 | twitter: iquilezles 7 | description: 'Procedural generation of color palettes implemented by [Inigo 8 | Quiles](https://twitter.com/iquilezles) (1999) explained in [this 9 | article](http://www.iquilezles.org/www/articles/palettes/palettes.htm) 10 | 11 | ' 12 | licence: MIT 13 | tangram-version: 0.0.7 14 | version: 0.0.1 15 | shaders: 16 | blocks: 17 | global: "vec3 palette (float t, vec3 a, vec3 b, vec3 c, vec3 d) {\n\ 18 | \ return a + b*cos( 6.28318*(c*t+d) );\n}" 19 | -------------------------------------------------------------------------------- /color/palette.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | color-palette: 3 | doc: 4 | author: 5 | name: Inigo Quiles 6 | twitter: iquilezles 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | Procedural generation of color palettes implemented by [Inigo Quiles](https://twitter.com/iquilezles) (1999) explained in [this article](http://www.iquilezles.org/www/articles/palettes/palettes.htm) 12 | shaders: 13 | blocks: 14 | global: | 15 | vec3 palette (float t, vec3 a, vec3 b, vec3 c, vec3 d) { 16 | return a + b*cos( 6.28318*(c*t+d) ); 17 | } -------------------------------------------------------------------------------- /color/tools-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | color-tools: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | description: 'Set of color tools to get the **intensity** and **brightness** 8 | of a color. 9 | 10 | For more information on this theme read [this chapter of The Book 11 | of Shaders about color](http://thebookofshaders.com/06/). 12 | 13 | ' 14 | licence: MIT 15 | tangram-version: 0.0.7 16 | version: 0.0.1 17 | shaders: 18 | blocks: 19 | global: "// Get the intensity of a color\n// ================================\n\ 20 | float getIntensity (vec3 c) {\n return (c.r+c.g+c.b)/3.0;\n\ 21 | }\nfloat getIntensity (vec4 c) {\n return getIntensity(c.rgb);\n\ 22 | }\n//\n// Get the Brightness of a color\n// ================================\n\ 23 | float getBrightness (vec3 c) {\n return 0.212655 * c.r + 0.715158\ 24 | \ * c.g + 0.072187 * c.b;\n}\nfloat getBrightness (vec4 c) {\n\ 25 | \ return getBrightness(c.rgb);\n}" 26 | -------------------------------------------------------------------------------- /color/tools.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | color-tools: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | Set of color tools to get the **intensity** and **brightness** of a color. 12 | For more information on this theme read [this chapter of The Book of Shaders about color](http://thebookofshaders.com/06/). 13 | shaders: 14 | blocks: 15 | global: | 16 | // Get the intensity of a color 17 | // ================================ 18 | float getIntensity (vec3 c) { 19 | return (c.r+c.g+c.b)/3.0; 20 | } 21 | float getIntensity (vec4 c) { 22 | return getIntensity(c.rgb); 23 | } 24 | // 25 | // Get the Brightness of a color 26 | // ================================ 27 | float getBrightness (vec3 c) { 28 | return 0.212655 * c.r + 0.715158 * c.g + 0.072187 * c.b; 29 | } 30 | float getBrightness (vec4 c) { 31 | return getBrightness(c.rgb); 32 | } -------------------------------------------------------------------------------- /elevation/contours.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - ../block.yaml 3 | - normal.yaml 4 | - ../functions/aastep.yaml 5 | 6 | styles: 7 | elevation-contours: 8 | base: polygons 9 | mix: [block, elevation-normal, functions-aastep] 10 | lighting: false 11 | raster: custom 12 | animated: true 13 | blend: add 14 | shaders: 15 | defines: 16 | CONTOURS_COLOR: color.rgb 17 | CONTOURS_ALPHA: color.a 18 | CONTOURS_BACKGROUND_COLOR: vec3(0.0) 19 | CONTOURS_BACKGROUND_ALPHA: 1.0 20 | CONTOURS_SCALE: 60. 21 | CONTOURS_SPEED: -0.1 22 | CONTOURS_OFFSET: u_time*CONTOURS_SPEED 23 | blocks: 24 | color: | 25 | color = mix(vec4(CONTOURS_BACKGROUND_COLOR,CONTOURS_BACKGROUND_ALPHA), 26 | vec4(CONTOURS_COLOR,CONTOURS_ALPHA), 27 | aastep( dot(normal, vec3(0.,0.,1.)), 28 | abs(sin((normal_elv_raster.a*PI)*CONTOURS_SCALE+CONTOURS_OFFSET)) ) ); -------------------------------------------------------------------------------- /elevation/dash.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - ../polygons/diagonal-dash.yaml 3 | 4 | styles: 5 | elevation-dash: 6 | doc: 7 | author: 8 | name: Patricio Gonzalez Vivo 9 | twitter: patriciogv 10 | version: 0.0.1 11 | tangram-version: 0.0.7 12 | licence: MIT 13 | description: | 14 | Perfect for the `landuse` layer on your elevation maps, the `elevation-dash` modules use the color of the layer to draw a dash pattern that changes width based on the surface of the terrain. 15 | base: polygons 16 | mix: [polygons-diagonal-dash] 17 | raster: custom 18 | shaders: 19 | defines: 20 | DASH_COLOR: color.rgb*.5 21 | DASH_BACKGROUND_COLOR: color.rgb 22 | DASH_SCALE: 10. 23 | DASH_SIZE: 0.9 24 | DASH_TYPE: fill 25 | DASH_TILE_STYLE: tile 26 | DASH_DIR: vec3(-0.600,-0.420,0.560) 27 | NORMAL_TEXTURE_INDEX: 0 28 | DASH_MIN_SIZE: .8 29 | DASH_MAX_SIZE: 1. 30 | DASH_SIZE: shade 31 | blocks: 32 | normal: | 33 | float shade = dot((sampleRaster(int(NORMAL_TEXTURE_INDEX)).rgb-.5)*2., DASH_DIR); 34 | shade = mix(DASH_MIN_SIZE, DASH_MAX_SIZE, (shade*shade*shade)*4.); -------------------------------------------------------------------------------- /elevation/normal-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | elevation-normal: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | description: "The raster normal map tiles needs to be load like this:\n\ 8 | ```\n normals-elevation:\n type: Raster\n url: https://s3.amazonaws.com/elevation-tiles-prod/normal/{z}/{x}/{y}.png\n\ 9 | \ max_zoom: 15\n```\nA simple way to do it is to import `https://tangrams.github.io/blocks/source-elevation.yaml`\ 10 | \ and then link the vector tiles to them (see the example).\n" 11 | examples: 12 | grain: 13 | img: https://tangrams.github.io/tangram-sandbox/styles/elevation.png 14 | lines: 14 15 | url: https://tangrams.github.io/tangram-sandbox/styles/elevation.yaml 16 | licence: MIT 17 | tangram-version: 0.0.7 18 | version: 0.0.1 19 | raster: custom 20 | shaders: 21 | blocks: 22 | normal: 'vec4 normal_elv_raster = sampleRaster(int(NORMAL_TEXTURE_INDEX)); 23 | 24 | normal = (normal_elv_raster.rgb-.5)*2.;' 25 | defines: 26 | NORMAL_TEXTURE_INDEX: 0 27 | -------------------------------------------------------------------------------- /elevation/normal.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | elevation-normal: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | The raster normal map tiles needs to be load like this: 12 | ``` 13 | normals-elevation: 14 | type: Raster 15 | url: https://s3.amazonaws.com/elevation-tiles-prod/normal/{z}/{x}/{y}.png 16 | max_zoom: 15 17 | ``` 18 | A simple way to do it is to import `https://tangrams.github.io/blocks/source-elevation.yaml` and then link the vector tiles to them (see the example). 19 | examples: 20 | grain: 21 | url: https://tangrams.github.io/tangram-sandbox/styles/elevation.yaml 22 | img: https://tangrams.github.io/tangram-sandbox/styles/elevation.png 23 | lines: 14 24 | raster: custom 25 | shaders: 26 | defines: 27 | NORMAL_TEXTURE_INDEX: 0 28 | blocks: 29 | normal: | 30 | vec4 normal_elv_raster = sampleRaster(int(NORMAL_TEXTURE_INDEX)); 31 | normal = (normal_elv_raster.rgb-.5)*2.; -------------------------------------------------------------------------------- /elevation/rainbow.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - normal.yaml 3 | - ../color/palette.yaml 4 | 5 | styles: 6 | elevation-rainbow: 7 | animated: true 8 | mix: [elevation-normal, color-palette] 9 | shaders: 10 | defines: 11 | RAINBOW_SPEED: -0.5 12 | blocks: 13 | color: | 14 | color.rgb = palette(0.380+normal_elv_raster.a+u_time*RAINBOW_SPEED,vec3(.5),vec3(.5),vec3(2.,1.,0.),vec3(.5,.2,0.25)); -------------------------------------------------------------------------------- /elevation/stripes.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - ../polygons/diagonal-stripes.yaml 3 | 4 | styles: 5 | elevation-stripes: 6 | doc: 7 | author: 8 | name: Patricio Gonzalez Vivo 9 | twitter: patriciogv 10 | version: 0.0.1 11 | tangram-version: 0.0.7 12 | licence: MIT 13 | description: | 14 | Perfect for the `landuse` layer on your elevation maps, the `elevation-stripe` modules use the color of the layer to draw a stripe pattern that changes width based on the surface of the terrain. 15 | examples: 16 | stripes: 17 | url: https://tangrams.github.io/tangram-sandbox/styles/elevation-stripes.yaml 18 | img: https://tangrams.github.io/tangram-sandbox/styles/elevation-stripes.png 19 | base: polygons 20 | mix: [polygons-diagonal-stripes] 21 | blend: inlay 22 | lighting: false 23 | raster: custom 24 | shaders: 25 | defines: 26 | STRIPES_ALPHA: .5 27 | STRIPES_SCALE: 20. 28 | STRIPES_PCT: 1.8 29 | NORMAL_TEXTURE_INDEX: 0 30 | STRIPES_DIR: vec3(-0.600,-0.420,0.600) 31 | STRIPES_WIDTH: dot((sampleRaster(int(NORMAL_TEXTURE_INDEX)).rgb-.5)*2., 32 | STRIPES_DIR)*STRIPES_PCT -------------------------------------------------------------------------------- /filter/dithered-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | filter-dithered: 3 | doc: 4 | author: 5 | name: FabriceNeyret2 6 | description: 'Apply a color dithered filter 7 | 8 | ' 9 | licence: MIT 10 | tangram-version: 0.0.7 11 | version: 0.0.1 12 | shaders: 13 | blocks: 14 | filter: 'color = step(texture2D(u_grid_texture, gl_FragCoord.xy/8.), 15 | color); 16 | 17 | ' 18 | uniforms: 19 | u_grid_texture: https://tangrams.github.io/blocks/filter/imgs/grid.png 20 | test: 21 | dithered: 22 | blocks: 23 | color: ' color = texture2D(u_tex0,v_texcoord.xy);' 24 | uniforms: 25 | u_tex0: https://tangrams.github.io/blocks/test.jpg 26 | -------------------------------------------------------------------------------- /filter/dithered.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | filter-dithered: 3 | doc: 4 | author: 5 | name: FabriceNeyret2 6 | version: 0.0.1 7 | tangram-version: 0.0.7 8 | licence: MIT 9 | description: | 10 | Apply a color dithered filter 11 | test: 12 | dithered: { uniforms: { u_tex0: "https://tangrams.github.io/blocks/test.jpg" }, blocks: { color: " color = texture2D(u_tex0,v_texcoord.xy);" } } 13 | shaders: 14 | uniforms: 15 | u_grid_texture: https://tangrams.github.io/blocks/filter/imgs/grid.png 16 | blocks: 17 | filter: | 18 | color = step(texture2D(u_grid_texture, fract(gl_FragCoord.xy/8.)), color); 19 | -------------------------------------------------------------------------------- /filter/grain.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - ../block.yaml 3 | - ../generative/fbm.yaml 4 | 5 | styles: 6 | filter-grain: 7 | mix: [block, generative-fbm] 8 | doc: 9 | author: 10 | name: Patricio Gonzalez Vivo 11 | twitter: patriciogv 12 | version: 0.0.1 13 | tangram-version: 0.0.7 14 | licence: MIT 15 | description: | 16 | Apply a lens grain effect to the scene. 17 | examples: 18 | grain: 19 | url: https://tangrams.github.io/tangram-sandbox/styles/grain.yaml 20 | img: https://tangrams.github.io/tangram-sandbox/styles/grain.png 21 | lines: 29 22 | ui: 23 | shaders: 24 | defines: 25 | GRAIN_AMOUNT: 26 | type: number 27 | label: Amount 28 | range: 29 | min: 0. 30 | max: 1. 31 | step: 0.01 32 | GRAIN_BLEND: 33 | type: dropdownArray 34 | label: 'Blend mode' 35 | values: ['ADD', 'SUBTRACT', 'MULTIPLY'] 36 | 37 | test: 38 | grain: { uniforms: { u_tex0: "https://tangrams.github.io/blocks/test.jpg" }, blocks: { color: " color = texture2D(u_tex0,v_texcoord.xy);" } } 39 | 40 | shaders: 41 | defines: 42 | GRAIN_AMOUNT: .3 43 | GRAIN_BLEND: 'SUBTRACT' 44 | blocks: 45 | global: | 46 | #ifdef TANGRAM_FRAGMENT_SHADER 47 | float grain () { 48 | vec2 pos = gl_FragCoord.xy; 49 | vec2 st = pos/u_resolution.xy-vec2(.5); 50 | return dot(st,st)+(fbm(pos*0.6)*0.1); 51 | } 52 | #endif 53 | filter: | 54 | // Apply the grain in the amount defined on GRAIN_AMOUNT 55 | color.rgb = color.rgb GRAIN_BLEND (grain()*GRAIN_AMOUNT); 56 | -------------------------------------------------------------------------------- /filter/grid.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - ../block.yaml 3 | - ../patterns/grid.yaml 4 | 5 | styles: 6 | filter-grid: 7 | mix: [block, patterns-grid] 8 | doc: 9 | author: 10 | name: Patricio Gonzalez Vivo 11 | twitter: patriciogv 12 | version: 0.0.1 13 | tangram-version: 0.0.7 14 | licence: MIT 15 | description: | 16 | Apply a grid filter to the syle. 17 | ui: 18 | shaders: 19 | defines: 20 | GRID_AMOUNT: 21 | type: number 22 | label: Amount 23 | range: 24 | min: 0. 25 | max: 1. 26 | step: 0.01 27 | GRID_BLEND: 28 | type: dropdownArray 29 | label: 'Blend mode' 30 | values: ['ADD', 'SUBTRACT', 'MULTIPLY'] 31 | 32 | test: 33 | grid: { defines: { v_pos: 'v_texcoord' }, uniforms: { u_tex0: "https://tangrams.github.io/blocks/test.jpg" }, blocks: { color: " color = texture2D(u_tex0,v_texcoord.xy);" } } 34 | 35 | shaders: 36 | defines: 37 | GRID_AMOUNT: .2 38 | GRID_BLEND: 'ADD' 39 | blocks: 40 | filter: | 41 | color.rgb = color.rgb GRID_BLEND (tileGrid()*GRID_AMOUNT); 42 | -------------------------------------------------------------------------------- /filter/height-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | filter-height: 3 | doc: 4 | author: 5 | name: Peter Richardson 6 | twitter: meetar 7 | description: 'Adds a dark gradiant to the geometries conform they approach 8 | to height 0. 9 | 10 | ' 11 | examples: 12 | default: 13 | img: https://tangrams.github.io/tangram-sandbox/styles/default.png 14 | lines: 88 15 | url: https://tangrams.github.io/tangram-sandbox/styles/default.yaml 16 | licence: MIT 17 | tangram-version: 0.0.7 18 | version: 0.0.1 19 | shaders: 20 | blocks: 21 | color: color.rgb *= min((worldPosition().z*.001 + .5),1.); 22 | -------------------------------------------------------------------------------- /filter/height.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | filter-height: 3 | doc: 4 | author: 5 | name: Peter Richardson 6 | twitter: meetar 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | Adds a dark gradiant to the geometries conform they approach to height 0. 12 | examples: 13 | default: 14 | url: https://tangrams.github.io/tangram-sandbox/styles/default.yaml 15 | img: https://tangrams.github.io/tangram-sandbox/styles/default.png 16 | lines: 88 17 | shaders: 18 | blocks: 19 | color: | 20 | color.rgb *= min((worldPosition().z*.001 + .5),1.); -------------------------------------------------------------------------------- /filter/imgs/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/grid.png -------------------------------------------------------------------------------- /filter/imgs/hatch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/hatch.png -------------------------------------------------------------------------------- /filter/imgs/lut-0000.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/lut-0000.png -------------------------------------------------------------------------------- /filter/imgs/lut-0001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/lut-0001.png -------------------------------------------------------------------------------- /filter/imgs/lut-0002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/lut-0002.png -------------------------------------------------------------------------------- /filter/imgs/lut-0003.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/lut-0003.png -------------------------------------------------------------------------------- /filter/imgs/lut-0004.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/lut-0004.png -------------------------------------------------------------------------------- /filter/imgs/lut-0005.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/lut-0005.png -------------------------------------------------------------------------------- /filter/imgs/lut-0006.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/lut-0006.png -------------------------------------------------------------------------------- /filter/imgs/lut-0007.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/lut-0007.png -------------------------------------------------------------------------------- /filter/imgs/lut-0008.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/lut-0008.png -------------------------------------------------------------------------------- /filter/imgs/lut-0009.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/lut-0009.png -------------------------------------------------------------------------------- /filter/imgs/lut-0010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/lut-0010.png -------------------------------------------------------------------------------- /filter/imgs/lut-0011.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/lut-0011.png -------------------------------------------------------------------------------- /filter/imgs/lut-0012.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/lut-0012.png -------------------------------------------------------------------------------- /filter/imgs/lut-0013.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/imgs/lut-0013.png -------------------------------------------------------------------------------- /filter/test/filter-grain.json: -------------------------------------------------------------------------------- 1 | {"filter-grain": {"grain": {"test": {"uniforms": {"u_tex0": "https://tangrams.github.io/blocks/test.jpg"}, "blocks": {"color": " color = texture2D(u_tex0,v_texcoord.xy);"}}, "data": [{"sec": 1.0008039474487305, "val": 0.080649}, {"sec": 1.0061428546905518, "val": 0.080875}, {"sec": 1.086979866027832, "val": 0.0808}, {"sec": 1.1680989265441895, "val": 0.080931}, {"sec": 1.2488439083099365, "val": 0.081014}, {"sec": 1.3300049304962158, "val": 0.081012}, {"sec": 1.4113547801971436, "val": 0.081115}, {"sec": 1.492130994796753, "val": 0.080926}, {"sec": 1.5729398727416992, "val": 0.080824}, {"sec": 1.653695821762085, "val": 0.080727}, {"sec": 1.7343058586120605, "val": 0.080781}, {"sec": 1.8149309158325195, "val": 0.080705}, {"sec": 1.8960239887237549, "val": 0.080916}, {"sec": 1.9770698547363281, "val": 0.081092}], "output": "./filter/test/grain-grain.png", "median": 0.080916000000000002, "mean": 0.080847544779942798}}} -------------------------------------------------------------------------------- /filter/test/filter-grain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/test/filter-grain.png -------------------------------------------------------------------------------- /filter/test/filter-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/test/filter-grid.png -------------------------------------------------------------------------------- /filter/test/filter-hatch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/test/filter-hatch.png -------------------------------------------------------------------------------- /filter/test/filter-lut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/test/filter-lut.png -------------------------------------------------------------------------------- /filter/test/filter-tv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/test/filter-tv.png -------------------------------------------------------------------------------- /filter/test/grain-grain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/test/grain-grain.png -------------------------------------------------------------------------------- /filter/test/grid-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/test/grid-grid.png -------------------------------------------------------------------------------- /filter/test/hatch-hatch.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_hatchmap; // https://tangrams.github.io/blocks/filter/imgs/hatch.png 15 | 16 | uniform sampler2D u_tex0; // https://tangrams.github.io/blocks/test.jpg 17 | 18 | 19 | varying vec2 v_texcoord; 20 | 21 | 22 | float getHatch (vec2 st, float brightness) { 23 | st = fract(st)/3.; 24 | brightness = clamp(brightness,0.,0.9999999); 25 | vec2 pos1 = vec2(floor(brightness*9.0)/3., 26 | floor(brightness*3.0)/3.) + st; 27 | float minBrightness = clamp(brightness-0.111111111,0.,1.0); 28 | vec2 pos2 = vec2(floor(minBrightness*9.0)/3., 29 | floor(minBrightness*3.0)/3.)+st; 30 | return mix(texture2D(u_hatchmap, fract(pos1) ).a, 31 | texture2D(u_hatchmap, fract(pos2) ).a, 32 | 1.0-fract(brightness*9.0)); 33 | } 34 | void main() { 35 | vec3 normal = vec3(0.,0.,1.); 36 | vec4 color = vec4(0.,0.,0.,1.); 37 | 38 | 39 | float brightness = texture2D(u_tex0,v_texcoord.xy).r; 40 | color.rgb = vec3(1.); 41 | color.rgb -= getHatch(v_texcoord.xy*10., brightness); 42 | 43 | 44 | gl_FragColor = color; 45 | } -------------------------------------------------------------------------------- /filter/test/hatch-hatch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/test/hatch-hatch.png -------------------------------------------------------------------------------- /filter/test/lut-lut.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_lut; // https://tangrams.github.io/blocks/filter/imgs/lut-0001.png 15 | 16 | uniform sampler2D u_tex0; // https://tangrams.github.io/blocks/test.jpg 17 | 18 | 19 | #define LUT_AMOUNT 0.5 20 | 21 | varying vec2 v_texcoord; 22 | 23 | 24 | // Apply Look up table on a color 25 | // The user need to provide a valid url to the uniform "u_lut" 26 | // ================================ 27 | vec3 getLut (vec3 textureColor, sampler2D lookupTable) { 28 | textureColor.g = 1.-textureColor.g; 29 | textureColor = clamp(textureColor, 0.0, 1.0); 30 | float blueColor = textureColor.b * 63.0; 31 | vec2 quad1 = vec2(0.0); 32 | quad1.y = floor(floor(blueColor) / 8.0); 33 | quad1.x = floor(blueColor) - (quad1.y * 8.0); 34 | vec2 quad2 = vec2(0.0); 35 | quad2.y = floor(ceil(blueColor) / 8.0); 36 | quad2.x = ceil(blueColor) - (quad2.y * 8.0); 37 | vec2 texPos1 = vec2(0.0); 38 | texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r); 39 | texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g); 40 | vec2 texPos2 = vec2(0.0); 41 | texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r); 42 | texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g); 43 | vec3 newColor1 = texture2D(lookupTable, texPos1).rgb; 44 | vec3 newColor2 = texture2D(lookupTable, texPos2).rgb; 45 | vec3 newColor = mix(newColor1, newColor2, fract(blueColor)); 46 | return newColor; 47 | } 48 | // 49 | vec3 getLut (vec3 textureColor) { 50 | return getLut(textureColor, u_lut); 51 | } 52 | 53 | void main() { 54 | vec3 normal = vec3(0.,0.,1.); 55 | vec4 color = vec4(0.,0.,0.,1.); 56 | 57 | 58 | color = texture2D(u_tex0,v_texcoord.xy); 59 | 60 | color.rgb = mix(color.rgb, 61 | getLut(color.rgb), 62 | LUT_AMOUNT); 63 | gl_FragColor = color; 64 | } -------------------------------------------------------------------------------- /filter/test/lut-lut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/test/lut-lut.png -------------------------------------------------------------------------------- /filter/test/tv-tv.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_tex0; // https://tangrams.github.io/blocks/test.jpg 15 | 16 | 17 | #define TV_FREQ 2.7 18 | 19 | #define TWO_PI 6.28318530718 20 | 21 | #define TV_AMOUNT 1.0 22 | 23 | #define HALF_PI 1.57079632679 24 | 25 | #define EPSILON 1e-07 26 | 27 | #define QUATER_PI 0.785398163 28 | 29 | #define TV_SPEED 5.0 30 | 31 | #define TV_BLEND MULTIPLY 32 | 33 | #define ADD + 34 | 35 | #define MULTIPLY * 36 | 37 | #define deg2rad(d) (((d)*3.1415926535897932384626433832795)/180.0) 38 | 39 | #define PI 3.14159265359 40 | 41 | #define SUBTRACT - 42 | 43 | #define rad2deg(d) (((d)*180.0)/3.1415926535897932384626433832795) 44 | 45 | varying vec2 v_texcoord; 46 | 47 | 48 | void main() { 49 | vec3 normal = vec3(0.,0.,1.); 50 | vec4 color = vec4(0.,0.,0.,1.); 51 | 52 | 53 | color = texture2D(u_tex0,v_texcoord.xy); 54 | 55 | color = color TV_BLEND (abs(cos((gl_FragCoord.y*(TV_FREQ/u_device_pixel_ratio)+u_time*TV_SPEED)))*TV_AMOUNT); 56 | 57 | gl_FragColor = color; 58 | } -------------------------------------------------------------------------------- /filter/test/tv-tv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/filter/test/tv-tv.png -------------------------------------------------------------------------------- /functions/aastep-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | functions-aastep: 3 | doc: 4 | author: 5 | name: Matt DesLauriers 6 | twitter: mattdesl 7 | description: 'AnitAliased ```step()``` function implemented by [Matt DesLauriers](https://twitter.com/mattdesl) 8 | in this module 9 | 10 | ' 11 | licence: MIT 12 | tangram-version: 0.0.7 13 | version: 0.0.1 14 | shaders: 15 | blocks: 16 | global: "// AntiAliased Step function\n//=============================\n\ 17 | float aastep(float threshold, float value) {\n #ifdef TANGRAM_FRAGMENT_SHADER\n\ 18 | \ #ifdef TANGRAM_EXTENSION_OES_standard_derivatives\n \ 19 | \ float afwidth = length(vec2(dFdx(value), dFdy(value)))\ 20 | \ * 0.70710678118654757;\n return smoothstep(threshold-afwidth,\ 21 | \ threshold+afwidth, value);\n #else\n return\ 22 | \ step(threshold, value);\n #endif \n #else\n \ 23 | \ return step(threshold, value);\n #endif\n}" 24 | extensions: OES_standard_derivatives 25 | -------------------------------------------------------------------------------- /functions/aastep.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | functions-aastep: 3 | doc: 4 | author: 5 | name: Matt DesLauriers 6 | twitter: mattdesl 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | AnitAliased ```step()``` function implemented by [Matt DesLauriers](https://twitter.com/mattdesl) in this module 12 | shaders: 13 | extensions: OES_standard_derivatives 14 | blocks: 15 | global: | 16 | // AntiAliased Step function 17 | //============================= 18 | float aastep(float threshold, float value) { 19 | #ifdef TANGRAM_FRAGMENT_SHADER 20 | #ifdef TANGRAM_EXTENSION_OES_standard_derivatives 21 | float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757; 22 | return smoothstep(threshold-afwidth, threshold+afwidth, value); 23 | #else 24 | return step(threshold, value); 25 | #endif 26 | #else 27 | return step(threshold, value); 28 | #endif 29 | } -------------------------------------------------------------------------------- /functions/map-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | functions-map: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | description: "This function helps you to interpolate a `value` between\ 8 | \ an IN range (`inputMin` to `inputMax`) to a OUT range (`outputMin`\ 9 | \ to `outputMax`). \n" 10 | licence: MIT 11 | tangram-version: 0.0.7 12 | version: 0.0.1 13 | shaders: 14 | blocks: 15 | global: "float map (in float value, in float inputMin, in float inputMax,\ 16 | \ in float outputMin, in float outputMax, bool clamp) {\n if\ 17 | \ (abs(inputMin - inputMax) < EPSILON){\n return outputMin;\n\ 18 | \ } else {\n float outVal = ((value - inputMin) / (inputMax\ 19 | \ - inputMin) * (outputMax - outputMin) + outputMin);\n \n\ 20 | \ if( clamp ){\n if(outputMax < outputMin){\n\ 21 | \ if( outVal < outputMax ) outVal = outputMax;\n\ 22 | \ else if( outVal > outputMin ) outVal = outputMin;\n\ 23 | \ }else{\n if( outVal > outputMax )\ 24 | \ outVal = outputMax;\n else if( outVal < outputMin\ 25 | \ ) outVal = outputMin;\n }\n }\n return\ 26 | \ outVal;\n }\n}\n\nfloat map (in float value, in float inputMin,\ 27 | \ in float inputMax, in float outputMin, in float outputMax) {\n\ 28 | \ return map(value, inputMin, inputMax, outputMin, outputMax,\ 29 | \ true); \n}" 30 | defines: 31 | EPSILON: 1.0e-07 32 | -------------------------------------------------------------------------------- /functions/map.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | functions-map: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | This function helps you to interpolate a `value` between an IN range (`inputMin` to `inputMax`) to a OUT range (`outputMin` to `outputMax`). 12 | shaders: 13 | defines: 14 | EPSILON: 0.0000001 15 | blocks: 16 | global: | 17 | float map (in float value, in float inputMin, in float inputMax, in float outputMin, in float outputMax, bool clamp) { 18 | if (abs(inputMin - inputMax) < EPSILON){ 19 | return outputMin; 20 | } else { 21 | float outVal = ((value - inputMin) / (inputMax - inputMin) * (outputMax - outputMin) + outputMin); 22 | 23 | if( clamp ){ 24 | if(outputMax < outputMin){ 25 | if( outVal < outputMax ) outVal = outputMax; 26 | else if( outVal > outputMin ) outVal = outputMin; 27 | }else{ 28 | if( outVal > outputMax ) outVal = outputMax; 29 | else if( outVal < outputMin ) outVal = outputMin; 30 | } 31 | } 32 | return outVal; 33 | } 34 | } 35 | 36 | float map (in float value, in float inputMin, in float inputMax, in float outputMin, in float outputMax) { 37 | return map(value, inputMin, inputMax, outputMin, outputMax, true); 38 | } -------------------------------------------------------------------------------- /functions/pulse-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | functions-pulse: 3 | doc: 4 | author: 5 | name: Inigo Quiles 6 | twitter: iquilezles 7 | description: 'This one dimensional shaping function made by Inigo Quiles 8 | in [this article](http://www.iquilezles.org/www/articles/functions/functions.htm). 9 | 10 | ' 11 | tangram-version: 0.0.7 12 | version: 0.0.1 13 | shaders: 14 | blocks: 15 | global: "float pulse (float x, float peak, float width) {\n x =\ 16 | \ abs(x - peak);\n if (x>width) return 0.0;\n x /= width;\n\ 17 | \ return 1.0 - x*x*(3.0-2.0*x);\n}" 18 | -------------------------------------------------------------------------------- /functions/pulse.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | functions-pulse: 3 | doc: 4 | author: 5 | name: Inigo Quiles 6 | twitter: iquilezles 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | description: | 10 | This one dimensional shaping function made by Inigo Quiles in [this article](http://www.iquilezles.org/www/articles/functions/functions.htm). 11 | shaders: 12 | blocks: 13 | global: | 14 | float pulse (float x, float peak, float width) { 15 | x = abs(x - peak); 16 | if (x>width) return 0.0; 17 | x /= width; 18 | return 1.0 - x*x*(3.0-2.0*x); 19 | } -------------------------------------------------------------------------------- /functions/zoom.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - ./easing.yaml 3 | 4 | styles: 5 | functions-zoom: 6 | doc: 7 | author: 8 | name: Patricio Gonzalez Vivo 9 | twitter: patriciogv 10 | version: 0.0.1 11 | tangram-version: 0.0.7 12 | licence: MIT 13 | description: | 14 | when you mix this block to another block you can use the functions `zoom()` or `zoomEase()`. Both will help you to interpolate any values between the zooms `ZOOM_START` and `ZOOM_END`. 15 | By default `zoom()` and `zoomEase()` will return a `float `number between 0 and 1. But you can change it to interpolate any thing! Like `floats`, `vec2`, `vec3`, `vec4` and even other functions! For that you just need to change de `defines`: `ZOOM_IN`, and `ZOOM_OUT` to what ever you want to interpolate. 16 | `zoom()` use the cuadratic interpolation of `smoothstep()` but you can use `zoomEase()` to specify what type of **easing interpolation** you prefere. Just change the default `linear` function for any [easing functions describe here](#functions-easing) in the `ZOOM_FNC` define. Ex: `ZOOM_FNC: quadraticInOut` 17 | mix: [functions-easing] 18 | shaders: 19 | defines: 20 | ZOOM_START: 14. 21 | ZOOM_END: 20. 22 | ZOOM_MAX: max(ZOOM_START, ZOOM_END) 23 | ZOOM_FNC: linear 24 | ZOOM_IN: 0.0 25 | ZOOM_OUT: 1.0 26 | blocks: 27 | global: | 28 | float zoom() { 29 | return mix( ZOOM_IN, 30 | ZOOM_OUT, 31 | clamp( smoothstep( ZOOM_START/ZOOM_MAX, 32 | ZOOM_END/ZOOM_MAX, 33 | max(u_map_position.z/ZOOM_MAX, 0.)), 0., 1.) ); 34 | } 35 | 36 | float zoomEase() { 37 | return mix( ZOOM_IN, 38 | ZOOM_OUT, 39 | ZOOM_FNC( (u_map_position.z-ZOOM_START)/(ZOOM_END-ZOOM_START) ) ); 40 | } -------------------------------------------------------------------------------- /fx/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | #### [fx-water](http://tangrams.github.io/blocks/#fx-water) 4 | 5 | Water effect, made by altering the normal map of a surface and applying a sky spherical map to the surface. 6 | The result looks like moving water. 7 | 8 | 9 | 10 | To import this block add the following url to your `import` list: 11 | 12 | ```yaml 13 | import: 14 | - https://tangrams.github.io/blocks/fx/water.yaml 15 | ``` 16 | 17 | 18 | 19 | 20 | If you want to import this block together **with their dependencies** use this other url: 21 | 22 | ```yaml 23 | import: 24 | - https://tangrams.github.io/blocks/fx/water-full.yaml 25 | ``` 26 | 27 | 28 | These blocks uses a custom **shader**. 29 | These are the **defines**: 30 | - **FX_WATER_SPEED**: The *default value* is ```0.5```. 31 | - **FX_WATER_SCALE**: The *default value* is ```0.08```. 32 | - **FX_WATER_AMOUNT**: The *default value* is ```0.02```. 33 | 34 | These are the **shader blocks**: 35 | 36 | - **normal**: 37 | 38 | ```glsl 39 | normal += snoise(vec3(worldPosition().xy*FX_WATER_SCALE,u_time*FX_WATER_SPEED))*FX_WATER_AMOUNT; 40 | ``` 41 | 42 | 43 | 44 | Examples: 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /fx/imgs/sem-sky-0001.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/fx/imgs/sem-sky-0001.jpg -------------------------------------------------------------------------------- /fx/imgs/sem-sky-0002.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/fx/imgs/sem-sky-0002.jpg -------------------------------------------------------------------------------- /fx/imgs/sem-sky-0003.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/fx/imgs/sem-sky-0003.jpg -------------------------------------------------------------------------------- /fx/water.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - ../generative/noise.yaml 3 | 4 | styles: 5 | fx-water: 6 | doc: 7 | author: 8 | name: Patricio Gonzalez Vivo 9 | twitter: patriciogv 10 | version: 0.0.1 11 | tangram-version: 0.0.7 12 | licence: MIT 13 | description: | 14 | Water effect, made by altering the normal map of a surface and applying a sky spherical map to the surface. 15 | The result looks like moving water. 16 | examples: 17 | sandbox: 18 | url: https://tangrams.github.io/tangram-sandbox/styles/sandbox.yaml 19 | img: https://tangrams.github.io/tangram-sandbox/styles/sandbox.png 20 | animated: true 21 | mix: [generative-noise] 22 | material: 23 | ambient: .7 24 | diffuse: 25 | texture: ./imgs/sem-sky-0001.jpg 26 | mapping: spheremap 27 | shaders: 28 | defines: 29 | FX_WATER_SCALE: .08 30 | FX_WATER_SPEED: .5 31 | FX_WATER_AMOUNT: .02 32 | blocks: 33 | normal: | 34 | normal += snoise(vec3(worldPosition().xy*FX_WATER_SCALE,u_time*FX_WATER_SPEED))*FX_WATER_AMOUNT; -------------------------------------------------------------------------------- /generative/caustics-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | generative-caustic: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | description: 'Caustic generative texture inspired on 8 | by David Hoskins 9 | 10 | ' 11 | licence: MIT 12 | tangram-version: 0.0.7 13 | version: 0.0.1 14 | shaders: 15 | blocks: 16 | global: "// Caustic effect from https://www.shadertoy.com/view/4ljXWh\n\ 17 | vec3 getCaustic (vec2 uv) {\n vec2 p = mod(uv*TAU, TAU)-250.0;\n\ 18 | \ float time = u_time * .5+23.0;\n vec2 i = vec2(p);\n \ 19 | \ float c = 1.0;\n float inten = .005;\n for (int n =\ 20 | \ 0; n < int(CAUSTIC_ITERATIONS); n++) {\n float t = time\ 21 | \ * (1.0 - (3.5 / float(n+1)));\n i = p + vec2(cos(t -\ 22 | \ i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x));\n \ 23 | \ c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten),p.y / (cos(i.y+t)/inten)));\n\ 24 | \ }\n c /= float(CAUSTIC_ITERATIONS);\n c = 1.17-pow(c,\ 25 | \ 1.4);\n vec3 color = vec3(pow(abs(c), 8.0));\n color =\ 26 | \ clamp(color + vec3(0.0, 0.35, 0.5), 0.0, 1.0);\n color =\ 27 | \ mix(color, vec3(1.0,1.0,1.0),0.3);\n return color;\n}" 28 | defines: 29 | CAUSTIC_ITERATIONS: 3 30 | TAU: 6.28318530718 31 | test: 32 | getCaustic_3iter: 33 | blocks: 34 | color: ' color.rgb += getCaustic(v_texcoord);' 35 | getCaustic_4iter: 36 | blocks: 37 | color: ' color.rgb += getCaustic(v_texcoord);' 38 | defines: 39 | CAUSTIC_ITERATIONS: 4 40 | getCaustic_5iter: 41 | blocks: 42 | color: ' color.rgb += getCaustic(v_texcoord);' 43 | defines: 44 | CAUSTIC_ITERATIONS: 5 45 | -------------------------------------------------------------------------------- /generative/caustics.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | generative-caustic: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | Caustic generative texture inspired on by David Hoskins 12 | test: 13 | getCaustic_3iter: { blocks: { color: " color.rgb += getCaustic(v_texcoord);" } } 14 | getCaustic_4iter: { defines: { CAUSTIC_ITERATIONS: 4 }, blocks: { color: " color.rgb += getCaustic(v_texcoord);" } } 15 | getCaustic_5iter: { defines: { CAUSTIC_ITERATIONS: 5 }, blocks: { color: " color.rgb += getCaustic(v_texcoord);" } } 16 | 17 | shaders: 18 | defines: 19 | TAU: 6.28318530718 20 | CAUSTIC_ITERATIONS: 3 21 | blocks: 22 | global: | 23 | // Caustic effect from https://www.shadertoy.com/view/4ljXWh 24 | vec3 getCaustic (vec2 uv) { 25 | vec2 p = mod(uv*TAU, TAU)-250.0; 26 | float time = u_time * .5+23.0; 27 | vec2 i = vec2(p); 28 | float c = 1.0; 29 | float inten = .005; 30 | for (int n = 0; n < int(CAUSTIC_ITERATIONS); n++) { 31 | float t = time * (1.0 - (3.5 / float(n+1))); 32 | i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x)); 33 | c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten),p.y / (cos(i.y+t)/inten))); 34 | } 35 | c /= float(CAUSTIC_ITERATIONS); 36 | c = 1.17-pow(c, 1.4); 37 | vec3 color = vec3(pow(abs(c), 8.0)); 38 | color = clamp(color + vec3(0.0, 0.35, 0.5), 0.0, 1.0); 39 | color = mix(color, vec3(1.0,1.0,1.0),0.3); 40 | return color; 41 | } -------------------------------------------------------------------------------- /generative/imgs/tex12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/imgs/tex12.png -------------------------------------------------------------------------------- /generative/imgs/tex16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/imgs/tex16.png -------------------------------------------------------------------------------- /generative/test/caustics-getCaustic_3iter.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | #define TAU 6.28318530718 16 | 17 | #define CAUSTIC_ITERATIONS 3 18 | 19 | varying vec2 v_texcoord; 20 | 21 | 22 | // Caustic effect from https://www.shadertoy.com/view/4ljXWh 23 | vec3 getCaustic (vec2 uv) { 24 | vec2 p = mod(uv*TAU, TAU)-250.0; 25 | float time = u_time * .5+23.0; 26 | vec2 i = vec2(p); 27 | float c = 1.0; 28 | float inten = .005; 29 | for (int n = 0; n < int(CAUSTIC_ITERATIONS); n++) { 30 | float t = time * (1.0 - (3.5 / float(n+1))); 31 | i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x)); 32 | c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten),p.y / (cos(i.y+t)/inten))); 33 | } 34 | c /= float(CAUSTIC_ITERATIONS); 35 | c = 1.17-pow(c, 1.4); 36 | vec3 color = vec3(pow(abs(c), 8.0)); 37 | color = clamp(color + vec3(0.0, 0.35, 0.5), 0.0, 1.0); 38 | color = mix(color, vec3(1.0,1.0,1.0),0.3); 39 | return color; 40 | } 41 | void main() { 42 | vec3 normal = vec3(0.,0.,1.); 43 | vec4 color = vec4(0.,0.,0.,1.); 44 | 45 | 46 | color.rgb += getCaustic(v_texcoord); 47 | 48 | gl_FragColor = color; 49 | } -------------------------------------------------------------------------------- /generative/test/caustics-getCaustic_3iter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/caustics-getCaustic_3iter.png -------------------------------------------------------------------------------- /generative/test/caustics-getCaustic_4iter.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | #define TAU 6.28318530718 16 | 17 | #define CAUSTIC_ITERATIONS 4 18 | 19 | varying vec2 v_texcoord; 20 | 21 | 22 | // Caustic effect from https://www.shadertoy.com/view/4ljXWh 23 | vec3 getCaustic (vec2 uv) { 24 | vec2 p = mod(uv*TAU, TAU)-250.0; 25 | float time = u_time * .5+23.0; 26 | vec2 i = vec2(p); 27 | float c = 1.0; 28 | float inten = .005; 29 | for (int n = 0; n < int(CAUSTIC_ITERATIONS); n++) { 30 | float t = time * (1.0 - (3.5 / float(n+1))); 31 | i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x)); 32 | c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten),p.y / (cos(i.y+t)/inten))); 33 | } 34 | c /= float(CAUSTIC_ITERATIONS); 35 | c = 1.17-pow(c, 1.4); 36 | vec3 color = vec3(pow(abs(c), 8.0)); 37 | color = clamp(color + vec3(0.0, 0.35, 0.5), 0.0, 1.0); 38 | color = mix(color, vec3(1.0,1.0,1.0),0.3); 39 | return color; 40 | } 41 | void main() { 42 | vec3 normal = vec3(0.,0.,1.); 43 | vec4 color = vec4(0.,0.,0.,1.); 44 | 45 | 46 | color.rgb += getCaustic(v_texcoord); 47 | 48 | gl_FragColor = color; 49 | } -------------------------------------------------------------------------------- /generative/test/caustics-getCaustic_4iter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/caustics-getCaustic_4iter.png -------------------------------------------------------------------------------- /generative/test/caustics-getCaustic_5iter.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | #define TAU 6.28318530718 16 | 17 | #define CAUSTIC_ITERATIONS 5 18 | 19 | varying vec2 v_texcoord; 20 | 21 | 22 | // Caustic effect from https://www.shadertoy.com/view/4ljXWh 23 | vec3 getCaustic (vec2 uv) { 24 | vec2 p = mod(uv*TAU, TAU)-250.0; 25 | float time = u_time * .5+23.0; 26 | vec2 i = vec2(p); 27 | float c = 1.0; 28 | float inten = .005; 29 | for (int n = 0; n < int(CAUSTIC_ITERATIONS); n++) { 30 | float t = time * (1.0 - (3.5 / float(n+1))); 31 | i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x)); 32 | c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten),p.y / (cos(i.y+t)/inten))); 33 | } 34 | c /= float(CAUSTIC_ITERATIONS); 35 | c = 1.17-pow(c, 1.4); 36 | vec3 color = vec3(pow(abs(c), 8.0)); 37 | color = clamp(color + vec3(0.0, 0.35, 0.5), 0.0, 1.0); 38 | color = mix(color, vec3(1.0,1.0,1.0),0.3); 39 | return color; 40 | } 41 | void main() { 42 | vec3 normal = vec3(0.,0.,1.); 43 | vec4 color = vec4(0.,0.,0.,1.); 44 | 45 | 46 | color.rgb += getCaustic(v_texcoord); 47 | 48 | gl_FragColor = color; 49 | } -------------------------------------------------------------------------------- /generative/test/caustics-getCaustic_5iter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/caustics-getCaustic_5iter.png -------------------------------------------------------------------------------- /generative/test/fbm-fbm_float_3oct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/fbm-fbm_float_3oct.png -------------------------------------------------------------------------------- /generative/test/fbm-fbm_float_5oct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/fbm-fbm_float_5oct.png -------------------------------------------------------------------------------- /generative/test/fbm-fbm_float_8oct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/fbm-fbm_float_8oct.png -------------------------------------------------------------------------------- /generative/test/fbm-fbm_vec2_3oct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/fbm-fbm_vec2_3oct.png -------------------------------------------------------------------------------- /generative/test/fbm-fbm_vec2_5oct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/fbm-fbm_vec2_5oct.png -------------------------------------------------------------------------------- /generative/test/fbm-fbm_vec2_8oct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/fbm-fbm_vec2_8oct.png -------------------------------------------------------------------------------- /generative/test/fbm-fbm_vec3_3oct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/fbm-fbm_vec3_3oct.png -------------------------------------------------------------------------------- /generative/test/fbm-fbm_vec3_5oct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/fbm-fbm_vec3_5oct.png -------------------------------------------------------------------------------- /generative/test/fbm-fbm_vec3_8oct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/fbm-fbm_vec3_8oct.png -------------------------------------------------------------------------------- /generative/test/generative-caustic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/generative-caustic.png -------------------------------------------------------------------------------- /generative/test/generative-fbm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/generative-fbm.png -------------------------------------------------------------------------------- /generative/test/generative-noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/generative-noise.png -------------------------------------------------------------------------------- /generative/test/generative-random.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/generative-random.png -------------------------------------------------------------------------------- /generative/test/generative-voronoi.json: -------------------------------------------------------------------------------- 1 | {"generative-voronoi": {"voronoi": {"test": {"blocks": {"color": " color.rgb = voronoi(v_texcoord.xy*2.);"}}, "data": [{"sec": 1.000493049621582, "val": 0.0259}, {"sec": 1.0231831073760986, "val": 0.025896}, {"sec": 1.049072027206421, "val": 0.025872}, {"sec": 1.074930191040039, "val": 0.025895}, {"sec": 1.1007461547851562, "val": 0.025893}, {"sec": 1.1266520023345947, "val": 0.025897}, {"sec": 1.1525790691375732, "val": 0.02593}, {"sec": 1.17844820022583, "val": 0.025851}, {"sec": 1.204350233078003, "val": 0.025886}, {"sec": 1.2303521633148193, "val": 0.02593}, {"sec": 1.2562620639801025, "val": 0.025953}, {"sec": 1.2820780277252197, "val": 0.0258}, {"sec": 1.3079640865325928, "val": 0.02586}, {"sec": 1.3339581489562988, "val": 0.02595}, {"sec": 1.3598241806030273, "val": 0.026084}, {"sec": 1.3856711387634277, "val": 0.025652}, {"sec": 1.4115211963653564, "val": 0.025891}, {"sec": 1.4373130798339844, "val": 0.025924}, {"sec": 1.4631071090698242, "val": 0.025853}, {"sec": 1.4892451763153076, "val": 0.025903}, {"sec": 1.5148770809173584, "val": 0.025864}, {"sec": 1.5408620834350586, "val": 0.02594}, {"sec": 1.5668811798095703, "val": 0.025847}, {"sec": 1.5928380489349365, "val": 0.0259}, {"sec": 1.6187050342559814, "val": 0.025918}, {"sec": 1.6443731784820557, "val": 0.02588}, {"sec": 1.670384168624878, "val": 0.025917}, {"sec": 1.6962151527404785, "val": 0.025835}, {"sec": 1.722344160079956, "val": 0.026007}, {"sec": 1.7480661869049072, "val": 0.025819}, {"sec": 1.7739481925964355, "val": 0.025861}, {"sec": 1.7997310161590576, "val": 0.025897}, {"sec": 1.825688123703003, "val": 0.02601}, {"sec": 1.8516111373901367, "val": 0.025808}, {"sec": 1.8774771690368652, "val": 0.025866}, {"sec": 1.9033641815185547, "val": 0.025878}, {"sec": 1.9292221069335938, "val": 0.025898}, {"sec": 1.955125093460083, "val": 0.025886}, {"sec": 1.9810030460357666, "val": 0.025888}], "output": "./generative/test/voronoi-voronoi.png", "median": 0.025892999999999999, "mean": 0.025884027435897697}}} -------------------------------------------------------------------------------- /generative/test/generative-voronoi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/generative-voronoi.png -------------------------------------------------------------------------------- /generative/test/noise-gnoise_vec2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/noise-gnoise_vec2.png -------------------------------------------------------------------------------- /generative/test/noise-gnoise_vec3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/noise-gnoise_vec3.png -------------------------------------------------------------------------------- /generative/test/noise-noise_float.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/noise-noise_float.png -------------------------------------------------------------------------------- /generative/test/noise-noise_float_t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/noise-noise_float_t.png -------------------------------------------------------------------------------- /generative/test/noise-noise_vec2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/noise-noise_vec2.png -------------------------------------------------------------------------------- /generative/test/noise-noise_vec2_t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/noise-noise_vec2_t.png -------------------------------------------------------------------------------- /generative/test/noise-noise_vec3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/noise-noise_vec3.png -------------------------------------------------------------------------------- /generative/test/noise-noise_vec3_t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/noise-noise_vec3_t.png -------------------------------------------------------------------------------- /generative/test/noise-snoise_vec2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/noise-snoise_vec2.png -------------------------------------------------------------------------------- /generative/test/noise-snoise_vec2_t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/noise-snoise_vec2_t.png -------------------------------------------------------------------------------- /generative/test/noise-snoise_vec3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/noise-snoise_vec3.png -------------------------------------------------------------------------------- /generative/test/noise-snoise_vec3_t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/noise-snoise_vec3_t.png -------------------------------------------------------------------------------- /generative/test/random-random2_vec2.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_random; // https://tangrams.github.io/blocks/generative/imgs/tex16.png 15 | 16 | 17 | varying vec2 v_texcoord; 18 | 19 | 20 | vec3 random3 (vec2 p) { 21 | #ifdef RANDOM_TEXSAMPLE 22 | return texture2D(u_random,fract(p*2.),-100.).rgb; 23 | #else 24 | return fract(sin(vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) ))*43758.5453); 25 | #endif 26 | } 27 | vec3 random3 (vec3 p) { 28 | #ifdef RANDOM_TEXSAMPLE 29 | vec2 uv = fract(p.xy+vec2(37.0,17.0)*p.z); 30 | return texture2D(u_random, fract(uv*2.), -100.0).rgb; 31 | #else 32 | float j = 4096.0*sin(dot(p,vec3(17.0, 59.4, 15.0))); 33 | vec3 r; 34 | r.z = fract(512.0*j); 35 | j *= .125; 36 | r.x = fract(512.0*j); 37 | j *= .125; 38 | r.y = fract(512.0*j); 39 | return r-0.5; 40 | #endif 41 | } 42 | vec2 random2 (vec2 p) { 43 | #ifdef RANDOM_TEXSAMPLE 44 | return random3(p).rg; 45 | #else 46 | return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453); 47 | #endif 48 | } 49 | float random (float x) { 50 | return fract(sin(x)*43758.5453); 51 | } 52 | float random (vec2 p) { 53 | #ifdef RANDOM_TEXSAMPLE 54 | return random3(p).r; 55 | #else 56 | return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); 57 | #endif 58 | } 59 | float random (vec3 p) { 60 | #ifdef RANDOM_TEXSAMPLE 61 | return random3(p).r; 62 | #else 63 | return fract(sin(dot(p.xyz, vec3(70.9898,78.233,32.4355)))* 43758.5453123); 64 | #endif 65 | } 66 | void main() { 67 | vec3 normal = vec3(0.,0.,1.); 68 | vec4 color = vec4(0.,0.,0.,1.); 69 | 70 | 71 | color.rg += random2(v_texcoord.xy*2.); 72 | 73 | gl_FragColor = color; 74 | } -------------------------------------------------------------------------------- /generative/test/random-random2_vec2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/random-random2_vec2.png -------------------------------------------------------------------------------- /generative/test/random-random2_vec2_t.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_random; // https://tangrams.github.io/blocks/generative/imgs/tex16.png 15 | 16 | 17 | #define RANDOM_TEXSAMPLE 1 18 | 19 | varying vec2 v_texcoord; 20 | 21 | 22 | vec3 random3 (vec2 p) { 23 | #ifdef RANDOM_TEXSAMPLE 24 | return texture2D(u_random,fract(p*2.),-100.).rgb; 25 | #else 26 | return fract(sin(vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) ))*43758.5453); 27 | #endif 28 | } 29 | vec3 random3 (vec3 p) { 30 | #ifdef RANDOM_TEXSAMPLE 31 | vec2 uv = fract(p.xy+vec2(37.0,17.0)*p.z); 32 | return texture2D(u_random, fract(uv*2.), -100.0).rgb; 33 | #else 34 | float j = 4096.0*sin(dot(p,vec3(17.0, 59.4, 15.0))); 35 | vec3 r; 36 | r.z = fract(512.0*j); 37 | j *= .125; 38 | r.x = fract(512.0*j); 39 | j *= .125; 40 | r.y = fract(512.0*j); 41 | return r-0.5; 42 | #endif 43 | } 44 | vec2 random2 (vec2 p) { 45 | #ifdef RANDOM_TEXSAMPLE 46 | return random3(p).rg; 47 | #else 48 | return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453); 49 | #endif 50 | } 51 | float random (float x) { 52 | return fract(sin(x)*43758.5453); 53 | } 54 | float random (vec2 p) { 55 | #ifdef RANDOM_TEXSAMPLE 56 | return random3(p).r; 57 | #else 58 | return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); 59 | #endif 60 | } 61 | float random (vec3 p) { 62 | #ifdef RANDOM_TEXSAMPLE 63 | return random3(p).r; 64 | #else 65 | return fract(sin(dot(p.xyz, vec3(70.9898,78.233,32.4355)))* 43758.5453123); 66 | #endif 67 | } 68 | void main() { 69 | vec3 normal = vec3(0.,0.,1.); 70 | vec4 color = vec4(0.,0.,0.,1.); 71 | 72 | 73 | color.rg += random2(v_texcoord.xy*2.); 74 | 75 | gl_FragColor = color; 76 | } -------------------------------------------------------------------------------- /generative/test/random-random2_vec2_t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/random-random2_vec2_t.png -------------------------------------------------------------------------------- /generative/test/random-random3_vec2.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_random; // https://tangrams.github.io/blocks/generative/imgs/tex16.png 15 | 16 | 17 | varying vec2 v_texcoord; 18 | 19 | 20 | vec3 random3 (vec2 p) { 21 | #ifdef RANDOM_TEXSAMPLE 22 | return texture2D(u_random,fract(p*2.),-100.).rgb; 23 | #else 24 | return fract(sin(vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) ))*43758.5453); 25 | #endif 26 | } 27 | vec3 random3 (vec3 p) { 28 | #ifdef RANDOM_TEXSAMPLE 29 | vec2 uv = fract(p.xy+vec2(37.0,17.0)*p.z); 30 | return texture2D(u_random, fract(uv*2.), -100.0).rgb; 31 | #else 32 | float j = 4096.0*sin(dot(p,vec3(17.0, 59.4, 15.0))); 33 | vec3 r; 34 | r.z = fract(512.0*j); 35 | j *= .125; 36 | r.x = fract(512.0*j); 37 | j *= .125; 38 | r.y = fract(512.0*j); 39 | return r-0.5; 40 | #endif 41 | } 42 | vec2 random2 (vec2 p) { 43 | #ifdef RANDOM_TEXSAMPLE 44 | return random3(p).rg; 45 | #else 46 | return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453); 47 | #endif 48 | } 49 | float random (float x) { 50 | return fract(sin(x)*43758.5453); 51 | } 52 | float random (vec2 p) { 53 | #ifdef RANDOM_TEXSAMPLE 54 | return random3(p).r; 55 | #else 56 | return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); 57 | #endif 58 | } 59 | float random (vec3 p) { 60 | #ifdef RANDOM_TEXSAMPLE 61 | return random3(p).r; 62 | #else 63 | return fract(sin(dot(p.xyz, vec3(70.9898,78.233,32.4355)))* 43758.5453123); 64 | #endif 65 | } 66 | void main() { 67 | vec3 normal = vec3(0.,0.,1.); 68 | vec4 color = vec4(0.,0.,0.,1.); 69 | 70 | 71 | color.rgb += random3(v_texcoord.xy*2.); 72 | 73 | gl_FragColor = color; 74 | } -------------------------------------------------------------------------------- /generative/test/random-random3_vec2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/random-random3_vec2.png -------------------------------------------------------------------------------- /generative/test/random-random3_vec2_t.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_random; // https://tangrams.github.io/blocks/generative/imgs/tex16.png 15 | 16 | 17 | #define RANDOM_TEXSAMPLE 1 18 | 19 | varying vec2 v_texcoord; 20 | 21 | 22 | vec3 random3 (vec2 p) { 23 | #ifdef RANDOM_TEXSAMPLE 24 | return texture2D(u_random,fract(p*2.),-100.).rgb; 25 | #else 26 | return fract(sin(vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) ))*43758.5453); 27 | #endif 28 | } 29 | vec3 random3 (vec3 p) { 30 | #ifdef RANDOM_TEXSAMPLE 31 | vec2 uv = fract(p.xy+vec2(37.0,17.0)*p.z); 32 | return texture2D(u_random, fract(uv*2.), -100.0).rgb; 33 | #else 34 | float j = 4096.0*sin(dot(p,vec3(17.0, 59.4, 15.0))); 35 | vec3 r; 36 | r.z = fract(512.0*j); 37 | j *= .125; 38 | r.x = fract(512.0*j); 39 | j *= .125; 40 | r.y = fract(512.0*j); 41 | return r-0.5; 42 | #endif 43 | } 44 | vec2 random2 (vec2 p) { 45 | #ifdef RANDOM_TEXSAMPLE 46 | return random3(p).rg; 47 | #else 48 | return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453); 49 | #endif 50 | } 51 | float random (float x) { 52 | return fract(sin(x)*43758.5453); 53 | } 54 | float random (vec2 p) { 55 | #ifdef RANDOM_TEXSAMPLE 56 | return random3(p).r; 57 | #else 58 | return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); 59 | #endif 60 | } 61 | float random (vec3 p) { 62 | #ifdef RANDOM_TEXSAMPLE 63 | return random3(p).r; 64 | #else 65 | return fract(sin(dot(p.xyz, vec3(70.9898,78.233,32.4355)))* 43758.5453123); 66 | #endif 67 | } 68 | void main() { 69 | vec3 normal = vec3(0.,0.,1.); 70 | vec4 color = vec4(0.,0.,0.,1.); 71 | 72 | 73 | color.rgb += random3(v_texcoord.xy*2.); 74 | 75 | gl_FragColor = color; 76 | } -------------------------------------------------------------------------------- /generative/test/random-random3_vec2_t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/random-random3_vec2_t.png -------------------------------------------------------------------------------- /generative/test/random-random3_vec3.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_random; // https://tangrams.github.io/blocks/generative/imgs/tex16.png 15 | 16 | 17 | varying vec2 v_texcoord; 18 | 19 | 20 | vec3 random3 (vec2 p) { 21 | #ifdef RANDOM_TEXSAMPLE 22 | return texture2D(u_random,fract(p*2.),-100.).rgb; 23 | #else 24 | return fract(sin(vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) ))*43758.5453); 25 | #endif 26 | } 27 | vec3 random3 (vec3 p) { 28 | #ifdef RANDOM_TEXSAMPLE 29 | vec2 uv = fract(p.xy+vec2(37.0,17.0)*p.z); 30 | return texture2D(u_random, fract(uv*2.), -100.0).rgb; 31 | #else 32 | float j = 4096.0*sin(dot(p,vec3(17.0, 59.4, 15.0))); 33 | vec3 r; 34 | r.z = fract(512.0*j); 35 | j *= .125; 36 | r.x = fract(512.0*j); 37 | j *= .125; 38 | r.y = fract(512.0*j); 39 | return r-0.5; 40 | #endif 41 | } 42 | vec2 random2 (vec2 p) { 43 | #ifdef RANDOM_TEXSAMPLE 44 | return random3(p).rg; 45 | #else 46 | return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453); 47 | #endif 48 | } 49 | float random (float x) { 50 | return fract(sin(x)*43758.5453); 51 | } 52 | float random (vec2 p) { 53 | #ifdef RANDOM_TEXSAMPLE 54 | return random3(p).r; 55 | #else 56 | return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); 57 | #endif 58 | } 59 | float random (vec3 p) { 60 | #ifdef RANDOM_TEXSAMPLE 61 | return random3(p).r; 62 | #else 63 | return fract(sin(dot(p.xyz, vec3(70.9898,78.233,32.4355)))* 43758.5453123); 64 | #endif 65 | } 66 | void main() { 67 | vec3 normal = vec3(0.,0.,1.); 68 | vec4 color = vec4(0.,0.,0.,1.); 69 | 70 | 71 | color.rgb += random3(vec3(v_texcoord.xy*2.,u_time)); 72 | 73 | gl_FragColor = color; 74 | } -------------------------------------------------------------------------------- /generative/test/random-random3_vec3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/random-random3_vec3.png -------------------------------------------------------------------------------- /generative/test/random-random3_vec3_t.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_random; // https://tangrams.github.io/blocks/generative/imgs/tex16.png 15 | 16 | 17 | #define RANDOM_TEXSAMPLE 1 18 | 19 | varying vec2 v_texcoord; 20 | 21 | 22 | vec3 random3 (vec2 p) { 23 | #ifdef RANDOM_TEXSAMPLE 24 | return texture2D(u_random,fract(p*2.),-100.).rgb; 25 | #else 26 | return fract(sin(vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) ))*43758.5453); 27 | #endif 28 | } 29 | vec3 random3 (vec3 p) { 30 | #ifdef RANDOM_TEXSAMPLE 31 | vec2 uv = fract(p.xy+vec2(37.0,17.0)*p.z); 32 | return texture2D(u_random, fract(uv*2.), -100.0).rgb; 33 | #else 34 | float j = 4096.0*sin(dot(p,vec3(17.0, 59.4, 15.0))); 35 | vec3 r; 36 | r.z = fract(512.0*j); 37 | j *= .125; 38 | r.x = fract(512.0*j); 39 | j *= .125; 40 | r.y = fract(512.0*j); 41 | return r-0.5; 42 | #endif 43 | } 44 | vec2 random2 (vec2 p) { 45 | #ifdef RANDOM_TEXSAMPLE 46 | return random3(p).rg; 47 | #else 48 | return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453); 49 | #endif 50 | } 51 | float random (float x) { 52 | return fract(sin(x)*43758.5453); 53 | } 54 | float random (vec2 p) { 55 | #ifdef RANDOM_TEXSAMPLE 56 | return random3(p).r; 57 | #else 58 | return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); 59 | #endif 60 | } 61 | float random (vec3 p) { 62 | #ifdef RANDOM_TEXSAMPLE 63 | return random3(p).r; 64 | #else 65 | return fract(sin(dot(p.xyz, vec3(70.9898,78.233,32.4355)))* 43758.5453123); 66 | #endif 67 | } 68 | void main() { 69 | vec3 normal = vec3(0.,0.,1.); 70 | vec4 color = vec4(0.,0.,0.,1.); 71 | 72 | 73 | color.rgb += random3(vec3(v_texcoord.xy*2.,u_time)); 74 | 75 | gl_FragColor = color; 76 | } -------------------------------------------------------------------------------- /generative/test/random-random3_vec3_t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/random-random3_vec3_t.png -------------------------------------------------------------------------------- /generative/test/random-random_float.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_random; // https://tangrams.github.io/blocks/generative/imgs/tex16.png 15 | 16 | 17 | varying vec2 v_texcoord; 18 | 19 | 20 | vec3 random3 (vec2 p) { 21 | #ifdef RANDOM_TEXSAMPLE 22 | return texture2D(u_random,fract(p*2.),-100.).rgb; 23 | #else 24 | return fract(sin(vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) ))*43758.5453); 25 | #endif 26 | } 27 | vec3 random3 (vec3 p) { 28 | #ifdef RANDOM_TEXSAMPLE 29 | vec2 uv = fract(p.xy+vec2(37.0,17.0)*p.z); 30 | return texture2D(u_random, fract(uv*2.), -100.0).rgb; 31 | #else 32 | float j = 4096.0*sin(dot(p,vec3(17.0, 59.4, 15.0))); 33 | vec3 r; 34 | r.z = fract(512.0*j); 35 | j *= .125; 36 | r.x = fract(512.0*j); 37 | j *= .125; 38 | r.y = fract(512.0*j); 39 | return r-0.5; 40 | #endif 41 | } 42 | vec2 random2 (vec2 p) { 43 | #ifdef RANDOM_TEXSAMPLE 44 | return random3(p).rg; 45 | #else 46 | return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453); 47 | #endif 48 | } 49 | float random (float x) { 50 | return fract(sin(x)*43758.5453); 51 | } 52 | float random (vec2 p) { 53 | #ifdef RANDOM_TEXSAMPLE 54 | return random3(p).r; 55 | #else 56 | return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); 57 | #endif 58 | } 59 | float random (vec3 p) { 60 | #ifdef RANDOM_TEXSAMPLE 61 | return random3(p).r; 62 | #else 63 | return fract(sin(dot(p.xyz, vec3(70.9898,78.233,32.4355)))* 43758.5453123); 64 | #endif 65 | } 66 | void main() { 67 | vec3 normal = vec3(0.,0.,1.); 68 | vec4 color = vec4(0.,0.,0.,1.); 69 | 70 | 71 | color.rgb += random(v_texcoord.x*2.); 72 | 73 | gl_FragColor = color; 74 | } -------------------------------------------------------------------------------- /generative/test/random-random_float.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/random-random_float.png -------------------------------------------------------------------------------- /generative/test/random-random_float_t.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_random; // https://tangrams.github.io/blocks/generative/imgs/tex16.png 15 | 16 | 17 | #define RANDOM_TEXSAMPLE 1 18 | 19 | varying vec2 v_texcoord; 20 | 21 | 22 | vec3 random3 (vec2 p) { 23 | #ifdef RANDOM_TEXSAMPLE 24 | return texture2D(u_random,fract(p*2.),-100.).rgb; 25 | #else 26 | return fract(sin(vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) ))*43758.5453); 27 | #endif 28 | } 29 | vec3 random3 (vec3 p) { 30 | #ifdef RANDOM_TEXSAMPLE 31 | vec2 uv = fract(p.xy+vec2(37.0,17.0)*p.z); 32 | return texture2D(u_random, fract(uv*2.), -100.0).rgb; 33 | #else 34 | float j = 4096.0*sin(dot(p,vec3(17.0, 59.4, 15.0))); 35 | vec3 r; 36 | r.z = fract(512.0*j); 37 | j *= .125; 38 | r.x = fract(512.0*j); 39 | j *= .125; 40 | r.y = fract(512.0*j); 41 | return r-0.5; 42 | #endif 43 | } 44 | vec2 random2 (vec2 p) { 45 | #ifdef RANDOM_TEXSAMPLE 46 | return random3(p).rg; 47 | #else 48 | return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453); 49 | #endif 50 | } 51 | float random (float x) { 52 | return fract(sin(x)*43758.5453); 53 | } 54 | float random (vec2 p) { 55 | #ifdef RANDOM_TEXSAMPLE 56 | return random3(p).r; 57 | #else 58 | return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); 59 | #endif 60 | } 61 | float random (vec3 p) { 62 | #ifdef RANDOM_TEXSAMPLE 63 | return random3(p).r; 64 | #else 65 | return fract(sin(dot(p.xyz, vec3(70.9898,78.233,32.4355)))* 43758.5453123); 66 | #endif 67 | } 68 | void main() { 69 | vec3 normal = vec3(0.,0.,1.); 70 | vec4 color = vec4(0.,0.,0.,1.); 71 | 72 | 73 | color.rgb += random(v_texcoord.x*2.); 74 | 75 | gl_FragColor = color; 76 | } -------------------------------------------------------------------------------- /generative/test/random-random_float_t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/random-random_float_t.png -------------------------------------------------------------------------------- /generative/test/random-random_vec2.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_random; // https://tangrams.github.io/blocks/generative/imgs/tex16.png 15 | 16 | 17 | varying vec2 v_texcoord; 18 | 19 | 20 | vec3 random3 (vec2 p) { 21 | #ifdef RANDOM_TEXSAMPLE 22 | return texture2D(u_random,fract(p*2.),-100.).rgb; 23 | #else 24 | return fract(sin(vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) ))*43758.5453); 25 | #endif 26 | } 27 | vec3 random3 (vec3 p) { 28 | #ifdef RANDOM_TEXSAMPLE 29 | vec2 uv = fract(p.xy+vec2(37.0,17.0)*p.z); 30 | return texture2D(u_random, fract(uv*2.), -100.0).rgb; 31 | #else 32 | float j = 4096.0*sin(dot(p,vec3(17.0, 59.4, 15.0))); 33 | vec3 r; 34 | r.z = fract(512.0*j); 35 | j *= .125; 36 | r.x = fract(512.0*j); 37 | j *= .125; 38 | r.y = fract(512.0*j); 39 | return r-0.5; 40 | #endif 41 | } 42 | vec2 random2 (vec2 p) { 43 | #ifdef RANDOM_TEXSAMPLE 44 | return random3(p).rg; 45 | #else 46 | return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453); 47 | #endif 48 | } 49 | float random (float x) { 50 | return fract(sin(x)*43758.5453); 51 | } 52 | float random (vec2 p) { 53 | #ifdef RANDOM_TEXSAMPLE 54 | return random3(p).r; 55 | #else 56 | return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); 57 | #endif 58 | } 59 | float random (vec3 p) { 60 | #ifdef RANDOM_TEXSAMPLE 61 | return random3(p).r; 62 | #else 63 | return fract(sin(dot(p.xyz, vec3(70.9898,78.233,32.4355)))* 43758.5453123); 64 | #endif 65 | } 66 | void main() { 67 | vec3 normal = vec3(0.,0.,1.); 68 | vec4 color = vec4(0.,0.,0.,1.); 69 | 70 | 71 | color.rgb += random(v_texcoord.xy*2.); 72 | 73 | gl_FragColor = color; 74 | } -------------------------------------------------------------------------------- /generative/test/random-random_vec2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/random-random_vec2.png -------------------------------------------------------------------------------- /generative/test/random-random_vec2_t.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_random; // https://tangrams.github.io/blocks/generative/imgs/tex16.png 15 | 16 | 17 | #define RANDOM_TEXSAMPLE 1 18 | 19 | varying vec2 v_texcoord; 20 | 21 | 22 | vec3 random3 (vec2 p) { 23 | #ifdef RANDOM_TEXSAMPLE 24 | return texture2D(u_random,fract(p*2.),-100.).rgb; 25 | #else 26 | return fract(sin(vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) ))*43758.5453); 27 | #endif 28 | } 29 | vec3 random3 (vec3 p) { 30 | #ifdef RANDOM_TEXSAMPLE 31 | vec2 uv = fract(p.xy+vec2(37.0,17.0)*p.z); 32 | return texture2D(u_random, fract(uv*2.), -100.0).rgb; 33 | #else 34 | float j = 4096.0*sin(dot(p,vec3(17.0, 59.4, 15.0))); 35 | vec3 r; 36 | r.z = fract(512.0*j); 37 | j *= .125; 38 | r.x = fract(512.0*j); 39 | j *= .125; 40 | r.y = fract(512.0*j); 41 | return r-0.5; 42 | #endif 43 | } 44 | vec2 random2 (vec2 p) { 45 | #ifdef RANDOM_TEXSAMPLE 46 | return random3(p).rg; 47 | #else 48 | return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453); 49 | #endif 50 | } 51 | float random (float x) { 52 | return fract(sin(x)*43758.5453); 53 | } 54 | float random (vec2 p) { 55 | #ifdef RANDOM_TEXSAMPLE 56 | return random3(p).r; 57 | #else 58 | return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); 59 | #endif 60 | } 61 | float random (vec3 p) { 62 | #ifdef RANDOM_TEXSAMPLE 63 | return random3(p).r; 64 | #else 65 | return fract(sin(dot(p.xyz, vec3(70.9898,78.233,32.4355)))* 43758.5453123); 66 | #endif 67 | } 68 | void main() { 69 | vec3 normal = vec3(0.,0.,1.); 70 | vec4 color = vec4(0.,0.,0.,1.); 71 | 72 | 73 | color.rgb += random(v_texcoord.xy*2.); 74 | 75 | gl_FragColor = color; 76 | } -------------------------------------------------------------------------------- /generative/test/random-random_vec2_t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/random-random_vec2_t.png -------------------------------------------------------------------------------- /generative/test/random-random_vec3.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_random; // https://tangrams.github.io/blocks/generative/imgs/tex16.png 15 | 16 | 17 | varying vec2 v_texcoord; 18 | 19 | 20 | vec3 random3 (vec2 p) { 21 | #ifdef RANDOM_TEXSAMPLE 22 | return texture2D(u_random,fract(p*2.),-100.).rgb; 23 | #else 24 | return fract(sin(vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) ))*43758.5453); 25 | #endif 26 | } 27 | vec3 random3 (vec3 p) { 28 | #ifdef RANDOM_TEXSAMPLE 29 | vec2 uv = fract(p.xy+vec2(37.0,17.0)*p.z); 30 | return texture2D(u_random, fract(uv*2.), -100.0).rgb; 31 | #else 32 | float j = 4096.0*sin(dot(p,vec3(17.0, 59.4, 15.0))); 33 | vec3 r; 34 | r.z = fract(512.0*j); 35 | j *= .125; 36 | r.x = fract(512.0*j); 37 | j *= .125; 38 | r.y = fract(512.0*j); 39 | return r-0.5; 40 | #endif 41 | } 42 | vec2 random2 (vec2 p) { 43 | #ifdef RANDOM_TEXSAMPLE 44 | return random3(p).rg; 45 | #else 46 | return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453); 47 | #endif 48 | } 49 | float random (float x) { 50 | return fract(sin(x)*43758.5453); 51 | } 52 | float random (vec2 p) { 53 | #ifdef RANDOM_TEXSAMPLE 54 | return random3(p).r; 55 | #else 56 | return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); 57 | #endif 58 | } 59 | float random (vec3 p) { 60 | #ifdef RANDOM_TEXSAMPLE 61 | return random3(p).r; 62 | #else 63 | return fract(sin(dot(p.xyz, vec3(70.9898,78.233,32.4355)))* 43758.5453123); 64 | #endif 65 | } 66 | void main() { 67 | vec3 normal = vec3(0.,0.,1.); 68 | vec4 color = vec4(0.,0.,0.,1.); 69 | 70 | 71 | color.rgb += random(vec3(v_texcoord.xy*2.,u_time)); 72 | 73 | gl_FragColor = color; 74 | } -------------------------------------------------------------------------------- /generative/test/random-random_vec3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/random-random_vec3.png -------------------------------------------------------------------------------- /generative/test/random-random_vec3_t.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_random; // https://tangrams.github.io/blocks/generative/imgs/tex16.png 15 | 16 | 17 | #define RANDOM_TEXSAMPLE 1 18 | 19 | varying vec2 v_texcoord; 20 | 21 | 22 | vec3 random3 (vec2 p) { 23 | #ifdef RANDOM_TEXSAMPLE 24 | return texture2D(u_random,fract(p*2.),-100.).rgb; 25 | #else 26 | return fract(sin(vec3( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)), dot(p,vec2(419.2,371.9)) ))*43758.5453); 27 | #endif 28 | } 29 | vec3 random3 (vec3 p) { 30 | #ifdef RANDOM_TEXSAMPLE 31 | vec2 uv = fract(p.xy+vec2(37.0,17.0)*p.z); 32 | return texture2D(u_random, fract(uv*2.), -100.0).rgb; 33 | #else 34 | float j = 4096.0*sin(dot(p,vec3(17.0, 59.4, 15.0))); 35 | vec3 r; 36 | r.z = fract(512.0*j); 37 | j *= .125; 38 | r.x = fract(512.0*j); 39 | j *= .125; 40 | r.y = fract(512.0*j); 41 | return r-0.5; 42 | #endif 43 | } 44 | vec2 random2 (vec2 p) { 45 | #ifdef RANDOM_TEXSAMPLE 46 | return random3(p).rg; 47 | #else 48 | return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453); 49 | #endif 50 | } 51 | float random (float x) { 52 | return fract(sin(x)*43758.5453); 53 | } 54 | float random (vec2 p) { 55 | #ifdef RANDOM_TEXSAMPLE 56 | return random3(p).r; 57 | #else 58 | return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); 59 | #endif 60 | } 61 | float random (vec3 p) { 62 | #ifdef RANDOM_TEXSAMPLE 63 | return random3(p).r; 64 | #else 65 | return fract(sin(dot(p.xyz, vec3(70.9898,78.233,32.4355)))* 43758.5453123); 66 | #endif 67 | } 68 | void main() { 69 | vec3 normal = vec3(0.,0.,1.); 70 | vec4 color = vec4(0.,0.,0.,1.); 71 | 72 | 73 | color.rgb += random(vec3(v_texcoord.xy*2.,u_time)); 74 | 75 | gl_FragColor = color; 76 | } -------------------------------------------------------------------------------- /generative/test/random-random_vec3_t.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/random-random_vec3_t.png -------------------------------------------------------------------------------- /generative/test/voronoi-voronoi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/generative/test/voronoi-voronoi.png -------------------------------------------------------------------------------- /generative/voronoi.yaml: -------------------------------------------------------------------------------- 1 | import: random.yaml 2 | styles: 3 | generative-voronoi: 4 | doc: 5 | author: 6 | name: Patricio Gonzalez Vivo 7 | twitter: patriciogv 8 | version: 0.0.1 9 | tangram-version: 0.0.7 10 | licence: MIT 11 | description: | 12 | Set of Voronoi functions. 13 | For more information on this theme read [this chapter of The Book of Shaders about Cellular Noise and Voronoi](http://thebookofshaders.com/12/). 14 | test: 15 | voronoi: { blocks: { color: " color.rgb = voronoi(v_texcoord.xy*2.);" } } 16 | 17 | mix: generative-random 18 | shaders: 19 | blocks: 20 | global: | 21 | vec3 voronoi (vec2 st) { 22 | vec2 ipos = floor(st); 23 | vec2 fpos = fract(st); 24 | vec3 m = vec3( 8.0 ); 25 | for( int j=-1; j<=1; j++ ){ 26 | for( int i=-1; i<=1; i++ ){ 27 | vec2 g = vec2( float(i), float(j) ); 28 | vec2 o = random2( ipos + g ); 29 | vec2 r = g - fpos + o; 30 | float d = dot( r, r ); 31 | if( d 0.0 ){ 38 | material.specular = vec4(1.) * max( 1.-(worldPosition().z*.001 + .5), 0. ); 39 | material.emission = vec4(0.957,0.988,0.976,1.0) * step(.5,random(ipos*vec2(0.0000001,0.01)+floor(worldNormal().xy*10.0))); 40 | material.emission *= vec4(0.988,0.983,0.880,1.0) * step(.5,random(ipos)); 41 | } 42 | } 43 | filter: | 44 | color.rgb += vec3(1.)* min( 1.-(worldPosition().z*.001 + .7) , 0.5 ); -------------------------------------------------------------------------------- /polygons/pixelate.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - ../generative/random.yaml 3 | - ../space/tile.yaml 4 | 5 | styles: 6 | polygons-pixelate: 7 | doc: 8 | author: 9 | name: Patricio Gonzalez Vivo 10 | twitter: patriciogv 11 | version: 0.0.1 12 | tangram-version: 0.0.7 13 | licence: MIT 14 | description: | 15 | Apply a random pixelated pattern to the polygon style. To learn more about patterns or random check [this chapter](https://thebookofshaders.com/09/) or [this other chapter from the Book of Shaders](https://thebookofshaders.com/10/) 16 | ui: 17 | shaders: 18 | defines: 19 | PIXELATE_SCALE: 20 | type: number 21 | label: Scale 22 | range: 23 | min: 1. 24 | max: 1000. 25 | step: 1. 26 | PIXELATE_COLOR: 27 | type: color 28 | label: Color 29 | PIXELATE_BACKGROUND_COLOR: 30 | type: color 31 | label: 'Background color' 32 | 33 | base: polygons 34 | mix: [space-tile, generative-random] 35 | shaders: 36 | defines: 37 | PIXELATE_SCALE: 40. 38 | PIXELATE_COLOR: color.rgb*.5 39 | PIXELATE_BACKGROUND_COLOR: color.rgb 40 | blocks: 41 | color: | 42 | color.rgb = mix(PIXELATE_BACKGROUND_COLOR, 43 | PIXELATE_COLOR, 44 | random(floor(getTileCoords()*PIXELATE_SCALE))); -------------------------------------------------------------------------------- /polygons/stripes.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - ../space/tile.yaml 3 | - ../patterns/stripes.yaml 4 | 5 | styles: 6 | polygons-stripes: 7 | doc: 8 | author: 9 | name: Patricio Gonzalez Vivo 10 | twitter: patriciogv 11 | version: 0.0.1 12 | tangram-version: 0.0.7 13 | licence: MIT 14 | description: | 15 | Apply stripe pattern to the polygon style. To learn more about patterns check [this chapter from the Book of Shaders](https://thebookofshaders.com/09/) 16 | ui: 17 | shaders: 18 | defines: 19 | STRIPES_SCALE: 20 | type: number 21 | label: Scale 22 | range: 23 | min: 1. 24 | max: 1000. 25 | step: 1. 26 | STRIPES_WIDTH: 27 | type: number 28 | label: Width 29 | range: 30 | min: 0. 31 | max: 1. 32 | step: 0.01 33 | STRIPES_ALPHA: 34 | type: number 35 | label: Amount 36 | range: 37 | min: 0. 38 | max: 1. 39 | step: 0.01 40 | STRIPES_ANGLE: 41 | type: number 42 | label: Angle (radiants) 43 | range: 44 | min: 0. 45 | max: 3.1415 46 | step: 0.1 47 | base: polygons 48 | mix: [patterns-stripes, space-tile] 49 | shaders: 50 | defines: 51 | STRIPES_WIDTH: .5 52 | STRIPES_ALPHA: .5 53 | STRIPES_SCALE: 2. 54 | STRIPES_ANGLE: PI*0.25 55 | blocks: 56 | color: | 57 | color.a = stripes( getTileCoords()*STRIPES_SCALE, 58 | STRIPES_WIDTH, 59 | STRIPES_ANGLE)*STRIPES_ALPHA; -------------------------------------------------------------------------------- /polygons/windows.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - ../geometry/normal.yaml 3 | - ../generative/random.yaml 4 | 5 | styles: 6 | polygons-windows: 7 | doc: 8 | author: 9 | name: Patricio Gonzalez Vivo 10 | twitter: patriciogv 11 | version: 0.0.1 12 | tangram-version: 0.0.7 13 | licence: MIT 14 | description: | 15 | Apply a windows patterns on the walls of a geometry 16 | examples: 17 | gotham: 18 | url: https://tangrams.github.io/tangram-sandbox/styles/gotham.yaml 19 | img: https://tangrams.github.io/tangram-sandbox/styles/gotham.png 20 | lines: 128 21 | texcoords: true 22 | base: polygons 23 | mix: [geometry-normal, generative-random] 24 | material: 25 | shininess: 1. 26 | specular: 0.0 27 | emission: 0.0 28 | shaders: 29 | blocks: 30 | color: | 31 | color.rgb *= vec3(min((worldPosition().z*.001 + .5),1.)); 32 | float t = 0.5; 33 | if (isWall()) { 34 | vec2 st = vec2(v_texcoord.x*10.,worldPosition().z*0.2); 35 | vec2 ipos = floor(st); 36 | vec2 fpos = fract(st); 37 | if ( step(0.6,fpos.x)*step(0.4,fpos.y) > 0.0 ){ 38 | material.specular = vec4(1.) * max( 1.-(worldPosition().z*.001 + .5), 0. ); 39 | material.emission = vec4(0.988,0.983,0.880,1.0) * step(.5,random(ipos+floor(worldNormal().xy*10.0)+t)); 40 | } 41 | } 42 | filter: | 43 | color.rgb += vec3(1.)* min( 1.-(worldPosition().z*.001 + .7) , 0.5 ); -------------------------------------------------------------------------------- /shapes/simplex-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | shapes-simplex: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | description: 'Collection of functions to draw shapes using a simplex grid. 8 | To learn more about simplex grids check [this chapter about noise 9 | from the Book of Shaders](https://thebookofshaders.com/11/) 10 | 11 | ' 12 | licence: MIT 13 | tangram-version: 0.0.7 14 | version: 0.0.1 15 | shaders: 16 | blocks: 17 | global: "// Shapes to make on simplex grid\n//\nfloat warp (vec3 S)\ 18 | \ {\n return dot(S.xy,S.yx);\n}\n\nfloat circle (vec3 S) {\n\ 19 | \ return dot(S,S);\n}\n\nfloat triangle (vec3 S) {\n S -=\ 20 | \ 1.04;\n return abs(min(dot(S.zz,S.yy),min(dot(S.zz,S.xx),dot(S.xx,S.yy))));\n\ 21 | }\n\nvec3 star (vec3 S) {\n S += max(dot(S.xxx,S.zzz),max(dot(S.yyy,S.xxx),dot(S.yyy,S.zzz)));\n\ 22 | \ return S;\n}\n\nvec3 sakura (vec3 S) {\n return S + min(dot(S.xxx,S.zzz),min(dot(S.yyy,S.xxx),dot(S.yyy,S.zzz)));\n\ 23 | }\n\nfloat lotus (vec3 S, float petals_size, float roundness)\ 24 | \ {\n S = 1.-(S)*petals_size; // above 1.\n S = pow(S,vec3(roundness));\n\ 25 | \ S = max(star(S),sakura(S));\n return 1.0-fract(triangle(S));\n\ 26 | }" 27 | -------------------------------------------------------------------------------- /shapes/simplex.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | shapes-simplex: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | Collection of functions to draw shapes using a simplex grid. To learn more about simplex grids check [this chapter about noise from the Book of Shaders](https://thebookofshaders.com/11/) 12 | shaders: 13 | blocks: 14 | global: | 15 | // Shapes to make on simplex grid 16 | // 17 | float warp (vec3 S) { 18 | return dot(S.xy,S.yx); 19 | } 20 | 21 | float circle (vec3 S) { 22 | return dot(S,S); 23 | } 24 | 25 | float triangle (vec3 S) { 26 | S -= 1.04; 27 | return abs(min(dot(S.zz,S.yy),min(dot(S.zz,S.xx),dot(S.xx,S.yy)))); 28 | } 29 | 30 | vec3 star (vec3 S) { 31 | S += max(dot(S.xxx,S.zzz),max(dot(S.yyy,S.xxx),dot(S.yyy,S.zzz))); 32 | return S; 33 | } 34 | 35 | vec3 sakura (vec3 S) { 36 | return S + min(dot(S.xxx,S.zzz),min(dot(S.yyy,S.xxx),dot(S.yyy,S.zzz))); 37 | } 38 | 39 | float lotus (vec3 S, float petals_size, float roundness) { 40 | S = 1.-(S)*petals_size; // above 1. 41 | S = pow(S,vec3(roundness)); 42 | S = max(star(S),sakura(S)); 43 | return 1.0-fract(triangle(S)); 44 | } -------------------------------------------------------------------------------- /shapes/test/circle-circle.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | #define STROKE 0.15 16 | 17 | varying vec2 v_texcoord; 18 | 19 | 20 | // AntiAliased Step function 21 | //============================= 22 | float aastep(float threshold, float value) { 23 | #ifdef TANGRAM_FRAGMENT_SHADER 24 | #ifdef TANGRAM_EXTENSION_OES_standard_derivatives 25 | float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757; 26 | return smoothstep(threshold-afwidth, threshold+afwidth, value); 27 | #else 28 | return step(threshold, value); 29 | #endif 30 | #else 31 | return step(threshold, value); 32 | #endif 33 | } 34 | float fill (in float size, in float x) { 35 | return 1.-aastep(size, x); 36 | } 37 | 38 | float stroke (in float size, in float x) { 39 | return aastep(size, x+STROKE) - aastep(size, x); 40 | } 41 | // get distance field of a Circle 42 | // ================================ 43 | float circleDF (vec2 st) { 44 | return dot(st,st)*3.03; 45 | } 46 | // 47 | // Draw a circle in the middle of the ST space 48 | // ================================ 49 | float circle (vec2 st, float radius) { 50 | return fill(radius, circleDF(st-vec2(0.5))); 51 | } 52 | 53 | // 54 | // Draw a circle in the middle of the ST space 55 | // ================================ 56 | float circleBorder (vec2 st, float radius) { 57 | return stroke(radius, circleDF(st-vec2(0.5))); 58 | } 59 | void main() { 60 | vec3 normal = vec3(0.,0.,1.); 61 | vec4 color = vec4(0.,0.,0.,1.); 62 | 63 | 64 | color.rgb += circle(v_texcoord.xy,.5); 65 | 66 | gl_FragColor = color; 67 | } -------------------------------------------------------------------------------- /shapes/test/circle-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/shapes/test/circle-circle.png -------------------------------------------------------------------------------- /shapes/test/circle-circleBorder.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | #define STROKE 0.15 16 | 17 | varying vec2 v_texcoord; 18 | 19 | 20 | // AntiAliased Step function 21 | //============================= 22 | float aastep(float threshold, float value) { 23 | #ifdef TANGRAM_FRAGMENT_SHADER 24 | #ifdef TANGRAM_EXTENSION_OES_standard_derivatives 25 | float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757; 26 | return smoothstep(threshold-afwidth, threshold+afwidth, value); 27 | #else 28 | return step(threshold, value); 29 | #endif 30 | #else 31 | return step(threshold, value); 32 | #endif 33 | } 34 | float fill (in float size, in float x) { 35 | return 1.-aastep(size, x); 36 | } 37 | 38 | float stroke (in float size, in float x) { 39 | return aastep(size, x+STROKE) - aastep(size, x); 40 | } 41 | // get distance field of a Circle 42 | // ================================ 43 | float circleDF (vec2 st) { 44 | return dot(st,st)*3.03; 45 | } 46 | // 47 | // Draw a circle in the middle of the ST space 48 | // ================================ 49 | float circle (vec2 st, float radius) { 50 | return fill(radius, circleDF(st-vec2(0.5))); 51 | } 52 | 53 | // 54 | // Draw a circle in the middle of the ST space 55 | // ================================ 56 | float circleBorder (vec2 st, float radius) { 57 | return stroke(radius, circleDF(st-vec2(0.5))); 58 | } 59 | void main() { 60 | vec3 normal = vec3(0.,0.,1.); 61 | vec4 color = vec4(0.,0.,0.,1.); 62 | 63 | 64 | color.rgb += circleBorder(v_texcoord.xy,.5); 65 | 66 | gl_FragColor = color; 67 | } -------------------------------------------------------------------------------- /shapes/test/circle-circleBorder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/shapes/test/circle-circleBorder.png -------------------------------------------------------------------------------- /shapes/test/circle-circleDF.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | #define STROKE 0.15 16 | 17 | varying vec2 v_texcoord; 18 | 19 | 20 | // AntiAliased Step function 21 | //============================= 22 | float aastep(float threshold, float value) { 23 | #ifdef TANGRAM_FRAGMENT_SHADER 24 | #ifdef TANGRAM_EXTENSION_OES_standard_derivatives 25 | float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757; 26 | return smoothstep(threshold-afwidth, threshold+afwidth, value); 27 | #else 28 | return step(threshold, value); 29 | #endif 30 | #else 31 | return step(threshold, value); 32 | #endif 33 | } 34 | float fill (in float size, in float x) { 35 | return 1.-aastep(size, x); 36 | } 37 | 38 | float stroke (in float size, in float x) { 39 | return aastep(size, x+STROKE) - aastep(size, x); 40 | } 41 | // get distance field of a Circle 42 | // ================================ 43 | float circleDF (vec2 st) { 44 | return dot(st,st)*3.03; 45 | } 46 | // 47 | // Draw a circle in the middle of the ST space 48 | // ================================ 49 | float circle (vec2 st, float radius) { 50 | return fill(radius, circleDF(st-vec2(0.5))); 51 | } 52 | 53 | // 54 | // Draw a circle in the middle of the ST space 55 | // ================================ 56 | float circleBorder (vec2 st, float radius) { 57 | return stroke(radius, circleDF(st-vec2(0.5))); 58 | } 59 | void main() { 60 | vec3 normal = vec3(0.,0.,1.); 61 | vec4 color = vec4(0.,0.,0.,1.); 62 | 63 | 64 | color.rgb += circleDF(v_texcoord.xy-.5); 65 | 66 | gl_FragColor = color; 67 | } -------------------------------------------------------------------------------- /shapes/test/circle-circleDF.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/shapes/test/circle-circleDF.png -------------------------------------------------------------------------------- /shapes/test/polygons-shape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/shapes/test/polygons-shape.png -------------------------------------------------------------------------------- /shapes/test/polygons-shapeBorder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/shapes/test/polygons-shapeBorder.png -------------------------------------------------------------------------------- /shapes/test/polygons-shapeDF.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/shapes/test/polygons-shapeDF.png -------------------------------------------------------------------------------- /shapes/test/rect-rect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/shapes/test/rect-rect.png -------------------------------------------------------------------------------- /shapes/test/rect-rectBorder_rnd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/shapes/test/rect-rectBorder_rnd.png -------------------------------------------------------------------------------- /shapes/test/rect-rectDF.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/shapes/test/rect-rectDF.png -------------------------------------------------------------------------------- /shapes/test/rect-rect_rnd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/shapes/test/rect-rect_rnd.png -------------------------------------------------------------------------------- /shapes/test/shapes-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/shapes/test/shapes-circle.png -------------------------------------------------------------------------------- /shapes/test/shapes-polygons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/shapes/test/shapes-polygons.png -------------------------------------------------------------------------------- /shapes/test/shapes-rect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/shapes/test/shapes-rect.png -------------------------------------------------------------------------------- /shapes/type.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - ../functions/aastep.yaml 3 | 4 | styles: 5 | shapes-type: 6 | doc: 7 | author: 8 | name: Patricio Gonzalez Vivo 9 | twitter: patriciogv 10 | version: 0.0.1 11 | tangram-version: 0.0.7 12 | licence: MIT 13 | description: | 14 | This block provides to functions `fill` and `stroke`. Each one transform a SDF to a fill shape or a stroke shape (border). The stroke width can be control with the define `STROKE`. 15 | To learn more about how to make shapes on shaders go to From check [this chapter about shapes from the Book of Shaders](https://thebookofshaders.com/07/) 16 | mix: [functions-aastep] 17 | shaders: 18 | defines: 19 | STROKE: 0.15 20 | blocks: 21 | global: | 22 | float fill (in float size, in float x) { 23 | return 1.-aastep(size, x); 24 | } 25 | 26 | float stroke (in float size, in float x) { 27 | return aastep(size, x+STROKE*.5) - aastep(size, x-STROKE*.5); 28 | } -------------------------------------------------------------------------------- /source-elevation.yaml: -------------------------------------------------------------------------------- 1 | # Patricio Gonzalez Vivo - 2016 2 | 3 | sources: 4 | normals-elevation: 5 | type: Raster 6 | url: https://tile.nextzen.org/tilezen/terrain/v1/512/normal/{z}/{x}/{y}.png 7 | max_zoom: 14 8 | tile_size: 512 9 | url_params: 10 | api_key: NaqqS33fTUmyQcvbuIUCKA 11 | -------------------------------------------------------------------------------- /space/constant-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | space-constant: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | description: 'Get the constant coordinates **(warning: could glitch on 8 | zooms)** 9 | 10 | ' 11 | examples: 12 | grain-area: 13 | img: https://tangrams.github.io/tangram-sandbox/styles/grain-area.png 14 | lines: 26 15 | url: https://tangrams.github.io/tangram-sandbox/styles/grain-area.yaml 16 | licence: MIT 17 | tangram-version: 0.0.7 18 | version: 0.0.1 19 | shaders: 20 | blocks: 21 | global: "vec2 getConstantCoords () {\n #ifdef TANGRAM_FRAGMENT_SHADER\n\ 22 | \ const float pixel_scale = 695.;\n float meter_pixels =\ 23 | \ u_meters_per_pixel / u_device_pixel_ratio;\n vec2 st = gl_FragCoord.xy/pixel_scale;\n\ 24 | \ const float dot_wrap = 1000.;\n st += mod(u_map_position.xy\ 25 | \ / meter_pixels, dot_wrap)/pixel_scale;\n return st;\n \ 26 | \ #else\n return vec2(0.0,0.0);\n #endif\n}" 27 | test: 28 | constant: 29 | blocks: 30 | color: 'vec2 st = getConstantCoords(); 31 | 32 | color.rg += fract(st*3.); 33 | 34 | ' 35 | -------------------------------------------------------------------------------- /space/constant.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | space-constant: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | Get the constant coordinates **(warning: could glitch on zooms)** 12 | examples: 13 | grain-area: 14 | url: https://tangrams.github.io/tangram-sandbox/styles/grain-area.yaml 15 | img: https://tangrams.github.io/tangram-sandbox/styles/grain-area.png 16 | lines: 26 17 | test: 18 | constant: 19 | blocks: 20 | color: | 21 | vec2 st = getConstantCoords(); 22 | color.rg += fract(st*3.); 23 | 24 | shaders: 25 | blocks: 26 | global: | 27 | vec2 getConstantCoords () { 28 | #ifdef TANGRAM_FRAGMENT_SHADER 29 | const float pixel_scale = 695.; 30 | float meter_pixels = u_meters_per_pixel / u_device_pixel_ratio; 31 | vec2 st = gl_FragCoord.xy/pixel_scale; 32 | const float dot_wrap = 1000.; 33 | st += mod(u_map_position.xy / meter_pixels, dot_wrap)/pixel_scale; 34 | return st; 35 | #else 36 | return vec2(0.0,0.0); 37 | #endif 38 | } -------------------------------------------------------------------------------- /space/screen-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | space-screen: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | description: 'Get the coordinates in screen space streaching the proportion 8 | (''vec2 getScreenCoords ()'') or non-streatching the proportion (''getScreenNonStretchCoords 9 | ()'') 10 | 11 | ' 12 | examples: 13 | press: 14 | img: https://tangrams.github.io/tangram-sandbox/styles/press.png 15 | lines: 136-145 16 | url: https://tangrams.github.io/tangram-sandbox/styles/press.yaml 17 | radar: 18 | img: https://tangrams.github.io/tangram-sandbox/styles/radar.png 19 | lines: 0-143 20 | url: https://tangrams.github.io/tangram-sandbox/styles/radar.yaml 21 | licence: MIT 22 | tangram-version: 0.0.7 23 | version: 0.0.1 24 | shaders: 25 | blocks: 26 | global: "#ifdef TANGRAM_FRAGMENT_SHADER\nvec2 getScreenCoords () {\n\ 27 | \ return gl_FragCoord.xy / u_resolution.xy;\n}\n\nvec2 getScreenNonStretchCoords\ 28 | \ () {\n vec2 st = getScreenCoords();\n if (u_resolution.y\ 29 | \ > u_resolution.x ) {\n st.y *= u_resolution.y/u_resolution.x;\n\ 30 | \ st.y -= (u_resolution.y*.5-u_resolution.x*.5)/u_resolution.x;\n\ 31 | \ } else {\n st.x *= u_resolution.x/u_resolution.y;\n\ 32 | \ st.x -= (u_resolution.x*.5-u_resolution.y*.5)/u_resolution.y;\n\ 33 | \ } \n return st;\n}\n#endif" 34 | test: 35 | screen: 36 | blocks: 37 | color: 'vec2 st = getScreenCoords(); 38 | 39 | color.rg += fract(st*3.); 40 | 41 | ' 42 | screen_nonstretch: 43 | blocks: 44 | color: 'vec2 st = getScreenNonStretchCoords(); 45 | 46 | color.rg += fract(st*3.); 47 | 48 | ' 49 | -------------------------------------------------------------------------------- /space/test/constant-constant.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | varying vec2 v_texcoord; 16 | 17 | 18 | vec2 getConstantCoords () { 19 | #ifdef TANGRAM_FRAGMENT_SHADER 20 | const float pixel_scale = 695.; 21 | float meter_pixels = u_meters_per_pixel / u_device_pixel_ratio; 22 | vec2 st = gl_FragCoord.xy/pixel_scale; 23 | const float dot_wrap = 1000.; 24 | st += mod(u_map_position.xy / meter_pixels, dot_wrap)/pixel_scale; 25 | return st; 26 | #else 27 | return vec2(0.0,0.0); 28 | #endif 29 | } 30 | void main() { 31 | vec3 normal = vec3(0.,0.,1.); 32 | vec4 color = vec4(0.,0.,0.,1.); 33 | 34 | 35 | vec2 st = getConstantCoords(); 36 | color.rg += fract(st*3.); 37 | 38 | 39 | gl_FragColor = color; 40 | } -------------------------------------------------------------------------------- /space/test/constant-constant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/space/test/constant-constant.png -------------------------------------------------------------------------------- /space/test/screen-screen.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | varying vec2 v_texcoord; 16 | 17 | 18 | #ifdef TANGRAM_FRAGMENT_SHADER 19 | vec2 getScreenCoords () { 20 | return gl_FragCoord.xy / u_resolution.xy; 21 | } 22 | 23 | vec2 getScreenNonStretchCoords () { 24 | vec2 st = getScreenCoords(); 25 | if (u_resolution.y > u_resolution.x ) { 26 | st.y *= u_resolution.y/u_resolution.x; 27 | st.y -= (u_resolution.y*.5-u_resolution.x*.5)/u_resolution.x; 28 | } else { 29 | st.x *= u_resolution.x/u_resolution.y; 30 | st.x -= (u_resolution.x*.5-u_resolution.y*.5)/u_resolution.y; 31 | } 32 | return st; 33 | } 34 | #endif 35 | void main() { 36 | vec3 normal = vec3(0.,0.,1.); 37 | vec4 color = vec4(0.,0.,0.,1.); 38 | 39 | 40 | vec2 st = getScreenCoords(); 41 | color.rg += fract(st*3.); 42 | 43 | 44 | gl_FragColor = color; 45 | } -------------------------------------------------------------------------------- /space/test/screen-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/space/test/screen-screen.png -------------------------------------------------------------------------------- /space/test/screen-screen_nonstretch.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | varying vec2 v_texcoord; 16 | 17 | 18 | #ifdef TANGRAM_FRAGMENT_SHADER 19 | vec2 getScreenCoords () { 20 | return gl_FragCoord.xy / u_resolution.xy; 21 | } 22 | 23 | vec2 getScreenNonStretchCoords () { 24 | vec2 st = getScreenCoords(); 25 | if (u_resolution.y > u_resolution.x ) { 26 | st.y *= u_resolution.y/u_resolution.x; 27 | st.y -= (u_resolution.y*.5-u_resolution.x*.5)/u_resolution.x; 28 | } else { 29 | st.x *= u_resolution.x/u_resolution.y; 30 | st.x -= (u_resolution.x*.5-u_resolution.y*.5)/u_resolution.y; 31 | } 32 | return st; 33 | } 34 | #endif 35 | void main() { 36 | vec3 normal = vec3(0.,0.,1.); 37 | vec4 color = vec4(0.,0.,0.,1.); 38 | 39 | 40 | vec2 st = getScreenNonStretchCoords(); 41 | color.rg += fract(st*3.); 42 | 43 | 44 | gl_FragColor = color; 45 | } -------------------------------------------------------------------------------- /space/test/screen-screen_nonstretch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/space/test/screen-screen_nonstretch.png -------------------------------------------------------------------------------- /space/test/space-constant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/space/test/space-constant.png -------------------------------------------------------------------------------- /space/test/space-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/space/test/space-screen.png -------------------------------------------------------------------------------- /space/test/space-tex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/space/test/space-tex.png -------------------------------------------------------------------------------- /space/test/space-tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/space/test/space-tile.png -------------------------------------------------------------------------------- /space/test/tex-tex.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | varying vec2 v_texcoord; 16 | 17 | 18 | vec2 getTexCoords () { 19 | return v_texcoord.xy; 20 | } 21 | void main() { 22 | vec3 normal = vec3(0.,0.,1.); 23 | vec4 color = vec4(0.,0.,0.,1.); 24 | 25 | 26 | vec2 st = getTexCoords(); 27 | color.rg += fract(st*3.); 28 | 29 | 30 | gl_FragColor = color; 31 | } -------------------------------------------------------------------------------- /space/test/tex-tex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/space/test/tex-tex.png -------------------------------------------------------------------------------- /space/test/tile-tile.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | #define v_pos v_texcoord 16 | 17 | varying vec2 v_texcoord; 18 | 19 | 20 | // Variant to be add to both vertex and fragments shaders 21 | #ifndef v_pos 22 | varying vec3 v_pos; 23 | #endif 24 | 25 | // 26 | // Get the coordinates in tile space 27 | // ================================ 28 | vec2 getTileCoords() { 29 | return fract(v_pos.xy); 30 | } 31 | 32 | void main() { 33 | vec3 normal = vec3(0.,0.,1.); 34 | vec4 color = vec4(0.,0.,0.,1.); 35 | 36 | 37 | vec2 st = getTileCoords(); 38 | color.rg += fract(st*3.); 39 | 40 | 41 | gl_FragColor = color; 42 | } -------------------------------------------------------------------------------- /space/test/tile-tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/space/test/tile-tile.png -------------------------------------------------------------------------------- /space/tex-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | space-tex: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | description: 'Get the position on TexCoords 8 | 9 | ' 10 | licence: MIT 11 | tangram-version: 0.0.7 12 | version: 0.0.1 13 | shaders: 14 | blocks: 15 | global: "vec2 getTexCoords () {\n return v_texcoord.xy;\n}" 16 | test: 17 | tex: 18 | blocks: 19 | color: 'vec2 st = getTexCoords(); 20 | 21 | color.rg += fract(st*3.); 22 | 23 | ' 24 | texcoords: true 25 | -------------------------------------------------------------------------------- /space/tex.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | space-tex: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | Get the position on TexCoords 12 | test: 13 | tex: 14 | blocks: 15 | color: | 16 | vec2 st = getTexCoords(); 17 | color.rg += fract(st*3.); 18 | texcoords: true 19 | shaders: 20 | blocks: 21 | global: | 22 | vec2 getTexCoords () { 23 | return v_texcoord.xy; 24 | } -------------------------------------------------------------------------------- /space/tile-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | space-tile: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | description: 'Get the position on the tile 8 | 9 | ' 10 | licence: MIT 11 | tangram-version: 0.0.7 12 | version: 0.0.1 13 | shaders: 14 | blocks: 15 | global: "// Variant to be add to both vertex and fragments shaders\n\ 16 | #ifndef v_pos\nvarying vec3 v_pos;\n#endif\n\n//\n// Get the coordinates\ 17 | \ in tile space\n// ================================\nvec2 getTileCoords()\ 18 | \ {\n return fract(v_pos.xy);\n}\n" 19 | position: '// Normalize the attribute position of a vertex 20 | 21 | v_pos = modelPosition().xyz;' 22 | test: 23 | tile: 24 | blocks: 25 | color: 'vec2 st = getTileCoords(); 26 | 27 | color.rg += fract(st*3.); 28 | 29 | ' 30 | defines: 31 | v_pos: v_texcoord 32 | -------------------------------------------------------------------------------- /space/tile.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | space-tile: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | Get the position on the tile 12 | test: 13 | tile: 14 | defines: 15 | v_pos: 'v_texcoord' 16 | blocks: 17 | color: | 18 | vec2 st = getTileCoords(); 19 | color.rg += fract(st*3.); 20 | shaders: 21 | blocks: 22 | global: | 23 | // Variant to be add to both vertex and fragments shaders 24 | #ifndef v_pos 25 | varying vec3 v_pos; 26 | #endif 27 | 28 | // 29 | // Get the coordinates in tile space 30 | // ================================ 31 | vec2 getTileCoords() { 32 | return fract(v_pos.xy); 33 | } 34 | 35 | position: | 36 | // Normalize the attribute position of a vertex 37 | v_pos = modelPosition().xyz; -------------------------------------------------------------------------------- /space/uz-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | space-uz: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | description: 'Get the position on UZ from the TexCoords (on `x`) and the 8 | `z` of the World Position 9 | 10 | ' 11 | licence: MIT 12 | tangram-version: 0.0.7 13 | version: 0.0.1 14 | shaders: 15 | blocks: 16 | global: "vec2 getUZCoords () {\n return vec2(v_texcoord.x*10.,worldPosition().z*0.2);\n\ 17 | }" 18 | texcoords: true 19 | -------------------------------------------------------------------------------- /space/uz.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | space-uz: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | Get the position on UZ from the TexCoords (on `x`) and the `z` of the World Position 12 | texcoords: true 13 | shaders: 14 | blocks: 15 | global: | 16 | vec2 getUZCoords () { 17 | return vec2(v_texcoord.x*10.,worldPosition().z*0.2); 18 | } -------------------------------------------------------------------------------- /terrain/base.yaml: -------------------------------------------------------------------------------- 1 | # Patricio Gonzalez Vivo (@patriciogv) - 2016 2 | 3 | import: 4 | - ../geometry/tilt.yaml 5 | - geometry.yaml 6 | 7 | styles: 8 | terrain-base: 9 | doc: 10 | author: 11 | name: Patricio Gonzalez Vivo 12 | twitter: patriciogv 13 | version: 0.0.1 14 | tangram-version: 0.0.7 15 | licence: MIT 16 | mix: [terrain-geometry, geometry-tilt] 17 | -------------------------------------------------------------------------------- /terrain/geometry-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | terrain-geometry: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | licence: MIT 8 | tangram-version: 0.0.7 9 | version: 0.0.1 10 | raster: custom 11 | shaders: 12 | blocks: 13 | global: "#ifdef TANGRAM_VERTEX_SHADER\nuniform sampler2D u_rasters[TANGRAM_NUM_RASTER_SOURCES];\n\ 14 | uniform vec2 u_raster_sizes[TANGRAM_NUM_RASTER_SOURCES];\nuniform\ 15 | \ vec3 u_raster_offsets[TANGRAM_NUM_RASTER_SOURCES];\n#define\ 16 | \ adjustRasterUV(raster_index, uv) ((uv) * u_raster_offsets[raster_index].z\ 17 | \ + u_raster_offsets[raster_index].xy)\n#define currentRasterUV(raster_index)\ 18 | \ (adjustRasterUV(raster_index, v_modelpos_base_zoom.xy))\n#define\ 19 | \ currentRasterPixel(raster_index) (currentRasterUV(raster_index)\ 20 | \ * rasterPixelSize(raster_index))\n#define sampleRaster(raster_index)\ 21 | \ (texture2D(u_rasters[raster_index], currentRasterUV(raster_index)))\n\ 22 | #define sampleRasterAtPixel(raster_index, pixel) (texture2D(u_rasters[raster_index],\ 23 | \ adjustRasterUV(raster_index, (pixel) / rasterPixelSize(raster_index))))\n\ 24 | #define rasterPixelSize(raster_index) (u_raster_sizes[raster_index])\n\ 25 | #endif\n\nfloat getHeight() {\n float h = sampleRaster(int(TERRAIN_TEXTURE_INDEX)).a;\n\ 26 | \ if (h != 0.0) {\n return (1.-h)*10000.;\n } else\ 27 | \ {\n return 0.0;\n }\n}\n" 28 | position: 'position.z += TERRAIN_ZOFFSET*u_meters_per_pixel; 29 | 30 | position.z += getHeight();' 31 | defines: 32 | TERRAIN_TEXTURE_INDEX: 0 33 | TERRAIN_ZOFFSET: 0.0 34 | -------------------------------------------------------------------------------- /terrain/geometry.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | terrain-geometry: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | raster: custom 11 | shaders: 12 | defines: 13 | TERRAIN_TEXTURE_INDEX: 0 14 | TERRAIN_ZOFFSET: 0. 15 | blocks: 16 | global: | 17 | #ifdef TANGRAM_VERTEX_SHADER 18 | uniform sampler2D u_rasters[TANGRAM_NUM_RASTER_SOURCES]; 19 | uniform vec2 u_raster_sizes[TANGRAM_NUM_RASTER_SOURCES]; 20 | uniform vec3 u_raster_offsets[TANGRAM_NUM_RASTER_SOURCES]; 21 | #define adjustRasterUV(raster_index, uv) ((uv) * u_raster_offsets[raster_index].z + u_raster_offsets[raster_index].xy) 22 | #define currentRasterUV(raster_index) (adjustRasterUV(raster_index, v_modelpos_base_zoom.xy)) 23 | #define currentRasterPixel(raster_index) (currentRasterUV(raster_index) * rasterPixelSize(raster_index)) 24 | #define sampleRaster(raster_index) (texture2D(u_rasters[raster_index], currentRasterUV(raster_index))) 25 | #define sampleRasterAtPixel(raster_index, pixel) (texture2D(u_rasters[raster_index], adjustRasterUV(raster_index, (pixel) / rasterPixelSize(raster_index)))) 26 | #define rasterPixelSize(raster_index) (u_raster_sizes[raster_index]) 27 | #endif 28 | 29 | float getHeight() { 30 | float h = sampleRaster(int(TERRAIN_TEXTURE_INDEX)).a; 31 | if (h != 0.0) { 32 | return (1.-h)*10000.; 33 | } else { 34 | return 0.0; 35 | } 36 | } 37 | position: | 38 | position.z += TERRAIN_ZOFFSET*u_meters_per_pixel; 39 | position.z += getHeight(); -------------------------------------------------------------------------------- /terrain/lines.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - base.yaml 3 | 4 | styles: 5 | terrain-lines: 6 | doc: 7 | author: 8 | name: Patricio Gonzalez Vivo 9 | twitter: patriciogv 10 | version: 0.0.1 11 | tangram-version: 0.0.7 12 | licence: MIT 13 | base: lines 14 | mix: [terrain-base] 15 | shaders: 16 | defines: 17 | TERRAIN_ZOFFSET: 1.5 -------------------------------------------------------------------------------- /terrain/polygons.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - base.yaml 3 | 4 | styles: 5 | terrain-polygons: 6 | doc: 7 | author: 8 | name: Patricio Gonzalez Vivo 9 | twitter: patriciogv 10 | version: 0.0.1 11 | tangram-version: 0.0.7 12 | licence: MIT 13 | base: polygons 14 | mix: [terrain-base] 15 | shaders: 16 | defines: 17 | TERRAIN_ZOFFSET: 1.0 -------------------------------------------------------------------------------- /terrain/terrain.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - base.yaml 3 | 4 | styles: 5 | terrain-terrain: 6 | doc: 7 | author: 8 | name: Patricio Gonzalez Vivo 9 | twitter: patriciogv 10 | version: 0.0.1 11 | tangram-version: 0.0.7 12 | licence: MIT 13 | base: polygons 14 | mix: [elevation-normal, terrain-base] -------------------------------------------------------------------------------- /test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/test.jpg -------------------------------------------------------------------------------- /texture/non-repetitive.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - ../generative/random.yaml 3 | 4 | styles: 5 | texture-non-repetitive: 6 | doc: 7 | author: 8 | name: Patricio Gonzalez Vivo 9 | twitter: patriciogv 10 | version: 0.0.1 11 | tangram-version: 0.0.7 12 | licence: MIT 13 | test: 14 | repete_texture: 15 | uniforms: { u_tex0: "http://tangrams.github.io/tangram-sandbox/styles/imgs/hatch_1.png" } 16 | blocks: 17 | color: | 18 | color.rgb = vec3(1.); 19 | color.rgb -= NonRepetitiveTexture(u_tex0, v_texcoord.xy*10., 1.).a; 20 | 21 | mix: [generative-random] 22 | shaders: 23 | blocks: 24 | global: | 25 | vec4 NonRepetitiveTexture (sampler2D tex, vec2 xy, float v) { 26 | vec2 p = floor(xy); 27 | vec2 f = fract(xy); 28 | vec4 va = vec4(0.0); 29 | float wt = 0.0; 30 | for (int j=-1; j<=1; j++) { 31 | for (int i=-1; i<=1; i++ ) { 32 | vec2 g = vec2( float(i),float(j) ); 33 | vec3 o = random3( p + g ); 34 | vec2 r = g - f + o.xy; 35 | float d = dot(r,r); 36 | float w = pow( 1.0 - smoothstep(0.0,2.0,dot(d,d)), 1.0 + 16.0*v ); 37 | vec4 c = texture2D(tex, fract(.2*xy + v*o.zy) ); 38 | va += w*c; 39 | wt += w; 40 | } 41 | } 42 | return va/wt; 43 | } -------------------------------------------------------------------------------- /texture/test/non-repetitive-repete_texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/texture/test/non-repetitive-repete_texture.png -------------------------------------------------------------------------------- /texture/test/texture-non-repetitive.json: -------------------------------------------------------------------------------- 1 | {"texture-non-repetitive": {"repete_texture": {"test": {"uniforms": {"u_tex0": "http://tangrams.github.io/tangram-sandbox/styles/imgs/hatch_1.png"}, "blocks": {"color": "color.rgb = vec3(1.);\ncolor.rgb -= NonRepetitiveTexture(u_tex0, v_texcoord.xy*10., 1.).a;\n"}}, "data": [{"sec": 1.000495195388794, "val": 0.08013}, {"sec": 1.0093040466308594, "val": 0.08011}, {"sec": 1.08964204788208, "val": 0.080445}, {"sec": 1.170220136642456, "val": 0.080419}, {"sec": 1.2502810955047607, "val": 0.080066}, {"sec": 1.3305540084838867, "val": 0.080398}, {"sec": 1.4117000102996826, "val": 0.081131}, {"sec": 1.4929051399230957, "val": 0.081116}, {"sec": 1.5738921165466309, "val": 0.080987}, {"sec": 1.654926061630249, "val": 0.080965}, {"sec": 1.7361011505126953, "val": 0.081384}, {"sec": 1.8165841102600098, "val": 0.080329}, {"sec": 1.8965051174163818, "val": 0.080057}, {"sec": 1.9768741130828857, "val": 0.080324}], "output": "./texture/test/non-repetitive-repete_texture.png", "median": 0.080419000000000004, "mean": 0.080586265669334814}}} -------------------------------------------------------------------------------- /texture/test/texture-non-repetitive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/texture/test/texture-non-repetitive.png -------------------------------------------------------------------------------- /texture/test/texture-zoom-fade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/texture/test/texture-zoom-fade.png -------------------------------------------------------------------------------- /texture/test/zoom-fade-zoom_fade.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | uniform sampler2D u_tex0; // http://tangrams.github.io/tangram-sandbox/styles/imgs/hatch_1.png 15 | 16 | 17 | #define v_pos v_texcoord 18 | 19 | varying vec2 v_texcoord; 20 | 21 | 22 | // Variant to be add to both vertex and fragments shaders 23 | #ifndef v_pos 24 | varying vec3 v_pos; 25 | #endif 26 | 27 | // 28 | // Get the coordinates in tile space 29 | // ================================ 30 | vec2 getTileCoords() { 31 | return fract(v_pos.xy); 32 | } 33 | 34 | vec4 TileTexture (sampler2D tex, float scale) { 35 | vec2 IN = getTileCoords()*scale; 36 | vec2 OUT = getTileCoords()*scale*2.; 37 | return mix(texture2D(tex,fract(IN)), texture2D(tex,fract(OUT)), fract(u_map_position.z)); 38 | } 39 | void main() { 40 | vec3 normal = vec3(0.,0.,1.); 41 | vec4 color = vec4(0.,0.,0.,1.); 42 | 43 | 44 | color.rgb = vec3(1.); 45 | color.rgb -= TileTexture(u_tex0,1.).a; 46 | 47 | 48 | gl_FragColor = color; 49 | } -------------------------------------------------------------------------------- /texture/test/zoom-fade-zoom_fade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/texture/test/zoom-fade-zoom_fade.png -------------------------------------------------------------------------------- /texture/zoom-fade.yaml: -------------------------------------------------------------------------------- 1 | import: 2 | - ../space/tile.yaml 3 | 4 | styles: 5 | texture-zoom-fade: 6 | doc: 7 | author: 8 | name: Patricio Gonzalez Vivo 9 | twitter: patriciogv 10 | version: 0.0.1 11 | tangram-version: 0.0.7 12 | licence: MIT 13 | description: | 14 | Tile a texture across zoom levels by fading between them 15 | examples: 16 | crosshatch: 17 | url: https://tangrams.github.io/tangram-sandbox/styles/crosshatch.yaml 18 | img: https://tangrams.github.io/tangram-sandbox/styles/crosshatch.png 19 | lines: 76 20 | pericoli: 21 | url: https://tangrams.github.io/tangram-sandbox/styles/pericoli.yaml 22 | img: https://tangrams.github.io/tangram-sandbox/styles/pericoli.png 23 | lines: 121 24 | test: 25 | zoom_fade: 26 | defines: 27 | v_pos: "v_texcoord" 28 | uniforms: { u_tex0: "http://tangrams.github.io/tangram-sandbox/styles/imgs/hatch_1.png" } 29 | blocks: 30 | color: | 31 | color.rgb = vec3(1.); 32 | color.rgb -= TileTexture(u_tex0,1.).a; 33 | 34 | mix: space-tile 35 | shaders: 36 | blocks: 37 | global: | 38 | vec4 TileTexture (sampler2D tex, float scale) { 39 | vec2 IN = getTileCoords()*scale; 40 | vec2 OUT = getTileCoords()*scale*2.; 41 | return mix(texture2D(tex,fract(IN)), texture2D(tex,fract(OUT)), fract(u_map_position.z)); 42 | } -------------------------------------------------------------------------------- /tiling/brick-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | tiling-brick: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | description: 'Repeats a coordinate space (`vec2 st`) in diferent brick-like 8 | tiles N times (`float zoom`). For more information about tilling patterns 9 | read [this chapter of The Book of Shaders](https://thebookofshaders.com/09/) 10 | 11 | ' 12 | examples: 13 | nursery: 14 | img: https://tangrams.github.io/tangram-sandbox/styles/nursery.png 15 | lines: 99 16 | url: https://tangrams.github.io/tangram-sandbox/styles/nursery.yaml 17 | patterns: 18 | img: https://tangrams.github.io/tangram-sandbox/styles/patterns.png 19 | lines: 130 20 | url: https://tangrams.github.io/tangram-sandbox/styles/patterns.yaml 21 | licence: MIT 22 | tangram-version: 0.0.7 23 | version: 0.0.1 24 | shaders: 25 | blocks: 26 | global: "vec2 brick (vec2 st, float zoom) {\n st *= zoom;\n \ 27 | \ // Here is where the offset is happening\n st.x += step(1.,\ 28 | \ mod(st.y,2.0)) * 0.5;\n return fract(st);\n}" 29 | test: 30 | brick: 31 | blocks: 32 | color: ' color.rg += brick(v_texcoord.xy,5.);' 33 | -------------------------------------------------------------------------------- /tiling/brick.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | tiling-brick: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | Repeats a coordinate space (`vec2 st`) in diferent brick-like tiles N times (`float zoom`). For more information about tilling patterns read [this chapter of The Book of Shaders](https://thebookofshaders.com/09/) 12 | examples: 13 | nursery: 14 | url: https://tangrams.github.io/tangram-sandbox/styles/nursery.yaml 15 | img: https://tangrams.github.io/tangram-sandbox/styles/nursery.png 16 | lines: 99 17 | patterns: 18 | url: https://tangrams.github.io/tangram-sandbox/styles/patterns.yaml 19 | img: https://tangrams.github.io/tangram-sandbox/styles/patterns.png 20 | lines: 130 21 | test: 22 | brick: { blocks: { color: " color.rg += brick(v_texcoord.xy,5.);" } } 23 | shaders: 24 | blocks: 25 | global: | 26 | vec2 brick (vec2 st, float zoom) { 27 | st *= zoom; 28 | // Here is where the offset is happening 29 | st.x += step(1., mod(st.y,2.0)) * 0.5; 30 | return fract(st); 31 | } -------------------------------------------------------------------------------- /tiling/simplex-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | tiling-simplex: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | description: 'Repeats a coordinate space (`vec2 st`) in diferent simplex 8 | tiles. To learn more about simplex grids check [this chapter about 9 | noise from the Book of Shaders](https://thebookofshaders.com/11/) 10 | 11 | ' 12 | licence: MIT 13 | tangram-version: 0.0.7 14 | version: 0.0.1 15 | shaders: 16 | blocks: 17 | global: "// \n// ================================\nvec2 skew (vec2\ 18 | \ st) {\n st *= 1.733;\n vec2 r = vec2(1.1547*st.x);\n \ 19 | \ r.y = st.y+0.5*r.x;\n return r;\n}\n\nvec3 simplexCoord\ 20 | \ (vec2 st, float td) {\n return 1.0-mix(vec3(st.x,1.0-vec2(st.x-st.y,st.y)),vec3(1.0-vec2(st.x,st.y-st.x),st.y),td);\n\ 21 | }\n\nvec3 simplexGrid (vec2 st) {\n vec3 xyz = vec3(0.0);\n\ 22 | \ \n vec2 p = fract(skew(st));\n if (p.x > p.y) {\n \ 23 | \ xyz.xy = 1.0-vec2(p.x,p.y-p.x);\n xyz.z = p.y;\n\ 24 | \ } else {\n xyz.yz = 1.0-vec2(p.x-p.y,p.y);\n \ 25 | \ xyz.x = p.x;\n }\n \n return fract(xyz);\n}\n\nvec3\ 26 | \ simplexRotatedGrid (vec2 st) {\n vec3 xyz = vec3(0.0);\n\ 27 | \ \n vec2 p = fract(skew(st));\n if (p.x > p.y) {\n \ 28 | \ xyz.xy = 1.-vec2(p.x,p.y-p.x);\n xyz.z = p.y;\n\ 29 | \ } else {\n xyz.zx = 1.-vec2(p.x-p.y,p.y);\n \ 30 | \ xyz.y = p.x;\n }\n \n return fract(xyz);\n}" 31 | test: 32 | rotatedSimplex: 33 | blocks: 34 | color: ' color.rgb += simplexRotatedGrid(v_texcoord.xy*5.);' 35 | simplex: 36 | blocks: 37 | color: ' color.rgb += simplexGrid(v_texcoord.xy*5.);' 38 | -------------------------------------------------------------------------------- /tiling/test/brick-brick.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | varying vec2 v_texcoord; 16 | 17 | 18 | vec2 brick (vec2 st, float zoom) { 19 | st *= zoom; 20 | // Here is where the offset is happening 21 | st.x += step(1., mod(st.y,2.0)) * 0.5; 22 | return fract(st); 23 | } 24 | void main() { 25 | vec3 normal = vec3(0.,0.,1.); 26 | vec4 color = vec4(0.,0.,0.,1.); 27 | 28 | 29 | color.rg += brick(v_texcoord.xy,5.); 30 | 31 | gl_FragColor = color; 32 | } -------------------------------------------------------------------------------- /tiling/test/brick-brick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/tiling/test/brick-brick.png -------------------------------------------------------------------------------- /tiling/test/simplex-rotatedSimplex.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | varying vec2 v_texcoord; 16 | 17 | 18 | // 19 | // ================================ 20 | vec2 skew (vec2 st) { 21 | st *= 1.733; 22 | vec2 r = vec2(1.1547*st.x); 23 | r.y = st.y+0.5*r.x; 24 | return r; 25 | } 26 | 27 | vec3 simplexCoord (vec2 st, float td) { 28 | return 1.0-mix(vec3(st.x,1.0-vec2(st.x-st.y,st.y)),vec3(1.0-vec2(st.x,st.y-st.x),st.y),td); 29 | } 30 | 31 | vec3 simplexGrid (vec2 st) { 32 | vec3 xyz = vec3(0.0); 33 | 34 | vec2 p = fract(skew(st)); 35 | if (p.x > p.y) { 36 | xyz.xy = 1.0-vec2(p.x,p.y-p.x); 37 | xyz.z = p.y; 38 | } else { 39 | xyz.yz = 1.0-vec2(p.x-p.y,p.y); 40 | xyz.x = p.x; 41 | } 42 | 43 | return fract(xyz); 44 | } 45 | 46 | vec3 simplexRotatedGrid (vec2 st) { 47 | vec3 xyz = vec3(0.0); 48 | 49 | vec2 p = fract(skew(st)); 50 | if (p.x > p.y) { 51 | xyz.xy = 1.-vec2(p.x,p.y-p.x); 52 | xyz.z = p.y; 53 | } else { 54 | xyz.zx = 1.-vec2(p.x-p.y,p.y); 55 | xyz.y = p.x; 56 | } 57 | 58 | return fract(xyz); 59 | } 60 | void main() { 61 | vec3 normal = vec3(0.,0.,1.); 62 | vec4 color = vec4(0.,0.,0.,1.); 63 | 64 | 65 | color.rgb += simplexRotatedGrid(v_texcoord.xy*5.); 66 | 67 | gl_FragColor = color; 68 | } -------------------------------------------------------------------------------- /tiling/test/simplex-rotatedSimplex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/tiling/test/simplex-rotatedSimplex.png -------------------------------------------------------------------------------- /tiling/test/simplex-simplex.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | varying vec2 v_texcoord; 16 | 17 | 18 | // 19 | // ================================ 20 | vec2 skew (vec2 st) { 21 | st *= 1.733; 22 | vec2 r = vec2(1.1547*st.x); 23 | r.y = st.y+0.5*r.x; 24 | return r; 25 | } 26 | 27 | vec3 simplexCoord (vec2 st, float td) { 28 | return 1.0-mix(vec3(st.x,1.0-vec2(st.x-st.y,st.y)),vec3(1.0-vec2(st.x,st.y-st.x),st.y),td); 29 | } 30 | 31 | vec3 simplexGrid (vec2 st) { 32 | vec3 xyz = vec3(0.0); 33 | 34 | vec2 p = fract(skew(st)); 35 | if (p.x > p.y) { 36 | xyz.xy = 1.0-vec2(p.x,p.y-p.x); 37 | xyz.z = p.y; 38 | } else { 39 | xyz.yz = 1.0-vec2(p.x-p.y,p.y); 40 | xyz.x = p.x; 41 | } 42 | 43 | return fract(xyz); 44 | } 45 | 46 | vec3 simplexRotatedGrid (vec2 st) { 47 | vec3 xyz = vec3(0.0); 48 | 49 | vec2 p = fract(skew(st)); 50 | if (p.x > p.y) { 51 | xyz.xy = 1.-vec2(p.x,p.y-p.x); 52 | xyz.z = p.y; 53 | } else { 54 | xyz.zx = 1.-vec2(p.x-p.y,p.y); 55 | xyz.y = p.x; 56 | } 57 | 58 | return fract(xyz); 59 | } 60 | void main() { 61 | vec3 normal = vec3(0.,0.,1.); 62 | vec4 color = vec4(0.,0.,0.,1.); 63 | 64 | 65 | color.rgb += simplexGrid(v_texcoord.xy*5.); 66 | 67 | gl_FragColor = color; 68 | } -------------------------------------------------------------------------------- /tiling/test/simplex-simplex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/tiling/test/simplex-simplex.png -------------------------------------------------------------------------------- /tiling/test/tile-tile.frag: -------------------------------------------------------------------------------- 1 | #ifdef GL_ES 2 | precision mediump float; 3 | #endif 4 | 5 | uniform vec2 u_resolution; 6 | uniform float u_time; 7 | 8 | #define u_device_pixel_ratio (1.0) 9 | #define u_meters_per_pixel (1.0) 10 | #define u_map_position vec3((v_texcoord.xy-.5)*5000.,17.5) 11 | #define TANGRAM_FRAGMENT_SHADER 12 | 13 | 14 | 15 | varying vec2 v_texcoord; 16 | 17 | 18 | // Repeats a coordinate space (st) in diferent tiles 19 | // ================================ 20 | vec2 tile (vec2 st, float zoom) { 21 | st *= zoom; 22 | return fract(st); 23 | } 24 | void main() { 25 | vec3 normal = vec3(0.,0.,1.); 26 | vec4 color = vec4(0.,0.,0.,1.); 27 | 28 | 29 | color.rg += tile(v_texcoord.xy,5.); 30 | 31 | gl_FragColor = color; 32 | } -------------------------------------------------------------------------------- /tiling/test/tile-tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/tiling/test/tile-tile.png -------------------------------------------------------------------------------- /tiling/test/tiling-brick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/tiling/test/tiling-brick.png -------------------------------------------------------------------------------- /tiling/test/tiling-simplex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/tiling/test/tiling-simplex.png -------------------------------------------------------------------------------- /tiling/test/tiling-tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/tiling/test/tiling-tile.png -------------------------------------------------------------------------------- /tiling/test/tiling-truchet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/tiling/test/tiling-truchet.png -------------------------------------------------------------------------------- /tiling/test/truchet-mirror.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/tiling/test/truchet-mirror.png -------------------------------------------------------------------------------- /tiling/test/truchet-rotate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tangrams/blocks/c26aa6a5f4e2da7db0ea8a96e69a2d563dce6bf5/tiling/test/truchet-rotate.png -------------------------------------------------------------------------------- /tiling/tile-full.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | tiling-tile: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | description: 'Repeats a coordinate space (`vec2 st`) in diferent brick-like 8 | tiles N times (`float zoom`). For more information about tilling patterns 9 | read [this chapter of The Book of Shaders](https://thebookofshaders.com/09/) 10 | 11 | ' 12 | licence: MIT 13 | tangram-version: 0.0.7 14 | version: 0.0.1 15 | shaders: 16 | blocks: 17 | global: "// Repeats a coordinate space (st) in diferent tiles\n//\ 18 | \ ================================\nvec2 tile (vec2 st, float\ 19 | \ zoom) {\n st *= zoom;\n return fract(st);\n}" 20 | test: 21 | tile: 22 | blocks: 23 | color: ' color.rg += tile(v_texcoord.xy,5.);' 24 | -------------------------------------------------------------------------------- /tiling/tile.yaml: -------------------------------------------------------------------------------- 1 | styles: 2 | tiling-tile: 3 | doc: 4 | author: 5 | name: Patricio Gonzalez Vivo 6 | twitter: patriciogv 7 | version: 0.0.1 8 | tangram-version: 0.0.7 9 | licence: MIT 10 | description: | 11 | Repeats a coordinate space (`vec2 st`) in diferent brick-like tiles N times (`float zoom`). For more information about tilling patterns read [this chapter of The Book of Shaders](https://thebookofshaders.com/09/) 12 | test: 13 | tile: { blocks: { color: " color.rg += tile(v_texcoord.xy,5.);" } } 14 | shaders: 15 | blocks: 16 | global: | 17 | // Repeats a coordinate space (st) in diferent tiles 18 | // ================================ 19 | vec2 tile (vec2 st, float zoom) { 20 | st *= zoom; 21 | return fract(st); 22 | } --------------------------------------------------------------------------------