[lively-kernel] Fwd: [webgl-dev-list] Guidelines on Choosing a WebGL Framework - Using Three.js as an Example

[Steve Wart]

This might be of interest to some people on this list. Apologies if
it's too much off topic, but I found it informative.

Cheers,
Steve
---------- Forwarded message ----------
From: Theo Armour <t.armour at gmail.com>
Date: Wed, Apr 27, 2011 at 4:17 PM
Subject: [webgl-dev-list] Guidelines on Choosing a WebGL Framework -
Using Three.js as an Example
To: webgl-dev-list at googlegroups.com
Cc: theo at evereverland.net


Hello Everybody

Be warned: This is a very long post.

And it is aimed primarily at people new to WebGL and 3D in the browser
who visit this group from time to time.

Last October I wrote an email discussing issues with several of the
WebGL frameworks extent at the time.

Yesterday I had another look at the same frameworks and some of the
newer ones. These included GLGE, SceneJS, CopperLicht, PhiloGL, Kuda
and Three.js

Wow! There have been countless improvements. Each one of these has
some great features and is entirely usable.

What does this mean?

I think it means that a lot fewer people will need to undergo the
Giles Thomas’s LearningWebGL Ultimate Stress Test. ;-)

My guess is that most readers here have battled their way through the
lessons – just because we had to.

But now a lot of people who are designers or hackers or app builders
have some really solid alternatives.

Of course, people who want to create shaders or design new cameras
will need their dosage of WebGL training, but the average 3D worker
can jump right aboard one of the frameworks.

If you do want to dive right down into 3D which WebGL framework or
library should you choose?

The following text is a series of questions and answers relating to
choosing a WebGL framework.

I must let you know that I am currently working very hard with one
particular framework – Three.js - https://github.com/mrdoob/three.js

This Q&A only points out where and how Three.js responds to the questions.

But there are no best frameworks. Each one is carving out its own
niche and has its own devotees.

Given the time, I’d want to respond to the Q&A for each framework.

In the meantime I leave that as an exercise for each developer. I hope
that each of you considers each question and, as you pound away at
your coding, you might also think a bit about how responding to these
questions could improve the overall quality and coolness of your
framework.

Each question is in bold, followed by explanatory writing in italics,
followed by my thoughts in plain text as to how well Three.js complies
with the question. Occasionally there are comments and references to
other frameworks.

***

Guidelines on Choosing a WebGL Framework - Using Three.js as an Example



Is the source code on GitHub?

With source code on GitHub, it means it’s easy to view the source code
before making the effort of downloading. It increases the probability
that other people can or are merging their code into the project – in
other words there might be a team being created rather than just an
individual effort. GitHub is ruling the world in its domain. Just as
we allow Gmail, NetFlix or Twitter to lord over parts of our lives,
GitHub is “it” when it comes to code-sharing. And nothing else comes
close.

Three.js has been on GitHub since its inception. It’s had 23
contributors (including a tiny one by me) and has 2,005 followers and
148 forks.

Other framework builders: My suggestion is that if your code is not on
GitHub, would it be possible clone or mirror it over to GitHub. Do
keep using your current  development environment. Just copy your
source code over to GitHub from time to time. The benefit is that you
will soon start getting pull requests with users supplying you with
bug fixes and new features.



Can you run the examples as a local file without installing a server?

If you do create a local clone of a the project, can you double click
an example HTML and have it run as a file:///... Or do you have to set
up a a local web server and run it as http://? This generally happens
when the framework loads files using XMLHttpRequest. If the framework
does require a server, this should be clearly spelled out. If the new
user cannot get your examples to run, they are not likely to start
using your framework.

Three.js sample files work just fine locally. Also a number of the
HTML demo files are copied over to the special GitHUB gh-pages section
so that the demo HTML files run directly on the GitHub server.

Few of the other frameworks on GitHub are using his trick. The other
frameworks demo files run on their own servers and GitHub is only used
to show the source code. I feel that Mr Doob’s method of using the
gh-page adds a touch completeness that other do not have.



Is there a content delivery network (CDN) for the framework?

Eventually we want our stuff to be embedded in Blogger or
WordPress.com or Posterous or Tumblr or wherever. For these and many
other good reasons (just ask the jQuery, MooTools and other framework
developers) having your files accessible to all from a public server
is a good idea. Often sourcing .JS files from the RAW folder on GitHub
is sufficient.

There are many advantages for using a CDN. If nothing else, once the
framework code is downloaded it does not need to be downloaded again –
even when users go to other sites that use your framework.

Three.js files are not available off of Mr.doob’s own server or from
Google or any of the other large CDNs, but thy are available and
usable off of GitHub. See them in action in the next question.



Will the framework run on jsFiddle?

http://jsfiddle.net is an extraordinary resource for helping solve
support issues, demoing snippets and general hacking around. It’s also
part of an immediacy thing involving node.js and its innumerable
plug-ins - in other words exciting stuff.

Here is an example of the Three.js “Hello World!” running in jsFiddle:

https://github.com/mrdoob/three.js

and another just for fun:

http://jsfiddle.net/theo/nUruF/



Is there a Google Group for the framework?

Mailman servers, Yahoo groups don’t count. Google Groups still sucks
quite a bit. But it’s the only game in town. The Forum in GitHub is
fine for bug-tracking and problem solving, but your community needs a
way of hearing about what’s happening via email without too much
bother.

There is no Google Group for Three.js.  ;-(



Are there coding samples?

A coding sample shows just one thing. For example: how to create an
instance of a primitive or just a single type of light. Coding samples
are different from Demos. Demos show the wonderful things the product
can do – how complex it can get. In order for a new user to get going,
a bunch of simple and straightforward coding examples is essential.
Once you have these you do not need tutorials or other explanations.
The increase in coding samples was on of the big improvements over the
last six months.

Three.js has nearly a hundred coding sample files. Some of these files
do verge on being demos because of their complexity but the great
majority of the samples are there simply to help you how to code with
Three.js.



Is there more than one developer?

We have all worked with great products that just died. Very often the
original developer got a job or otherwise lost interest and we were
left with a development stream that went nowhere. Is the source code
on GitHub and does it have multiple authors?

Three.js has at least two significant developers – Mr.doob and Altered
Qualia. There have been a good number of other contributors including
developers from other frameworks including developers normally
associated with GLGE and PhiloGL.



Is there a buzz  on Twitter / IRC / Reddit or a blog?

There is this great framework, but how do you learn about the great
things being done with it and, usually even more important, the
interesting little things being done with it?

Both Mr.doob and Altered Qualia are on Twitter.

https://twitter.com/#!/search/three.js gets a good amount of traffic.

Mr.doob is on http://webchat.freenode.net/?channels=three.js.

There is a Reddit page for Three.js: http://www.reddit.com/r/threejs/



How do you acquire and import 3D data for the framework? Does the
framework read JSON, XML or Collada files?

It is beyond the scope of this post to dive into a JSON versus XML
versus Collada discussion, but your framework must have a way of
importing files via one of these formats.

I have not played around with this much yet, Three,js come with
exporters that will take 3DS and FBX and translate these into JSON
files readable by Three.js. It also comes with Blender export and
import JSON files.

I believe you will find that the other frameworks will have similar
capability. This is a big change from six months ago when I had a very
difficult time getting any of the frameworks to import anything.



Is there a method for getting data from Blender to the  framework?

Two years ago I was very bullish on Collada. It was the cutting edge
XML format. I still think it’s a great format and that Google were
wise in using it (in a zipped format) as the basis for storing data in
SketchUp).  But suppose there is an issue with the Collada file and
the file was made using Maya and there is no way you are going out to
pay X thousands of dollars to  buy Maya to fix the issue.  The cool
thing to do these days is to get the file into Blender, make any
changes there and then get the file into your framework.

Three,js: See previous question.



Can you import shaders and animations?

Can you bring in more than just geometry and colors from Blender and
other outside sources?

I’m not there yet enough with Three.js to comment on this.  I know a
lot has been brought in from other apps. There are credits and
references to Papervision and many other app sprinkled throughout the
source code, but I don’t know how hard or easy a process that has
been.



Is there a good complement of lights, cameras and primitives?

One of the reasons we need a framework rather than working directly
with WebGL is that 3D has so many things to contend with. Designing a
camera can take days. Are there sufficient bits in the library for you
to get going?

Three.js does not have the tools that Blender has (not a fair
comparison but can't think of a better one) but it certainly has
enough to build quite complex scenarios.



Is there a license? Who owns the copyrights?

Is the owner of the copyright one person or a group of people or an
organization. Is the license as flexible as you want it to be?

Three.js is distributed under a MIT license which is very free. It’s
copyright notice implies that more than just person is involved which
makes me happier : Copyright (c) 2010-2011 three.js Authors.



Are the authors heroic figures?

I haven’t done anything interesting in decades myself, but that
doesn’t stop me from wanting my framework developers to have a a
personality and a life. What I’m generally looking for is evidence an
ongoing to create and innovate and yet stay on-topic – a burning
desire to stick to it – a raging inferno that never entirely consumes
itself.

Both Mr.doob and Altered Qualia have a history in developing some
quite nifty web sites. See http://www.thewildernessdowntown.com/.

Mr.doob grew out of the Macromedia/Adobe Flash tradition.

On May 14, Mr.doob will be appearing in this year’s “Seven on Seven”
presented by the Rhizome.org and the New Museum in New York:

http://rhizome.org/sevenonseven/

Good luck Mr.doob!



Is the framework self-documenting?

We don’t want tutorials. They are always out of date. We don’t want
API reference manuals – unless they are automatically built from the
source code and updated with every merge. Forget FAQs and knowledge
bases. The code and its example files is it. No intermediaries between
me and the truth please.

The directories, files, variables, their names and organization are
the documentation.

This is probably the greatest determinant of which WebGL framework you
will choose. Are you a Java person or a jQuery person? Are you a
JavaScript or a MySQL person?  Whatever you are there is a framework
evolving for you.

One of the things I prefer with WordPress over Drupal is that when you
see a function that has the word “Login” in it then you just look for
a file that has “login” in its title then you are there. With Drupal
it’s all about learning an API.

I find the same is true with Three.js. If the example says
“pointLight” then look for a file that says “pointLight” and you will
find all the answers you need.



***

Well, there you have it.

I hope I have made some framework developers think a little bit about
what their overall outward appearance is like,

Yes, I have been very complimentary with Three.js

But, you know what?

I think if I sat down and spent time with each of the frameworks I
would come back with a different but overall equally glowing report.

All of the frameworks have issues and all are getting better fast.

The significant differences are not in their capabilities or features.

The differences reflect the coding style or point of view of the authors

What do you prefer Java, JavaScript, jQuery or LISP?

No matter there is a framework out there that will suit your preferred
way of working.

**

Have I made a lot of booboos or gotten something totally wrong? If so,
just remember what Mr.doob says about Three.js:

"The aim of the project is to create a lightweight 3D engine with a
very low level of complexity — in other words, for dummies."

;-)

Theo





Regarding the framework developers, I would like to see a little
cooperation in developing standardized JSON/XML data formats. I Look
forward to the day that  I can upload some Three.js work to OurBricks
and add it to work put up by my colleagues using GLGE, PhiloGL, Kuda
and SceneJS.



Hats off to all of you for coming so far so fast.



Theo