├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── assets ├── digits.png └── numerify-32x32-exemplar.png ├── docs ├── numerify-4x4-exemplar-scaled-up.png ├── numerify-4x4-exemplar.png └── numerify-4x4-result.png ├── glsl-numerify-demo.js ├── glsl-numerify.js ├── package.json └── scripts └── publish-static-demos.sh /.gitignore: -------------------------------------------------------------------------------- 1 | npm-debug.log 2 | node_modules/* 3 | *.DS_Store 4 | coverage/* 5 | bench/*.html 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | bench/* 2 | example/* 3 | test/* 4 | www/* 5 | bin/* 6 | dist/* 7 | coverage/* 8 | images/* 9 | compare/* 10 | CNAME 11 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | language: node_js 3 | node_js: 4 | - '6.3' 5 | env: 6 | global: 7 | - CXX=g++-4.8 8 | #GH_TOKEN 9 | - secure: >- 10 | U2zxKV1LXkDLmFDwIi3UToLfON4SWSjgxAu4TfLrzJAfTWy96Gpb8UzkT8o/m7kwriTuZD2BeMJsXfn1f5qNFGnl8cyvg0nfEfkXwgpJhNl63Y4UuN6MAUr+dhxNk/cxZLrXkfPc/zQtI5rvRLMziJjRDw0yWcqbiPHTZ5FrwDrLlMBO90jhAaG5BGYLtQNyLEaP43ksD6sPAVWXqhBzJc79EARbyArZBfae2NM090GnqMIqKOilB03qWm/QBSQpJw6OHX3mZDNHzk0RajjWjPku9e6XePporlMvIeiYj74OYt9qs7TnGy5A84ytjL4g85ihC36DXeWu6QXHlzqrFqC/hH+vKsH1vwBWyIsiE4hj+aFA8FLgb5svpOvlBA3/KvGU77WUiPsWlCTlTRcHM6w6SlmSwehpLAaKw0bCxHbB4qP2uhScy6MKLuoDbGxGatmG1rJ0sZBFNLgWQTVmG/4B68iIMpx4QW+oiht0hJzGSxdoKtUWBDZ1YNdsdmf1ouJO8Sezti5Rbc6cK0nf2TxD2t20bEbzM2IPvwVLHaOZTVKolxMTxzh29P9YW2HfouGbIXvGWCy/vSK4NVRj9ycKRyfdnybV3VmCB7pa+IbmTmICji9LRBsJHyrOtqVgJ4w8vO/LNHfTM1fGy3I5fdobq8QUd/rQiTz/O2iTdIA= 11 | 12 | addons: 13 | apt: 14 | sources: 15 | - ubuntu-toolchain-r-test 16 | packages: 17 | - g++-4.8 18 | install: 19 | - npm install --global browserify 20 | - npm install 21 | script: 22 | - npm run mytest 23 | - npm run build 24 | - bash scripts/publish-static-demos.sh 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Azriel Fasten 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all 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, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | glsl-numerify 3 | --- 4 | 5 | 6 | ####Description 7 | 8 | glsl-numerify is a debugging shader generator for WebGL: given a texture, blows it up in size, 9 | displays the pixel values as numbers. 10 | 11 | See `glsl-numerify-demo.js` for usage. 12 | 13 | ####Example results 14 | 15 | ##### **Source texture, 4x4 (then scaled up)**: 16 | ![Example source texture](https://raw.githubusercontent.com/realazthat/glsl-numerify/master/docs/numerify-4x4-exemplar-scaled-up.png) 17 | 18 | ##### **Result, 256x256 (then scaled up)**: 19 | ![Result texture](https://raw.githubusercontent.com/realazthat/glsl-numerify/master/docs/numerify-4x4-result.png) 20 | 21 | ####How it works 22 | 23 | Basically, it makes a cell for each input pixel. 24 | 25 | 1. For each output pixel, it figures out which cell it lies within. 26 | 2. For each output pixel, it figures out the offset within the cell it lies within. 27 | 3. Using the in-cell offset, it determines how far off the right of the cell the current 28 | output pixel is. 29 | 4. Using (3), it determines which digit place this output pixel lies within. 30 | 5. Using the cell <=> source pixel relationship, it determines the value of the source pixel. 31 | 6. Using (5), it determines what the digit value for that digit place is. 32 | 7. Using (6,2), it picks a pixel from the digits texture, which stores all the digits (`./assets/digits.bmp`). 33 | 34 | 35 | ####Dependencies 36 | 37 | * nodejs 38 | * browserify 39 | * regl (for demo) 40 | * resl (for demo) 41 | * budo (for quick demo as an alternative to running browserify) 42 | 43 | 44 | ####Demo 45 | 46 | To run the demo, run: 47 | 48 | ``` 49 | cd ./glsl-numerify 50 | 51 | #install npm dependencies 52 | npm install 53 | 54 | #browser should open with the demo 55 | budo glsl-numerify-demo.js --open 56 | 57 | #note that if your resolution is small, it will render everything too small. 58 | #you can change the source texture size to see more satisfactory results. 59 | 60 | ``` 61 | 62 | Results: 63 | 64 | branch | demo 65 | -------|------- 66 | master | [glsl-numerify-demo](https://realazthat.github.io/glsl-numerify/master/www/glsl-numerify-demo/index.html) 67 | develop | [glsl-numerify-demo](https://realazthat.github.io/glsl-numerify/develop/www/glsl-numerify-demo/index.html) 68 | 69 | ####Usage 70 | 71 | ``` 72 | const numerify = require('./glsl-numerify.js'); 73 | ``` 74 | 75 | ##### `numerify.makeFrag ({multiplier, sourceSize, destinationCellSize, destinationSize, component = 'r'})` 76 | 77 | 78 | * returns the webgl 1.0 fragment shader to use. 79 | * `multiplier` 80 | 1. the source texture is typically treated as a normalized floating point value between [0,1] in the shader. 81 | 2. therefore, to get at the "real" value, you can supply a multiplier. So for example having a multiplier of 82 | 256 will result values in the range [0,255]. The output values will always be integer only, so this 83 | typically needs to be used. 84 | * `sourceSize` - a string in the form of a glsl vec2 with the source texture's size in pixels. 85 | * `destinationCellSize` - a string in the form of a glsl vec2 with the size of each cell within the destination texture. 86 | * `destinationSize` - the actual size of the destination texture; it might be exactly the same as 87 | `sourceSize X destinationCellSize`. 88 | * `component` - Which component of the input texture you are interested in rendering as digits. 89 | 90 | ##### `numerify.makeVert ()` 91 | 92 | * returns the webgl 1.0 vertex shader to use. 93 | -------------------------------------------------------------------------------- /assets/digits.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realazthat/glsl-numerify/d98c2515ecaada4adf65edd74f13a1d390a7224a/assets/digits.png -------------------------------------------------------------------------------- /assets/numerify-32x32-exemplar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realazthat/glsl-numerify/d98c2515ecaada4adf65edd74f13a1d390a7224a/assets/numerify-32x32-exemplar.png -------------------------------------------------------------------------------- /docs/numerify-4x4-exemplar-scaled-up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realazthat/glsl-numerify/d98c2515ecaada4adf65edd74f13a1d390a7224a/docs/numerify-4x4-exemplar-scaled-up.png -------------------------------------------------------------------------------- /docs/numerify-4x4-exemplar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realazthat/glsl-numerify/d98c2515ecaada4adf65edd74f13a1d390a7224a/docs/numerify-4x4-exemplar.png -------------------------------------------------------------------------------- /docs/numerify-4x4-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realazthat/glsl-numerify/d98c2515ecaada4adf65edd74f13a1d390a7224a/docs/numerify-4x4-result.png -------------------------------------------------------------------------------- /glsl-numerify-demo.js: -------------------------------------------------------------------------------- 1 | 2 | const resl = require('resl'); 3 | const regl = require('regl')({ 4 | extensions: ['OES_texture_float', 'OES_texture_float_linear'] 5 | }); 6 | 7 | const quad = require('glsl-quad'); 8 | const numerify = require('./glsl-numerify.js'); 9 | 10 | function makeFBORgbUint8 ({width, height}) { 11 | return regl.framebuffer({ 12 | color: regl.texture({ 13 | width: width, 14 | height: height, 15 | stencil: false, 16 | format: 'rgba', 17 | type: 'uint8', 18 | depth: false, 19 | wrap: 'clamp' 20 | }) 21 | }); 22 | } 23 | 24 | const drawToScreen = regl({ 25 | frag: quad.shader.frag, 26 | vert: quad.shader.vert, 27 | attributes: { 28 | a_position: quad.verts, 29 | a_uv: quad.uvs 30 | }, 31 | elements: quad.indices, 32 | uniforms: { 33 | u_tex: regl.prop('texture'), 34 | u_clip_y: regl.prop('clip_y') 35 | }, 36 | framebuffer: regl.prop('fbo') 37 | }); 38 | 39 | resl({ 40 | manifest: { 41 | texture: { 42 | type: 'image', 43 | // src: 'docs/numerify-4x4-exemplar.png', 44 | src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAABGdBTUEAALGPC/xhBQAACjFpQ0NQSUNDIHByb2ZpbGUAAEiJnZZ3VFPZFofPvTe9UJIQipTQa2hSAkgNvUiRLioxCRBKwJAAIjZEVHBEUZGmCDIo4ICjQ5GxIoqFAVGx6wQZRNRxcBQblklkrRnfvHnvzZvfH/d+a5+9z91n733WugCQ/IMFwkxYCYAMoVgU4efFiI2LZ2AHAQzwAANsAOBws7NCFvhGApkCfNiMbJkT+Be9ug4g+fsq0z+MwQD/n5S5WSIxAFCYjOfy+NlcGRfJOD1XnCW3T8mYtjRNzjBKziJZgjJWk3PyLFt89pllDznzMoQ8GctzzuJl8OTcJ+ONORK+jJFgGRfnCPi5Mr4mY4N0SYZAxm/ksRl8TjYAKJLcLuZzU2RsLWOSKDKCLeN5AOBIyV/w0i9YzM8Tyw/FzsxaLhIkp4gZJlxTho2TE4vhz89N54vFzDAON40j4jHYmRlZHOFyAGbP/FkUeW0ZsiI72Dg5ODBtLW2+KNR/Xfybkvd2ll6Ef+4ZRB/4w/ZXfpkNALCmZbXZ+odtaRUAXesBULv9h81gLwCKsr51Dn1xHrp8XlLE4ixnK6vc3FxLAZ9rKS/o7/qfDn9DX3zPUr7d7+VhePOTOJJ0MUNeN25meqZExMjO4nD5DOafh/gfB/51HhYR/CS+iC+URUTLpkwgTJa1W8gTiAWZQoZA+J+a+A/D/qTZuZaJ2vgR0JZYAqUhGkB+HgAoKhEgCXtkK9DvfQvGRwP5zYvRmZid+8+C/n1XuEz+yBYkf45jR0QyuBJRzuya/FoCNCAARUAD6kAb6AMTwAS2wBG4AA/gAwJBKIgEcWAx4IIUkAFEIBcUgLWgGJSCrWAnqAZ1oBE0gzZwGHSBY+A0OAcugctgBNwBUjAOnoAp8ArMQBCEhcgQFVKHdCBDyByyhViQG+QDBUMRUByUCCVDQkgCFUDroFKoHKqG6qFm6FvoKHQaugANQ7egUWgS+hV6ByMwCabBWrARbAWzYE84CI6EF8HJ8DI4Hy6Ct8CVcAN8EO6ET8OX4BFYCj+BpxGAEBE6ooswERbCRkKReCQJESGrkBKkAmlA2pAepB+5ikiRp8hbFAZFRTFQTJQLyh8VheKilqFWoTajqlEHUJ2oPtRV1ChqCvURTUZros3RzugAdCw6GZ2LLkZXoJvQHeiz6BH0OPoVBoOhY4wxjhh/TBwmFbMCsxmzG9OOOYUZxoxhprFYrDrWHOuKDcVysGJsMbYKexB7EnsFO459gyPidHC2OF9cPE6IK8RV4FpwJ3BXcBO4GbwS3hDvjA/F8/DL8WX4RnwPfgg/jp8hKBOMCa6ESEIqYS2hktBGOEu4S3hBJBL1iE7EcKKAuIZYSTxEPE8cJb4lUUhmJDYpgSQhbSHtJ50i3SK9IJPJRmQPcjxZTN5CbiafId8nv1GgKlgqBCjwFFYr1Ch0KlxReKaIVzRU9FRcrJivWKF4RHFI8akSXslIia3EUVqlVKN0VOmG0rQyVdlGOVQ5Q3mzcovyBeVHFCzFiOJD4VGKKPsoZyhjVISqT2VTudR11EbqWeo4DUMzpgXQUmmltG9og7QpFYqKnUq0Sp5KjcpxFSkdoRvRA+jp9DL6Yfp1+jtVLVVPVb7qJtU21Suqr9XmqHmo8dVK1NrVRtTeqTPUfdTT1Lepd6nf00BpmGmEa+Rq7NE4q/F0Dm2OyxzunJI5h+fc1oQ1zTQjNFdo7tMc0JzW0tby08rSqtI6o/VUm67toZ2qvUP7hPakDlXHTUegs0PnpM5jhgrDk5HOqGT0MaZ0NXX9dSW69bqDujN6xnpReoV67Xr39An6LP0k/R36vfpTBjoGIQYFBq0Gtw3xhizDFMNdhv2Gr42MjWKMNhh1GT0yVjMOMM43bjW+a0I2cTdZZtJgcs0UY8oyTTPdbXrZDDazN0sxqzEbMofNHcwF5rvNhy3QFk4WQosGixtMEtOTmcNsZY5a0i2DLQstuyyfWRlYxVtts+q3+mhtb51u3Wh9x4ZiE2hTaNNj86utmS3Xtsb22lzyXN+5q+d2z31uZ27Ht9tjd9Oeah9iv8G+1/6Dg6ODyKHNYdLRwDHRsdbxBovGCmNtZp13Qjt5Oa12Oub01tnBWex82PkXF6ZLmkuLy6N5xvP48xrnjbnquXJc612lbgy3RLe9blJ3XXeOe4P7Aw99D55Hk8eEp6lnqudBz2de1l4irw6v12xn9kr2KW/E28+7xHvQh+IT5VPtc99XzzfZt9V3ys/eb4XfKX+0f5D/Nv8bAVoB3IDmgKlAx8CVgX1BpKAFQdVBD4LNgkXBPSFwSGDI9pC78w3nC+d3hYLQgNDtoffCjMOWhX0fjgkPC68JfxhhE1EQ0b+AumDJgpYFryK9Issi70SZREmieqMVoxOim6Nfx3jHlMdIY61iV8ZeitOIE8R1x2Pjo+Ob4qcX+izcuXA8wT6hOOH6IuNFeYsuLNZYnL74+BLFJZwlRxLRiTGJLYnvOaGcBs700oCltUunuGzuLu4TngdvB2+S78ov508kuSaVJz1Kdk3enjyZ4p5SkfJUwBZUC56n+qfWpb5OC03bn/YpPSa9PQOXkZhxVEgRpgn7MrUz8zKHs8yzirOky5yX7Vw2JQoSNWVD2Yuyu8U02c/UgMREsl4ymuOWU5PzJjc690iecp4wb2C52fJNyyfyffO/XoFawV3RW6BbsLZgdKXnyvpV0Kqlq3pX668uWj2+xm/NgbWEtWlrfyi0LiwvfLkuZl1PkVbRmqKx9X7rW4sVikXFNza4bKjbiNoo2Di4ae6mqk0fS3glF0utSytK32/mbr74lc1XlV992pK0ZbDMoWzPVsxW4dbr29y3HShXLs8vH9sesr1zB2NHyY6XO5fsvFBhV1G3i7BLsktaGVzZXWVQtbXqfXVK9UiNV017rWbtptrXu3m7r+zx2NNWp1VXWvdur2DvzXq/+s4Go4aKfZh9OfseNkY39n/N+rq5SaOptOnDfuF+6YGIA33Njs3NLZotZa1wq6R18mDCwcvfeH/T3cZsq2+nt5ceAockhx5/m/jt9cNBh3uPsI60fWf4XW0HtaOkE+pc3jnVldIl7Y7rHj4aeLS3x6Wn43vL7/cf0z1Wc1zleNkJwomiE59O5p+cPpV16unp5NNjvUt675yJPXOtL7xv8GzQ2fPnfM+d6ffsP3ne9fyxC84Xjl5kXey65HCpc8B+oOMH+x86Bh0GO4cch7ovO13uGZ43fOKK+5XTV72vnrsWcO3SyPyR4etR12/eSLghvcm7+ehW+q3nt3Nuz9xZcxd9t+Se0r2K+5r3G340/bFd6iA9Puo9OvBgwYM7Y9yxJz9l//R+vOgh+WHFhM5E8yPbR8cmfScvP174ePxJ1pOZp8U/K/9c+8zk2Xe/ePwyMBU7Nf5c9PzTr5tfqL/Y/9LuZe902PT9VxmvZl6XvFF/c+At623/u5h3EzO577HvKz+Yfuj5GPTx7qeMT59+A/eE8/txAYbrAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAAHnMAAB5zAUKYKhcAAAAHdElNRQfgBxkBGgWEJBFEAAAANklEQVQI1wXBsRHAIAwEwdOMEtOCoG9cG+m7BMYZz27Md43+VLWqltLGtrHJT38QAJDSNhwbuCD0FQ3x9ZLjAAAAAElFTkSuQmCC', 45 | parser: (data) => regl.texture({ 46 | data: data, 47 | mag: 'nearest', 48 | min: 'nearest', 49 | flipY: true 50 | }) 51 | }, digitsTexture: { 52 | type: 'image', 53 | src: numerify.digits.uri, 54 | parser: (data) => regl.texture({ 55 | data: data, 56 | mag: 'nearest', 57 | min: 'nearest', 58 | flipY: true 59 | }) 60 | } 61 | }, 62 | onDone: ({texture, digitsTexture}) => { 63 | // console.log(texture.width); 64 | // console.log(digitsTexture.width); 65 | 66 | let fbo = makeFBORgbUint8({width: texture.width * 16, height: texture.height * 16}); 67 | 68 | let frag = numerify.makeFrag({ multiplier: 256, 69 | sourceSize: `vec2(${texture.width}, ${texture.height})`, 70 | destinationSize: `vec2(${texture.width * 16}, ${texture.height * 16})`, 71 | destinationCellSize: 'vec2(16, 16)'}); 72 | let vert = numerify.makeVert(); 73 | 74 | console.log('vert:', vert); 75 | console.log('frag:', frag); 76 | 77 | const numerifyToFBO = regl({ 78 | frag: frag, 79 | vert: vert, 80 | attributes: { 81 | a_position: quad.verts, 82 | a_uv: quad.uvs 83 | }, 84 | elements: quad.indices, 85 | uniforms: { 86 | source_texture: regl.prop('sourceTexture'), 87 | digits_texture: regl.prop('digitsTexture'), 88 | u_clip_y: regl.prop('clip_y') 89 | }, 90 | framebuffer: regl.prop('fbo') 91 | }); 92 | 93 | numerifyToFBO({ sourceTexture: texture, 94 | digitsTexture: digitsTexture, 95 | fbo: fbo, 96 | clip_y: 1}); 97 | 98 | drawToScreen({texture: fbo.color[0], clip_y: 1}); 99 | } 100 | }); 101 | -------------------------------------------------------------------------------- /glsl-numerify.js: -------------------------------------------------------------------------------- 1 | 2 | function makeVert () { 3 | let vert = ` 4 | precision mediump float; 5 | attribute vec2 a_position; 6 | attribute vec2 a_uv; 7 | uniform float u_clip_y; 8 | varying vec2 v_uv; 9 | 10 | void main() { 11 | v_uv = a_uv; 12 | gl_Position = vec4(a_position * vec2(1,u_clip_y), 0, 1); 13 | } 14 | `; 15 | return vert; 16 | } 17 | 18 | function makeFrag ({multiplier, sourceSize, destinationCellSize, destinationSize, component = 'r'}) { 19 | let frag = ` 20 | precision highp float; 21 | varying vec2 v_uv; 22 | uniform sampler2D digits_texture; 23 | uniform sampler2D source_texture; 24 | 25 | // width of 4. 4 = 3 pixels for the digit, one pixel for white space. 26 | const vec2 digit_size = vec2(4,7); 27 | // hardcoded expected size in pixels of the digits texture. 28 | const vec2 digit_texture_size = vec2(64, 64); 29 | // the size, in pixels, of the source texture. 30 | const vec2 source_size = ${sourceSize}; 31 | // the size of each cell in the destination texture. 32 | const vec2 destination_cell_size = ${destinationCellSize}; 33 | // the size of the destination texture. 34 | const vec2 destination_size = ${destinationSize}; 35 | // the size required for displaying the source image, given the destination cell size. 36 | const vec2 destination_view_size = ${sourceSize} * ${destinationCellSize}; 37 | const vec4 multiplier = vec4(${multiplier}); 38 | void main () { 39 | 40 | highp vec2 screen_rel_pixel = floor(v_uv*destination_size); 41 | highp vec2 screen_rel_cell = floor(screen_rel_pixel / destination_cell_size); 42 | highp vec2 screen_rel_cell_lower_pixel = screen_rel_cell * destination_cell_size; 43 | highp vec2 screen_rel_cell_upper_pixel = screen_rel_cell_lower_pixel + destination_cell_size; 44 | highp vec2 screen_rel_cell_center_pixel = screen_rel_cell_lower_pixel + (destination_cell_size / 2.0); 45 | highp vec2 cell_rel_offset_pixel = screen_rel_pixel - screen_rel_cell_lower_pixel; 46 | 47 | highp vec2 source_uv = (screen_rel_cell + .5)/source_size; 48 | 49 | 50 | gl_FragColor = vec4(1,1,1,1); 51 | 52 | 53 | if (any(greaterThan(screen_rel_pixel, destination_view_size))) 54 | return; 55 | 56 | if (any(lessThan(cell_rel_offset_pixel, vec2(1))) || any(greaterThan(cell_rel_offset_pixel, destination_cell_size))) 57 | { 58 | gl_FragColor = vec4(0,0,1,1); 59 | return; 60 | } 61 | 62 | vec4 source_pixel = texture2D(source_texture, source_uv); 63 | vec4 denormed_source_value = source_pixel*multiplier; 64 | 65 | float cell_rel_right_offset_pixel = destination_cell_size.x - 1.0 - cell_rel_offset_pixel.x; 66 | int digit_index = int(floor(cell_rel_right_offset_pixel / digit_size.x)); 67 | int digit_rel_x = int(digit_size.x) - int(floor(mod(cell_rel_right_offset_pixel, digit_size.x))); 68 | /// center of cell, plus half digit hight. 69 | int cell_rel_digit_bottom_y = int((destination_cell_size.y / 2.0) + digit_size.y / 2.0); 70 | int cell_rel_dist_from_digit_bottom = cell_rel_digit_bottom_y - int(cell_rel_offset_pixel.y); 71 | 72 | int sigdigits = int(floor(denormed_source_value.${component} / pow(10.0, float(digit_index)))); 73 | if (sigdigits == 0) 74 | return; 75 | int digit = int(mod(float(sigdigits), 10.0)); 76 | 77 | vec2 digits_uv = vec2(float(digit)*digit_size.x, digit_size.y - float(cell_rel_dist_from_digit_bottom)) / digit_texture_size; 78 | 79 | 80 | float cell_top_border = floor((destination_cell_size.y - digit_size.y) / 2.0); 81 | // digits_uv = (vec2((digit*int(digit_size.x)) + digit_rel_x, destination_cell_size.y - cell_top_border - cell_rel_offset_pixel.y) + vec2(.5))/digit_texture_size; 82 | digits_uv = (vec2((digit*int(digit_size.x)) + digit_rel_x, cell_rel_offset_pixel.y - cell_top_border) + vec2(.5))/digit_texture_size; 83 | 84 | gl_FragColor = texture2D(digits_texture, digits_uv); 85 | } 86 | `; 87 | return frag; 88 | } 89 | 90 | const dataUri = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqa 91 | XHeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0 92 | Ad5mH3gAAADPSURBVHhe7ZRBCsMwEMT6kB77/5/1DSktsyEsMTVtfJIEjlg2vuj 93 | g2wbHADEWA8RYDBBjMUCMxQAxFgPEWAwQYzFAjMUAMRYDxFgMEGMxQIzFADEWA8 94 | RYDBBjMUCMxQAxFgPEWAwQYzFAjMUAMRYDxFgMEGMxQIzFADEWA8RYDBBjMUCMx 95 | QDvz/P+2M+Rmvv+bO7u+3/mlewBji5m55GLPhff7o/uXclUgLfrXDEXo32fVzId 96 | 4IzR/0W//+t+JZe8AcVo3+didr+STwAu2/YCo1QMoniycvMAAAAASUVORK5CYII 97 | =`.replace(/\s*/g, ''); 98 | const digits = {uri: dataUri}; 99 | 100 | module.exports = { makeFrag: makeFrag, makeVert: makeVert, digits }; 101 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "glsl-numerify", 3 | "version": "1.0.0", 4 | "description": "glsl-numerify is a debugging shader generator for WebGL: given a texture, blows it up in size, displays the pixel values as numbers.", 5 | "main": "glsl-numerify.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/realazthat/glsl-numerify.git" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/realazthat/glsl-numerify/issues" 12 | }, 13 | "author": "Azriel Fasten", 14 | "license": "MIT", 15 | "semistandard": { 16 | "ignore": [ 17 | "dist/*", 18 | "www/*" 19 | ] 20 | }, 21 | "dependencies": {}, 22 | "devDependencies": { 23 | "disc": "^1.3.2", 24 | "glsl-quad": "1.0.0", 25 | "indexhtmlify": "^1.3.0", 26 | "regl": "^0.10.0", 27 | "resl": "^1.0.1", 28 | "semistandard": "~8.0.0", 29 | "snazzy": "^4.0.0" 30 | }, 31 | "keywords": [ 32 | "webgl", 33 | "gl", 34 | "graphics", 35 | "computer graphics", 36 | "opengl", 37 | "glsl", 38 | "data", 39 | "debugging", 40 | "shader", 41 | "image processing" 42 | ], 43 | "scripts": { 44 | "mytest": "semistandard | snazzy", 45 | "build": "npm run build-script && npm run build-demo", 46 | "build-script": "mkdir -p ./dist && browserify glsl-numerify.js --standalone glsl-numerify > ./dist/glsl-numerify.js", 47 | "build-demo": "mkdir -p ./www/glsl-numerify-demo/ && browserify ./glsl-numerify-demo.js | indexhtmlify > ./www/glsl-numerify-demo/index.html" 48 | } 49 | 50 | } 51 | -------------------------------------------------------------------------------- /scripts/publish-static-demos.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | set -exv 4 | 5 | PROJECT_PATH="$PWD" 6 | 7 | 8 | PUBLISH_BRANCHES="master develop" 9 | if [ "$TRAVIS_REPO_SLUG" == "realazthat/glsl-numerify" ] && [ "$TRAVIS_PULL_REQUEST" == "false" ] && [[ $PUBLISH_BRANCHES =~ "$TRAVIS_BRANCH" ]]; then 10 | 11 | echo -e "Publishing generated static data...\n" 12 | 13 | 14 | cd $HOME 15 | 16 | rm -rf gh-pages 17 | git clone --quiet --branch=gh-pages https://${GH_TOKEN}@github.com/realazthat/glsl-numerify gh-pages > /dev/null 18 | 19 | cd gh-pages 20 | touch .nojekyll 21 | 22 | git rm -rf --ignore-unmatch "./$TRAVIS_BRANCH/www" 23 | git rm -rf --ignore-unmatch "./$TRAVIS_BRANCH/dist" 24 | mkdir -p "./$TRAVIS_BRANCH/." 25 | echo $TRAVIS_BUILD_NUMBER > "./$TRAVIS_BRANCH/travis_build_number" 26 | cp -Rf "$PROJECT_PATH/www/" "./$TRAVIS_BRANCH/." 27 | cp -Rf "$PROJECT_PATH/dist/" "./$TRAVIS_BRANCH/." 28 | git add -f . 29 | git -c user.email="travis@travis-ci.org" -c user.name="travis-ci" \ 30 | commit -m "Latest 'generated static data' on successful travis build $TRAVIS_BUILD_NUMBER auto-pushed to gh-pages/$TRAVIS_BRANCH" 31 | git push -fq origin gh-pages > /dev/null 32 | 33 | echo -e "Published generated static data to gh-pages.\n" 34 | 35 | fi 36 | --------------------------------------------------------------------------------