Graphics Town

Introduction

This is a web application built with Three.js. It is a project from the course CS559: Computer Graphics at UW-Madison. This is an individual project with no detailed requirements. Everyone demonstrates their own artistic and programmatical skills and abilities in this project.

Project Details

3D Object List

1. Pool-1*: A big pool with textured water using customized shaders and textured walls.

2. Bridge-1*: A bridge with customized drawing using shaders that alternates its colors.

3. BlueHouse-1*: A textured blue house using geometries written from scratch.

4. Church-1*: A textured church using geometries written from scratch.

5. Castle-1*: A textured castle using geometries written from scratch.

6. Truck-1*: A textured Amazon Prime truck that stops at buildings in the residential area.

7. Car-1*: A textured Mercedes Benz car that runs around the town.

8. Carousel-1*: A colorful carousel ride with rotating horses.

9. Earth-1*: A textured earth with normal/bump mapping that rotates

10. Globe-1*: A globe that reflects its surroundings above the pool in the town.

11. Helicopter-1*: A helicopter that circles around in the sky of the town.

12. Road-1*: The road structure of the entire town.

13. RoundaboutBall-1*: A rotating roundabout that has a ball that moves up and down and changes its color according to the color of its collision plane.

14. Seesaw-1*: A seesaw that goes back and forth with moving objects on each side.

15. Tower-1*: A tower ride with rotating poles that are attached to swinging horizontal pads.

16. Tree-Cartoon-1*: A caroon tree with animated leaves, used in the amusement park area.

17. Tree-Realistic-1*: A realistic tree with textured leaves, used in the residential area.

18. ParkGate-1*: The textured front gate of the amusement park.

19. Fence-1*: The fence structures that are used around the amusement park.

Some Basic Behaviors

1. Car-1*: The red car goes around the town.

2. Helicopter-1*: The helicopter rotating propellers flies over the town.

3. Tower-1*: The tower ride has rotating poles that are attached with swinging horizontal pads.

4. Truck-1*: The Amazon Prime truck goes around the town and stops at some buildings for a random amount of time in the residential area.

5. Carousel-1*: The colorful carousel ride has rotating horses that bounce up and down.

6. Seesaw-1*: The seesaw has a horizontal bar that goes back and forth with moving objects on each side.

7. Bridge-1*: The bridge has alternating colors.

8. Tree-Cartoon-1*: The cartoon trees have animated leaves.

9. RoundaboutBall-1*: The rotating roundabout has a ball that moves up and down and changes its color according to the color of its collision plane.

Some Advanced Behaviors

1. Bridge-1* (Animated Shader Effect): The bridge is built using customized drawing with shaders and it alternates its colors.

2. Truck-1* (Complex Behavior): The Amazon Prime truck goes around the town and turns properly at the intersections (big circle concrete). The truck stops at some buildings for a random amount of time in the residential area.

3. Pool-1* (Curved Surface): The big pool has curved surface using customized shaders and textured walls.

4. Globe-1* (Dynamic Environment Map): The globe reflects its surroundings above the pool in the town.

Texture Attributions

1. BlueHouse-1*:

   1. Body texture (building2.jpg): https://www.pinterest.com/pin/535646949415150665/

   2. Roof texture (blue_tiles.jpg): https://www.dreamstime.com/texture-blue-house-roof-texture-blue-house-roof-image174230093

2. Church-1*:

   1. Body texture (building1.jpg): https://www.energy.gov/energysaver/doors

   2. Roof texture (roof_tiles.jpg): https://www.textures.com/browse/wood/2133

3. Castle-1*:

   1. Castle body texture (castle.png): https://www.dreamstime.com/photos-images/castle-door.html

   2. Castle roof texture (castle_top.jpg): https://libreshot.com/old-roof-window/

   3. Pillar body texture (pillar.jpg): https://www.wildtextures.com/category/free-textures/stone/

   4. Pillar top texture (pillar_top.png): https://motionarray.com/stock-photos/irregular-stone-texture-910664/

4. Truck-1*:

   1. Amazon license plate texture (amazon.jpg): https://www.freepnglogos.com/pics/amazon-png-logo-vector

   2. Window texture (car_window.jpg): https://www.dreamstime.com/fog-car-window-glass-texture-background-image132822015

   3. Amazon Prime logo texture (prime.png): https://www.flickr.com/photos/160866001@N07/50597570511

5. Car-1*:

   1. Benz logo texture (benz.png): https://logosarchive.com/mercedes-benz/

   2. Window texture (car_window.jpg): https://www.dreamstime.com/fog-car-window-glass-texture-background-image132822015

   3. Body texture (redcar.jpg): https://tr.pinterest.com/pin/628674429222816370/

6. Earth-1*:

   1. Earth texture (earth.jpg): https://www.flickr.com/photos/42084302@N05/3884071286/in/photostream/

7. Pool-1*:

   1. Water texture (water.jpg): https://www.flickr.com/photos/41246865@N04/4877078316/

   2. Round wall texture (brick.jpg): https://www.flickr.com/photos/coun2rparts/3508864763/in/photolist-6m4Rfk-9sMJeh-5A6jji-attjHR-7LCYQL-atvZcS-atthvg-atvUEd-atw2eG-FeEGuT-atvVUj-dmNZAU-FkPcRw-zxo9Le-nHKPBW-9sJK1D-atvXeq-attoVp-7TgSPm-7TdDpc-97nYto-ciQ2Eo-ymgiym-ciQ3n3-yDCqEx-EqHfNR-ymgjJh-ymhmEN-EVvFm5-yCT3xX-xFRwgf-Fo5gBe-ymhoPN-ohzAhj-zmuiDn-Ar4NW4-oEtLqk-8FmWCn-9newMS-dyxotb-7TdFyr-93bnjY-9bikgt-918vHa-jrYqc-z4TUEU-TCqz8o-ejvH3m-ymgeys-TCqxzJ

8. Tree-Realistic-1*:

   1. Trunk texture (trunk.jpg): https://www.textures.com/category/tree-bark/544

   2. Leaves texture (leaves.png): https://www.istockphoto.com/illustrations/leaf-texture

9. ParkGate-1*:

   1. 3D object and its textures: https://free3d.com/3d-model/driveway-gate-old-80884.html

10. Fence-1*:

    1. 3D object: https://sketchfab.com/3d-models/basic-fence-c5229ed4813c4d1396406805e8756166

Picture Demo

Video Demo