https://github.com/svey-xyz/simple-shader-component
Zero dependency shader component
https://github.com/svey-xyz/simple-shader-component
art open-source published webdev
Last synced: 4 months ago
JSON representation
Zero dependency shader component
- Host: GitHub
- URL: https://github.com/svey-xyz/simple-shader-component
- Owner: svey-xyz
- License: gpl-3.0
- Created: 2024-11-15T22:38:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-25T21:48:45.000Z (over 1 year ago)
- Last Synced: 2025-10-25T07:36:53.092Z (8 months ago)
- Topics: art, open-source, published, webdev
- Language: TypeScript
- Homepage:
- Size: 57.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Simple Shader Component
*by [svey](https://svey.xyz)*
[](https://GitHub.com/svey-xyz/simple-shader-component/tags/)
[](https://GitHub.com/svey-xyz/simple-shader-component/commit/)
[](https://github.com/svey-xyz/simple-shader-component/LICENSE)
[](https://github.com/svey-xyz/simple-shader-component)
## Description
This library provides a simple to use webgl shader component, with included framework wrappers and strong typing. Shaders are powerful tools and can be used to add a lot of visual interest to your web project. However, setting-up many shader tools can be complicated and add a large bundle to your project, this library provides a simple core package to make rendering a shader in your DOM incredibly easy.
## Core Concepts
### Why
While libraries like [three.js](https://threejs.org/) are amazing, not every project requires all the provided features. That's where simple-shader-component comes in; this is a zero-dependency library that provides a simple to use component for rendering GLSL shaders on the web.
## Installation & Usage
```zsh
bun i simple-shader-component
```
The base class and types are all exported from the root of the package.
Framework wrappers are available under sub exports.
```ts
import { SimpleShaderCanvas } from 'simple-shader-component/react'
```
***Note**: Right now only the React wrapper is included. If there's interest, or if my workflow requires it, I will add additional wrappers.*
### Hooks
Hooks can be added to any of the class methods, to add a hook you can pass it on construction or using the exposed add hook method.
```tsx
import { Shader, MethodName } from 'simple-shader-component' // import types from base package
const hook = {
methodName: MethodName.RENDER,
hook: (shader: Shader) => void
}
Shader.addHook(hook) // use addHook method
// or pass on construction
```
### Basic Usage
'use client' directive is required to set hooks. If you're not using hooks it can be done in a server component.
```tsx
'use client'
import { SimpleShaderCanvas } from 'simple-shader-component/react'
import { Shader, UniformValue } from 'simple-shader-component'
// Define shaders as strings, or import from a glsl file with a loader
import { frag, vert } from '.your-custom-shaders'
// Example uniform to track elapsed time in the shader
const uniforms: Array = [
{
name: 'u_time',
type: "float",
value: 0.0
}
]
export const Test = () => {
// Simple hook to update a uniform
const loopLogic = (shader: Shader) => {
const uTime: UniformValue = {
name: 'u_time',
type: 'float',
value: shader.getElapsedTime() // Uses exposed method of shader
}
shader.setUniform(uTime)
}
// Define which method to attach the hook to
const loopHook = {
methodName: MethodName.LOOP,
hook: loopLogic
}
// Render component with args
return
}
```
*Coming Soon*
- improved documentation
- screenshots & examples of how shaders as a component can be used to add visual interest
- roadmap