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) {
    if (fragCoord.x < iResolution.x * 0.25) {
        fragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
    } else if (fragCoord.x < iResolution.x * 0.5) {
        fragColor = vec4(0.0, 1.0, 0.0, 1.0); // 绿色
    } else {
        fragColor = vec4(0.0, 0.0, 1.0, 1.0); // 蓝色
    }
}
	`
kokomi.ShaderToyElement.register()