Introduction
자주 도움을 받고 있는 Udacity 강의에서 three.js 관련 수업을 찾을수 있었다.
https://classroom.udacity.com/courses/cs291
이 강의내용과 three.js관련 기술 및 사용법에 대해 블로깅하고자한다.
esketit.
Interactive 3D Rendering
Rendering - Depiction, translation.
To render - to create an image.
in 3d, mathematically define objects, materials, lights, and a camera.
interactive - instantly influence what you see on the screen.
in 3d, useres actions affect something in a 3d virtual world. you move the camera to the world, possibly affecting objects and lighting.
Quiz
Which of these can be described as using interactive 3d rendering?
1. computer games, call of duty and world of warcraft,
2. toy story and ice age movies
3. recording a 3d image for medical purposes
4. the mobile phone games angry birds and pacman
Answer: 1.
2. the final product is a linear film that you have no control over.
3. gathering a data is not the same as rendering this data.
4. 2d games.
WebGL Setup
1. Weg Graphics Library
2. Web Browsers
- Chrome, FireFox, Safari
http://get.webgl.org 를 브라우저에서 입력하여 아래에 있는 정육면체가 돌아가고 있으면,
webgl을 해당 컴퓨터에서 사용할수 있다.
Core Ideas
Interactivity: refresh rate, frames per second
Human eye and camera: defining a view frustum as a way to see into a virtual world
Light: Physical and Virtual
Graphics pipeline
Painter's algorithm & Z-Buffer
Interactivity and FPS
At least 6 frames per second(FPS) 속도는 되야 사람이 느끼기에 해당화면이 충분히 빠르다고 느낀다.
FPS and Refresh Rate
Videogames: 30 or 60 FPS
- not a random number
- monitors: 60Hz (refresh rate), gives an upper limit of the frame rate, the number of new images per second
ex) display 10 fps --> 60/10 = 6 repetitions
- films: 24fps. 48 or 72 hz (refresh rate) --> each frame repeatedly projected 2 or 3 times.
ex) film captures motion blur, objects moving will be slightly blurred. this gives a smoother experience and so a lower frame is possible. However, a film is not interactive. A faster frame rate in an application allows a faster reaction time, giving a more immersive feel.
Quiz: Math Refresher
Television refreshes at 50hz. How many milliseconds go by between each frame update?
Answer: 20ms/hz
1s = 1000ms
1000ms / 50 hz = 20 ms/hz
CPU Cycles
20ms
2.8ghz = 2.8*10^9 hz
2.8*10^9 hz * 20 ms = 56,000,000 cycles for the single cpu.
56,000,000 cycles / 1,000,000 pixels on the screen = 56 cycles per pixel per frame
cpu usually takes care of creating and positioning objects in the scene, these objects are then sent to a graphics processor which is particularly tuned to rapidly display them.
The Eye
Light travels through the pupil, through the eyes interior. it makes contact with the retina in the rear which is covered with rods and cones.
rods are for low level lighting such as during night time, and also for peripheral vision and motion detection.
cones provide us with core vision.
Pinhole Camera
With a pinhole camera, you put a piece of photographic film at one end of a box and poke a hole in the other end, then you cover up this hole. do this in the dark so that the film was not exposed to light. you point the camera, open the hole for a short amount of time. go back to the dark room, and develop the film. with the pinhole camera, the light coming in from one is detected by a single location on the flat rectangle of the film. Put these differing light contributions together, and you get a picture.
Quiz: Eye vs. Camera
how is this visual system different (eye) than a camera produces an image on its film or sensors? how does our brain interpret what the eye itself records?
1. Eye's sharpness changed with lenses.
2. bright light can blind us.
3. we can control what our eyes focus on.
4. we see images "correct side up", not upside-down.
Answer: 4
1. brain doesn't do any in this area.
2. same for both camera and eye.
3. muscles not the brain.
View Frustum
A pinhole camera captures an image upside down. In computer graphics we think of a camera a bit differently with the image being formed in front of the viewer. This is a more convenient way to consider the task of image generation.
For starters, now the object projects onto our screen right side up.
Pyramid-shaped view of the world is called the view frustum.
Frustum: a pyramid with its top chopped off.
each light emits photons which bounce around the world and get absorbed otherwise changed.
In a camera we gather photons from the world and these create a photograph. In computer graphics, we simulate the real world as best we can and try to determine how many photons are coming in each direction. Whatever amount of light we gather from a direction, we record at a pixel in the screen.
Screen Door
Our task in 3d computer graphics is to define a world, and then figure out as best we can what light comes from each direction and so forms an image.
3D Scene
the computer renders a 3d scene by determining how much light comes from each direction.
first, we have to define a world. Each object is described by some 3d geometry. it also has some material description that says how light interacts with it. Objects can also be animated over time.
there are also lights in this world. As the view changes, some materials look different as the light reflects off of them at a different angle while others don't change.
finally, a camera is also defined for the scene and interactively changes under the user's control.
To sum up,
Scene
1. Objects: 3d geometry and material
2. Lights
3. Camera
Quiz: How many pixels?
1920 X 1200 pixel sized monitor
I'd like to have a frame rate of 60 fps.
1920 * 1200 * 60 = 138,240,000 pixels.
pixel: picture element.
Light and rendering
There are many number of ways to figure out how much light arrives at each pixel to form an image.
In theory, you could fully simulate the world around you.
Photons start from a light source, hit atoms, and they are reflected, absorbed, and so on.
You put a camera in this scene. and whatever very few photons actually happen to enter the camera's lens would then determine the image. Doing so would take a huge amount computation for even the most modest scene.
A back of the envelop computation for a 40 watt bulb, shows that it emits about 10 to the 19th photons per second.
Quiz: How many computers?
ten 40 watt light bulbs in a room, each produces 10 to the 19th photons per sec.
billlion (10^9) computers in world - each computes 10^6 photons per sec.
How many computers would we need to trace all the photos in a scene in real time and so form an image?
1. we need just one earth's worth.
2. ten earths' worth
3. one hundred thousand earth's worth.
4. ten million earth's worth.
Answer: 3
10 * 10^19 / 10^9 / 10^6 = 10^5 = 100000
Reversing the Process
* start from camera
* sum up direct lighting
* no shadows
it would be very expensive to taack all the photons in a scene. to avoid this level of computation, in computer graphics we make some simplfying assumptions.
1. only those photons that reach the camera are the ones needed to make the image. So these are the only ones we would like to compute. We know which objects we can see, but how do we know in advance which photons will matter?
Each photon is generated by a light source, but we don't know where each ends up. so, we reverse the process. Instead of sending photons from the light, we essentially cast a ray from the eye through each pixel see what's out there.
When a surface is seen at pixel, we then compute the direct effect of each light on that surface. Add up all the light contributions and you have a reasonable proximation of what the surface looks like.
one more approximation can be used for the lights, nothing blocks them. every surface is considered visible to a light unless it faces away from that light source, in other words, no objects casts shadows. This simplification saves us a lot of computation.
Rendering can get even simpler than this. You could do away this lights all together and just draw each object with a solid color. However, drawing the line as lights add considerable realism and perception of 3d to a scene.
History of Teapot
Teapot Model was created by Martin Newell, a computer graphics pioneer. he co-developed an early rendering method called the painter's algorithm and did seminal work in the area of procedural modeling.
The model was inspired by a real live Melitta Teapot, manufactured in 1974. Back then, there weren't many good models to use for rendering, especially for displaying materials. Objects made of cube, cylinder, and spheres and so on, can only take you so far. In 1975, he made a sketch of the silhouette on graph paper.
He described the curves by using what are called "cubic bezier splines". Spline is a fancy word for a type of curve. These spline curves are formed by carefully placing a few points called "control points". A surface is then formed by using spline curves in two different directions to define a patch. To render these patches interactively, we often convert them into grids of triangles. This type of modelling is useful for creating all sorts of curved surfaces, such as car bodies. When Newell created the teapot, he also made some other models to create a whole set. Not half as well known, the tea cup and saucer make up a pretty nice little model.
Four patches defining a bottom were added later by Frank Crow in 1987. Some graphics practitioners consider adding a bottom to be heresy.
One other obvious difference btw the real world and virtual teapots is the vertical scale. Martin Newll shared his teapot data set with other researchers. His original sketch's scale matches the real world teapot, but the computer graphics model evolve to be squatter.
--> teapot simply looked more pleasing when squished.
--> display blinn was working on didn't have square pixels.
There are other famous models - the vw bug, the stanford bunny, the sponza
A Jog down the pipeline
How objects get rendered by a graphics accelerator. This graphics hardware is usually called the gpu. Grpahics processing unit. gpu uses a rendering process called rasterization or scan conversion, which is optimized to use the simplifications.
Application --> Camera & Model transform --> Rasterization
the idea of a pipeline is to treat each object separately. the first step is simply that the application sends objects to the gpu. (objects == 3d triangles, each triangle is defined by the full locations of its tree points.an application converts a cube into just a few triangles.) So, in the first step, the application decides what triangles to send down the pipeline.
in the second stage of pipeline, these triangles are modified by the camera's view of the world along with whatever modelling transform is applied. A modelling transform is a way to modify the location, orientation and even the size of a part.
ex) if you were rendering a bouncing ball, the ball's modeling transform each frame would move the ball to a different location along its path.
After the object is moved to its location for the frame, it is still in view of the camera, inside the view frustum. if not, then we are done with this object, since it won't affect any pixels on the screen. In this case, we say the object is fully clipped. Camera and modelling transforms compute the location of each triangle on the screen.
if the triangle is partially or fully inside the frustum, the three points of the triangle on the screen are then used in a process called rasterization. if a triangle is slightly off the screen, it gets clipped and it's turned into more triangles. this process identifies all the pixels whose centers are inside the triangle. In other words, it fills in the triangle. So rasterization here has found that this triangle covers the pixel centers, in these various places. These locations are then used to show the image of the triangle on the screen.
Pipeline Parallelism
the idea of pipeline is that every object is dealt with once. say we have a list of 52 parts for a car, each part represented by a set of triangles. Each of these parts is sent down the graphics pipeline and is rendered to the screen. Once an object goes through this process, we are done with it for the frame. if we stop the process half way through and looked at the image formed, we'd see only the first 26 car parts in the image. The advantage of a pipeline is that each part of the pipeline can be worked on as a separate task at the same time.
Quiz: Advanced Box Factory
Say, each step takes 5 secs. so, we have 2 cutters, 2 folders, and 2 tapers. The time to take a single box is 30 secs. At what rate do boxes come off this pipeline?
5 secs.
Parallelism
Having one pipeline is effective in giving you extra production. But it can only go so fast.
We can produce even more boxes by buying more factory space and creating more assembly lines.
Gpus are designed to use these techniques of pipelines and parallelism to get extremely fast rendering speeds.
Quiz: Bottleneck
