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

[Antero Taivalsaari]

See also:

  http://lively.cs.tut.fi/seminars/WebGL2011/

There are presentation slides on various WebGL-related
topics and libraries in the bottom of the page.

-- Antero

> 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
> _______________________________________________
> lively-kernel mailing list
> lively-kernel at hpi.uni-potsdam.de
> http://lists.hpi.uni-potsdam.de/listinfo/lively-kernel
>