• Stars
    star
    1,486
  • Rank 31,621 (Top 0.7 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 10 years ago
  • Updated 9 months ago

Reviews

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

Repository Details

🎓 The sequel to shader-school: Learn the WebGL API

webgl-workshop

NPM

Learn the basics of WebGL in small, manageable chunks. The sequel to shader-school, created for CampJS IV by Mikola Lysenko and Hugh Kennedy.

Running This Thing

First, you need to get a browser with WebGL, as well as a copy of node.js and git. Once you have all of that set up, you can install the workshop using npm, which is included with node:

sudo npm install -g webgl-workshop

After that completes, you should be able to run the workshopper with the command:

webgl-workshop

The script will ask you if you want to create an answer directory, press y to accept. This will populate your current directory with shader files for you to edit for each lesson.

Other Resources

There are also local copies of the following documentation available in the docs directory in this repository.

Stuck?

Feedback and criticism is welcome, please log your troubles in issues.

Full curriculum reviews like this one are very helpful. More feedback like this please!

Screenshots

screenshot

screenshot

screenshot

screenshot

License

MIT. See LICENSE.md for more details.

Many thanks to Raph Levien for designing Inconsolata which is used in this project, and licensed under the SIL Open Font License.

More Repositories

1

shader-school

🎓 A workshopper for GLSL shaders and graphics programming
JavaScript
4,275
star
2

glsl-lighting-walkthrough

💡 phong shading tutorial with glslify
JavaScript
458
star
3

glsl-transpiler

Transpile GLSL to JS
JavaScript
175
star
4

gl-shader

🎁 WebGL shader wrapper
JavaScript
120
star
5

packages

📦 A list of packages that fall under the stack.gl umbrella
JavaScript
113
star
6

glsl-parser

transform streamed glsl tokens into an ast
JavaScript
98
star
7

gl-mat4

gl-matrix's mat4, split into smaller pieces
JavaScript
79
star
8

gl-now

Create a WebGL context now!
JavaScript
63
star
9

gl-fbo

WebGL framebuffer wrapper
JavaScript
60
star
10

gl-texture2d

WebGL texture wrapper
JavaScript
59
star
11

stackgl.github.io

💻
JavaScript
58
star
12

gl-audio-analyser

Pull audio waveform/frequency data into WebGL for realtime audio visualisation
JavaScript
57
star
13

gl-particles

✨ Convenience module for FBO-driven particle simulations.
JavaScript
57
star
14

gl-vec3

gl-matrix's vec3, split into smaller pieces
JavaScript
53
star
15

gl-geometry

A flexible wrapper for gl-vao and gl-buffer that you can use to set up renderable WebGL geometries from a variety of different formats.
JavaScript
49
star
16

bunny-walkthrough

Draws a 3D bunny to the screen using stack.gl
JavaScript
42
star
17

gl-vec2

gl-matrix's vec2, split into smaller pieces
JavaScript
36
star
18

glslbin

🔮
JavaScript
29
star
19

learning-webgl-01

Learning WebGL Lesson 1 converted from vanilla WebGL to use stack.gl.
JavaScript
28
star
20

snowden

3D mesh of Snowden's Bust.
JavaScript
27
star
21

gl-vao

Vertex array object wrapper for WebGL
JavaScript
24
star
22

gl-buffer

WebGL buffer wrapper
JavaScript
23
star
23

ray-aabb-intersection

Determine the point of intersection between a ray and axis-aligned bounding box (AABB)
JavaScript
23
star
24

gl-shader-core

Core implementation of gl-shader without parser dependencies
JavaScript
22
star
25

glsl-extract

extract uniforms and attributes from glsl programs
JavaScript
19
star
26

gl-reset

Completely reset the state of a WebGL context, deleting any allocated resources
JavaScript
19
star
27

gl-toy

🔮 Quickly create WebGL demos using glslify
JavaScript
19
star
28

gl-magic-uniforms

🎩 Create a magic getter/setter object for a given WebGLProgram's uniforms.
JavaScript
18
star
29

webglew

WebGL Extension Wrangler
JavaScript
17
star
30

gl-mat3

gl-matrix's mat3, split into smaller pieces
JavaScript
17
star
31

gl-state

Saves WebGL context state
JavaScript
17
star
32

gl-post

Simple WebGL post-processing using some pieces from stack.gl
JavaScript
14
star
33

glsl-min-stream

through stream that transforms glsl-parser AST nodes and rewrites variables into shorter forms
JavaScript
14
star
34

contributing

Contribution guidelines for stackgl projects
14
star
35

gl-mesh

Draws static indexed geometry in WebGL
JavaScript
12
star
36

gl-texture2d-read-float

Read out the contents of a floating-point gl-texture2d
JavaScript
11
star
37

gl-clear

A helper WebGL module for clearing the current buffer
JavaScript
11
star
38

lookat-camera

Simple "lookat" camera abstraction built on top of gl-matrix
JavaScript
10
star
39

glsl-deparser

through stream that translates glsl-parser AST nodes into working glsl code
JavaScript
10
star
40

glslify-api

An API and accompanying client for generating glslify shaders in the browser
JavaScript
10
star
41

gl-modules.github.io

modules.gl website
CSS
9
star
42

gl-texture2d-pip

🔲 Preview the contents of a set of gl-texture instances alongside your main render pass.
JavaScript
9
star
43

gl-quat

gl-matrix's quaternion, split into smaller pieces
JavaScript
8
star
44

gl-compare

Visually compare two webgl render loops on the fly
JavaScript
8
star
45

stackgl-readme-css

Reusable CSS for styling README/Markdown content consistently.
HTML
8
star
46

learning-webgl-02

Learning WebGL Lesson 2 converted from vanilla WebGL to use stack.gl.
JavaScript
7
star
47

gl-mat2

gl-matrix's mat2, split into smaller pieces
JavaScript
7
star
48

gl-api

A JSON listing of the WebGL 1.0 API
JavaScript
7
star
49

learning-webgl-03

Learning WebGL Lesson 3 converted from vanilla WebGL to use stack.gl.
JavaScript
7
star
50

gl-flags

Easily change and access your WebGL flags set by gl.enable/gl.disable with minimised overhead.
JavaScript
6
star
51

gl-buffer-snoop

Intercepts uploads to WebGL buffers in order to keep track of their expected value on the GPU.
JavaScript
6
star
52

gl-vec4

gl-matrix's vec4, split into smaller pieces
JavaScript
5
star
53

gl-shader-errors

"Parses" the log output of `gl.getShaderInfoLog`
JavaScript
5
star
54

gl-modules-workshopper

workshopper for the js side of glsl.
4
star
55

discussions

3
star