JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>
<shader-toy>
    <script type="frag"></script>
</shader-toy>

CSS

body {
  margin: 0;
  background: black;
}

JavaScript

document.querySelector("[type=frag]").textContent = /* glsl */ 
`
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec3 color = vec3(1.0, 0.0, 0.0); // 定义红色
    fragColor = vec4(color, 1.0);     // 输出红色
}
`
kokomi.ShaderToyElement.register()