GFX

Contents

This package contains:

• tools to work with web graphics APIs (currently WebGL)
• a collection of sketches: these are self contained programs that can be rendered by the Sketch library
• learning notes

Requirements

A Node.js environment and a package.json

Sketches can be rendered using this package:

• @fat-fuzzy/sketch

Usage

Install the package as a devDependency:

pnpm i -D @fat-fuzzy/gfx

Import and use the sketches:

<script lang="ts">
  import {dev} from '$app/environment'
  import gfx from '@fat-fuzzy/gfx'
  import {graphics} from '@fat-fuzzy/sketch'

  let scene = $derived(gfx.gl.sketches.find((s) => s.meta.slug === $page.data.slug))
</script>

<Sketch {scene} size="sm" {dev}/>

GFX library sketches are modules that expose the following functions:

function init(canvas) {}
function main(canvas) {}
function update(context) {} // context depends on the type of program
function clear() {}
function stop() {}
function draw(t) {} // t is for time, an optional parameter

[TODO] : elaborate doc about graphics programs

GLSL

Importing a shader in vite:

import shader from '/some/shader.glsl?raw'

Resources

I’ve grouped my resources for learning web graphics here: Play