mrt, vertex-shader loading

2026-09-23 19:44:21 +00:00 · 2023-02-21 16:42:50 +01:00
parent b0d7efe523
commit e79127a474
4 changed files with 212 additions and 72 deletions
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>&lt;repa-shader&gt; demo</title>
+  <script type="module" src="../src/repa-shader.js"></script>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      background: repeating-linear-gradient(45deg, #333, #333 10px, #666 10px, #666 20px);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+    }
+    #fsinput {
+      width: 90vw;
+      height: 50vh;
+    }
+  </style>
+</head>
+<body>
+  <repa-shader fs-input="fsinput" mouse snippets="noise.glsl" width=512 height=512 render-target-count=2>
+<script type="x-shader/x-fragment">
+#define R rotate2D
+vec2 c=FC.xy;
+vec2 uv=FC.xy/r.xy;
+vec2 q;
+vec2 p=(c+c-r)/r.y;
+vec2 n;
+vec4 color;
+
+float S=6.;
+float a;
+float d=dot(p,p);
+float e=200.;
+p/=.7-d;
+p+=t/PI;
+
+for(float i = 0.; i < e; i++) {
+  color+=(texture(b1,(c/r-.5)*i/e+.5))/e;
+  p*=R(5.);
+  n*=R(5.);
+  a+=dot(sin(q=p*S+i-abs(n)*R(t*.2))/S,r/r);
+  n+=cos(q),S*=1.1;
+}
+// a = max(s,.9-a*.2-d);
+a = max(0.,.9-a*.2-d);
+o1=pow(a+a*vec4(8,4,1,0)/e,color+40.);
+float center = smoothstep(.45, .55, uv.x);
+o0=center*color + o1;
+</script>
+  </repa-shader>
+  <div>
+    <textarea id="fsinput"></textarea>
+  </div>
+  <button id="update">Update</button>
+<script>
+const updateButton = document.getElementById('update');
+updateButton.addEventListener('click', () => {
+  const fsinput = document.getElementById('fsinput');
+  const shader = document.querySelector('repa-shader');
+  shader.render(fsinput.value);
+});
+</script>
+</body>
+</html>