Gadgets and demonstrations (uncategorized)

by Eftychios Sifakis on January 25, 2017

L-shape & axes [JSBin link]

Combining more than one transform [JSBin link]

Quadrant [JSBin link]

A simple demonstration of using a slider interface, and simple transforms [JSBin link]

And, a full 2D hierarchical modeling example [JSBin link]

And the same example, with axes drawn [JSBin link]

Animation example [JSBin link]

Several transformations [JSBin link]

A more heavily annotated version [JSBin link]

Step 1 : Introduce explicit transforms (without them doing anything) [JSBin link]

Step 2 : Using TWGL [JSBin link]

Step 3 : TWGL with user-maintained stack [JSBin link]

Viewing toy (just model + camera transforms) : [JSBin link]

Perspective viewing toy (in 2D) : [Link]

Perspective viewing toy (in 3D) : [Link]

Using curves to craft trajectory and orientation (in 3D) : [Link]

Some shaders we will discuss in class (in shdr.bkcore)

Simple specular examples

  • With per-fragment shading (shdr)
  • With per-vertex shading (shdr)

A few shaders prepared by Yusef, last year

  • http://goo.gl/9pvMqz
  • http://goo.gl/ZYYjzl
  • http://goo.gl/bjpX56
  • http://goo.gl/9yvVYT
  • http://goo.gl/RhRgeC

A more complicated example

Another example, simple specular

  • https://goo.gl/0pO3IK

Introductory examples – most of them we’ll discuss in class (or we already have)

[SPOILER ALERT! These examples are very close to what you will be doing for P6. Make sure to understand them, rather than blindly adapting them]

  • A pyramid drawn as explicit triangles [JSBin]
  • Same pyramid drawn using indexed vertex lists [JSBin]
  • Cube with flat-shaded faces, drawn using indexed vertex lists [JSBin]

Texturing examples

Starting point … a pyramid drawn as explicit triangles [JSBin]
Same pyramid drawn using indexed vertex lists [JSBin]
Cube with flat-shaded faces, drawn using indexed vertex lists [JSBin]
Cube with procedural texture [JSBin]
Cube with checkerboard texture, mipmap [JSBin]
A different texture, combined with face colors, mipmap [JSBin]
Options for handling texture coordinates outside [0,1] interval [JSBin]
Using Yusef’s Base64 encoding, mipmap off [JSBin]
Yet another way to read in local images, using the FileReader API [JSBin]
Two textures used at the same time [JSBin]
Texture and lighting [JSBin]

Multiple Objects in WebGL [JSBin]

Starting point for render-to-texture (eliminated Z-buffer test) [JSBin]
Two-pass render-to-texture example [JSBin]

Simple (not fully accurate) bump mapping example [JSBin]

Demonstration of the spirit of projector textures [JSBin] — Be careful, there are many things in this exceptionally simple example that could be VERY different than what you might intend to do.

Parametric curve examples :

Using curves to craft trajectory and orientation (in 3D) : [Link]
Bezier curve example [JSBin]
The same example, restructured to use an abstract basis [JSBin]
Same curve, with trajectory plotted [JSBin]
… and with a Hermite curve substituted instead [JSBin]

Finally, two Hermite curves, joined together [JSBin]

Previous post:

Next post: