···11+# Changesets
22+33+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
44+with multi-package repos, or single-package repos to help you version and publish your code. You can
55+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
66+77+We have a quick list of common questions to get you started engaging with this project in
88+[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)
···11+MIT License
22+33+Copyright (c) Phil Pluckthun,
44+55+Permission is hereby granted, free of charge, to any person obtaining a copy
66+of this software and associated documentation files (the "Software"), to deal
77+in the Software without restriction, including without limitation the rights
88+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
99+copies of the Software, and to permit persons to whom the Software is
1010+furnished to do so, subject to the following conditions:
1111+1212+The above copyright notice and this permission notice shall be included in all
1313+copies or substantial portions of the Software.
1414+1515+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
1616+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
1717+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121+SOFTWARE.
+139
README.md
···11+# frag-canvas
22+33+**A custom element providing a canvas to apply a fragment shader to.**
44+55+The `<frag-canvas>` element renders an output canvas and applies a fragment
66+shader to it. The canvas' input is either determined by an internal input
77+canvas (that can be drawn to using the usual `getContext()` draw context)
88+or an input image or video element, passed as a child element.
99+1010+The fragment shader is sourced from a script child or the element's text
1111+contents.
1212+1313+The fragment shader may either be written in GLSL ES 100 or GLSL ES 300,
1414+but the internal context will always be created using WebGL 2.
1515+1616+The fragment shader may use input uniforms that are roughly the same
1717+as [ShaderToy's](https://www.shadertoy.com/howto) with these
1818+uniforms being supported:
1919+2020+- `iResolution`
2121+- `iChannelResolution` (with one channel only)
2222+- `iTime`
2323+- `iTimeDelta`
2424+- `iFrame`
2525+- `iChannel` (always `0`)
2626+- `iDate`
2727+2828+Only one channel will be provided (`uniform sampler2D iChannel0`)
2929+3030+### Applying a fragment shader to an image
3131+3232+```html
3333+<frag-canvas id="canvas">
3434+ <script type="x-shader/x-fragment">
3535+ precision mediump float;
3636+3737+ uniform vec2 iResolution;
3838+ uniform float iTime;
3939+ uniform sampler2D iChannel0;
4040+4141+ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
4242+ vec2 uv = fragCoord/iResolution.xy;
4343+ vec4 texColor = texture2D(iChannel0, uv);
4444+ float wave = sin(uv.y * 10.0 + iTime) * 0.01;
4545+ vec2 distortedUV = uv + vec2(wave, 0.0);
4646+ vec4 finalColor = texture2D(iChannel0, distortedUV);
4747+ fragColor = finalColor;
4848+ }
4949+5050+ void main() {
5151+ mainImage(gl_FragColor, gl_FragCoord.xy);
5252+ }
5353+ </script>
5454+ <img src="./photo.jpg" />
5555+</frag-canvas>
5656+```
5757+5858+### Applying a fragment shader to canvas contents
5959+6060+```html
6161+<frag-canvas id="example">
6262+ <script type="x-shader/x-fragment">
6363+ precision mediump float;
6464+6565+ uniform vec2 iResolution;
6666+ uniform float iTime;
6767+ uniform sampler2D iChannel0;
6868+6969+ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
7070+ vec2 uv = fragCoord/iResolution.xy;
7171+ vec4 texColor = texture2D(iChannel0, uv);
7272+ float wave = sin(uv.y * 10.0 + iTime) * 0.01;
7373+ vec2 distortedUV = uv + vec2(wave, 0.0);
7474+ vec4 finalColor = texture2D(iChannel0, distortedUV);
7575+ fragColor = finalColor;
7676+ }
7777+7878+ void main() {
7979+ mainImage(gl_FragColor, gl_FragCoord.xy);
8080+ }
8181+ </script>
8282+</frag-canvas>
8383+8484+<script>
8585+ const canvas = document.getElementById('example');
8686+ const ctx = canvas.getContext('2d');
8787+8888+ requestAnimationFrame(draw() => {
8989+ ctx.fillStyle = 'red';
9090+ ctx.fillRect(100, 100, 200, 200);
9191+ ctx.fillStyle = 'blue';
9292+ ctx.beginPath();
9393+ ctx.arc(300, 300, 50, 0, Math.PI * 2);
9494+ ctx.fill();
9595+ });
9696+</script>
9797+```
9898+9999+### Auto-resizing the canvas while redrawing
100100+101101+```html
102102+<frag-canvas id="example" autoresize>
103103+ <script type="x-shader/x-fragment">
104104+ precision mediump float;
105105+106106+ uniform vec2 iResolution;
107107+ uniform float iTime;
108108+ uniform sampler2D iChannel0;
109109+110110+ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
111111+ vec2 uv = fragCoord/iResolution.xy;
112112+ vec4 texColor = texture2D(iChannel0, uv);
113113+ float wave = sin(uv.y * 10.0 + iTime) * 0.01;
114114+ vec2 distortedUV = uv + vec2(wave, 0.0);
115115+ vec4 finalColor = texture2D(iChannel0, distortedUV);
116116+ fragColor = finalColor;
117117+ }
118118+119119+ void main() {
120120+ mainImage(gl_FragColor, gl_FragCoord.xy);
121121+ }
122122+ </script>
123123+</frag-canvas>
124124+125125+<script>
126126+ const canvas = document.getElementById('example');
127127+ const ctx = canvas.getContext('2d');
128128+129129+ requestAnimationFrame(function draw() {
130130+ ctx.fillStyle = 'red';
131131+ ctx.fillRect(100, 100, 200, 200);
132132+ ctx.fillStyle = 'blue';
133133+ ctx.beginPath();
134134+ ctx.arc(300, 300, 50, 0, Math.PI * 2);
135135+ ctx.fill();
136136+ requestAnimationFrame(draw);
137137+ });
138138+</script>
139139+```