Shader

kokomi.js provides several useful utilities for you to master the shader.

UniformInjector

When you write a ShaderMaterial, you often need the time, resolution, and even mouse variable.

Instead of writing these variables by yourself, you can just use kokomi.js's UniformInjector to inject these variables at once. Note that the names of these variables are the same as Shadertoy's variables (opens in a new tab).

const material = new THREE.ShaderMaterial({
  vertexShader: /* glsl */ `...`,
  fragmentShader: /* glsl */ `...`,
});
const mesh = new THREE.Mesh(geometry, material);
this.scene.add(mesh);
const uj = new kokomi.UniformInjector(this);
material.uniforms = {
  ...material.uniforms,
  ...uj.shadertoyUniforms,
};
this.update(() => {
  uj.injectShadertoyUniforms(material.uniforms);
});

ShadertoyElement

Sometimes you just want to only write the fragment shader like Shadertoy (opens in a new tab). You can use the custom HTML Tag - ShadertoyElement to achieve this.

<shader-toy>
  <script type="frag"></script>
</shader-toy>
 
<script>
  document.querySelector("[type=frag]").textContent = /* glsl */ `
vec2 cart2polar(vec2 uv){
    float phi=atan(uv.y,uv.x);
    float r=length(uv);
    return vec2(phi,r);
}
 
void mainImage(out vec4 fragColor,in vec2 fragCoord){
    vec2 uv=fragCoord/iResolution.xy;
    uv=(uv-.5)*2.;
    uv.x*=iResolution.x/iResolution.y;
    
    uv=cart2polar(uv);
    
    // spiral
    float c=sin(uv.y*20.+uv.x);
    fragColor=vec4(vec3(c),1.);
}
    `;
  kokomi.ShaderToyElement.register();
</script>

Behind this, kokomi.js actually created a kokomi.ScreenQuad instance.

const quad = new kokomi.ScreenQuad(this, {
  fragmentShader: /* glsl */ `...`,
  shadertoyMode: true,
});
quad.addExisting();

Asset Management Postprocessing