<script type="module">
  import 'shaderpad/web-component.css';
  import { createShaderPadElement } from 'shaderpad/web-component';
  customElements.define('shader-pad', createShaderPadElement());
</script>

<shader-pad style="width: 320px; height: 480px">
	<img src="/trees.jpg" data-texture="u_trees" />
	<script type="x-shader/x-fragment">
		#version 300 es
		precision highp float;

		in vec2 v_uv;
		uniform float u_time;
		uniform sampler2D u_trees;
		out vec4 outColor;

		void main() {
			vec2 p = 2.0 * (v_uv - 0.5);
			float r = length(p);
			vec2 uv = 0.15 + v_uv * 0.7 + p * (0.1 + 0.025 * sin(u_time * 2.0)) * r;
			outColor = texture(u_trees, uv);
		}
	</script>
</shader-pad>