How 3D works - for beginners

I hang around in a lot of channels on irc and sometimes i have very interesting conversations there. This time it was on the channel for Three.js. A javascript library to create 3d graphics on html sites. It works even for browsers, which are not support webgl.

But some words now to the conversation i post here. Its not a description how 3d works in this library in special. I try to explain, how 3d works in general on computers.

<TheLifelessOne> Hey, is there any documentation on how Three.js renders in 3D? <TheLifelessOne> I want to learn how it's done, but the source is too messy. :/ <Flyingmana> TheLifelessOne, want to learn how it use webgl for render or do you mean the other renderers? <Flyingmana> or do you want to learn, how to use Three.js <TheLifelessOne> Flyingmana, no, I want to learn how to render 3D on a canvas 2d element. <TheLifelessOne> Without Three.js <TheLifelessOne> and I was wondering if you guys had some sort of guide you knew of or something <Flyingmana> hmm, first, i would not say that Three.js code is messy, it is only very difficult <Flyingmana> and no, i dont think there is a guide for it <TheLifelessOne> :/ <TheLifelessOne> Oh well. <Flyingmana> why you dont want to use three.js for it? <TheLifelessOne> Three.js has absolutely no documentation to speak of, and I don't know enough about 3D to learn from the source. <Flyingmana> TheLifelessOne, but it hase some examples for usage, and if you dont know much about 3D, you want to use something that is already absacting this for you <TheLifelessOne> The examples don't really help all that much, not unless I head to some game development site and stare at C++ examples for hours. <Flyingmana> if you have questions about the examples, you could ask here <TheLifelessOne> I have been, but no one is ever here. :/ <Flyingmana> i see, you have already done some questions here <Flyingmana> TheLifelessOne, how good are you in math? <TheLifelessOne> Not very <Flyingmana> and in geometry? <TheLifelessOne> Same. :/ <TheLifelessOne> but I'm getting better. <Flyingmana> in this case you would need to learn a lot about it <TheLifelessOne> Yep. <Flyingmana> so your main question is, how three.js is able to render 3d images on a 2d area <TheLifelessOne> Yep. <Flyingmana> imaginate you have a sphere in your hand, and you hold it in a horizontal line to your eye <TheLifelessOne> Uh-huh. <Flyingmana> do you see the sphere? <TheLifelessOne> Yep. <Flyingmana> now you have a circle in your other hand, hold it beside the sphere <TheLifelessOne> Okay. <Flyingmana> it should look very similar <TheLifelessOne> Okay. <Flyingmana> the only difference is, that the sphere has a little shadow on it <TheLifelessOne> Okay. <Flyingmana> do you agree, that they look very similar? <TheLifelessOne> Except for the shadow, yeah. <Flyingmana> that is the secret about showing 3d elements on 2d screens, its all about misperception <TheLifelessOne> Alright <Flyingmana> so rendering a sphere would only mean, draw a circle and a shadow on it <TheLifelessOne> Okay. <TheLifelessOne> That makes sense. <Flyingmana> now we have kind of luck, that all in nature is describable in numbers and formulars <TheLifelessOne> Uh-huh <Flyingmana> the formulars for the shapes are very easy, the difficult part comes with the light, which throws the shadows <Flyingmana> because, you could have differend kinds of lightsources, some are only points, some are areas, sometimes you have more than one lightsource with different intensity <Flyingmana> it becomes more difficult, if you have materials which reflect light, like mirrors <TheLifelessOne> Okay <Flyingmana> about one concept for it, you could read about here http://en.wikipedia.org/wiki/Ray_tracing_%28graphics%29 <TheLifelessOne> alright, thansk <TheLifelessOne> thanks* <Flyingmana> http://en.wikipedia.org/wiki/Umbra this is a good information too <Flyingmana> dont have more to tell about it, so do you have any questions? <TheLifelessOne> Flyingmana, sorry, I was afk for a minute there. <Flyingmana> no problem <TheLifelessOne> Thank you for the explaination. I don't think I have any more questions. :D <Flyingmana> hmm, i think i post this talk on my blog the next days, if its ok for you^^ <TheLifelessOne> Sure