• Stars
    star
    122
  • Rank 292,031 (Top 6 %)
  • Language
    JavaScript
  • Created almost 11 years ago
  • Updated over 10 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🚧 Some demos for the Kami WebGL renderer

about

kami is a minimal 2D framework built on WebGL. It supports some essential GL utilities, and a highly optimized sprite batcher. The library is still in heavy development.

demos

Below are some demos and tests for kami.

  • normals - normal-mapped 2D images
  • normals-pixel - retro graphics with normal maps
  • s3tc - demo showing compressed textures (DDS, CRN) and TGA
  • basic - sprite rendering
  • assets - asset preloading
  • shaders - some approaches to including GLSL code
  • shockwave - a shockwave shader example, using post-processing
  • blend - an example of programmable blending, by ping-ponging between two FBOs

browse source code

See the src folder for the code.

modifying & building the demos

Install node.js, it should come bundled with NPM. Then cd to this directory and run the following to build the demos:

npm install
node build

This will write HTML and JS files to the release folder. Then you should serve up the release folder and browse it on your localhost. To watch the source folder for changes, you can use nodemon and the following command:

nodemon --watch src -e js,html,vert,frag build.js

More Repositories

1

canvas-sketch

[beta] A framework for making generative artwork in JavaScript and the browser.
JavaScript
5,019
star
2

budo

🎬 a dev server for rapid prototyping
JavaScript
2,174
star
3

lwjgl-basics

🔧 LibGDX/LWJGL tutorials and examples
Java
1,841
star
4

graphics-resources

📝 a list of graphic programming resources
1,748
star
5

color-wander

🎨 Generative artwork in node/browser based on a seeded random
JavaScript
1,615
star
6

promise-cookbook

📙 a brief introduction to using Promises in JavaScript
1,603
star
7

module-best-practices

📚 some best practices for JS modules
JavaScript
1,521
star
8

workshop-generative-art

A workshop on creative coding & generative art
JavaScript
1,362
star
9

svg-mesh-3d

🚀 converts a SVG path to a 3D mesh
JavaScript
1,169
star
10

workshop-webgl-glsl

A workshop on WebGL and GLSL
JavaScript
1,032
star
11

webgl-wireframes

Stylized Wireframe Rendering in WebGL
JavaScript
713
star
12

workshop-p5-intro

Intro to Creative Coding workshop with p5.js and Tone.js
711
star
13

canvas-sketch-util

Utilities for sketching in Canvas, WebGL and generative art
JavaScript
661
star
14

threejs-app

Some opinionated structure for a complex/scalable ThreeJS app
JavaScript
444
star
15

bellwoods

JavaScript
395
star
16

webgl-lines

some interactive content for a blog post
JavaScript
385
star
17

eases

a grab-bag of modular easing equations
JavaScript
372
star
18

audiograph.xyz

A visual exploration of Pilotpriest's 2016 album, TRANS.
JavaScript
335
star
19

jsconfeu-generative-visuals

Code for the generative projection mapped animations during JSConf EU 2018 in Berlin.
JavaScript
334
star
20

load-asset

Loads a single or multiple assets and returns a promise.
JavaScript
311
star
21

glsl-fxaa

FXAA implementation for glslify in WebGL
GLSL
310
star
22

dictionary-of-colour-combinations

palettes from A Dictionary of Colour Combinations
Python
290
star
23

shader-reload

An interface for reloading GLSL shaders on the fly.
JavaScript
284
star
24

penplot

[DEPRECATED] see canvas-sketch
JavaScript
262
star
25

mp4-wasm

[proof-of-concept] fast MP4 mux / demux using WASM
C
258
star
26

gifenc

fast GIF encoding
JavaScript
246
star
27

codevember

codevember
JavaScript
242
star
28

impressionist

🎨 generative painting using perlin noise for motion
JavaScript
242
star
29

three-line-2d

lines expanded in a vertex shader
JavaScript
224
star
30

three-orbit-controls

orbit controls for ThreeJS
JavaScript
216
star
31

physical-text

🌂 simulating text in the physical world
JavaScript
216
star
32

mp4-h264

[project suspended] MP4 + H264 encoding for the browser with WASM
C
212
star
33

prot

highly opinionated dev environment [Proof of concept]
JavaScript
201
star
34

template-electron-installation

a template for media art installations using Electron in kiosk mode
JavaScript
199
star
35

workshop-web-audio

Web Audio workshop with Frontend Masters
JavaScript
189
star
36

yyz

JavaScript
187
star
37

parametric-curves

JavaScript
185
star
38

fontpath

Font to vector path tools
JavaScript
183
star
39

ghrepo

:octocat: create a new GitHub repo from your current folder
JavaScript
177
star
40

google-panorama-equirectangular

gets equirectangular images from Google StreetView
JavaScript
172
star
41

image-sdf

generate a signed distance field from an image
JavaScript
171
star
42

glsl-film-grain

natural looking film grain using noise functions
JavaScript
171
star
43

subscapes

generative artwork hosted on Ethereum
JavaScript
169
star
44

pack-spheres

Brute force circle/sphere packing in 2D or 3D
JavaScript
161
star
45

polartone

experimental audio visualizer
JavaScript
154
star
46

dom-css

fast dom CSS styling
JavaScript
153
star
47

tiny-artblocks

Toolkit for small ArtBlocks projects
JavaScript
152
star
48

adaptive-bezier-curve

adaptive and scalable 2D bezier curves
JavaScript
138
star
49

atcq

An implementation of Ant-Tree Color Quantization
JavaScript
136
star
50

workshop-data-artwork

material & notes for a workshop on data artwork & creative coding
JavaScript
125
star
51

rust

experiments
JavaScript
122
star
52

kami

🚧 Rendering ecosystem using Node style packaging
JavaScript
120
star
53

looom-tools

Svelte
115
star
54

esmify

parse and handle import/export for browserify
JavaScript
112
star
55

polyline-normals

gets miter normals for a 2D polyline
JavaScript
112
star
56

three-vignette-background

a simple ThreeJS vignette background
JavaScript
111
star
57

simple-input-events

Unified mouse & touch events for desktop and mobile
JavaScript
105
star
58

tweenr

minimal tweening engine
JavaScript
105
star
59

text-modules

✏️ a list of text/font modules
104
star
60

spectrum

a small tool to visualize the frequencies of an audio file
JavaScript
104
star
61

three-shader-fxaa

optimized FXAA shader for ThreeJS
JavaScript
102
star
62

lerp

bare-bones linear interpolation function
JavaScript
101
star
63

canvas-sketch-cli

A CLI used alongside canvas-sketch
JavaScript
92
star
64

svg-path-contours

gets a discrete list of points from svg
JavaScript
90
star
65

pen-plotter-blog-post

JavaScript
90
star
66

simplify-path

simplify 2D polyline of arrays
JavaScript
83
star
67

garnish

🍸 prettifies ndjson from wzrd and similar tools
JavaScript
81
star
68

get-rgba-palette

gets a palette of prominent colors from an array of pixels
JavaScript
81
star
69

keytime

[EXPERIMENT] keyframe animation tools
JavaScript
79
star
70

three-glslify-example

a simple example of ThreeJS with glslify
GLSL
77
star
71

canvas-text

[experiment] better Canvas2D text rendering
JavaScript
77
star
72

raylight

Experimental WebGL Music Visualizer
JavaScript
76
star
73

verlet-system

2D and 3D verlet integration
JavaScript
75
star
74

word-wrapper

wraps words based on arbitrary 2D glyphs
JavaScript
71
star
75

mp4-wasm-encoder

JavaScript
70
star
76

gl-sprite-text

bitmap font rendering for stackgl
JavaScript
69
star
77

tendril-webtoy-blog-post

A blog post for an interactive Tendril web toy
68
star
78

paper-colors

A small set of pastel and off-white paper colors
JavaScript
68
star
79

threejs-tree-shake

Tree-shakes and optimizes ThreeJS apps
JavaScript
66
star
80

gh-readme-scrape

a CLI to bulk download URLs (images/pdfs/etc) from GitHub readmes
JavaScript
65
star
81

fika

A figma plugin generator
JavaScript
60
star
82

shadertoy-export

render ShaderToy demos to PNG
JavaScript
59
star
83

glsl-random

pseudo-random 2D noise for glslify
C
59
star
84

electron-canvas-to-buffer

in Electron, turns a Canvas into a Buffer
JavaScript
55
star
85

gl-vignette-background

a soft gradient background in WebGL
JavaScript
55
star
86

webpack-three-hmr-test

test of ThreeJS + Webpack + HMR
JavaScript
53
star
87

workshop-generative-color

a workshop on color science for generative art and creative coding
JavaScript
52
star
88

filmic-gl

filmic GLSL shaders in ThreeJS
JavaScript
51
star
89

riso-colors

A list of Risograph printer colors
51
star
90

gsx-pdf-optimize

Optimize PDFs with Ghostscript command
JavaScript
50
star
91

raf-loop

a minimal requestAnimationFrame render loop
JavaScript
49
star
92

gdx-swiper

An example of a "Fruit Ninja" style swipe in LibGDX
Java
47
star
93

gsap-promise

promise wrapper for gsap (TweenLite)
JavaScript
47
star
94

browserify-example

a bare-bones, no-bullshit example of using browserify to dev + build a static demo
JavaScript
45
star
95

extract-svg-path

extracts a string of subpaths from an svg file
JavaScript
45
star
96

figma-plugin-palette

"Image Palette" Plugin in Figma
JavaScript
42
star
97

adaptive-quadratic-curve

adaptive and scalable 2D quadratic curves
JavaScript
42
star
98

three-geometry-data

Get vertex and face data from THREE.Geometry
JavaScript
40
star
99

budo-chrome

an extension of budo dev server that supports live script injection
JavaScript
39
star
100

three-tube-wireframe

Builds a tube-based wireframe geometry in ThreeJS
JavaScript
39
star