{"url":"https://api.github.com/gists/5445604","forks_url":"https://api.github.com/gists/5445604/forks","commits_url":"https://api.github.com/gists/5445604/commits","id":"5445604","node_id":"MDQ6R2lzdDU0NDU2MDQ=","git_pull_url":"https://gist.github.com/5445604.git","git_push_url":"https://gist.github.com/5445604.git","html_url":"https://gist.github.com/mbostock/5445604","files":{".block":{"filename":".block","type":"text/plain","language":null,"raw_url":"https://gist.githubusercontent.com/mbostock/5445604/raw/703d310b399098a243a76a50bc209167e924cfd2/.block","size":17,"truncated":false,"content":"license: gpl-3.0\n","encoding":"utf-8"},"README.md":{"filename":"README.md","type":"text/markdown","language":"Markdown","raw_url":"https://gist.githubusercontent.com/mbostock/5445604/raw/b321519e96ec104d089ce600b96e9abba1bc0255/README.md","size":178,"truncated":false,"content":"Part three of my [introduction to WebGL](/mbostock/5440492), wherein the fragment shader computes the color based on the fragment coordinates.\n\nNext: [Part IV](/mbostock/5445849)","encoding":"utf-8"},"index.html":{"filename":"index.html","type":"text/html","language":"HTML","raw_url":"https://gist.githubusercontent.com/mbostock/5445604/raw/1159a2b82065e2e721df560be75182da7de15652/index.html","size":2624,"truncated":false,"content":"<!DOCTYPE html>\n<meta charset=\"utf-8\">\n<canvas width=\"960\" height=\"500\"></canvas>\n<script id=\"vertex-shader\" type=\"x-shader/x-vertex\">\n\nattribute vec2 a_position;\n\nvoid main(void) {\n  gl_Position = vec4(a_position, 0.0, 1.0);\n}\n\n</script>\n<script id=\"fragment-shader\" type=\"x-shader/x-fragment\">\n\nprecision mediump float;\n\nuniform vec2 u_size;\n\nvoid main(void) {\n  gl_FragColor = vec4(gl_FragCoord.x / u_size.x, gl_FragCoord.y / u_size.y, 0.0, 1.0);\n}\n\n</script>\n<script>\n\n// Select the canvas from the document.\nvar canvas = document.querySelector(\"canvas\");\n\n// Create the WebGL context, with fallback for experimental support.\nvar context = canvas.getContext(\"webgl\")\n    || canvas.getContext(\"experimental-webgl\");\n\n// Compile the vertex shader.\nvar vertexShader = context.createShader(context.VERTEX_SHADER);\ncontext.shaderSource(vertexShader, document.querySelector(\"#vertex-shader\").textContent);\ncontext.compileShader(vertexShader);\nif (!context.getShaderParameter(vertexShader, context.COMPILE_STATUS)) throw new Error(context.getShaderInfoLog(vertexShader));\n\n// Compile the fragment shader.\nvar fragmentShader = context.createShader(context.FRAGMENT_SHADER);\ncontext.shaderSource(fragmentShader, document.querySelector(\"#fragment-shader\").textContent);\ncontext.compileShader(fragmentShader);\nif (!context.getShaderParameter(fragmentShader, context.COMPILE_STATUS)) throw new Error(context.getShaderInfoLog(fragmentShader));\n\n// Link and use the program.\nvar program = context.createProgram();\ncontext.attachShader(program, vertexShader);\ncontext.attachShader(program, fragmentShader);\ncontext.linkProgram(program);\nif (!context.getProgramParameter(program, context.LINK_STATUS)) throw new Error(context.getProgramInfoLog(program));\ncontext.useProgram(program);\n\n// Define the size.\nvar sizeUniform = context.getUniformLocation(program, \"u_size\");\ncontext.uniform2fv(sizeUniform, [+canvas.getAttribute(\"width\"), +canvas.getAttribute(\"height\")]);\n\n// Define the positions (as vec2) of the square that covers the canvas.\nvar positionBuffer = context.createBuffer();\ncontext.bindBuffer(context.ARRAY_BUFFER, positionBuffer);\ncontext.bufferData(context.ARRAY_BUFFER, new Float32Array([\n    -1.0, -1.0,\n    +1.0, -1.0,\n    +1.0, +1.0,\n    -1.0, +1.0\n  ]), context.STATIC_DRAW);\n\n// Bind the position buffer to the position attribute.\nvar positionAttribute = context.getAttribLocation(program, \"a_position\");\ncontext.enableVertexAttribArray(positionAttribute);\ncontext.vertexAttribPointer(positionAttribute, 2, context.FLOAT, false, 0, 0);\n\n// Draw the square!\ncontext.drawArrays(context.TRIANGLE_FAN, 0, 4);\n\n</script>\n","encoding":"utf-8"},"thumbnail.png":{"filename":"thumbnail.png","type":"image/png","language":null,"raw_url":"https://gist.githubusercontent.com/mbostock/5445604/raw/327b6d9ae8d0085503e3c44074eb5e9646541c8c/thumbnail.png","size":3158,"truncated":false,"content":"iVBORw0KGgoAAAANSUhEUgAAAOYAAAB4CAIAAABpZBnfAAAKg2lDQ1BpY20A\nAEjHlZYHUFPpFse/e296oSVEOqF3pFfpNXTpYCMkIYQSQiCI2BVxBdeCiAgo\nC7pUBdcCyFoQCxYWwQL2BVlU1HWxICoq7yKP+N682XmzZ+bM/c2ZM//vfOXO\n/AGglLFFojRYDoB0YbY43M+TGRsXz8Q/BAiQB0SgCrBsTpbIIywsCPxtvB8A\n0Mz3ptmMFvhnIc/lZXEAgMJQTuRmcdJRPo7mOo5InA0AYoPWdZdni2Y4FmW6\nGB0Q5Zl16PxZXjfDibNc8q0nMtwL5XoACBQ2W8wHgIxqAmYOh4/qkG+hbCHk\nCoQAUDAou3KS2VyUvVE2TU/PmGERyoaJ/6HD/y/NRKkmm82X8uxevgXBW5Al\nSmOv+IfH8f8jPU0yt4YGmpSs1IjAmfXQM8vlsH0i5jiZxwqaY1G2Z/gcC7JZ\nkdIeiX/UHEtSozzmODUjUNovTAwJlepnecXPcV5yZMwcc3nePnMszgiX9mfl\nRPh87/cKmeMUdkDYHLPFs+c1w7w0v/DvM4dJ5xSmhUj3kiT2lfbwsr7vNzs5\n0l/K6AOQ9gt8WdL9iv2/66eFSTXFknDpOfCEUVJNLttberZAAIIBG3CyebnZ\nMwN7ZYhWiAX85GymB/rqeaZMlpBjbsq0srC0BjP/0OwVvWV8+zcgxtXvtcxO\nABwL0SL/e42tA8DJJwDQ3n+v6bxBr3cHAKf7OBJxzmxt5rkCLCABWUAHyugL\n0AGGwAxYATvgDNyBDwgAoSASxIGlgAOSQToQg+VgFVgPCkAR2AF2g3JQBQ6A\nenAYHAVt4BQ4By6Ba6AP3Ab3wRAYBS/AOHgPpiAIwkNUiAYpQ5qQHmQCWUEO\nkCvkAwVB4VAclADxISEkgVZBG6EiqBgqh6qhBugX6CR0DroC9UN3oWFoDHoD\nfYIRmALTYXVYH54PO8AecCAcCS+B+XAmnAfnw9vgMrgGPgS3wufga/BteAh+\nAU8gACEjDEQLMUMcEC8kFIlHkhAxsgYpREqRGqQZ6UC6kZvIEPIS+YjBYWgY\nJsYM44zxx0RhOJhMzBrMVkw5ph7TirmAuYkZxoxjvmKpWDWsCdYJy8LGYvnY\n5dgCbCm2FnsCexF7GzuKfY/D4Rg4A5w9zh8Xh0vBrcRtxe3DteA6cf24EdwE\nHo9XxpvgXfCheDY+G1+A34s/hD+Lv4EfxX8gkAmaBCuCLyGeICRsIJQSGgln\nCDcITwlTRDmiHtGJGErkElcQtxMPEjuI14mjxCmSPMmA5EKKJKWQ1pPKSM2k\ni6QHpLdkMlmb7EheSBaQ15HLyEfIl8nD5I8UBYoxxYuymCKhbKPUUTopdylv\nqVSqPtWdGk/Npm6jNlDPUx9RP8jQZMxlWDJcmbUyFTKtMjdkXskSZfVkPWSX\nyubJlsoek70u+1KOKKcv5yXHllsjVyF3Um5QbkKeJm8pHyqfLr9VvlH+ivwz\nBbyCvoKPAlchX+GAwnmFERpC06F50Ti0jbSDtIu0UTqObkBn0VPoRfTD9F76\nuKKCoo1itGKuYoXiacUhBsLQZ7AYaYztjKOMAcaneerzPObx5m2Z1zzvxrxJ\nJVUldyWeUqFSi9JtpU/KTGUf5VTlncptyg9VMCrGKgtVlqvsV7mo8lKVruqs\nylEtVD2qek8NVjNWC1dbqXZArUdtQl1D3U9dpL5X/bz6Sw2GhrtGikaJxhmN\nMU2apqumQLNE86zmc6Yi04OZxixjXmCOa6lp+WtJtKq1erWmtA20o7Q3aLdo\nP9Qh6TjoJOmU6HTpjOtq6gbrrtJt0r2nR9Rz0EvW26PXrTepb6Afo79Zv03/\nmYGSAcsgz6DJ4IEh1dDNMNOwxvCWEc7IwSjVaJ9RnzFsbGucbFxhfN0ENrEz\nEZjsM+k3xZo6mgpNa0wHzShmHmY5Zk1mw+YM8yDzDeZt5q/m686Pn79zfvf8\nrxa2FmkWBy3uWypYBlhusOywfGNlbMWxqrC6ZU219rVea91u/drGxIZns9/m\nji3NNth2s22X7Rc7ezuxXbPdmL2ufYJ9pf2gA90hzGGrw2VHrKOn41rHU44f\nneycsp2OOv3lbOac6tzo/GyBwQLegoMLRly0Xdgu1S5DrkzXBNefXIfctNzY\nbjVuj9113Lnute5PPYw8UjwOebzytPAUe57wnPRy8lrt1emNePt5F3r3+ij4\nRPmU+zzy1fbl+zb5jvvZ+q306/TH+gf67/QfZKmzOKwG1niAfcDqgAuBlMCI\nwPLAx0HGQeKgjmA4OCB4V/CDEL0QYUhbKAhlhe4KfRhmEJYZ9utC3MKwhRUL\nn4Rbhq8K746gRSyLaIx4H+kZuT3yfpRhlCSqK1o2enF0Q/RkjHdMccxQ7PzY\n1bHX4lTiBHHt8fj46Pja+IlFPot2LxpdbLu4YPHAEoMluUuuLFVZmrb09DLZ\nZexlxxKwCTEJjQmf2aHsGvZEIiuxMnGc48XZw3nBdeeWcMd4Lrxi3tMkl6Ti\npGd8F/4u/liyW3Jp8kuBl6Bc8DrFP6UqZTI1NLUudTotJq0lnZCekH5SqCBM\nFV7I0MjIzegXmYgKREOZTpm7M8fFgeLaLChrSVZ7Nh01Kz0SQ8kmyXCOa05F\nzofl0cuP5crnCnN7Vhiv2LLiaZ5v3s8rMSs5K7tWaa1av2p4tcfq6jXQmsQ1\nXWt11uavHV3nt65+PWl96vrfNlhsKN7wbmPMxo589fx1+SOb/DY1FcgUiAsG\nNztvrvoB84Pgh94t1lv2bvlayC28WmRRVFr0eStn69UfLX8s+3F6W9K23u12\n2/fvwO0Q7hjY6bazvli+OK94ZFfwrtYSZklhybvdy3ZfKbUprdpD2iPZM1QW\nVNa+V3fvjr2fy5PLb1d4VrRUqlVuqZzcx913Y7/7/uYq9aqiqk8/CX66U+1X\n3VqjX1N6AHcg58CTg9EHu392+LmhVqW2qPZLnbBuqD68/kKDfUNDo1rj9ia4\nSdI0dmjxob7D3ofbm82aq1sYLUVHwBHJkee/JPwycDTwaNcxh2PNx/WOV56g\nnShshVpXtI63JbcNtce1958MONnV4dxx4lfzX+tOaZ2qOK14evsZ0pn8M9Nn\n885OdIo6X57jnxvpWtZ1/3zs+VsXFl7ovRh48fIl30vnuz26z152uXzqitOV\nk1cdrrZds7vW2mPbc+I3299O9Nr1tl63v97e59jX0b+g/8wNtxvnbnrfvHSL\ndeva7ZDb/QNRA3cGFw8O3eHeeXY37e7rezn3pu6ve4B9UPhQ7mHpI7VHNb8b\n/d4yZDd0eth7uOdxxOP7I5yRF39k/fF5NP8J9UnpU82nDc+snp0a8x3re77o\n+egL0YuplwV/yv9Z+crw1fG/3P/qGY8dH30tfj39Zutb5bd172zedU2ETTx6\nn/5+arLwg/KH+o8OH7s/xXx6OrX8M/5z2RejLx1fA78+mE6fnhaxxexvVgBB\nE05KAuBNHQDUONQ79AFAkpn1uN8CmvXl3wj8Hc/64G9hB0CdOwBRqJ8OQj3K\nfjT1UKag3xm7FukOYGtraf47spKsrWa1KKiTw36Ynn6rDgC+A4Av4unpqX3T\n018OosPeBaAzc9ZbzwRODoAj2Bnq0VjzPx73X7hN8N1Bw62vAAABjklEQVR4\n2u3ZUaqCYBRG0eOP859x0ggMJCM3rEVPF5K4bL6H4zbHrJnt5LMu/v2bL667\nH/ioX3Lvt370zIf8Tz4/cJ9jIESyxEiWGMkSs8/r3z8BrrCyxEiWGMkSI1li\nJEuMZIlx5CLGyhIjWWIkS4xkiZEsMS4GxFhZYiRLjGSJkSwxkiVGssRIlhjJ\nEiNZYrz9IsbKEiNZYiRLjGSJkSwxkiVGssS4yxJjZYmRLDGSJUayxEiWGBcD\nYqwsMZIlRrLESJYYyRIjWWIkS4xkiZEsMZIlxgtbYqwsMZIlRrLESJYYyRIj\nWWIcuYixssRIlhjJEiNZYiRLjIsBMVaWGMkSI1liJEuMZImRLDGSJUayxEiW\nGMkS44UtMVaWGMkSI1liJEuMZImRLDGOXMRYWWIkS4xkiZEsMZIlxsWAGCtL\njGSJkSwxkiVGssRIlhjJEiNZYiRLjGSJ8cKWGCtLjGSJkSwxkiVGssRIlhhH\nLmKsLDGSJUayxEiWGMkS42JAjJUlRrLESJYYyRIjWWLeTDp53ha3bFIAAAAA\nSUVORK5CYII=\n","encoding":"base64"}},"public":true,"created_at":"2013-04-23T17:23:47Z","updated_at":"2021-04-09T20:01:53Z","description":"Hello WebGL III","comments":1,"user":null,"comments_enabled":true,"comments_url":"https://api.github.com/gists/5445604/comments","owner":{"login":"mbostock","id":230541,"node_id":"MDQ6VXNlcjIzMDU0MQ==","avatar_url":"https://avatars.githubusercontent.com/u/230541?v=4","gravatar_id":"","url":"https://api.github.com/users/mbostock","html_url":"https://github.com/mbostock","followers_url":"https://api.github.com/users/mbostock/followers","following_url":"https://api.github.com/users/mbostock/following{/other_user}","gists_url":"https://api.github.com/users/mbostock/gists{/gist_id}","starred_url":"https://api.github.com/users/mbostock/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mbostock/subscriptions","organizations_url":"https://api.github.com/users/mbostock/orgs","repos_url":"https://api.github.com/users/mbostock/repos","events_url":"https://api.github.com/users/mbostock/events{/privacy}","received_events_url":"https://api.github.com/users/mbostock/received_events","type":"User","user_view_type":"public","site_admin":false},"forks":[],"history":[{"user":{"login":"mbostock","id":230541,"node_id":"MDQ6VXNlcjIzMDU0MQ==","avatar_url":"https://avatars.githubusercontent.com/u/230541?v=4","gravatar_id":"","url":"https://api.github.com/users/mbostock","html_url":"https://github.com/mbostock","followers_url":"https://api.github.com/users/mbostock/followers","following_url":"https://api.github.com/users/mbostock/following{/other_user}","gists_url":"https://api.github.com/users/mbostock/gists{/gist_id}","starred_url":"https://api.github.com/users/mbostock/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mbostock/subscriptions","organizations_url":"https://api.github.com/users/mbostock/orgs","repos_url":"https://api.github.com/users/mbostock/repos","events_url":"https://api.github.com/users/mbostock/events{/privacy}","received_events_url":"https://api.github.com/users/mbostock/received_events","type":"User","user_view_type":"public","site_admin":false},"version":"c34a27f37d72e5c7f04044dfc32a84fc48e24f87","committed_at":"2016-02-09T02:06:16Z","change_status":{"total":1,"additions":1,"deletions":0},"url":"https://api.github.com/gists/5445604/c34a27f37d72e5c7f04044dfc32a84fc48e24f87"},{"user":{"login":"mbostock","id":230541,"node_id":"MDQ6VXNlcjIzMDU0MQ==","avatar_url":"https://avatars.githubusercontent.com/u/230541?v=4","gravatar_id":"","url":"https://api.github.com/users/mbostock","html_url":"https://github.com/mbostock","followers_url":"https://api.github.com/users/mbostock/followers","following_url":"https://api.github.com/users/mbostock/following{/other_user}","gists_url":"https://api.github.com/users/mbostock/gists{/gist_id}","starred_url":"https://api.github.com/users/mbostock/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mbostock/subscriptions","organizations_url":"https://api.github.com/users/mbostock/orgs","repos_url":"https://api.github.com/users/mbostock/repos","events_url":"https://api.github.com/users/mbostock/events{/privacy}","received_events_url":"https://api.github.com/users/mbostock/received_events","type":"User","user_view_type":"public","site_admin":false},"version":"fb915567632a86561b0e39912e5d4e9be98f0db7","committed_at":"2013-04-23T18:01:36Z","change_status":{"total":8,"additions":3,"deletions":5},"url":"https://api.github.com/gists/5445604/fb915567632a86561b0e39912e5d4e9be98f0db7"},{"user":{"login":"mbostock","id":230541,"node_id":"MDQ6VXNlcjIzMDU0MQ==","avatar_url":"https://avatars.githubusercontent.com/u/230541?v=4","gravatar_id":"","url":"https://api.github.com/users/mbostock","html_url":"https://github.com/mbostock","followers_url":"https://api.github.com/users/mbostock/followers","following_url":"https://api.github.com/users/mbostock/following{/other_user}","gists_url":"https://api.github.com/users/mbostock/gists{/gist_id}","starred_url":"https://api.github.com/users/mbostock/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mbostock/subscriptions","organizations_url":"https://api.github.com/users/mbostock/orgs","repos_url":"https://api.github.com/users/mbostock/repos","events_url":"https://api.github.com/users/mbostock/events{/privacy}","received_events_url":"https://api.github.com/users/mbostock/received_events","type":"User","user_view_type":"public","site_admin":false},"version":"f6cb6956db59b8ffdae17e0342a4ecdc0523b8f0","committed_at":"2013-04-23T17:59:53Z","change_status":{"total":4,"additions":3,"deletions":1},"url":"https://api.github.com/gists/5445604/f6cb6956db59b8ffdae17e0342a4ecdc0523b8f0"},{"user":{"login":"mbostock","id":230541,"node_id":"MDQ6VXNlcjIzMDU0MQ==","avatar_url":"https://avatars.githubusercontent.com/u/230541?v=4","gravatar_id":"","url":"https://api.github.com/users/mbostock","html_url":"https://github.com/mbostock","followers_url":"https://api.github.com/users/mbostock/followers","following_url":"https://api.github.com/users/mbostock/following{/other_user}","gists_url":"https://api.github.com/users/mbostock/gists{/gist_id}","starred_url":"https://api.github.com/users/mbostock/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mbostock/subscriptions","organizations_url":"https://api.github.com/users/mbostock/orgs","repos_url":"https://api.github.com/users/mbostock/repos","events_url":"https://api.github.com/users/mbostock/events{/privacy}","received_events_url":"https://api.github.com/users/mbostock/received_events","type":"User","user_view_type":"public","site_admin":false},"version":"bc8f4d4d1373347718ba8a83d5c27363ed38dc62","committed_at":"2013-04-23T17:27:07Z","change_status":{"total":0,"additions":0,"deletions":0},"url":"https://api.github.com/gists/5445604/bc8f4d4d1373347718ba8a83d5c27363ed38dc62"},{"user":{"login":"mbostock","id":230541,"node_id":"MDQ6VXNlcjIzMDU0MQ==","avatar_url":"https://avatars.githubusercontent.com/u/230541?v=4","gravatar_id":"","url":"https://api.github.com/users/mbostock","html_url":"https://github.com/mbostock","followers_url":"https://api.github.com/users/mbostock/followers","following_url":"https://api.github.com/users/mbostock/following{/other_user}","gists_url":"https://api.github.com/users/mbostock/gists{/gist_id}","starred_url":"https://api.github.com/users/mbostock/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mbostock/subscriptions","organizations_url":"https://api.github.com/users/mbostock/orgs","repos_url":"https://api.github.com/users/mbostock/repos","events_url":"https://api.github.com/users/mbostock/events{/privacy}","received_events_url":"https://api.github.com/users/mbostock/received_events","type":"User","user_view_type":"public","site_admin":false},"version":"3de72ed9df0891db80bb63b1ccc2611bdf79a91f","committed_at":"2013-04-23T17:23:48Z","change_status":{"total":78,"additions":78,"deletions":0},"url":"https://api.github.com/gists/5445604/3de72ed9df0891db80bb63b1ccc2611bdf79a91f"}],"truncated":false}