micugl

miccull's shader library for simple React shaders.

Includes a WebGL manager, core utilities, and two React components for single‑pass and ping‑pong shaders.

Install

npm install micugl
# or
bun add micugl

Getting Started

import React from "react";
import { BaseShaderComponent, createShaderConfig } from "micugl";

import vertexShader from "./shaders.vert";
import fragmentShader from "./shaders.frag";

const shaderConfig = createShaderConfig({
  vertexShader,
  fragmentShader,
  uniformNames: {
    u_myColor: "vec3",
  },
});

export default function App() {
  return (
    <BaseShaderComponent
      programId="my-shader"
      shaderConfig={shaderConfig}
      uniforms={{
        time: { type: "float", value: (t) => t * 0.001 },
        resolution: {
          type: "vec2",
          value: () => [window.innerWidth, window.innerHeight],
        },
        myColor: { type: "vec3", value: [1, 0, 0] },
      }}
      style={{ width: "100vw", height: "100vh" }}
    />
  );
}

Core

• WebGLManager
  Low‑level wrapper around WebGLRenderingContext.

  • new WebGLManager(canvas, options?)
  • createProgram(id, config) → compile/link shaders
  • createBuffer(programId, attribute, data)
  • setUniform(programId, name, value, type)
  • prepareRender(programId, { clear?, clearColor? })
  • drawArrays(...), drawElements(...)
  • fbo: FBOManager for ping‑pong framebuffers

• createShaderConfig

  • Builds a ShaderProgramConfig with defaults (u_time, u_resolution).
  • createShaderConfig({ vertexShader, fragmentShader, uniformNames?, attributeConfigs? })

• Utilities

  • FBOManager for multi‑render targets
  • Passes / Postprocessing to sequence render passes

React Components

BaseShaderComponent

Prop	Type	Notes
programId	string	identifier for the shader
shaderConfig	ShaderProgramConfig	from createShaderConfig
uniforms	{ [name]: { type: UniformType; value } }	static value or updater fn
renderOptions	{ clear?: boolean; clearColor?: [r,g,b,a] }	default clears to black
useFastPath	boolean	skip callback for simple draw
useDevicePixelRatio	boolean	adapt canvas to DPR

BasePingPongShaderComponent

Prop	Type	Notes
programId	string	first‑pass shader
secondaryShaderConfig	ShaderProgramConfig	ping‑pong second pass
iterations	number (default 1)	update/display cycles
uniforms	{ [name]: { type; value } }	for primary pass
secondaryUniforms	{ [name]: { type; value } }	for secondary pass
framebufferOptions	{ width; height; textureCount; textureOptions }	default full‑canvas two‑texture FBO

Hooks

• useUniformUpdaters(programId, uniforms) → React memoized uniform updaters
• usePingPongPasses(options) → { passes, framebuffers } for engine
• useDarkMode() → boolean dark‑mode flag