|
Roaming in 3D World
Apr. 2015 - Jun. 2015
This is my 3rd project from Computer Graphics Course, which shows an interactive and realistic materials and lighting 3D scene.
In this project, the objects are animated jointed objects placed on a patterned ‘floor’ plane that stretches to the horizon, the flying cameras allow users to explore in the 3D scene by the keys and buttons, Phong Shading with different Phong Materials & Lighting models are used to yield smooth-looking, facet-free surfaces with nicely rounded specular highlights, so the scene looks more realistic.
In this project, the objects are animated jointed objects placed on a patterned ‘floor’ plane that stretches to the horizon, the flying cameras allow users to explore in the 3D scene by the keys and buttons, Phong Shading with different Phong Materials & Lighting models are used to yield smooth-looking, facet-free surfaces with nicely rounded specular highlights, so the scene looks more realistic.
|
PLATFORM:
Web MODEL: Phong Shading, Phong Materials& Lighting |
LANGUAGE:
WebGL Javascript HTML |
|
Interface Overview |
ORIGINAL VIEW
|
Design |
DESCRIPTION
This project shows a realistic interactive lighting and materials in a 3D world, the ground plane grid, the blue sky, the ground, the sun, the clouds, the building, and the trees. The 3D scene is implemented by Phong Shading, and the objects and lights are all implemented by Phong Materials & Lighting.
The single-Viewport fills the entire browser window of any shape, displaying the perspective camera view. Users can adjust views smoothly (move forward/back &sideways; pan left/right and tilt up/down). There are five multi-color, different-looking materials 3D shapes (Six materials used: DEFAULT, MATL_SILVER_DULL, MATL_SILVER_SHINY, MATL_RUBY, MATL_GRN_PLASTIC and MATL_GOLD_SHINY), and among them, the building and the two trees are solid, jointed and continually flexing shapes. There are two light sources in the scene, one is attached to the camera, and another is the user-adjustable 3D world light. Users can adjust its position by the buttons below the canvas and adjust RGB values for ambient, diffuse and specular light amounts by the GUI bar.
The single-Viewport fills the entire browser window of any shape, displaying the perspective camera view. Users can adjust views smoothly (move forward/back &sideways; pan left/right and tilt up/down). There are five multi-color, different-looking materials 3D shapes (Six materials used: DEFAULT, MATL_SILVER_DULL, MATL_SILVER_SHINY, MATL_RUBY, MATL_GRN_PLASTIC and MATL_GOLD_SHINY), and among them, the building and the two trees are solid, jointed and continually flexing shapes. There are two light sources in the scene, one is attached to the camera, and another is the user-adjustable 3D world light. Users can adjust its position by the buttons below the canvas and adjust RGB values for ambient, diffuse and specular light amounts by the GUI bar.
INSTRUCTION BAR
EXPLORE RESULTS
PIC 1 | CHANGE AMBIENT RGB VALUE
PIC 3 | CHANGE ALL VALUES OF GUI BAR
PIC 5 | GO NEAR
PIC 7 | CLIMBE
|
PIC 2 | CHANGE DIFFUSE RGB VALUE
PIC 4 | CHANGE THE POSITION OF WORLD'S LIGHT
PIC 6 | GO RIGHT
PIC 8 | TURN LEFT
|
Above are the result pictures. The Picture1-3 shows the result of adjusting RGB values for ambient, diffuse and specular of the world light. The Picture 4 shows the result of adjusting position of world light, and you can see this change by the light spot of the sun. The Picture 5-8 shows the smoothly adjustable 3D View Control. And you can see that because the camera light is attached to the camera, so there is a spot on the sun always in front of you.