Javascript

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Task Navigation 

Canvas/WebGL + js

The Html(5) canvas element is a place to render stuff on a webpage, the graphics are scripted using Javascript.

While the Html5 specification provides a 2D interface, the WebGL API provides for 3D rendering also via Javascript.

This Task will be used to discuss this.

http://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf

Example

http://cycleblob.com/  - implemented using WebGL and HTML 5 canvas elements and is written completely in JavaScript.

Links

http://www.chromeexperiments.com/webgl/?f=webgl
http://www.ro.me/tech/
http://alteredqualia.com/

Task Discussion


  • Anonym   May 23, 2011, 1:02 p.m.

    Browser Situation

    The WebGLworking group has Google, Mozilla, Apple and Opera and finalized 1.0 back in March.

    Microsoft has not implemented WebGL for IE9 and their strategy is unknown (there are plugin workarounds).

    Because WebGL is based on OpenGL ES 2.0 it can be easily transitioned to the mobile web.

    Competing/complementary technologies include Microsoft DirectX, OpenGL itself, Java(FX?), Flash and Silverlight.

    A big plus for WebGL (and Canvas) is that, apart from being browser based, no plugin/download is required. WebGL graphics while not in the same class as DirectX and OpenGL, are quite good.

  • Anonym   May 23, 2011, 7:56 a.m.

    It is also possible to use a 3D library (in a style similar to using jQuery):-

    https://github.com/mrdoob/three.js/  for an example of this.

  • Anonym   May 23, 2011, 6:38 a.m.

    Here is the basic code to set up a canvas element for 3D operations:

    http://jsbin.com/apima5/3/edit

  • Anonym   May 23, 2011, 5:53 a.m.

    Here is the basic code to set up a canvas element for 2D operations:

    http://jsbin.com/akojo5/5/edit