Taghtml5

WebGL: Earth Texture Shader

At university my computer graphic professor Hartmut Schirmacher gave us an excercise to implement various effects on a sphere in webgl with shaders based on his given webgl framework. His framework made it fairly easy though. Well here it is:

The features are:

  • Day and night light with smooth transition
  • Day changes based on the month
  • Moving clouds, which alternate in intensity over time
  • Wireframe and equator ring for orientation purposes
  • Specular lights based on barythmetic map
  • Height based on topyographic map
  • Bump map (work in progress)
  • Rotate with [Left click]
  • Drag with [Shift] + [Left click]
  • Zoom with [Alt] + [Left click]

All textures are taken from NASA’s Blue Marble collection.

This is my solution to cg2 exercersise a03.

WebGL: Robot

Another lovely javascript excerise. Just uncheck the animation to control it better.

This is my solution to cg2 exercersise a02.5-2.6.

WebGL: Backface Culling and Depth Test

One interesting part is the z-fighting, which doesn’t happen with polygon offset fill.

This is my solution to cg2 exercersise a02.1-2.4.

Parametric Curves and deCasteljau Bezier Curves

Cubic Bezier Curves – Under the Hood from Peter Nowell on Vimeo.

You can drag the markers and open this example in new tab.

The core part of this practise clearly is the bezier curve. To get all points on the curve for 4 control points this would suffice.

However in order to use an arbitary amount of control points I use the following function. It’s recursively, so potentially it’ll explode the max available stack depth (no clue how much that is in js). But for now it’ll do the job.

To use the function simply wrap a loop around with your favorite segments amount.

Now simply draw the points.

Et voilà! The animation idea is inspired by

This is my solution to cg2 exercersise a01.2-1.3.

See Also Practical Guide to Bezier Curves

WebGL Course – Canvas API: Draggable Lines and Circles

Well there is not much to say about this excerise, really. You can create lines and circles, drag them, and change their attributes.

This is my solution to cg2 exercersise a01.1.

WebGL: warmup

What are the pros/cons of WebGL?
Read Quote of Henrik Bennetsen’s answer to What are the pros/cons of WebGL? on Quora

This is my “solution” to cg2 exercersise a00-warmup.