White Paper for Three.js?

[pnaylor]

Know of anything like that? Trying to learn more about the history, approach, goals, etc. Thanks!

[mrdoob]

Uh, there is no such thing... but I can detail on any of that if you need.

[pnaylor]

Thanks Ricardo! I think the approach and goals are most significant to my research.

What were you hoping to achieve with Three.js that was not available when you were developing it, was WebGL the original target? What do you think still distinguishes it from the other libraries for WebGL, especially in terms of features and usability? Do you have a sort of target audience or primary design goals that guide your development for the library?

Thank you, would really appreciate your input! (= Take care.

[mrdoob]

What were you hoping to achieve with Three.js that was not available when you were developing it, was WebGL the original target?

There were many goals, I think it's best if I explain the whole history. It's a bit of a blur in my mind but I'll do my best.

Back in 2002, on my free time I would team up with (C/DirectX) 3D programmers and we would create demos for competing at so called demoparties. Back then I was convinced that I was not smart enough for doing programming so I mostly did the graphics, 3d modelling, camera work and editing. The programmer would setup a scripting system or even a editor for me to work with but after a bunch of productions I started to be unhappy with the results. It was obvious that the layering was affecting the process and the demos felt too static. So slowly I started to be interested on learning graphics programming so I could explore what could I do manipulating the 3d engine code.

At that time, even if I was convinced I could not do programming I found myself doing bits and pieces using ActionScript. Fast forward to 2006 and I had a (buggy) spinning wireframed torus knot in ActionScript 2. Months later Papervision3D got released and I saw that it was pretty much what I was creating so I started experimenting with it instead.

About 2 years later, in 2008 I started to feel again that, because I didn't have the core code under control, I couldn't get the best of the system. So I decided to go back and continue my own library applying the good stuff from Papervision3D and also a few structure improvements I came up with while working with it.

Then Google Chrome happened and raised the bar of JavaScript performance. I did some experiments for it pretty early on and I loved the fact that you were ready to go even with a simple text editor. Until then I needed FDT and FlexSDK for compiling.

Being a Linux user, I saw this as an opportunity of removing the dependency that all the web developers have with Windows, MacOS and Adobe and started to spend my time on improving HTML5 development experience. All what was needed was just a bunch of libraries anyway.

So in 2010 I released the first version of three.js (previously three.as) with DOM, SVG and Canvas renderers. For instance, this was one of the structure changes I wanted to try. Most of the 3D libraries tends to have the renderer as part of the core, but I wanted to make it easy to have any renderers in case any new way of rendering appeared.

Thanks to that decision WebGL was fairly easy to implement months later :)

So, in short, I just wanted a 3d library that suited my needs and later on I realised that it could be beneficial for more people than not just me.

What do you think still distinguishes it from the other libraries for WebGL, especially in terms of features and usability?

I don't know. I haven't tried the other libraries :S

Do you have a sort of target audience or primary design goals that guide your development for the library?

The goal is basically making the life of developers easier and, at the same time, doing better use of the user system.

[DrStrangeLove]

When you decided to learn graphics programming, what literature/other resources did you use to grasp graphics programming ??

[mrdoob]

When you decided to learn graphics programming, what literature/other resources did you use to grasp graphics programming ??

Nothing in particular... For 2D graphics I learned a lot by trying to reproduce all these effects in ActionScript/JavaScript. For 3D graphics, I didn't understand what I was doing but I kept doing it until I understood. I've also learned a lot after open sourcing the library and with all these great people fixing my mistakes.

[ghost]

Interesting. But from the perceptive of a person who is just about to start learning web gl via three.js are there any major limitations that would make learning openGL a priority before delving into a library such as three first?

[mrdoob]

Interesting. But from the perceptive of a person who is just about to start learning web gl via three.js are there any major limitations that would make learning openGL a priority before delving into a library such as three first?

The aim is to be renderer agnostic. But right now there is some stuff that you'll learn along the way that is specific to WebGL.

[pnaylor]

Thanks very much for sharing! (= May have more questions soon, hope you wouldn't mind.

[molotovbliss]

@mrdoob Cool to see Demoscene roots, you and iQ ( Iñigo Quílez - http://www.iquilezles.org/ ) are inspirational, keep it up!

[mrdoob]

Thanks very much for sharing! (= May have more questions soon, hope you wouldn't mind.

My pleasure.

However, do bear in mind that this is not just a one man thing. There's more people contributing to the project.

I think you should also figure out the goals of big contributors like @alteredq, @zz85, @gero3, @WestLangley, @jeromeetienne, @ekitson, @AddictArts, ... in order to get the bigger picture.

[mrdoob]

@mrdoob Cool to see Demoscene roots, you and iQ ( Iñigo Quílez - http://www.iquilezles.org/ ) are inspirational, keep it up!

I know him well. We used to compete with each other in demoparties in Spain ;)

[zz85]

I'm probably an example of someone who got into 3d programming with three.js, and got to learn much more by contributing and trying to understand its internals. So if anyone's like me with no prior 3d knowledge, you could be like me, to dive into 3d programming with three.js, or not follow my footsteps because it might also turn out to be a huge time sink into a large mysterious world of possibilities with 3d graphics (rabbit holes as @alteredq refers to). Compared to many others who have years of graphics experience, can't really say i'm a great contributor (other than contributing great chunk of bad code ;)

some of my history:

i probably first saw about three.as on @mrdoob blog back then when he still had really cool flash experiments (and then decided to take them of one day for html5 experiments ;) didn't really to occur to me much because i wasn't coding 3d yet, although those days, i would sometimes just look at those pv3d, away3d stuff and say "wow" without having an idea how to do such things at all.

it probably started when firefox 4 shipped with webgl by default around march 2011, and I was interested with what this new "feature" could do. Its probably didn't take too long to rediscover the three.js project, and I was blown away by the examples - reflective cars, bubbles in the air, all running at 60fps in my 11" macbook air. for a short time i must have been an advocate for my macbook air, firefox and three.js showing off these fanciful experiments to my friends.

then i had this idea that probably one could be able to create a 3d "video" or animation all right out of the browser, and decided to pick up three.js one day. being really noob at the start, there were many graphics concepts and stuff in three.js that were difficult for me to understand at the start, but thankfully there were people on irc, along with @alteredq and @mrdoob and others to guide me along. (i was particularly asking alteredq lots of questions that i wonder whether he got annoyed at me :)

i remembered one of @mrdoob early 3d experiments with flash, and wanted to duplicate that in three.js. unfortunately, i wasn't as flexible or smart to have exported the models from a 3d software, and instead had that stubborn view of like, "why can't that be done in the browser?" . with that simplistic thinking of "erm.. should not be very difficult, just get the shapes of a text and extrude it into some 3d stuff", turns out into me having to learn and deal with many aspects of graphics - geometries, vector curves, shapes, triangulation etc. with that, TextGeometry became my first contribution and spun off more contributions to three.js. sometimes i wished that someone else have done all these, but i'm also glad that i was able to do those and learn many things along the way.

my contribution goal for three.js are simple:

i hope i do not have to contribute to three.js anymore ^^

Not that i do not wish to give back to three.js from which I gained a lot from, but rather i hope to see that day when most things can be done easily with three.js that i need not worry about the library core but spend more time thinking about and doing experiments, demos, applications or really just interesting and useful stuff with the library rather than in the library, which in turn might return something more, for the library =)

ps. so i covered history and goals for the original question by @pnaylor. for approaches, i think one can learn more reading the commit logs and maybe some of my blog posts for the stuff i did

pps. still trying to work on / thinking of how to make tools for animations with three.js even though there are already a couple of cool alternatives out there..

[pnaylor]

Good point doob, and thanks for sharing zz!! (=

[mrdoob]

i hope i do not have to contribute to three.js anymore ^^

Haha, I understand that goal very well ;)

[alteredq]

(i was particularly asking alteredq lots of questions that i wonder whether he got annoyed at me :)

It was a welcome change from the usual type of question we get here ;)

i hope i do not have to contribute to three.js anymore ^^

Haha, I understand that goal very well ;)

The same here, it was supposed to be the means not the end ;)

About my goals: I just wanted to get WebGL capabilities of the lib to proper shape. At that time, WebGLRenderer was kinda orphaned, it was actually less capable than CanvasRenderer or even SVGRenderer. I felt there was a hole that needed to get filled.

I was already doing some WebGL experiments on my own so I felt I could contribute something. I had this:

http://alteredqualia.com/glearth/

And I wanted to get here:

http://mrdoob.github.com/three.js/examples/misc_camera_fly.html

Finally it took much much longer than expected, to be able to reproduce in a nice reusable way what was easy to do in single-shot demos, but in the process I learned a lot and then I just kept going, I was already hooked ;).

BTW I think interesting point in the history of the lib was when Adobe started to tease with this:

http://www.youtube.com/watch?v=tgwi0lWgX8w

And we found out both @mrdoob and me wanted to try if we could create something similar. This was driving a lot of tech progress in the lib, both on rendering and asset pipeline front and ultimately lead to this:

http://alteredqualia.com/three/examples/materials_cars.html

Also at that point of the time I was becoming tired of doing things alone and @mrdoob looked like a nice guy to work with ;) I remember seeing his Assembly presentation and finding myself nodding in agreement with what he was saying.

By now, I think the biggest motivation is probably the simple joy of creation. I'm still amazed how you can create something out of nothing. You write some lines of code and new world pops up on your screen. Magic. And the more you learn better things you can create (and there is always something new to learn).

[mrdoob]

BTW I think interesting point in the history of the lib was when Adobe started to tease with this:

http://www.youtube.com/watch?v=tgwi0lWgX8w

And we found out both @mrdoob and me wanted to try if we could create something similar. This was driving a lot of tech progress in the lib, both on rendering and asset pipeline front and ultimately lead to this:

http://alteredqualia.com/three/examples/materials_cars.html

Haha, I forgot about that little challenge. Too bad Adobe stopped the teasing strategy :P

[alteredq]

Haha, I forgot about that little challenge. Too bad Adobe stopped the teasing strategy :P

Yup, it was interesting later on when, for a change, they started to copy us :)

http://mrdoob.github.com/three.js/examples/webgl_materials_normalmap2.html

http://www.youtube.com/watch?v=SafDPSw6G1o

[pnaylor]

Do you guys believe Three.js is the most capable WebGL library at this point? Would love to hear any thoughts on contrast or comparison with other libs like Processing.js or PhiloGL, as a wider context.

Thanks for sharing guys! It is nice to have a better sense of the roots of the project.

Cheers (=

[mrdoob]

It's really up to what you need... Every library is good for different things.

[pnaylor]

Sure. How would you try to describe what Three.js is best at?

[mrdoob]

Trying to do it so it's easy get things done with.

[theo-armour]

@Everybody

Thank you all! (But don't stop) Now there is enough material to start to build the history section of the Three.js Wikipedia entry. In particular material from at least three team members was going to be my starting point - and I thought I was going to have to come over and pull teeth to get it. But you'a all made it so easy.

Here is a question: Should I use your screen names or your meat world names? I have had a brief look at other Wikipedia entries and it seems as if they prefer meat world names. So my thought is to introduce you using a format like: John Smith ("porkPie") . Is this OK? Or would there be a better way?

[mrdoob]

So my thought is to introduce you using a format like: John Smith ("porkPie") . Is this OK?

Fine with me :)

[theo-armour]

Question: Are there routes or directions where any of you feel that that Three.js should not go? Instead of the "To Do" list can you think of a "Not Do" List?

Or, perhaps, are there things that might be really nice to do but which if you started them would mean that zz85, for example, would have to contribute to three.js forever more?

[mrdoob]

Instead of the "To Do" list can you think of a "Not Do" List?

I don't think I can. I only know what not to do when I see something that doesn't make sense. But I seem unable to imagine any example.

[pnaylor]

Hehe, that's understandable considering the spontaneous nature of the project. Thanks again guys. (= Take care.

[Knormal]

I have been fascinated by data/information visualization. When I saw the original HTML5 demos showing what can be achieved, I was convinced this could be leveraged for healthcare, which is where my interests lie. Only since a few days I have started a more intensive exploration, so that I can learn what tools are available. Inevitably, I stumbled upon three.js and I plan on plowing through as much as I can to learn. I do hope for more documentation and tutorials. It doesn't help that I am a total novice when it comes to JavaScript and coming from the Java world, find its paradigms quite confusing.

The main purpose of my comment though is to express my thanks to you guys for this remarkable piece of effort. I am very much impressed by the spirit and the camaraderie that exists here. Thanks, @mrdoob!

[ghost]

Thank you for all the information. I'm currently finishing my research on WebGL for practical, functional and commercial uses, and all this information is very interesting to read. I came to the conclusion that it is a bit early for small companies to dive into WebGL, since Three.js (and other frameworks and tools) isn't fully developed yet (especially the Collada / Maya integration). I expect WebGL to make a huge burst in popularity when it becomes available on mobile phones (Android, iOS and Windows Phone).

Keep up the good work, I think Three.js is a great platform that is very satisfying to use!

[jasongrout]

This was really interesting to read. I've wondered about the history of three.js and the main contributors. @WestLangley - I see you a lot on github making great comments and reviewing code - would you mind adding something about your history with the project?

[mrdoob]

@WestLangley - I see you a lot on github making great comments and reviewing code - would you mind adding something about your history with the project?

I would love to read that too 😄

[AddictArts]

I think you should also figure out the goals of big contributors like @alteredq, @zz85, @gero3, @WestLangley, @jeromeetienne, @ekitson, @AddictArts, ... in order to get the bigger picture.

Recent activity brought this issue to my attention, so I thought I would answer the 2 plus years old goals question.

I worked with @ekitson on a project that used three.js that had been using Google's O3D plugin (plus js) and then O3D-webgl, both are history now. When porting to three.js we discovered lack of support for COLLADA animations and spent most of our pull requests on that. We also fixed some bugs along the way in the THREE.ColladaLoader and a couple other areas. I think we ran into one or more in the THREE.Matrix4, but my memory might be wrong. Should look at the old pull requests, but they are gone it appears. It served us well, but the project ended a several years back, and the Google code project page is no more, or will be shortly.

I continue to use three.js here and there, but don't find bugs as easy anymore, so no need for a pull request. ;-) Thanks for asking and I appreciate the mention.

[firsturdiev]

I have a question which some kind of weird 😃. Why did you spend time to create a JavaScript library instead of start startups worths billions of dollars like Figma ($20B). I think you had more than enough knowledge for creating startups like Figma. You didn't interest to money or someting else?