@bigmistqke/signal-gl NPM

🚦 signal-gl

minimal inline reactive glsl auto-binding signals no boilerplate tag template literals

Overview

Premise
Bindings
Install
Use it
- Hello World
- More Examples
API
- signal-gl low level abstraction around webgl
- signal-gl/world game engine built on top of signal-gl
Syntax Highlighting
Prior Art

Premise

Minimal abstraction
Minimizing gap between js and glsl
Composition of glsl snippets
Lessen boilerplate with auto-binding uniforms and attributes and sensible 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>
)