2024-12-17 14:38:56 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<script type="module">
|
|
|
|
|
import { ShaderView } from "./mod.js";
|
2024-12-17 16:45:13 +00:00
|
|
|
|
|
|
|
|
var speed = document.getElementById("speed");
|
|
|
|
|
speed.onchange = () => view.setUniform("speed", speed.value);
|
|
|
|
|
|
2024-12-17 14:38:56 +00:00
|
|
|
const shader = `
|
2024-12-17 16:45:13 +00:00
|
|
|
uniform float speed;
|
2024-12-17 16:32:34 +00:00
|
|
|
void main()
|
2024-12-17 14:38:56 +00:00
|
|
|
{
|
|
|
|
|
vec2 uv = (gl_FragCoord.xy * 2. - iResolution.xy) / iResolution.y;
|
|
|
|
|
float d = length(uv);
|
2024-12-17 16:45:13 +00:00
|
|
|
d = abs(sin(d * 10. + iTime * speed)) / 10.;
|
2024-12-17 14:38:56 +00:00
|
|
|
d = smoothstep(0.95, 1., 1. - d);
|
|
|
|
|
vec3 color = d * vec3(1., 2., 3.);
|
|
|
|
|
gl_FragColor = vec4(color, 1.0);
|
2024-12-17 16:32:34 +00:00
|
|
|
}`.trim();
|
2024-12-17 16:45:13 +00:00
|
|
|
const view = new ShaderView(shader, {
|
2024-12-17 14:38:56 +00:00
|
|
|
parent: document.getElementById("container"),
|
|
|
|
|
size: { width: 512, height: 512 },
|
|
|
|
|
});
|
2024-12-17 16:45:13 +00:00
|
|
|
view.setUniform("speed", speed.value);
|
|
|
|
|
console.log(view.uniforms);
|
2024-12-17 14:38:56 +00:00
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2024-12-17 16:45:13 +00:00
|
|
|
<input id="speed" type="number" value="1" />
|
2024-12-17 14:38:56 +00:00
|
|
|
<div id="container"></div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
