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