Friam

Easy WebGL

Classic

List

Threaded

4 messages Options

Bruce Sherwood

Easy WebGL

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

Bruce Sherwood

Re: Easy WebGL

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
<[hidden email]> 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

Owen Densmore

Re: Easy WebGL

Administrator

In reply to this post by Bruce Sherwood

[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:

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
> <[hidden email]> 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
>>

Bruce Sherwood

Re: Easy WebGL

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 <[hidden email]> 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
>> <[hidden email]> 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
>