🚦 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>
)

more examples

API

• signal-gl low level abstraction around webgl
• signal-gl/world game engine built on top of signal-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

• regl functional webgl library
• ogl minimal webgl library
• twgl tiny webgl library
• four minimal webgl/webgpu alternative to three.js
• useGPU declarative, reactive webgpu library + glsl/wsgl linker/treeshaker
• lume signal-driven custom html-elements for webgl/webgpu