react-not-shader

v0.0.5

Published

5 months ago

Effortless .glsl components in React

0High
0Medium
0Low

glsl-app-test

A minimal React Three Fiber demo that lets you render custom GLSL shaders on a full-screen canvas or mapped onto 3D text geometry. Comes with a <ShaderCanvas> component that you can drop into any Next.js or Create React App project.

Features

Full-screen shader canvas: Renders a plane filling the viewport with your GLSL fragment + vertex shaders.
3D text support: Render any string as centered 3D text with the same shader material.
Mouse & time uniforms: Built-in uTime, uResolution, and uMouse uniforms.
Hot-load from files or strings: Pass shader code directly or via .glsl/.frag/.vert file paths.
Zero dependencies outside R3F & Drei: Leverages @react-three/fiber, @react-three/drei, and three-custom-shader-material.

Demo

Shader Demo

Installation

Clone the repo

git clone https://github.com/your-username/glsl-app-test.git
cd glsl-app-test

Install dependencies
```
npm install
# or
yarn
```
Run locally
```
npm run dev
# or
yarn dev
```

Usage

Import and wrap your content in <ShaderCanvas>. Any string child will be rendered as shader-mapped 3D text; non-string children will be rendered via <Html> on top of your shader canvas.

// app/page.tsx (Next.js) or App.tsx (CRA)
import React from 'react';
import ShaderCanvas from 'glsl-app-test';
import { vertexShader, fragmentShader } from 'glsl-app-test/shader';

export default function App() {
  return (
    <ShaderCanvas
      vertexShader={vertexShader}
      fragmentShader={fragmentShader}
      fontPath="/fonts/Syne_Regular.json"
      textOptions={{ size: 2, depth: 0.2 }}
    >
      Hello, Shader!
    </ShaderCanvas>
  );
}

Props

| Prop | Type | Default | Description | | ---------------- | ---------- | --------------------------------- | ------------------------------------------------------------------------------------ | | children | ReactNode | — | If a string/number, renders as centered 3D text; otherwise rendered via <Html>. | | vertexShader | string | built-in vertex shader | GLSL code or path to .vert/.glsl file. | | fragmentShader | string | built-in fragment shader | GLSL code or path to .frag/.glsl file. | | fontPath | string | /fonts/Syne_Regular.json | Path to a Three.js font JSON for TextGeometry. | | textOptions | object | {} | Options for TextGeometry: | | | | | – size (default 1) | | | | | – depth (default 0) | | | | | – curveSegments (default 12) | | | | | – position (default [0,0,0.1]) | | | | | – renderOrder (default 1) |

Shaders

The default shaders are available from the package:

// vertexShader (three-custom-shader-material expects csm_PositionRaw)
varying vec2 vUv;
uniform float uTime;
uniform vec2 uResolution;
uniform vec2 uMouse;

void main() {
  vUv = uv;
  csm_PositionRaw = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

// fragmentShader
varying vec2 vUv;
uniform float uTime;
uniform vec2 uResolution;
uniform vec2 uMouse;

void main() {
  float r = abs(sin(uTime + vUv.x * 10.0));
  float g = abs(sin(uTime + vUv.y * 10.0));
  float b = abs(sin(uTime));
  csm_FragColor = vec4(r, g, b, 1.0);
}

Customization

Load from file:

<ShaderCanvas
  vertexShader="/shaders/my.vert.glsl"
  fragmentShader="/shaders/my.frag.glsl"
/>

Hot-reload: Changing the vertexShader or fragmentShader prop will reload the code automatically.
Uniforms:
- uTime: elapsed time in seconds
- uResolution: vec2(window.innerWidth, window.innerHeight)
- uMouse: normalized mouse coords (−1…+1)
Fonts & Text: Drop any Three.js font JSON in /public/fonts/ and update fontPath.

Examples

// Overlay HTML on top of the shader
<ShaderCanvas>
  <div style={{ color: 'white', fontSize: '2rem' }}>Overlay HTML</div>
</ShaderCanvas>

// Floating 3D text
<ShaderCanvas textOptions={{ size: 1.5, position: [0, 1, 0.2] }}>
  Floating Text
</ShaderCanvas>

Development

Dependencies: @react-three/fiber, @react-three/drei, three-custom-shader-material.
TypeScript + Hooks: Fully typed, functional components.
Linting & Formatting: Configure ESLint/Prettier as desired.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme