@bigmistqke/signal-gl
v0.0.29
Published
signal-driven glsl with auto-bindings and tag template literals
Downloads
15
Readme
🚦 signal-gl
minimal
inline
reactive
glsl
auto-binding
signals
no boilerplate
tag template literals
Overview
- Premise
- Bindings
- Install
- Use it
- API
signal-gl
low level abstraction around webglsignal-gl/world
game engine built on top ofsignal-gl
- Syntax Highlighting
- Prior Art
Premise
Minimal
abstraction- Minimizing gap between
js
andglsl
- Composition of
glsl
snippets - Lessen boilerplate with
auto-binding
uniforms and attributes andsensible
defaults Purely runtime
: no additional build tools- Small footprint:
<5kb minified + gzip
Bindings
Currently there are only solid
bindings, but the dependency on solid
is minimal. If this idea has any merit it would be trivial to make bindings for other signal implementations.
Install
npm i @bigmistqke/signal-gl
# or
pnpm i @bigmistqke/signal-gl
# or
yarn add @bigmistqke/signal-gl
Use it
Hello World [playground]
const [opacity, setOpacity] = createSignal(0.5)
const vertices = new Float32Array([
-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0,
])
const fragment = glsl`#version 300 es
precision mediump float;
in vec2 v_coord;
out vec4 outColor;
void main() {
float opacity = ${uniform.float(opacity)};
outColor = vec4(v_coord[0], v_coord[1], v_coord[0], opacity);
}`
const vertex = glsl`#version 300 es
out vec2 v_coord;
out vec3 v_color;
void main() {
vec2 a_coord = ${attribute.vec2(vertices)};
v_coord = a_coord;
gl_Position = vec4(a_coord, 0, 1) ;
}`
return (
<Stack onMouseMove={(e) => setOpacity(e.clientY / e.currentTarget.offsetHeight)}>
<Program fragment={fragment} vertex={vertex} mode="TRIANGLES" />
</Stack>
)
more examples
API
signal-gl
low level abstraction around webglsignal-gl/world
game engine built on top ofsignal-gl
Syntax Highlighting
use in combination with tag template literal syntax highlighting: see glsl-literal syntax higlighting for vs-code
Prior Art
these libraries could be of interest if you are looking for stable and well-tested webgl libraries