GlowScript: 3D animations in a browser

You are invited to try out GlowScript (“Graphics Library on Web”), an easy to use 3D programming environment inspired by VPython, but which runs in a browser window. The programming language is JavaScript, and it drives the new WebGL 3D graphics library to display in a “canvas” element on a web page. GlowScript has been developed by David Scherer (the originator of VPython) and me. (Note added September 2012: You can also write your programs in CoffeeScript, a cleaner language that is automatically compiled to JavaScript when you run your program. Just add “CoffeeScript” to the header line of the program.)

* At glowscript.org, click Help in the upper right corner of the window and see up-to-date information on which browsers and hardware currently support GlowScript, which requires WebGL. There are also links there for learning JavaScript.

* GlowScript uses the WebGL 3D graphics library that is included in current versions of major web browsers. You must have a modern graphics card with Graphics Processing Units (GPUs). Browser details follow.

Chrome: Runs GlowScript without modification.

Firefox: Recent versions have WebGL enabled. For older versions, to activate WebGL go to the fake URL about:config, search for webgl, and set webgl.force-enabled=true. To find out what version of Firefox is installed, use the fake URL about:.

Safari: To activate WebGL in Safari 5.1 (included with OSX Lion), go to the Advanced section of Safari preferences and check “Show Develop menu in menu bar”, then on the Develop menu check “Enable WebGL”. Prior to Safari 5.1, to get WebGL required downloading and installing WebKit from Apple (nightly.webkit.org).

Internet Explorer: Although the basic version of Internet Explorer does not include WebGL, there is a WebGL plug-in available at code.google.com/chrome/chromeframe which lets you run GlowScript.

Tablets and smart phones: Many tablets and smart phones do not yet support WebGL, though this is likely to change. On at least some Android devices (tested on the Samsung Galaxy S3 smartphone and an Asus tablet), the Firefox, Chrome Beta, and Opera browsers do run GlowScript programs, though transparency is buggy, and currently there is no way to zoom and rotate. Animations are slow on some versions of the browsers. There are reports that GlowScript also works on the Sony Experia smartphone.

* At glowscript.org, run the example programs.

* Log in (you’ll be asked for a Google login, such as a gmail account), and try writing some programs yourself.

* Click “Run this program” or press Ctrl-1 to execute your program in the same window, then click “Edit this program” to return to editing.

* Alternatively, while editing press Ctrl-2 to execute your program in a separate window, so that you can view the execution and the program code simultaneously. After making edits, press Ctrl-2 in the editor to run the new program.

* While running a program, click Screenshot to capture a thumbnail image for your program page.

* In the editor, click Share this program to learn how to let other people run your program.

You will see in the Help that some parts of the language are particularly likely to change, so be prepared for that. On the other hand, there is a version system in place that will allow old programs to continue running in the future. The first line of a program you write is automatically created to be “GlowScript X.Y” (where X.Y is the current version number). When a new version comes out, the software for running the older version is retained for use whenever a program with an old version number is encountered. For example, programs written for either GlowScript 0.3 or 0.4 or 0.5 can all run today (the version system was created after GlowScript 0.2).

There is now a user forum connected to glowscript.org, where you can describe your experiences or ask for assistance.

I am committed to maintaining and hopefully extending VPython, as it is obviously much more mature than GlowScript and benefits from the existence of lots of useful modules, especially for scientific programming.

While the graphics in GlowScript today are pretty basic, it is already clear that WebGL with its emphasis on the use of Graphics Processing Units (GPUs) available on modern graphics cards, will make it possible for GlowScript to do very high-quality graphics. VPython was created at a time when that was not an option, but it is possible that the graphics developments for GlowScript will provide a foundation for improving the graphics in VPython.

For users of VPython, note that on the first page of the GlowScript Help there is a document summarizing the main differences between VPython and GlowScript, much of which is just differences between Python and JavaScript. Also available there is a Python program for converting VPython programs to GlowScript programs. It doesn’t do a perfect job, but it does deal with most of the basic changes that are needed and should save quite a bit of time in the conversion.

If you are new to programming, or just new to JavaScript, you’ll find the JavaScript tutorials at www.codecademy.com very helpful.

There are also helpful interactive tutorials on JavaScript available at www.w3schools.com/js. However, these tutorials assume quite a lot of prior knowledge about html and related web design issues.

An excellent textbook is JavaScript: The Definitive Guide by David Flanagan (6th edition, 2011). This book assumes some prior programming experience but has the advantage of being quite complete, including extensive information on how to use JavaScript and jQuery to make dynamic web pages.

JavaScript reference materials are found at developer.mozilla.org/en/JavaScript.

You can also write GlowScript programs in CoffeeScript, whose syntax is somewhat simpler. In the GlowScript collection of example programs are some pairs — the same program written in JavaScript and in CoffeeScript, so you can compare. See the first page of the Help to learn more about the CoffeeScript option.

About these ads
This entry was posted in Uncategorized. Bookmark the permalink.

One Response to GlowScript: 3D animations in a browser

  1. Hi there colleagues, its great paragraph on the topic
    of teachingand fully explained, keep it up all the time.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s