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 color1 = vec3(1.0, 0.0, 0.0); // 红色
    vec3 color2 = vec3(0.0, 1.0, 0.0); // 绿色
    vec3 color3 = vec3(0.0, 0.0, 1.0); // 蓝色
    vec3 color4 = vec3(1.0, 1.0, 0.0); // 黄色

    if (fragCoord.x < iResolution.x * 0.25) {
        fragColor = vec4(color1, 1.0);
    } else if (fragCoord.x < iResolution.x * 0.5) {
        fragColor = vec4(color2, 1.0);
    } else if (fragCoord.x < iResolution.x * 0.75) {
        fragColor = vec4(color3, 1.0);
    } else {
        fragColor = vec4(color4, 1.0);
    }
}
`
kokomi.ShaderToyElement.register()