I didn't use a real framework. I just used and tweaked the "spinning box" demo that probably everyone has seen, and added my own middle layer between the VPython-API "box" object and the box object that's in the spinning box, and dealt (inadequately) with the update process. As you may have seen, I surround the easy VPython-like program with imports of highly technical files that provide the WebGL stuff.
Today I looked through the following list of libraries: http://ffwd.typepad.com/blog/2011/04/webgl-what-flavor-is-your-engine.html For my purposes, I like PhiloGL (http://senchalabs.github.com/philogl) because it includes some primitives (cube, sphere, cylinder, cone), shows Philo versions of the popular WebGL tutorials found at http://learningwebgl.com/blog/?page_id=1217, and has helpful API documentation. The person who posted the list of libraries likes GLGE, but I couldn't find sufficiently detailed documentation on GLGE for my novice needs. For what it's worth (maybe not much), here are my own notes on the libraries I looked at: Libraries and demos to Google for: WebGL Wiki http://www.khronos.org/webgl/wiki/Demo_Repository Also see angleproject.googlecode.com (translates OpenGL ES to DirectX 9) http://ffwd.typepad.com/blog/2011/04/webgl-what-flavor-is-your-engine.html list of engines C3DL: good complete programs in a set of tutorials. Alas, seems to emphasize Collada models. Nice lighting and mouse and material functions. Even has particles! CopperLicht: game oriented. Looks like maybe primitives accessible from CopperCube, an editor. Curve3D: “Pure JavaScript.” Maybe isn’t WebGL, since it works in IE. CubicVR: “Partially poarted to WebGL”. Energize GL: http://www.3d-test.com/interviews/EnergizeGL_1.htm I can’t find a download or docs. GammaJS: seems to be a 2.5D game platform. GLGE: formal docs, but well recommended at the above engine site http://www.glge.org/ JS3D: http://www.wxs.ca/js3d/ Not a serious contender; very limited Kuda: Not clear that it is WebGL. Includes a modeling app. O3D (Google): http://code.google.com/p/o3d/ Not clear what its status is; moving toward WebGL OSG.JS: Can’t find docs. PhiloGL: Wrapping of the main WebGL tutorials. Good API docs. Primitives: cube, sphere, cylinder, cone; easy to use camera syntax Looks good. http://senchalabs.github.com/philogl/ Pre3d: No docs. SceneJS: Maybe. Has some decent documentation. Seems like quite a different API. “Nodes”? SpiderGL: formal docs. Bruce On Thu, May 26, 2011 at 10:29 AM, Owen Densmore <[email protected]> wrote: > [I'm including the SFX list due to their being interested in this] > > Hi Bruce, good info. > > One question that popped up during Ed's presentation yesterday and the > following conversations was "what's a good WebGL toolkit". I believe you > used EWGL, right? > > There seems to be quite a few webgl toolkits springing up, and I wondered if > you had any insight into which of them are worth considering and what are > their strengths and weaknesses. > > -- Owen > > On May 25, 2011, at 3:10 PM, Bruce Sherwood wrote: > >> Here is an attempt to make it very easy to write WebGL programs: >> >> http://dl.dropbox.com/u/18859068/EasyWebGL20110525.zip >> >> Here is a summary found in the file oscillator.htm: >> >> // This is an attempt to emulate in JavaScript/WebGL >> // the ease of use found in Python/VPython/OpenGL (vpython.org). >> // In VPython, one writes simple programs that generate >> // navigable real-time 3D animations as a side-effect of >> // computations. >> >> // The following example uses vector operations only >> // sparingly compared to VPython, due to the absence of >> // operator overloading in JavaScript (e.g. vector1+vector2). >> // The example is intended as a simple proof of concept of >> // hiding all the extremely technical WebGL stuff, to make >> // it feasible for ordinary mortals to do 3D in a browser. >> // It is based on the well-known spinning box WebGL demo. >> >> // There's only one object (box) whose size is modifiable. >> // The color of everything is cyan, lighting is primitive. >> // There's some kind of timing glitch that is addressed by >> // the kludge of an alert box (in visual.js). You need to >> // acknowledge the alert, then on the next appearance you >> // need to check the box to show the alert no more. I would >> // appreciate advice on this problem: rendering is done but >> // doesn't appear until the end of the program, despite use >> // of gl.flush() and gl.finish(). >> >> Bruce Sherwood >> > > > On May 25, 2011, at 8:08 PM, Bruce Sherwood wrote: > >> Addendum: Here is the complete program in this easy WebGL environment. >> It's a numerical integration of two blocks (m1 and m2, each of mass m) >> connected by a spring (or rubber band, represented by a long box); the >> x component of momentum of the right-hand block is p. >> >> Hopefully much of the program is self-explanatory, but maybe not the >> rate(100) statement, which (taken from VPython) means "do no more than >> 100 iterations per second in this loop", to control the rate at which >> the animation proceeds. In VPython this statement is optional, because >> a rendering thread interrupts about 30 times per second to draw (using >> OpenGL) the objects with their current attributes. I don't know how to >> do that in JavaScript, so here the rate statement is obligatory, >> because it not only limits the loop iteration rate but also >> periodically drives the renderer. >> >> d = 1 >> xi = 2 >> >> m1 = box({pos:vector(-xi,0,0), size:[d,d,d]}) >> m2 = box({pos:vector( xi,0,0), size:[d,d,d]}) >> L = (m2.pos.x-d/2) - (m1.pos.x+d/2) >> w = 0.05*d >> V = L*w*w >> spring = box({pos:vector(0,0,0), size:[L,w,w]}) >> >> L0 = .9*L >> >> ks = 10 >> m = 1 >> p = 0 >> t = 0 >> dt = .01 >> while (t < 15) { >> rate(100) >> F = -ks*(m2.pos.x-L0/2) >> p += F*dt >> m2.pos.x += (p/m)*dt >> m1.pos.x -= (p/m)*dt >> L = (m2.pos.x-d/2) - (m1.pos.x+d/2) >> w = sqrt(V/L) >> spring.size = [L,w,w] >> t += dt >> } >> >> On Wed, May 25, 2011 at 3:10 PM, Bruce Sherwood >> <[email protected]> wrote: >>> Here is an attempt to make it very easy to write WebGL programs: >>> >>> http://dl.dropbox.com/u/18859068/EasyWebGL20110525.zip >>> >>> Here is a summary found in the file oscillator.htm: >>> >>> // This is an attempt to emulate in JavaScript/WebGL >>> // the ease of use found in Python/VPython/OpenGL (vpython.org). >>> // In VPython, one writes simple programs that generate >>> // navigable real-time 3D animations as a side-effect of >>> // computations. >>> >>> // The following example uses vector operations only >>> // sparingly compared to VPython, due to the absence of >>> // operator overloading in JavaScript (e.g. vector1+vector2). >>> // The example is intended as a simple proof of concept of >>> // hiding all the extremely technical WebGL stuff, to make >>> // it feasible for ordinary mortals to do 3D in a browser. >>> // It is based on the well-known spinning box WebGL demo. >>> >>> // There's only one object (box) whose size is modifiable. >>> // The color of everything is cyan, lighting is primitive. >>> // There's some kind of timing glitch that is addressed by >>> // the kludge of an alert box (in visual.js). You need to >>> // acknowledge the alert, then on the next appearance you >>> // need to check the box to show the alert no more. I would >>> // appreciate advice on this problem: rendering is done but >>> // doesn't appear until the end of the program, despite use >>> // of gl.flush() and gl.finish(). >>> >>> Bruce Sherwood >>> > > > > ============================================================ > FRIAM Applied Complexity Group listserv > Meets Fridays 9a-11:30 at cafe at St. John's College > lectures, archives, unsubscribe, maps at http://www.friam.org > ============================================================ FRIAM Applied Complexity Group listserv Meets Fridays 9a-11:30 at cafe at St. John's College lectures, archives, unsubscribe, maps at http://www.friam.org
