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
--
Gregory Ray
Co-founder, Seek Mobile Interactive, Inc.
---
This e-mail message, including any attachments, is for the sole use of
the intended recipient(s) and may contain information that is
confidential and protected by law from unauthorized disclosure. Any
unauthorized review, use, disclosure or distribution is prohibited. If
you are not the intended recipient, please contact the sender by reply
e-mail and destroy all copies of the original message.
Giles
Yes, learning WebGL was a battle.
I think I can equate with my efforts in learning assembly language.
Painful, ultimately futile, though quite necessary if one is to be actively engaged in the conversation.
But the battle, ultimately, was between me and WebGL
You only provided the battlefield and like so many battlefields – plateaus populated by posies and poppies – your lessons were packed with pretty procedures prickling with perilous potential.
How were we to know that a simple “gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, rttFr” would cause the brain bits to fall out on to the ground?
But now the battle is over.
It is the time of forgiving.
So it with a fond laptopScreenVertexTextureCoordBuffer.itemSize that I bid you farewell…
Theo
Check this out:
https://github.com/mrdoob/three.js/graphs/traffic
https://github.com/mrdoob/three.js/graphs/punch_card
https://github.com/mrdoob/three.js/graphs/impact
Here is a comparison of three.js, scenejs and glge. Looks like Lindsay has spent a lot of time on his project!
https://www.ohloh.net/p/compare?project_0=three.js&project_1=scenejs&project_2=GLGE
Don't know what kind of metric it's using for putting a monetary value
on the codebase!
Maybe it's Lines of Source, taking into account all the hypothetical
meetings by the water cooler, christmas parties etc.
> ohloh doesn't know that the activity on SceneJS in the last couple of months
> is all on the v0.8 branch however.
>
> Lindsay, maybe you should move the master branch to a 0.7.9 branch and move
> what is actually master (the v0.8 branch) to master;-)
Too right, that's a good idea - I'll do that this weekend.
Having another go at a release this weekend. Might just call it a
release then patch any remaining issues from there. Just have to clean
up the examples and wiki, type some release notes, but should be good
one I think.
cheers,
Lindsay